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
| @@ -172,7 +173,7 @@ export const SimpleTextInput = React.forwardRef<SimpleTextInputRef, SimpleTextIn | |||
| if (onSubmitEditing != null) onSubmitEditing() | |||
| }) | |||
|
|
|||
| const backIconSize = useDerivedValue(() => interpolate(focusAnimation.value, [0, 1], [0, themeRem])) | |||
| const backIconSize = useDerivedValue(() => (Platform.OS === 'ios' ? 0 : interpolate(focusAnimation.value, [0, 1], [0, themeRem]))) | |||
There was a problem hiding this comment.
create an isIos var so we don't send Platform over the bridge
| marginLeft: theme.rem(0.5), | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| height: theme.rem(3.5) |
There was a problem hiding this comment.
Remove this height so the input doesn't get fat.
| useAnimatedStyle(() => { | ||
| 'worklet' | ||
| return { | ||
| width: interpolate(focusAnimation.value, [0, 1], [0, width]), |
There was a problem hiding this comment.
We shouldn't animate layout props because of performance issue. We want to use transform instead to make our animations smooth. If you can't figure out how we can animate this component in a performant way, then we should just not animate the cancel button.
| </InputContainerView> | ||
| {Platform.OS === 'ios' && ( | ||
| <CancelButton focusAnimation={focusAnimation}> | ||
| <TouchContainer hitSlop={theme.rem(0.75)} accessible onPress={handleDonePress} testID={`${testID}.cancelButton`}> |
There was a problem hiding this comment.
Touch component within a touch component? That doesn't seem right. Move this to be a child of ContainerView.
| flex: 1 | ||
| }) | ||
|
|
||
| const OuterInputContainerView = styled(View)({ |
There was a problem hiding this comment.
Delete OuterInputContainerView because it's not needed. We have ContainerView already.
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. |
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: