Switch to native-stack #3168
Switch to native-stack #3168
Conversation
| <View | ||
| sx={{ | ||
| height: '100%', | ||
| justifyContent: 'center', | ||
| alignItems: 'center' | ||
| }}> |
There was a problem hiding this comment.
this was necessary to add to fill the header height for the navigation button + centering
| createNativeStackNavigator, | ||
| NativeStackNavigationEventMap, | ||
| NativeStackNavigationOptions | ||
| } from '@react-navigation/native-stack' |
There was a problem hiding this comment.
replaced /stack with /native-stack
| } | ||
|
|
||
| // Modals | ||
| export const modalScreensOptions: NativeStackNavigationOptions = { |
There was a problem hiding this comment.
Android defaults to formSheet while iOS to pageSheet.
Same applies to the secondary modal on top
| const isPressDisabledRef = useRef(false) | ||
|
|
||
| const handlePress = useCallback(() => { | ||
| // Prevent multiple presses | ||
| if (isPressDisabledRef.current) return | ||
|
|
||
| // Disable further presses | ||
| isPressDisabledRef.current = true | ||
|
|
||
| onPress() | ||
|
|
||
| // Re-enable after 300ms | ||
| setTimeout(() => { | ||
| isPressDisabledRef.current = false | ||
| }, 300) | ||
| }, [onPress]) | ||
|
|
There was a problem hiding this comment.
prevent multiple presses on token details which would of opened the token details two/three times
| <GlobalToast /> | ||
| <GlobalAlertWithTextInput /> | ||
| </K2AlpineThemeProvider> | ||
| <GestureHandlerRootView> |
There was a problem hiding this comment.
GestureHandlerRootView is now required
| // prevent the header from jumping when navigating | ||
| ...(Platform.OS === 'ios' && { headerStatusBarHeight: 0 }) | ||
| contentStyle: { | ||
| // iOS will display empty content without this |
There was a problem hiding this comment.
iOS needs contentHeight 100% for formSheet otherwise the screen is white
bogdandobritoiu
requested review from
neven-s,
atn4z7,
ruijialin-avalabs,
onghwan and
B0Y3R-AVA
as code owners
| const animatedContainerStyle = useAnimatedStyle(() => { | ||
| let bottomOffset = keyboard.isVisible ? keyboard.height - insets.bottom : 0 | ||
|
|
||
| if (hasTabBar) { | ||
| if (keyboard.isVisible) { | ||
| bottomOffset = | ||
| keyboard.height - (Platform.OS === 'ios' ? 0 : tabBarHeight) | ||
| } else { | ||
| bottomOffset = Platform.OS === 'ios' ? tabBarHeight : 0 | ||
| } | ||
| } | ||
|
|
||
| return { | ||
| // TODO: Couldn't make Android work with keyboard avoidance, so we need to add a bottom offset | ||
| // iOS works with automaticallyAdjustKeyboardInsets but we do keep the same thing here for consistency | ||
| paddingBottom: withTiming(bottomOffset, { | ||
| ...ANIMATED.TIMING_CONFIG, | ||
| duration: 50 | ||
| }) | ||
| } | ||
| }) |
There was a problem hiding this comment.
had issues with Keyboard avoiding list contents after switching from /stack which handled this differently.
I simplified code since this was now broken
| <TouchableOpacity | ||
| // onPress doesn't work for Android when using svgs (only on production) | ||
| onPressOut={onPress} |
There was a problem hiding this comment.
SVG content for headerLeft/headerRight doesn't work when using onPress for Android on production, so onPressOut works as expected and has better UX
| export const secondaryModalScreensOptions: NativeStackNavigationOptions = { | ||
| ...modalScreensOptions, | ||
| sheetAllowedDetents: [Platform.OS === 'android' ? 0.92 : 0.99] |
There was a problem hiding this comment.
we use this only for approval or select token/network modal
| const trimmedUrl = trimTrailingSlash(historyPayload.url) | ||
| const historyId = createHash(trimmedUrl) | ||
| const history = { | ||
| id: historyId, | ||
| lastVisited, | ||
| ...historyPayload | ||
| ...historyPayload, | ||
| url: trimmedUrl |
There was a problem hiding this comment.
this was breaking with new redux bumped version from main
| <View | ||
| style={{ | ||
| position: 'absolute', | ||
| bottom: 0, | ||
| left: 0, | ||
| right: 0 | ||
| }} | ||
| onLayout={handleSegmentedControlLayout}> |
There was a problem hiding this comment.
all SegmentedControls have a wrapper with absolute positioning because tabbar is positioned absolute
| useEffect(() => { | ||
| const navigationOptions: NativeStackNavigationOptions = { | ||
| headerTitle: renderPageControl | ||
| } | ||
| navigation.getParent()?.setOptions(navigationOptions) | ||
| }, [navigation, renderPageControl]) | ||
|
|
There was a problem hiding this comment.
iOs works, couldn't make PageControl show up on Android though. Confirmed with design, not a big deal
Description
Main ticket
Ticket: CP-11496 (Overall native-stack switch)
Also fixes
Ticket: CP-11921 (Bottom tab nav switch to JS from native tabbar)
Ticket: CP-11920 (Toast position)
Summary of changes
screenOptionsfor all _layoutsRemaining Issues
##Screenshots/Videos
iOS
https://github.com/user-attachments/assets/135ab59c-cc04-4aa5-829c-5f2512776076
Android
https://github.com/user-attachments/assets/fce1528a-55e1-478e-8833-40b89cb0f844
Testing
Dev Testing Steps
Please include steps for testing happy path of your feature, and be sure to move this ticket into the "Dev Testing" column
Navigation
Toasts (iOS)
Checklist
Please check all that apply (if applicable)