bump dev dependencies and React Native used for lint (#5225)

Author: Simek

docs/animated.md

@@ -192,7 +192,8 @@ For example, when working with horizontal scrolling gestures, you would do the f
           x: scrollX
         }
       }
-    }]
+    }],
+    {useNativeEvent: true}
  )}
 ```
 

docs/animatedvaluexy.md

@@ -17,13 +17,16 @@ const DraggableView = () => {
 
   const panResponder = PanResponder.create({
     onStartShouldSetPanResponder: () => true,
-    onPanResponderMove: Animated.event([
-      null,
-      {
-        dx: pan.x, // x,y are Animated.Value
-        dy: pan.y,
-      },
-    ]),
+    onPanResponderMove: Animated.event(
+      [
+        null,
+        {
+          dx: pan.x, // x,y are Animated.Value
+          dy: pan.y,
+        },
+      ],
+      {useNativeDriver: false},
+    ),
     onPanResponderRelease: () => {
       Animated.spring(
         pan, // Auto-multiplexed

docs/animations.md

@@ -293,15 +293,15 @@ Gestures, like panning or scrolling, and other events can map directly to animat
 For example, when working with horizontal scrolling gestures, you would do the following in order to map `event.nativeEvent.contentOffset.x` to `scrollX` (an `Animated.Value`):
 
 ```tsx
