Implement iOS "Cancel" button #5376
Conversation
Jon-edge
force-pushed
the
jon/ios-text-input-cancel
branch
5 times, most recently
from
e988822 to
1bcff4b
Compare
Jon-edge
force-pushed
the
jon/ios-text-input-cancel
branch
from
181f90a to
fbb4356
Compare
Jon-edge
force-pushed
the
jon/ios-text-input-cancel
branch
from
fbb4356 to
5f06ba6
Compare
|
Seems we need to wrap another container around the component since originally it had the default flex properties on the outermost container, while the new container needs different flex properties. |
Why does the outer-most container view need |
Jon-edge
force-pushed
the
jon/ios-text-input-cancel
branch
2 times, most recently
from
4b38a59 to
6f58008
Compare
| padding: theme.rem(1), | ||
| margin: -theme.rem(1) | ||
| })) | ||
|
|
||
| const CancelButton = styled(Animated.View)<{ |
There was a problem hiding this comment.
Replace Animated.View for View.
| } | ||
| }) | ||
|
|
||
| const CancelText = styled(Animated.Text)(theme => { |
There was a problem hiding this comment.
Replace Animated.View for View.
| textAlign: 'center', | ||
| whiteSpace: 'nowrap', | ||
| minWidth: theme.rem(4), | ||
| flexShrink: 0 |
There was a problem hiding this comment.
Remove minWidth in favor of margins.
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| marginLeft: theme.rem(0.5), | ||
| opacity: isFocused ? 1 : 0, |
There was a problem hiding this comment.
Use same margins on each side instead of a minWidth on the text:
marginHorizontal: theme.rem(0.5),
|
|
Jon-edge
force-pushed
the
jon/ios-text-input-cancel
branch
from
6f58008 to
c6107e7
Compare
|
|
Jon-edge
force-pushed
the
jon/ios-text-input-cancel
branch
from
c6107e7 to
352c9cb
Compare
Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-11-28.at.17.04.37.mp4
CHANGELOG
Does this branch warrant an entry to the CHANGELOG?
Dependencies
noneRequirements
If you have made any visual changes to the GUI. Make sure you have: