Skip to content

Commit 0aa3ee0

Browse files
Inbal-TishM-i-k-e-l
Inbal-Tish
and
M-i-k-e-l
authored
Reanimated and GestureHandler upgrade (#3203)
* SectionsWheelPicker - wrap with GestureHandlerRootView * remove redundent * remove // @ts-expect-error should be fixed in version 3.5 (software-mansion/react-native-reanimated#4881) * Modal - applying useGestureHandlerRootView on iOS as well * TouchableOpacity - migrate from deprecated onGestureEvent to onHandleStateChange * PanView - migrate from PanGestureHandler with deprecated onGestureEvent to GestureDetector component with gesture * Calendar header - ignore TS error * upgrade libraries * gesture upgrade to 2.16.0 * gestureHandler to 2.14.1 * Modal - update docs * WheelPicker - wrap with GestureHandlerRootView, instead of wrapping the screen * Wrapping SectionWheelPickerScreen instead of WheelPicker component * clean * Remove migration from useAnimatedGestureHandler * //@ts-expect-error - useAnimatedGestureHandler migration * fix TS error on ConnectionStatusBar NetInfo.fetch * Revert "fix TS error on ConnectionStatusBar NetInfo.fetch" This reverts commit 323a558. * Revert "//@ts-expect-error - useAnimatedGestureHandler migration" This reverts commit 03a695c. * Revert "Remove migration from useAnimatedGestureHandler" This reverts commit 7957805. * Wrap screens with gestureHandlerRootHOC * Fix TabController's indicator * Fix PanView (and screen) * Remove missed comment * Change to map (also fixes initial indicator) --------- Co-authored-by: M-i-k-e-l <[email protected]>
1 parent 612c26c commit 0aa3ee0

File tree

20 files changed

+223
-107
lines changed

20 files changed

+223
-107
lines changed

‎demo/src/screens/componentScreens/index.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export function registerScreens(registrar) {
1515
registrar('unicorn.components.CheckboxScreen', () => require('./CheckboxScreen').default);
1616
registrar('unicorn.components.ChipScreen', () => require('./ChipScreen').default);
1717
registrar('unicorn.components.ChipsInputScreen', () => require('./ChipsInputScreen').default);
18-
registrar('unicorn.components.ColorPickerScreen', () => require('./ColorPickerScreen').default);
18+
registrar('unicorn.components.ColorPickerScreen', () => gestureHandlerRootHOC(require('./ColorPickerScreen').default));
1919
registrar('unicorn.components.ColorSwatchScreen', () => require('./ColorSwatchScreen').default);
2020
registrar('unicorn.components.ConnectionStatusBar', () => require('./ConnectionStatusBarScreen').default);
2121
registrar('unicorn.components.DateTimePickerScreen', () => require('./DateTimePickerScreen').default);
@@ -28,7 +28,7 @@ export function registerScreens(registrar) {
2828
registrar('unicorn.components.IconScreen', () => require('./IconScreen').default);
2929
registrar('unicorn.components.ImageScreen', () => require('./ImageScreen').default);
3030
registrar('unicorn.components.GridListScreen', () => require('./GridListScreen').default);
31-
registrar('unicorn.components.GridViewScreen', () => require('./GridViewScreen').default);
31+
registrar('unicorn.components.GridViewScreen', () => gestureHandlerRootHOC(require('./GridViewScreen').default));
3232
registrar('unicorn.components.KeyboardAwareScrollViewScreen', () => require('./KeyboardAwareScrollViewScreen').default);
3333
registrar('unicorn.components.MaskedInputScreen', () => require('./MaskedInputScreen').default);
3434
registrar('unicorn.components.MarqueeScreen', () => require('./MarqueeScreen').default);
@@ -38,12 +38,12 @@ export function registerScreens(registrar) {
3838
registrar('unicorn.components.PanDismissibleScreen', () => require('./PanDismissibleScreen').default);
3939
registrar('unicorn.components.PanListenerScreen', () => require('./PanListenerScreen').default);
4040
registrar('unicorn.components.PanResponderScreen', () => require('./PanResponderScreen').default);
41-
registrar('unicorn.components.PickerScreen', () => require('./PickerScreen').default);
41+
registrar('unicorn.components.PickerScreen', () => gestureHandlerRootHOC(require('./PickerScreen').default));
4242
registrar('unicorn.animations.ProgressBarScreen', () => require('../componentScreens/ProgressBarScreen').default);
4343
registrar('unicorn.components.ProgressiveImageScreen', () => require('./ProgressiveImageScreen').default);
4444
registrar('unicorn.components.RadioButtonScreen', () => require('./RadioButtonScreen').default);
4545
registrar('unicorn.components.ScrollBarScreen', () => require('./ScrollBarScreen').default);
46-
registrar('unicorn.components.SectionsWheelPickerScreen', () => require('./SectionsWheelPickerScreen').default);
46+
registrar('unicorn.components.SectionsWheelPickerScreen', () => gestureHandlerRootHOC(require('./SectionsWheelPickerScreen').default));
4747
registrar('unicorn.components.SegmentedControlScreen', () => require('./SegmentedControlScreen').default);
4848
registrar('unicorn.components.SharedTransitionScreen', () => require('./SharedTransitionScreen').default);
4949
registrar('unicorn.components.SkeletonViewScreen', () => require('./SkeletonViewScreen').default);

‎demo/src/screens/incubatorScreens/PanViewScreen.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -146,9 +146,8 @@ class PanViewScreen extends Component {
146146

147147
render() {
148148
const {showToast, showDialog} = this.state;
149-
const Container = showDialog ? View : GestureHandlerRootView;
150149
return (
151-
<Container style={styles.root}>
150+
<GestureHandlerRootView style={styles.root}>
152151
<View marginL-page height={50} centerV>
153152
<Text text50>New Pan View</Text>
154153
</View>
@@ -164,7 +163,7 @@ class PanViewScreen extends Component {
164163
</ScrollView>
165164
{showToast && this.renderToast()}
166165
{showDialog && this.renderDialog()}
167-
</Container>
166+
</GestureHandlerRootView>
168167
);
169168
}
170169
}

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -106,12 +106,12 @@
106106
"react-dom": "^18.2.0",
107107
"react-native": "0.71.12",
108108
"react-native-fs": "^2.20.0",
109-
"react-native-gesture-handler": "2.9.0",
109+
"react-native-gesture-handler": "2.14.1",
110110
"react-native-haptic-feedback": "^1.11.0",
111111
"react-native-linear-gradient": "2.6.2",
112112
"react-native-mmkv": "2.11.0",
113113
"react-native-navigation": "7.32.1",
114-
"react-native-reanimated": "3.4.0",
114+
"react-native-reanimated": "3.8.1",
115115
"react-native-shimmer-placeholder": "^2.0.6",
116116
"react-native-svg": "^13.7.0",
117117
"react-native-svg-transformer": "1.1.0",

‎src/components/marquee/index.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,6 @@ function Marquee(props: MarqueeProps) {
7676
}
7777
}, [viewLayout, textLayout]);
7878

79-
// @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
8079
const translateStyle = useAnimatedStyle(() => {
8180
if (offset.value) {
8281
return {
@@ -90,7 +89,6 @@ function Marquee(props: MarqueeProps) {
9089

9190
return (
9291
<View style={[styles.container, containerStyle]} onLayout={onLayoutView}>
93-
{/* @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881) */}
9492
<View reanimated style={[translateStyle]}>
9593
<Text style={[styles.text, labelStyle]} onLayout={onLayoutText}>
9694
{label}

‎src/components/modal/api/modal.api.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,7 @@
3333
{
3434
"name": "useGestureHandlerRootView",
3535
"type": "boolean",
36-
"description": "Should add a GestureHandlerRootView",
37-
"note": "Android only"
36+
"description": "Should add a GestureHandlerRootView"
3837
}
3938
],
4039
"snippet": [

‎src/components/modal/index.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export interface ModalProps extends RNModalProps {
4545
*/
4646
accessibilityLabel?: string;
4747
/**
48-
* Should add a GestureHandlerRootView (Android only)
48+
* Should add a GestureHandlerRootView
4949
*/
5050
useGestureHandlerRootView?: boolean;
5151
/**
@@ -112,9 +112,8 @@ class Modal extends Component<ModalProps> {
112112
...others
113113
} = this.props;
114114
const defaultContainer = enableModalBlur && Constants.isIOS && BlurView ? BlurView : View;
115-
const useGestureHandler = useGestureHandlerRootView && Constants.isAndroid;
116-
const GestureContainer = useGestureHandler ? GestureHandlerRootView : React.Fragment;
117-
const gestureContainerProps = useGestureHandler ? {style: styles.fill} : {};
115+
const GestureContainer = useGestureHandlerRootView ? GestureHandlerRootView : React.Fragment;
116+
const gestureContainerProps = useGestureHandlerRootView ? {style: styles.fill} : {};
118117
const useKeyboardAvoiding = useKeyboardAvoidingView && Constants.isIOS;
119118
const KeyboardAvoidingContainer = useKeyboardAvoiding ? KeyboardAvoidingView : React.Fragment;
120119
const keyboardAvoidingContainerProps = useKeyboardAvoiding

‎src/components/sortableGridList/SortableItem.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,6 @@ function SortableItem(props: PropsWithChildren<SortableItemProps & ReturnType<ty
171171
}
172172
});
173173

174-
// @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
175174
const animatedStyle = useAnimatedStyle(() => {
176175
const scale = withSpring(isDragging.value ? 1.1 : 1);
177176
const zIndex = isDragging.value ? 100 : withTiming(0, animationConfig);
@@ -183,7 +182,6 @@ function SortableItem(props: PropsWithChildren<SortableItemProps & ReturnType<ty
183182
});
184183

185184
return (
186-
// @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
187185
<View reanimated style={[style, animatedStyle]} onLayout={onLayout}>
188186
<GestureDetector gesture={dragOnLongPressGesture}>
189187
<View>{props.children}</View>

‎src/components/tabController/PageCarousel.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,6 @@ function PageCarousel(props: ScrollViewProps) {
104104
<Reanimated.ScrollView
105105
{...others}
106106
style={_style}
107-
// @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
108107
ref={carousel}
109108
horizontal
110109
pagingEnabled

‎src/components/tabController/TabBarItem.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,6 @@ export interface TabControllerItemProps extends Pick<TabControllerBarProps, 'spr
105105
interface Props extends TabControllerItemProps {
106106
index: number;
107107
targetPage: any; // TODO: typescript?
108-
// @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
109108
currentPage: Reanimated.Adaptable<number>;
110109
onLayout?: (event: LayoutChangeEvent, index: number) => void;
111110
}

‎src/components/tabController/useScrollToItem.ts

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -128,13 +128,6 @@ const useScrollToItem = <T extends ScrollToSupportedViews>(props: ScrollToItemPr
128128
const rightOffsets = [];
129129
rightOffsets.push(-containerWidth + widths[0] + outerSpacing + innerSpacing);
130130
while (index < itemsCount) {
131-
/* map animated widths and offsets */
132-
itemsWidthsAnimated.value[index] = widths[index];
133-
if (index > 0) {
134-
itemsOffsetsAnimated.value[index] =
135-
itemsOffsetsAnimated.value[index - 1] + itemsWidthsAnimated.value[index - 1];
136-
}
137-
138131
/* calc center, left and right offsets */
139132
centeredOffsets[index] = currentCenterOffset - screenCenter + widths[index] / 2;
140133
++index;
@@ -154,9 +147,24 @@ const useScrollToItem = <T extends ScrollToSupportedViews>(props: ScrollToItemPr
154147

155148
setOffsets({CENTER: centeredOffsets, LEFT: leftOffsets, RIGHT: rightOffsets}); // default for DYNAMIC is CENTER
156149

157-
// trigger value change
158-
itemsWidthsAnimated.value = [...itemsWidthsAnimated.value];
159-
itemsOffsetsAnimated.value = [...itemsOffsetsAnimated.value];
150+
// Update shared values
151+
itemsWidthsAnimated.modify((value) => {
152+
'worklet';
153+
value.forEach((_, index) => {
154+
value[index] = widths[index];
155+
});
156+
return value;
157+
});
158+
159+
itemsOffsetsAnimated.modify((value) => {
160+
'worklet';
161+
value.forEach((_, index) => {
162+
if (index > 0) {
163+
value[index] = value[index - 1] + widths[index - 1];
164+
}
165+
});
166+
return value;
167+
});
160168
},
161169
[itemsCount, outerSpacing, innerSpacing, addOffsetMargin, containerWidth]);
162170

0 commit comments

Comments
 (0)