- onScroll={Animated.event(
-   // scrollX = e.nativeEvent.contentOffset.x
-   [{nativeEvent: {
-        contentOffset: {
-          x: scrollX
-        }
-      }
-    }]
- )}
+onScroll={Animated.event(
+  // scrollX = e.nativeEvent.contentOffset.x
+  [{
+    nativeEvent: {
+      contentOffset: { x: scrollX }
+    }
+  }],
+  {useNativeDriver: true}
+)}
 ```
 
 The following example implements a horizontal scrolling carousel where the scroll position indicators are animated using the `Animated.event` used in the `ScrollView`
@@ -338,15 +338,18 @@ const App = () => {
             horizontal={true}
             pagingEnabled
             showsHorizontalScrollIndicator={false}
-            onScroll={Animated.event([
-              {
-                nativeEvent: {
-                  contentOffset: {
-                    x: scrollX,
+            onScroll={Animated.event(
+              [
+                {
+                  nativeEvent: {
+                    contentOffset: {
+                      x: scrollX,
+                    },
                   },
                 },
-              },
-            ])}
+              ],
+              {useNativeDriver: true},
+            )}
             scrollEventThrottle={1}>
             {images.map((image, imageIndex) => {
               return (
@@ -459,7 +462,9 @@ const App = () => {
   const panResponder = useRef(
     PanResponder.create({
       onMoveShouldSetPanResponder: () => true,
-      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
+      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}], {
+        useNativeDriver: false,
+      }),
       onPanResponderRelease: () => {
         Animated.spring(pan, {
           toValue: {x: 0, y: 0},

docs/appstate.md

@@ -39,7 +39,7 @@ const AppStateExample = () => {
   useEffect(() => {
     const subscription = AppState.addEventListener('change', nextAppState => {
       if (
-        appState.current.match(/inactive|background/) &&
+        appState.current?.match(/inactive|background/) &&
         nextAppState === 'active'
       ) {
         console.log('App has come to the foreground!');

docs/dimensions.md

@@ -26,9 +26,14 @@ If you are targeting foldable devices or devices which can change the screen siz
 
 ## Example
 
-```SnackPlayer name=Dimensions%20Example
+```SnackPlayer name=Dimensions%20Example&ext=tsx
 import {useState, useEffect} from 'react';
-import {StyleSheet, Text, Dimensions} from 'react-native';
+import {
+  StyleSheet,
+  Text,
+  Dimensions,
+  type DimensionsPayload,
+} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
 const windowDimensions = Dimensions.get('window');
@@ -43,8 +48,10 @@ const App = () => {
   useEffect(() => {
     const subscription = Dimensions.addEventListener(
       'change',
-      ({window, screen}) => {
-        setDimensions({window, screen});
+      ({window, screen}: DimensionsPayload) => {
+        if (window && screen) {
+          setDimensions({window, screen});
+        }
       },
     );
     return () => subscription?.remove();

docs/drawerlayoutandroid.md

@@ -95,8 +95,12 @@ import {
   View,
 } from 'react-native';
 
+type DrawerLayoutAndroidInstance = React.ComponentRef<
+  typeof DrawerLayoutAndroid
+>;
+
 const App = () => {
-  const drawer = useRef<DrawerLayoutAndroid>(null);
+  const drawer = useRef<DrawerLayoutAndroidInstance>(null);
   const [drawerPosition, setDrawerPosition] = useState<'left' | 'right'>(
     'left',
   );

docs/flexbox.md

@@ -1099,12 +1099,17 @@ export default AlignSelfLayout;
 
 ```SnackPlayer name=Align%20Self&ext=tsx
 import {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import {
+  View,
+  TouchableOpacity,
+  Text,
+  StyleSheet,
+  type ViewStyle,
+} from 'react-native';
 import type {PropsWithChildren} from 'react';
-import type {FlexAlignType} from 'react-native';
 
 const AlignSelfLayout = () => {
-  const [alignSelf, setAlignSelf] = useState<FlexAlignType>('stretch');
+  const [alignSelf, setAlignSelf] = useState<ViewStyle['alignSelf']>('stretch');
 
   return (
     <PreviewLayout
@@ -1131,9 +1136,9 @@ const AlignSelfLayout = () => {
 
 type PreviewLayoutProps = PropsWithChildren<{
   label: string;
-  values: FlexAlignType[];
-  selectedValue: string;
-  setSelectedValue: (value: FlexAlignType) => void;
+  values: ViewStyle['alignSelf'][];
+  selectedValue: ViewStyle['alignSelf'];
+  setSelectedValue: (value: ViewStyle['alignSelf']) => void;
 }>;
 
 const PreviewLayout = ({

docs/improvingux.md

@@ -125,8 +125,10 @@ import {
   StyleSheet,
 } from 'react-native';
 
+type TextInputInstance = React.ComponentRef<typeof TextInput>;
+
 const App = () => {
-  const emailInput = useRef<TextInput>(null);
+  const emailInput = useRef<TextInputInstance>(null);
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
 
@@ -325,8 +327,10 @@ import {
   StyleSheet,
 } from 'react-native';
 
+type TextInputInstance = React.ComponentRef<typeof TextInput>;
+
 const App = () => {
-  const emailInput = useRef<TextInput>(null);
+  const emailInput = useRef<TextInputInstance>(null);
   const [email, setEmail] = useState('');
 
   const submit = () => {

docs/layout-props.md

@@ -197,8 +197,7 @@ import {
   StyleSheet,
   Text,
   View,
-  FlexAlignType,
-  FlexStyle,
+  ViewStyle,
 } from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -217,7 +216,7 @@ const App = () => {
     alignItems: alignItemsArr[alignItems],
     direction: directions[direction],
     flexWrap: wraps[wrap],
-  } as FlexStyle;
+  };
 
   const changeSetting = (
     value: number,
@@ -307,29 +306,29 @@ const App = () => {
   );
 };
 
-const flexDirections = [
+const flexDirections: ViewStyle['flexDirection'][] = [
   'row',
   'row-reverse',
   'column',
   'column-reverse',
-] as FlexStyle['flexDirection'][];
-const justifyContents = [
+];
+const justifyContents: ViewStyle['justifyContent'][] = [
   'flex-start',
   'flex-end',
   'center',
   'space-between',
   'space-around',
   'space-evenly',
-] as FlexStyle['justifyContent'][];
-const alignItemsArr = [
+];
+const alignItemsArr: ViewStyle['alignItems'][] = [
   'flex-start',
   'flex-end',
   'center',
   'stretch',
   'baseline',
-] as FlexAlignType[];
-const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
-const directions = ['inherit', 'ltr', 'rtl'];
+];
+const wraps: ViewStyle['flexWrap'][] = ['nowrap', 'wrap', 'wrap-reverse'];
+const directions: ViewStyle['direction'][] = ['inherit', 'ltr', 'rtl'];
 
 const styles = StyleSheet.create({
   container: {

docs/legacy/direct-manipulation.md

@@ -140,14 +140,16 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Forwarding%20setNativeProps&ext=tsx
-import {forwardRef} from 'react';
+import {forwardRef, ElementRef} from 'react';
 import {Text, TouchableOpacity, View} from 'react-native';
 
-const MyButton = forwardRef<View, {label: string}>((props, ref) => (
-  <View {...props} ref={ref} style={{marginTop: 50}}>
-    <Text>{props.label}</Text>
-  </View>
-));
+const MyButton = forwardRef<ElementRef<typeof View>, {label: string}>(
+  (props, ref) => (
+    <View {...props} ref={ref} style={{marginTop: 50}}>
+      <Text>{props.label}</Text>
+    </View>
+  ),
+);
 
 const App = () => (
   <TouchableOpacity>
@@ -229,8 +231,10 @@ import {
   View,
 } from 'react-native';
 
+type TextInputInstance = React.ComponentRef<typeof TextInput>;
+
 const App = () => {
-  const inputRef = useRef<TextInput>(null);
+  const inputRef = useRef<TextInputInstance>(null);
   const editText = useCallback(() => {
     inputRef.current?.setNativeProps({text: 'Edited Text'});
   }, []);
@@ -379,9 +383,12 @@ type Measurements = {
   height: number;
 };
 
+type TextInstance = React.ComponentRef<typeof Text>;
+type ViewInstance = React.ComponentRef<typeof View>;
+
 const App = () => {
-  const textContainerRef = useRef<View>(null);
-  const textRef = useRef<Text>(null);
+  const textContainerRef = useRef<ViewInstance>(null);
+  const textRef = useRef<TextInstance>(null);
   const [measure, setMeasure] = useState<Measurements | null>(null);
 
   useEffect(() => {