Upgrade react-native to 0.71.12

.gitignore

@@ -64,7 +64,6 @@ yarn-error.log
 # UILib
 dist
 dist-ts
-yarn.lock
 package-lock.json
 docs/**/*.md
 

Gemfile

@@ -1,6 +1,5 @@
 source 'https://rubygems.org'
 
 # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
-ruby File.read(File.join(__dir__, '.ruby-version')).strip
-
-gem 'cocoapods', '~> 1.11', '>= 1.11.3'
+ruby '>= 2.6.10'
+gem 'cocoapods', '>= 1.11.3'

package.json

@@ -76,8 +76,8 @@
     "@types/jest": "^29.2.1",
     "@types/lodash": "^4.0.0",
     "@types/prop-types": "^15.5.3",
-    "@types/react": "^18.0.24",
-    "@types/react-native": "0.68.5",
+    "@types/react": "^18.2.15",
+    "@types/react-native": "0.71.2",
     "@types/tinycolor2": "^1.4.2",
     "@types/url-parse": "^1.4.3",
     "@typescript-eslint/eslint-plugin": "^5.3.1",
@@ -96,7 +96,7 @@
     "gh-pages": "^1.1.0",
     "jest": "^29.2.1",
     "light-date": "^1.2.0",
-    "metro-react-native-babel-preset": "0.73.7",
+    "metro-react-native-babel-preset": "0.73.10",
     "mocha": "^5.0.0",
     "moment": "^2.24.0",
     "object-hash": "^3.0.0",
@@ -106,14 +106,14 @@
     "react": "18.2.0",
     "react-autobind": "^1.0.6",
     "react-dom": "^18.2.0",
-    "react-native": "0.71.2",
+    "react-native": "0.71.12",
     "react-native-fs": "^2.20.0",
     "react-native-gesture-handler": "2.9.0",
     "react-native-haptic-feedback": "^1.11.0",
     "react-native-linear-gradient": "2.6.2",
     "react-native-mmkv": "2.6.1",
     "react-native-navigation": "7.32.1",
-    "react-native-reanimated": "3.1.0",
+    "react-native-reanimated": "3.4.0",
     "react-native-shimmer-placeholder": "^2.0.6",
     "react-native-svg": "^13.7.0",
     "react-native-svg-transformer": "^0.14.3",

src/components/gridListItem/index.tsx

