Experiment/upgrade react native 66 (#3509)
* Commit upgrade paths * Checkpoint: iOS can build * Reintroduce viewpager library with patch (deprecated) * Upgrade keyboard aware library to support new RN * Stabilize Android (WIP) need to patch react-native * Remove setting NDK. Android auto sets it based on gradle * Update build gradle + Add postinstall for react-native-codegen * Add comment for postinstall (react-native-codegen) * Remove workspace settings * Upgrade gradle versions. Fix viewpager patch. Revert to support pre-upgrade min sdk versions * Fix unit tests * update rn codegen postinstall script * Fix react-native-scrollable-tab-view with patch * Update README.md ndk section * update rn codegen postinstall script * Update pod file lock * update allow-scripts * update yarn.lock * Remove --strip-components=2 * Update ndk version to 21e * Upgrade Detox + ignore warnings * Enable Hermes. Reconfigure Flipper. * Update pods * Remove entitlements from copy resources step * Polyfill Intl for iOS for Hermes * Remove nvm related code in build phase * Remove duplicate node from homebrew * Remove engine version dependencies. Allow bitrise to use any node * Reintroduce engines in package.json * Try to unset PREFIX * Reintroduce nvm compatibility in build phase * Patch react-native-payments * Expose removeListener warnings * Patch react-native-modal removeListner * Update build number * Fix virtualization error on send flow * Update build number to 3.8.2 * Ignore EventEmitter.removeListener * Update build version for bitrise * fixing broken e2e tests * Replace drawer. Update reanimated + webview libraries. Begin fixing browser functionality. * Hook up reanimated 2 on Android * Remove traces of react navigation drawer. Refactor tutorial. * Fix display account name on drawer. * Fix patches -> fixes Android back button behavior * Update build version * Update build version to fix bitrise * Re run unit tests * Update readme with Flipper instructions * Remove requestAnimationFramea and InteractionManager that causes iOS to crash when switching networks * Update EasingNode * Hide tab bar * Fix browser deep link * Upgrade web3 in controllers to fix app hang up. * Remove isZero undefined from controllers * Handle initial and subsequent deeplinks to browser * Fix svg length undefined issue * Update build number * Fix BN function calls + patch swaps controller * Update build number * Disable Hermes for iOS. * Disable hermes for Android * Update build number * unset PREFIX on all bitrise steps * dimissing keyboard in wallet spec * addressbook,wallet,request payment fix. * update snapshots * Remove intl polyfill Co-authored-by: Ricky Miller <ricky.miller@gmail.com> Co-authored-by: Curtis <Curtis.David7@gmail.com>pull/3481/head^2
Cal Leung
1 year ago
committed by
GitHub
parent
d9757b7e16
commit
1f03de0769
91 changed files with 5099 additions and 3078 deletions
@ -1,3 +1,3 @@ |
||||
*.pbxproj -text |
||||
# specific for windows script files |
||||
# Windows files should use crlf line endings |
||||
# https://help.github.com/articles/dealing-with-line-endings/ |
||||
*.bat text eol=crlf |
||||
|
||||
@ -0,0 +1,7 @@ |
||||
/* eslint-disable import/prefer-default-export */ |
||||
import { SET_CURRENT_ROUTE } from '../../reducers/navigation'; |
||||
|
||||
/** |
||||
* Action Creators |
||||
*/ |
||||
export const setCurrentRoute = (route: string) => ({ type: SET_CURRENT_ROUTE, payload: { route } }); |
||||
@ -0,0 +1,214 @@ |
||||
/* eslint-disable import/no-extraneous-dependencies, react/display-name, react/display-name, react-hooks/exhaustive-deps, arrow-body-style, react/prop-types */ |
||||
import React, { ReactNode, forwardRef, useImperativeHandle, useMemo, useCallback } from 'react'; |
||||
import { View, TouchableOpacity, StyleSheet, ViewStyle, Dimensions, StyleProp } from 'react-native'; |
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context'; |
||||
import { PanGestureHandler, State } from 'react-native-gesture-handler'; |
||||
import Animated, { |
||||
eq, |
||||
EasingNode, |
||||
not, |
||||
block, |
||||
cond, |
||||
clockRunning, |
||||
Value, |
||||
interpolateNode, |
||||
useCode, |
||||
set, |
||||
Extrapolate, |
||||
} from 'react-native-reanimated'; |
||||
import { onGestureEvent, withSpring, clamp, timing } from 'react-native-redash'; |
||||
import { colors } from '../../../styles/common'; |
||||
import { useNavigation } from '@react-navigation/native'; |
||||
const screenWidth = Dimensions.get('window').width; |
||||
import DrawerView from '../DrawerView'; |
||||
import styles from './styles'; |
||||
|
||||
interface DrawerRef { |
||||
dismissDrawer: () => void; |
||||
showDrawer: () => void; |
||||
} |
||||
|
||||
interface Props { |
||||
style?: StyleProp<ViewStyle>; |
||||
children?: ReactNode; |
||||
} |
||||
|
||||
const Drawer = forwardRef<DrawerRef, Props>((props, ref) => { |
||||
const { style, children } = props; |
||||
const hiddenOffset = -screenWidth; |
||||
const visibleOffset = 0; |
||||
const navigation = useNavigation(); |
||||
const safeAreaInsets = useSafeAreaInsets(); |
||||
|
||||
// Animation config
|
||||
const animationConfig: Omit<Animated.SpringConfig, 'toValue'> = { |
||||
damping: 100, |
||||
overshootClamping: false, |
||||
restSpeedThreshold: 5, |
||||
restDisplacementThreshold: 5, |
||||
stiffness: 800, |
||||
mass: 6, |
||||
}; |
||||
|
||||
// Set up gesture handler
|
||||
const offset = useMemo(() => new Value(hiddenOffset), []); |
||||
const state = useMemo(() => new Value(State.UNDETERMINED), []); |
||||
const velocityX = useMemo(() => new Value(0), []); |
||||
const translationX = useMemo(() => new Value(0), []); |
||||
const gestureHandler = useMemo(() => onGestureEvent({ translationX, state, velocityX }), []); |
||||
const clock = useMemo(() => new Animated.Clock(), []); |
||||
const translateX = useMemo( |
||||
() => |
||||
clamp( |
||||
withSpring({ |
||||
// onSnap: (val) => {
|
||||
// const offset = val[0];
|
||||
// if (offset == visibleOffset) {
|
||||
// // TODO: Use optional chaining once prettier is fixed
|
||||
// triggerDismissed();
|
||||
// }
|
||||
// },
|
||||
state, |
||||
velocity: velocityX, |
||||
offset, |
||||
value: translationX, |
||||
snapPoints: [hiddenOffset, visibleOffset], |
||||
config: animationConfig, |
||||
}), |
||||
hiddenOffset, |
||||
visibleOffset |
||||
), |
||||
[visibleOffset, hiddenOffset, translationX, velocityX] |
||||
); |
||||
|
||||
// Programatically trigger hiding and showing
|
||||
const triggerShowDrawer: Animated.Value<0 | 1> = useMemo(() => new Value(0), []); |
||||
const triggerDismissDrawer: Animated.Value<0 | 1> = useMemo(() => new Value(0), []); |
||||
|
||||
// Dismiss overlay
|
||||
const dismissDrawer = useCallback(() => { |
||||
triggerDismissDrawer.setValue(1); |
||||
}, []); |
||||
|
||||
// Show overlay
|
||||
const showDrawer = useCallback(() => { |
||||
triggerShowDrawer.setValue(1); |
||||
}, []); |
||||
|
||||
// Define animated styles
|
||||
const animatedStyles: StyleSheet.NamedStyles<any> = useMemo(() => { |
||||
return { |
||||
overlayBackground: { |
||||
backgroundColor: colors.overlay, |
||||
...styles.absoluteFill, |
||||
opacity: interpolateNode(translateX, { |
||||
inputRange: [hiddenOffset + 1, visibleOffset], |
||||
outputRange: [0, 1], |
||||
}) as any, |
||||
transform: [ |
||||
{ |
||||
translateX: interpolateNode(translateX, { |
||||
inputRange: [hiddenOffset, hiddenOffset + 1], |
||||
outputRange: [hiddenOffset, visibleOffset], |
||||
extrapolate: Extrapolate.CLAMP, |
||||
}) as any, |
||||
}, |
||||
], |
||||
}, |
||||
overlayBackgroundTouchable: { |
||||
...StyleSheet.absoluteFillObject, |
||||
transform: [ |
||||
{ |
||||
translateX: interpolateNode(translateX, { |
||||
inputRange: [visibleOffset - 1, visibleOffset], |
||||
outputRange: [hiddenOffset, visibleOffset], |
||||
}) as any, |
||||
}, |
||||
], |
||||
}, |
||||
modal: { |
||||
transform: [{ translateX } as any], |
||||
...StyleSheet.absoluteFillObject, |
||||
}, |
||||
}; |
||||
}, [hiddenOffset, visibleOffset, translateX, safeAreaInsets]); |
||||
|
||||
// Declarative logic that animates overlay
|
||||
useCode( |
||||
() => |
||||
block([ |
||||
// Animate IN overlay
|
||||
cond(eq(triggerShowDrawer, new Value(1)), [ |
||||
set( |
||||
offset, |
||||
timing({ |
||||
clock, |
||||
from: offset, |
||||
easing: EasingNode.inOut(EasingNode.ease) as any, |
||||
duration: 250, |
||||
to: visibleOffset, |
||||
}) |
||||
), |
||||
// Reset value that toggles animating in overlay
|
||||
cond(not(clockRunning(clock)), block([set(triggerShowDrawer, 0)])), |
||||
]), |
||||
// Animate OUT overlay
|
||||
cond(eq(triggerDismissDrawer, new Value(1)), [ |
||||
set( |
||||
offset, |
||||
timing({ |
||||
clock, |
||||
from: offset, |
||||
easing: EasingNode.inOut(EasingNode.ease) as any, |
||||
duration: 200, |
||||
to: hiddenOffset, |
||||
}) |
||||
), |
||||
// Dismiss overlay after animating out
|
||||
cond(not(clockRunning(clock)), block([set(triggerDismissDrawer, 0)])), |
||||
]), |
||||
]), |
||||
[] |
||||
); |
||||
|
||||
// Expose actions for external components
|
||||
useImperativeHandle(ref, () => ({ |
||||
dismissDrawer: () => dismissDrawer(), |
||||
showDrawer: () => showDrawer(), |
||||
})); |
||||
|
||||
const renderOverlay = useCallback(() => { |
||||
return <Animated.View style={animatedStyles.overlayBackground} />; |
||||
}, [animatedStyles]); |
||||
|
||||
const renderContent = useCallback(() => { |
||||
return ( |
||||
<PanGestureHandler {...gestureHandler}> |
||||
<Animated.View style={[animatedStyles.modal, style]}> |
||||
<Animated.View style={animatedStyles.overlayBackgroundTouchable}> |
||||
<TouchableOpacity style={styles.fill} onPress={dismissDrawer} /> |
||||
</Animated.View> |
||||
<DrawerView navigation={navigation} onCloseDrawer={dismissDrawer} /> |
||||
</Animated.View> |
||||
</PanGestureHandler> |
||||
); |
||||
}, [gestureHandler, animatedStyles, style, children, dismissDrawer]); |
||||
|
||||
const renderDrawer = () => { |
||||
return ( |
||||
<React.Fragment> |
||||
{renderOverlay()} |
||||
{renderContent()} |
||||
</React.Fragment> |
||||
); |
||||
}; |
||||
|
||||
return ( |
||||
<View style={styles.fill}> |
||||
{children} |
||||
{renderDrawer()} |
||||
</View> |
||||
); |
||||
}); |
||||
|
||||
export default Drawer; |
||||
@ -0,0 +1,10 @@ |
||||
import { StyleSheet } from 'react-native'; |
||||
|
||||
export default StyleSheet.create({ |
||||
fill: { |
||||
flex: 1, |
||||
}, |
||||
absoluteFill: { |
||||
...StyleSheet.absoluteFillObject, |
||||
}, |
||||
}); |
||||