Skip to content

Commit d620494

Browse files
joshsmithjoshsmith
authored
fix: added support for web without Babel/SWC (#1741)(by @joshsmith)
- refactor: add support for web without Babel/SWC - refactor: add exhaustive deps rules to eslintrc for Reanimated hooks - fix: add missing metro-react-native-babel-preset (breaking linting)
1 parent 9475a7e commit d620494

File tree

15 files changed

+165
-47
lines changed

15 files changed

+165
-47
lines changed

‎.eslintrc.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,11 @@ module.exports = {
44
rules: {
55
'no-console': ['error', { allow: ['warn', 'error'] }],
66
'prettier/prettier': 'error',
7+
'react-hooks/exhaustive-deps': [
8+
'error',
9+
{
10+
additionalHooks: '(useAnimatedStyle|useDerivedValue|useAnimatedProps)',
11+
},
12+
],
713
},
814
};

‎example/src/components/customBackground/CustomBackground.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,17 @@ const CustomBackgroundComponent: React.FC<CustomBackgroundProps> = ({
1313
animatedIndex,
1414
}) => {
1515
//#region styles
16-
const containerAnimatedStyle = useAnimatedStyle(() => ({
17-
// @ts-ignore
18-
backgroundColor: interpolateColor(
19-
animatedIndex.value,
20-
[0, 1],
21-
['#ffffff', '#a8b5eb']
22-
),
23-
}));
16+
const containerAnimatedStyle = useAnimatedStyle(
17+
() => ({
18+
// @ts-ignore
19+
backgroundColor: interpolateColor(
20+
animatedIndex.value,
21+
[0, 1],
22+
['#ffffff', '#a8b5eb']
23+
),
24+
}),
25+
[animatedIndex.value]
26+
);
2427
const containerStyle = useMemo(
2528
() => [styles.container, style, containerAnimatedStyle],
2629
[style, containerAnimatedStyle]

‎example/src/components/customFooter/CustomFooter.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const CustomFooterComponent = ({
3636
return {
3737
transform: [{ rotate: `${arrowRotate}rad` }],
3838
};
39-
}, []);
39+
}, [animatedIndex.value]);
4040
const arrowStyle = useMemo(
4141
() => [arrowAnimatedStyle, styles.arrow],
4242
[arrowAnimatedStyle]

‎example/src/components/customHandle/CustomHandle.tsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,15 @@ const CustomHandleComponent: React.FC<CustomHandleProps> = ({
2222
}) => {
2323
//#region animations
2424

25-
const indicatorTransformOriginY = useDerivedValue(() =>
26-
interpolate(animatedIndex.value, [0, 1, 2], [-1, 0, 1], Extrapolate.CLAMP)
25+
const indicatorTransformOriginY = useDerivedValue(
26+
() =>
27+
interpolate(
28+
animatedIndex.value,
29+
[0, 1, 2],
30+
[-1, 0, 1],
31+
Extrapolate.CLAMP
32+
),
33+
[animatedIndex.value]
2734
);
2835
//#endregion
2936

@@ -40,7 +47,7 @@ const CustomHandleComponent: React.FC<CustomHandleProps> = ({
4047
borderTopLeftRadius: borderTopRadius,
4148
borderTopRightRadius: borderTopRadius,
4249
};
43-
});
50+
}, [animatedIndex.value]);
4451
const leftIndicatorStyle = useMemo(
4552
() => ({
4653
...styles.indicator,
@@ -66,7 +73,7 @@ const CustomHandleComponent: React.FC<CustomHandleProps> = ({
6673
}
6774
),
6875
};
69-
});
76+
}, [animatedIndex.value, indicatorTransformOriginY.value]);
7077
const rightIndicatorStyle = useMemo(
7178
() => ({
7279
...styles.indicator,
@@ -92,7 +99,7 @@ const CustomHandleComponent: React.FC<CustomHandleProps> = ({
9299
}
93100
),
94101
};
95-
});
102+
}, [animatedIndex.value, indicatorTransformOriginY.value]);
96103
//#endregion
97104

98105
// render

