Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: upgrade react-native-gesture-handler to v2 #3440

Merged
merged 6 commits into from
Feb 13, 2023
Merged

chore: upgrade react-native-gesture-handler to v2 #3440

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e3993c9
chore: upgrade react-native-gesture-handler to v2
kathaypacific Feb 10, 2023
a58d5d9
fix: tests
kathaypacific Feb 10, 2023
f78852a
Merge branch 'main' into kathy/upgrade-gesture
kathaypacific Feb 10, 2023
66ed797
fix: offramps test
kathaypacific Feb 10, 2023
97b4ea6
Merge branch 'main' into kathy/upgrade-gesture
kathaypacific Feb 13, 2023
ab529f8
Merge branch 'main' into kathy/upgrade-gesture
kathaypacific Feb 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 0 additions & 6 deletions android/app/src/main/java/org/celo/mobile/MainActivity.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
import com.facebook.react.ReactRootView;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.modules.core.DeviceEventManagerModule;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
import java.util.Date;
import org.devio.rn.splashscreen.SplashScreen;

Expand Down Expand Up @@ -76,11 +75,6 @@ public void onNewIntent(Intent intent) {
@Override
protected ReactActivityDelegate createReactActivityDelegate() {
return new ReactActivityDelegate(this, getMainComponentName()) {
@Override
protected ReactRootView createRootView() {
return new RNGestureHandlerEnabledRootView(MainActivity.this);
}

@Override
protected Bundle getLaunchOptions() {
// This is used to pass props (in this case app start time) to React
Expand Down
7 changes: 0 additions & 7 deletions e2e/src/usecases/OffRamps.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,13 +48,6 @@ export default offRamps = () => {
await waitForElementId('RNWebView')
await expect(element(by.text('Bidali'))).toBeVisible()
})

// TODO(tomm) debug why this is failing on Android
it(':ios: Then should not be able to spend CELO', async () => {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed this test because it was failing and i don't think it works as intended - i was surprised to find that it's not straighforward to test if a button is disabled using detox because detox only has access to native elements (not JS ones). wix/Detox#3203

this was previously passing because celoRadioButton returns a native element which doesn't have any property called enabled. i think that e2e tests are better for testing flows rather than display state, so i didn't feel too bad about moving this test into the FiatExchangeCurrency unit test. wdyt @MuckT ?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moving this to a unit test is the right choice in my opinion. Anything we can test on a lower test level we should. LGTM!

await waitForElementId('radio/CELO')
let celoRadioButton = await element(by.id('radio/CELO')).getAttributes()
jestExpect(celoRadioButton.enabled).toBeFalsy()
})
})

describe('When Withdraw Selected', () => {
Expand Down
4 changes: 2 additions & 2 deletions ios/Podfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -586,7 +586,7 @@ PODS:
- RNFBApp
- RNFS (2.20.0):
- React-Core
- RNGestureHandler (1.9.0):
- RNGestureHandler (2.9.0):
- React-Core
- RNImageCropPicker (0.35.2):
- React-Core
Expand Down Expand Up @@ -1097,7 +1097,7 @@ SPEC CHECKSUMS:
RNFBMessaging: b05aa2a76ed2b9fd50f05f036c96b26189a1fce2
RNFBRemoteConfig: e8d462f46e1759a5921d0e4b76d0ab89aef9baee
RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
RNGestureHandler: 9b7e605a741412e20e13c512738a31bd1611759b
RNGestureHandler: 071d7a9ad81e8b83fe7663b303d132406a7d8f39
RNImageCropPicker: 9e0bf18cf4184a846fed55747c8e622208b39947
RNKeychain: 4f63aada75ebafd26f4bc2c670199461eab85d94
RNLocalize: f567ea0e35116a641cdffe6683b0d212d568f32a
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@
"react-native-exit-app": "^1.1.0",
"react-native-fast-crypto": "^2.2.0",
"react-native-fs": "^2.20.0",
"react-native-gesture-handler": "^1.9.0",
"react-native-gesture-handler": "^2.9.0",
"react-native-get-random-values": "^1.8.0",
"react-native-image-crop-picker": "^0.35.1",
"react-native-keychain": "8.0.0",
Expand Down
147 changes: 74 additions & 73 deletions src/account/__snapshots__/Profile.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,88 +28,89 @@ exports[`Profile renders correctly 1`] = `
}
}
>
<RNGestureHandlerButton
collapsable={false}
onGestureEvent={[Function]}
onGestureHandlerEvent={[Function]}
onGestureHandlerStateChange={[Function]}
onHandlerStateChange={[Function]}
rippleColor={0}
<View
accessible={true}
focusable={true}
nativeBackgroundAndroid={
Object {
"attribute": "selectableItemBackground",
"rippleRadius": undefined,
"type": "ThemeAttrAndroid",
}
}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
"alignItems": "center",
"alignSelf": "center",
"borderRadius": 60,
"height": 120,
"justifyContent": "center",
"width": 120,
},
Object {
"backgroundColor": "#DFDBCE",
},
]
}
testID="PictureInput"
>
<View
accessible={true}
<Text
maxFontSizeMultiplier={2}
style={
Array [
Array [
Object {
"alignItems": "center",
"alignSelf": "center",
"borderRadius": 60,
"height": 120,
"justifyContent": "center",
"width": 120,
},
Object {
"backgroundColor": "#DFDBCE",
},
],
Object {
"opacity": 1,
},
]
Object {
"textAlign": "center",
"textAlignVertical": "center",
}
}
>
<Text
maxFontSizeMultiplier={2}
style={
Object {
"textAlign": "center",
"textAlignVertical": "center",
}
}
>
addPhoto
</Text>
<View
style={
Object {
"alignItems": "center",
"backgroundColor": "#1AB775",
"borderRadius": 16,
"bottom": 0,
"height": 32,
"justifyContent": "center",
"position": "absolute",
"right": 0,
"width": 32,
}
addPhoto
</Text>
<View
style={
Object {
"alignItems": "center",
"backgroundColor": "#1AB775",
"borderRadius": 16,
"bottom": 0,
"height": 32,
"justifyContent": "center",
"position": "absolute",
"right": 0,
"width": 32,
}
}
>
<svg
fill="none"
height={16}
style={Object {}}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<svg
fill="none"
height={16}
<path
clip-rule="evenodd"
d="M5 3C5 1.89543 5.89543 1 7 1H9C10.1046 1 11 1.89543 11 3H13C14.1046 3 15 3.89543 15 5V11C15 12.1046 14.1046 13 13 13H3C1.89543 13 1 12.1046 1 11V5C1 3.89543 1.89543 3 3 3H5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z"
fill="#1AB775"
fill-rule="evenodd"
style={Object {}}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M5 3C5 1.89543 5.89543 1 7 1H9C10.1046 1 11 1.89543 11 3H13C14.1046 3 15 3.89543 15 5V11C15 12.1046 14.1046 13 13 13H3C1.89543 13 1 12.1046 1 11V5C1 3.89543 1.89543 3 3 3H5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z"
fill="#1AB775"
fill-rule="evenodd"
style={Object {}}
/>
<path
d="M5 3V3.5C5.27614 3.5 5.5 3.27614 5.5 3H5ZM11 3H10.5C10.5 3.27614 10.7239 3.5 11 3.5V3ZM7 0.5C5.61929 0.5 4.5 1.61929 4.5 3H5.5C5.5 2.17157 6.17157 1.5 7 1.5V0.5ZM9 0.5H7V1.5H9V0.5ZM11.5 3C11.5 1.61929 10.3807 0.5 9 0.5V1.5C9.82843 1.5 10.5 2.17157 10.5 3H11.5ZM13 2.5H11V3.5H13V2.5ZM15.5 5C15.5 3.61929 14.3807 2.5 13 2.5V3.5C13.8284 3.5 14.5 4.17157 14.5 5H15.5ZM15.5 11V5H14.5V11H15.5ZM13 13.5C14.3807 13.5 15.5 12.3807 15.5 11H14.5C14.5 11.8284 13.8284 12.5 13 12.5V13.5ZM3 13.5H13V12.5H3V13.5ZM0.5 11C0.5 12.3807 1.61929 13.5 3 13.5V12.5C2.17157 12.5 1.5 11.8284 1.5 11H0.5ZM0.5 5V11H1.5V5H0.5ZM3 2.5C1.61929 2.5 0.5 3.61929 0.5 5H1.5C1.5 4.17157 2.17157 3.5 3 3.5V2.5ZM5 2.5H3V3.5H5V2.5ZM9.5 8C9.5 8.82843 8.82843 9.5 8 9.5V10.5C9.38071 10.5 10.5 9.38071 10.5 8H9.5ZM8 6.5C8.82843 6.5 9.5 7.17157 9.5 8H10.5C10.5 6.61929 9.38071 5.5 8 5.5V6.5ZM6.5 8C6.5 7.17157 7.17157 6.5 8 6.5V5.5C6.61929 5.5 5.5 6.61929 5.5 8H6.5ZM8 9.5C7.17157 9.5 6.5 8.82843 6.5 8H5.5C5.5 9.38071 6.61929 10.5 8 10.5V9.5Z"
fill="white"
style={Object {}}
/>
</svg>
</View>
/>
<path
d="M5 3V3.5C5.27614 3.5 5.5 3.27614 5.5 3H5ZM11 3H10.5C10.5 3.27614 10.7239 3.5 11 3.5V3ZM7 0.5C5.61929 0.5 4.5 1.61929 4.5 3H5.5C5.5 2.17157 6.17157 1.5 7 1.5V0.5ZM9 0.5H7V1.5H9V0.5ZM11.5 3C11.5 1.61929 10.3807 0.5 9 0.5V1.5C9.82843 1.5 10.5 2.17157 10.5 3H11.5ZM13 2.5H11V3.5H13V2.5ZM15.5 5C15.5 3.61929 14.3807 2.5 13 2.5V3.5C13.8284 3.5 14.5 4.17157 14.5 5H15.5ZM15.5 11V5H14.5V11H15.5ZM13 13.5C14.3807 13.5 15.5 12.3807 15.5 11H14.5C14.5 11.8284 13.8284 12.5 13 12.5V13.5ZM3 13.5H13V12.5H3V13.5ZM0.5 11C0.5 12.3807 1.61929 13.5 3 13.5V12.5C2.17157 12.5 1.5 11.8284 1.5 11H0.5ZM0.5 5V11H1.5V5H0.5ZM3 2.5C1.61929 2.5 0.5 3.61929 0.5 5H1.5C1.5 4.17157 2.17157 3.5 3 3.5V2.5ZM5 2.5H3V3.5H5V2.5ZM9.5 8C9.5 8.82843 8.82843 9.5 8 9.5V10.5C9.38071 10.5 10.5 9.38071 10.5 8H9.5ZM8 6.5C8.82843 6.5 9.5 7.17157 9.5 8H10.5C10.5 6.61929 9.38071 5.5 8 5.5V6.5ZM6.5 8C6.5 7.17157 7.17157 6.5 8 6.5V5.5C6.61929 5.5 5.5 6.61929 5.5 8H6.5ZM8 9.5C7.17157 9.5 6.5 8.82843 6.5 8H5.5C5.5 9.38071 6.61929 10.5 8 10.5V9.5Z"
fill="white"
style={Object {}}
/>
</svg>
</View>
</RNGestureHandlerButton>
</View>
<Modal
animationType="none"
deviceHeight={1334}
Expand Down
23 changes: 10 additions & 13 deletions src/components/BottomSheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import React, { useState } from 'react'
import { Dimensions, LayoutChangeEvent, StyleSheet, View } from 'react-native'
import { TouchableWithoutFeedback } from 'react-native-gesture-handler'
import {
Dimensions,
LayoutChangeEvent,
StyleSheet,
TouchableWithoutFeedback,
View,
} from 'react-native'
import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { useShowOrHideAnimation } from 'src/components/useShowOrHideAnimation'
Expand Down Expand Up @@ -58,13 +63,9 @@ function BottomSheet({ children, isVisible, onBackgroundPress }: Props) {

return (
<View style={styles.container} testID="BottomSheetContainer">
<Animated.View style={[styles.background, animatedOpacity]}>
<TouchableWithoutFeedback
style={styles.backgroundTouchable}
onPress={onBackgroundPress}
testID={'BackgroundTouchable'}
/>
</Animated.View>
<TouchableWithoutFeedback onPress={onBackgroundPress} testID={'BackgroundTouchable'}>
<Animated.View style={[styles.background, animatedOpacity]} />
</TouchableWithoutFeedback>
<Animated.ScrollView
style={[styles.contentContainer, { paddingBottom, maxHeight }, animatedPickerPosition]}
contentContainerStyle={pickerHeight >= maxHeight ? styles.fullHeightScrollView : undefined}
Expand Down Expand Up @@ -93,10 +94,6 @@ const styles = StyleSheet.create({
width: '100%',
height: '100%',
},
backgroundTouchable: {
width: '100%',
height: '100%',
},
contentContainer: {
position: 'absolute',
bottom: 0,
Expand Down
17 changes: 4 additions & 13 deletions src/components/TokenBottomSheetLegacy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import BigNumber from 'bignumber.js'
import React, { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { LayoutChangeEvent, StyleSheet, Text, View } from 'react-native'
import { TouchableWithoutFeedback } from 'react-native-gesture-handler'
import { LayoutChangeEvent, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { SendEvents } from 'src/analytics/Events'
Expand Down Expand Up @@ -103,13 +102,9 @@ function TokenBottomSheet({ isVisible, origin, onCurrencySelected, onClose }: Pr

return (
<View style={styles.container} testID="TokenBottomSheetContainer">
<Animated.View style={[styles.background, animatedOpacity]}>
<TouchableWithoutFeedback
style={styles.backgroundTouchable}
onPress={onClose}
testID={'BackgroundTouchable'}
/>
</Animated.View>
<TouchableWithoutFeedback onPress={onClose} testID={'BackgroundTouchable'}>
<Animated.View style={[styles.background, animatedOpacity]} />
</TouchableWithoutFeedback>
<Animated.View
style={[
styles.contentContainer,
Expand Down Expand Up @@ -151,10 +146,6 @@ const styles = StyleSheet.create({
width: '100%',
height: '100%',
},
backgroundTouchable: {
width: '100%',
height: '100%',
},
contentContainer: {
position: 'absolute',
bottom: 0,
Expand Down
32 changes: 11 additions & 21 deletions src/components/__snapshots__/TokenBottomSheetLegacy.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,15 @@ exports[`TokenBottomSheetLegacy renders correctly 1`] = `
testID="TokenBottomSheetContainer"
>
<View
accessible={true}
focusable={true}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
Expand All @@ -28,27 +37,8 @@ exports[`TokenBottomSheetLegacy renders correctly 1`] = `
undefined,
]
}
>
<RNGestureHandlerButton
collapsable={false}
onGestureEvent={[Function]}
onGestureHandlerEvent={[Function]}
onGestureHandlerStateChange={[Function]}
onHandlerStateChange={[Function]}
rippleColor={0}
testID="BackgroundTouchable"
>
<View
accessible={true}
style={
Object {
"height": "100%",
"width": "100%",
}
}
/>
</RNGestureHandlerButton>
</View>
testID="BackgroundTouchable"
/>
<View
onLayout={[Function]}
style={
Expand Down
2 changes: 2 additions & 0 deletions src/fiatExchanges/FiatExchangeCurrency.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,8 @@ describe('FiatExchangeCurrency', () => {
</Provider>
)

expect(tree.getByTestId('radio/CELO')).toBeDisabled()

fireEvent.press(tree.getByTestId('radio/cEUR'))
fireEvent.press(tree.getByText('next'))
expect(navigate).toHaveBeenCalledWith(Screens.BidaliScreen, {
Expand Down
15 changes: 10 additions & 5 deletions src/fiatExchanges/FiatExchangeCurrency.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,15 @@ import { RouteProp } from '@react-navigation/native'
import { NativeStackScreenProps } from '@react-navigation/native-stack'
import React, { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { SafeAreaView, ScrollView, StyleSheet, Text, View, ViewStyle } from 'react-native'
import { TouchableWithoutFeedback } from 'react-native-gesture-handler'
import {
SafeAreaView,
ScrollView,
StyleSheet,
Text,
TouchableWithoutFeedback,
View,
ViewStyle,
} from 'react-native'
import { FiatExchangeEvents } from 'src/analytics/Events'
import ValoraAnalytics from 'src/analytics/ValoraAnalytics'
import BackButton from 'src/components/BackButton'
Expand Down Expand Up @@ -68,15 +75,13 @@ function CurrencyRadioItem({
testID?: string
}) {
return (
<TouchableWithoutFeedback onPress={onSelect} disabled={!enabled}>
<TouchableWithoutFeedback testID={testID} onPress={onSelect} disabled={!enabled}>
<View
pointerEvents="none"
style={[
styles.currencyItemContainer,
containerStyle,
{ borderColor: selected ? colors.greenUI : colors.gray3 },
]}
testID={testID}
>
<RadioButton selected={selected} disabled={!enabled} />
<Text style={[styles.currencyItemTitle, enabled ? {} : { color: colors.gray3 }]}>
Expand Down
Loading