@@ -189,11 +189,13 @@ class GridListItem extends Component<GridListItemProps> {
     const TextContainer = overlayText ? View : React.Fragment;
     const textContainerStyle = overlayText ? {style: [styles.overlayText, overlayTextContainerStyle]} : null;
     const imageBorderRadius = imageProps?.borderRadius;
+    // @ts-ignore hitSlop issues
+    const {hitSlop, ...otherContainerProps} = containerProps; // eslint-disable-line
 
     return (
       <Container
         style={[styles.container, alignToStart && styles.containerAlignedToStart, {width}, containerStyle]}
-        {...containerProps}
+        {...otherContainerProps}
         onPress={hasPress ? this.onItemPress : undefined}
         accessible={renderCustomItem ? true : undefined}
         {...Modifiers.extractAccessibilityProps(this.props)}

src/components/listItem/index.tsx

@@ -49,7 +49,14 @@ class ListItem extends Component<ListItemProps, ListItemState> {
 
   renderViewContainer = () => {
     const {pressed} = this.state;
-    const {containerStyle, style, underlayColor, ...others} = this.props;
+    const {
+      containerStyle,
+      style,
+      underlayColor,
+      // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+      hitSlop,
+      ...others
+    } = this.props;
     const pressedStyle = {backgroundColor: underlayColor};
     return (
       <View style={[this.styles.container, containerStyle]} {...others}>

src/components/marquee/index.tsx

@@ -76,6 +76,7 @@ function Marquee(props: MarqueeProps) {
     }
   }, [viewLayout, textLayout]);
 
+  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   const translateStyle = useAnimatedStyle(() => {
     if (offset.value) {
       return {
@@ -89,6 +90,7 @@ function Marquee(props: MarqueeProps) {
 
   return (
     <View style={[styles.container, containerStyle]} onLayout={onLayoutView}>
+      {/* @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881) */}
       <View reanimated style={[translateStyle]}>
         <Text style={[styles.text, labelStyle]} onLayout={onLayoutText}>
           {label}

src/components/segmentedControl/index.tsx

@@ -7,7 +7,6 @@ import Reanimated, {
   useAnimatedStyle,
   useSharedValue,
   withTiming,
-  WithTimingConfig,
   runOnJS
 } from 'react-native-reanimated';
 import {Colors, BorderRadiuses, Spacings} from '../../style';
@@ -16,7 +15,7 @@ import View from '../view';
 import Segment, {SegmentedControlItemProps} from './segment';
 
 const BORDER_WIDTH = 1;
-const TIMING_CONFIG: WithTimingConfig = {
+const TIMING_CONFIG = {
   duration: 300,
   easing: Easing.bezier(0.33, 1, 0.68, 1)
 };

src/components/sortableGridList/SortableItem.tsx

@@ -156,6 +156,7 @@ function SortableItem(props: PropsWithChildren<SortableItemProps & ReturnType<ty
       }
     });
 
+  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   const animatedStyle = useAnimatedStyle(() => {
     const scale = withSpring(isDragging.value ? 1.1 : 1);
     const zIndex = isDragging.value ? 100 : withTiming(0, animationConfig);
@@ -167,6 +168,7 @@ function SortableItem(props: PropsWithChildren<SortableItemProps & ReturnType<ty
   });
 
   return (
+    // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
     <View reanimated style={[style, animatedStyle]} onLayout={onLayout}>
       <GestureDetector gesture={dragOnLongPressGesture}>
         <View>{props.children}</View>

src/components/sortableGridList/index.tsx

@@ -63,7 +63,7 @@ function SortableGridList<T = any>(props: SortableGridListProps<T>) {
   return (
     <GestureHandlerRootView>
       <ScrollView contentContainerStyle={[styles.listContent, listContentStyle]}>
-        {data?.map((item, index) => _renderItem({item, index} as ListRenderItemInfo<ItemProps<T>>))}
+        {_.map(data, (item, index) => _renderItem({item, index} as ListRenderItemInfo<ItemProps<T>>))}
       </ScrollView>
     </GestureHandlerRootView>
   );

src/components/sortableList/index.tsx

@@ -17,7 +17,9 @@ function generateItemsOrder<ItemT extends SortableListItemProps>(data: SortableL
 }
 
 function generateLockedIds<ItemT extends SortableListItemProps>(data: SortableListProps<ItemT>['data']) {
+  // @ts-expect-error - not worth further time investment IMO, maybe it'll work some day
   return reduce(filter(data, item => item.locked),
+    // @ts-expect-error - not worth further time investment IMO, maybe it'll work some day
     (item, cur) => ({...item, [(cur as ItemT).id]: true}),
     {});
 }

src/components/tabController/PageCarousel.tsx

@@ -104,6 +104,7 @@ function PageCarousel(props: ScrollViewProps) {
     <Reanimated.ScrollView
       {...others}
       style={_style}
+      // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
       ref={carousel}
       horizontal
       pagingEnabled

src/components/tabController/TabBarItem.tsx

@@ -103,6 +103,7 @@ export interface TabControllerItemProps {
 interface Props extends TabControllerItemProps {
   index: number;
   targetPage: any; // TODO: typescript?
+  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   currentPage: Reanimated.Adaptable<number>;
   onLayout?: (event: LayoutChangeEvent, index: number) => void;
 }

src/incubator/Calendar/Header.tsx

@@ -58,11 +58,11 @@ const Header = (props: HeaderProps) => {
       return <Text style={styles.title}>{title}</Text>;
     }
     return (
-      // @ts-expect-error
       <AnimatedTextInput 
         value={getTitle(selectedDate.value)} // setting initial value
         {...{animatedProps}}
         editable={false}
+        // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
         style={styles.title}
       />);
   };

src/incubator/Calendar/TodayButton.tsx

@@ -16,6 +16,7 @@ const TodayButton = (props: TodayButtonProps) => {
   const {containerStyle, buttonProps} = props;
   const {selectedDate, setDate} = useContext(CalendarContext);
 
+  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   const animatedStyle = useAnimatedStyle(() => {
     return {
       transform: [
@@ -39,6 +40,7 @@ const TodayButton = (props: TodayButtonProps) => {
   [buttonProps]);
 
   return (
+    // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
     <View reanimated style={[styles.container, containerStyle, animatedStyle]}>
       <Button
         outline

src/incubator/Dialog/index.tsx

@@ -124,6 +124,7 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   const animatedStyle = useAnimatedStyle(() => {
     if (isVertical) {
       return {
@@ -199,6 +200,7 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>)
 
   const renderDialog = () => (
     <GestureDetector gesture={panGesture}>
+      {/* @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881) */}
       <View {...containerProps} reanimated style={style} onLayout={onLayout} ref={setRef} testID={testID}>
         {headerProps && <DialogHeader {...headerProps}/>}
         {children}

src/incubator/Slider/Thumb.tsx

@@ -85,6 +85,7 @@ const Thumb = (props: ThumbProps) => {
     });
   gesture.enabled(!disabled);
 
+  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   const animatedStyle = useAnimatedStyle(() => {
     const customStyle = isPressed.value ? activeStyle?.value : defaultStyle?.value;
     return {
@@ -107,6 +108,7 @@ const Thumb = (props: ThumbProps) => {
     <GestureDetector gesture={gesture}>
       <View
         reanimated
+        // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
         style={[styles.thumbPosition, styles.thumbShadow, animatedStyle]}
         hitSlop={hitSlop}
         onLayout={onThumbLayout}

src/incubator/Slider/index.tsx

@@ -332,6 +332,7 @@ const Slider = React.memo((props: Props) => {
     }
   }, []);
 
+  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   const trackAnimatedStyles = useAnimatedStyle(() => {
     if (useRange) {
       return {

src/incubator/TouchableOpacity.tsx

@@ -131,6 +131,7 @@ function TouchableOpacity(props: Props) {
     }
   });
 
+  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   const animatedStyle = useAnimatedStyle(() => {
     const activeColor = feedbackColor || backgroundColor;
     const opacity = interpolate(isActive.value, [0, 1], [1, activeOpacity]);
@@ -149,13 +150,11 @@ function TouchableOpacity(props: Props) {
 
   return (
     <TapGestureHandler
-      // @ts-expect-error
       onGestureEvent={tapGestureHandler}
       shouldCancelWhenOutside
       enabled={!disabled}
     >
       <Reanimated.View>
-        {/* @ts-expect-error */}
         <Container onGestureEvent={longPressGestureHandler} shouldCancelWhenOutside>
           <Reanimated.View
             {...others}

src/incubator/panView/index.tsx

@@ -60,6 +60,7 @@ const PanView = (props: Props) => {
     hiddenLocation
   });
 
+  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   const animatedStyle = useAnimatedStyle(() => {
     return {
       transform: [{translateX: translation.x.value}, {translateY: translation.y.value}]
@@ -69,6 +70,7 @@ const PanView = (props: Props) => {
   return (
     <View ref={setRef} style={containerStyle} onLayout={onLayout}>
       <PanGestureHandler onGestureEvent={isEmpty(directions) ? undefined : panGestureEvent}>
+        {/* @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881) */}
         <View reanimated style={animatedStyle}>
           <View {...others}>{children}</View>
         </View>