‎example/src/screens/integrations/map/LocationListBottomSheet.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,12 @@ export const LocationListBottomSheet = forwardRef<
3737
//#endregion
3838

3939
//#region styles
40-
const scrollViewAnimatedStyle = useAnimatedStyle(() => ({
41-
opacity: index.value,
42-
}));
40+
const scrollViewAnimatedStyle = useAnimatedStyle(
41+
() => ({
42+
opacity: index.value,
43+
}),
44+
[index.value]
45+
);
4346
const scrollViewStyle = useMemo(
4447
() => [styles.scrollView, scrollViewAnimatedStyle],
4548
[scrollViewAnimatedStyle]

‎example/src/screens/integrations/map/Weather.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const Weather = ({ animatedIndex, animatedPosition }: WeatherProps) => {
5454
},
5555
],
5656
};
57-
}, [height, screenHeight]);
57+
}, [animatedIndex.value, animatedPosition.value, height, screenHeight]);
5858
const containerStyle = useMemo(
5959
() => [
6060
styles.container,

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
"eslint-plugin-prettier": "^4.2.1",
5959
"husky": "^4.3.8",
6060
"lint-staged": "^13.2.2",
61+
"metro-react-native-babel-preset": "^0.77.0",
6162
"prettier": "^2.8.8",
6263
"react": "18.2.0",
6364
"react-native": "0.73.1",

‎src/components/bottomSheet/BottomSheet.tsx‎

Lines changed: 44 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
195195
return $modal
196196
? _animatedContainerHeight.value - verticalInset
197197
: _animatedContainerHeight.value;
198-
}, [$modal, topInset, bottomInset]);
198+
}, [topInset, bottomInset, $modal, _animatedContainerHeight.value]);
199199
const animatedContainerOffset = useReactiveSharedValue(
200200
_providedContainerOffset ?? INITIAL_CONTAINER_OFFSET
201201
) as Animated.SharedValue<Insets>;
@@ -214,7 +214,8 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
214214
maxDynamicContentSize
215215
);
216216
const animatedHighestSnapPoint = useDerivedValue(
217-
() => animatedSnapPoints.value[animatedSnapPoints.value.length - 1]
217+
() => animatedSnapPoints.value[animatedSnapPoints.value.length - 1],
218+
[animatedSnapPoints.value]
218219
);
219220
const animatedClosedPosition = useDerivedValue(() => {
220221
let closedPosition = animatedContainerHeight.value;
@@ -224,9 +225,10 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
224225
}
225226

226227
return closedPosition;
227-
}, [$modal, detached, bottomInset]);
228+
}, [animatedContainerHeight.value, $modal, detached, bottomInset]);
228229
const animatedSheetHeight = useDerivedValue(
229-
() => animatedContainerHeight.value - animatedHighestSnapPoint.value
230+
() => animatedContainerHeight.value - animatedHighestSnapPoint.value,
231+
[animatedContainerHeight.value, animatedHighestSnapPoint.value]
230232
);
231233
const animatedCurrentIndex = useReactiveSharedValue(
232234
animateOnMount ? -1 : _providedIndex
@@ -274,7 +276,13 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
274276
isHandleHeightCalculated &&
275277
isSnapPointsNormalized
276278
);
277-
});
279+
}, [
280+
_providedContainerHeight,
281+
animatedContainerHeight.value,
282+
animatedHandleHeight,
283+
animatedSnapPoints.value,
284+
handleComponent,
285+
]);
278286
const isInTemporaryPosition = useSharedValue(false);
279287
const isForcedClosing = useSharedValue(false);
280288

@@ -399,7 +407,12 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
399407
}
400408

401409
return SCROLLABLE_STATE.LOCKED;
402-
});
410+
}, [
411+
animatedAnimationState.value,
412+
animatedKeyboardState.value,
413+
animatedScrollableOverrideState.value,
414+
animatedSheetState.value,
415+
]);
403416
// dynamic
404417
const animatedContentHeightMax = useDerivedValue(() => {
405418
const keyboardHeightInContainer = animatedKeyboardHeightInContainer.value;
@@ -513,7 +526,18 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
513526
}
514527

515528
return currentIndex;
516-
}, [android_keyboardInputMode]);
529+
}, [
530+
android_keyboardInputMode,
531+
animatedAnimationSource.value,
532+
animatedAnimationState.value,
533+
animatedContainerHeight.value,
534+
animatedCurrentIndex.value,
535+
animatedNextPositionIndex.value,
536+
animatedPosition.value,
537+
animatedSnapPoints.value,
538+
isInTemporaryPosition.value,
539+
isLayoutCalculated.value,
540+
]);
517541
//#endregion
518542

519543
//#region private methods
@@ -1258,7 +1282,12 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
12581282
configs: _providedAnimationConfigs,
12591283
}),
12601284
};
1261-
}, [animatedContentHeightMax, enableDynamicSizing, animatedContentHeight]);
1285+
}, [
1286+
enableDynamicSizing,
1287+
animatedContentHeight.value,
1288+
animatedContentHeightMax.value,
1289+
_providedAnimationConfigs,
1290+
]);
12621291
const contentContainerStyle = useMemo(
12631292
() => [styles.contentContainer, contentContainerAnimatedStyle],
12641293
[contentContainerAnimatedStyle]
@@ -1277,7 +1306,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
12771306
return {
12781307
paddingBottom: animatedContainerHeight.value,
12791308
};
1280-
}, [detached]);
1309+
}, [animatedContainerHeight.value, detached]);
12811310
const contentMaskContainerStyle = useMemo(
12821311
() => [styles.contentMaskContainer, contentMaskContainerAnimatedStyle],
12831312
[contentMaskContainerAnimatedStyle]
@@ -1424,7 +1453,8 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
14241453
}
14251454
}
14261455
animateToPosition(nextPosition, animationSource, 0, animationConfig);
1427-
}
1456+
},
1457+
[]
14281458
);
14291459

14301460
/**
@@ -1547,7 +1577,8 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
15471577
if (_providedAnimatedPosition) {
15481578
_providedAnimatedPosition.value = _animatedPosition + topInset;
15491579
}
1550-
}
1580+
},
1581+
[]
15511582
);
15521583

15531584
/**
@@ -1559,7 +1590,8 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
15591590
if (_providedAnimatedIndex) {
15601591
_providedAnimatedIndex.value = _animatedIndex;
15611592
}
1562-
}
1593+
},
1594+
[]
15631595
);
15641596

15651597
/**

‎src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -96,15 +96,18 @@ const BottomSheetBackdropComponent = ({
9696
//#endregion
9797

9898
//#region styles
99-
const containerAnimatedStyle = useAnimatedStyle(() => ({
100-
opacity: interpolate(
101-
animatedIndex.value,
102-
[-1, disappearsOnIndex, appearsOnIndex],
103-
[0, 0, opacity],
104-
Extrapolation.CLAMP
105-
),
106-
flex: 1,
107-
}));
99+
const containerAnimatedStyle = useAnimatedStyle(
100+
() => ({
101+
opacity: interpolate(
102+
animatedIndex.value,
103+
[-1, disappearsOnIndex, appearsOnIndex],
104+
[0, 0, opacity],
105+
Extrapolation.CLAMP
106+
),
107+
flex: 1,
108+
}),
109+
[animatedIndex.value, appearsOnIndex, disappearsOnIndex, opacity]
110+
);
108111
const containerStyle = useMemo(
109112
() => [styles.container, style, containerAnimatedStyle],
110113
[style, containerAnimatedStyle]

‎src/components/bottomSheetDebugView/ReText.webx.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const ReText = (props: TextProps) => {
2626
: _providedValue.value;
2727

2828
return `${text}: ${value}`;
29-
});
29+
}, [_providedValue, text]);
3030

3131
//region effects
3232
useAnimatedReaction(
@@ -35,7 +35,8 @@ const ReText = (props: TextProps) => {
3535
textRef.current?.setNativeProps({
3636
text: result,
3737
});
38-
}
38+
},
39+
[]
3940
);
4041
//endregion
4142

0 commit comments

Comments
 (0)