Fix all autoFixable problems inside app/common

apps/common-app/src/App.tsx

@@ -15,24 +15,14 @@ import {
   GestureHandlerRootView,
   RectButton,
 } from 'react-native-gesture-handler';
-import {
-  HeaderBackButton,
-  HeaderBackButtonProps,
-} from '@react-navigation/elements';
-import {
-  NativeStackNavigationProp,
-  createNativeStackNavigator,
-} from '@react-navigation/native-stack';
-import {
-  NavigationContainer,
-  NavigationProp,
-  PathConfigMap,
-  useNavigation,
-} from '@react-navigation/native';
-import {
-  StackNavigationProp,
-  createStackNavigator,
-} from '@react-navigation/stack';
+import type { HeaderBackButtonProps } from '@react-navigation/elements';
+import { HeaderBackButton } from '@react-navigation/elements';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import type { NavigationProp, PathConfigMap } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
+import type { StackNavigationProp } from '@react-navigation/stack';
+import { createStackNavigator } from '@react-navigation/stack';
 
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { EXAMPLES } from './examples';
@@ -53,7 +43,7 @@ interface HomeScreenProps {
     | NativeStackNavigationProp<RootStackParamList, 'Home'>;
 }
 
-const EXAMPLES_NAMES = Object.keys(EXAMPLES) as (keyof typeof EXAMPLES)[];
+const EXAMPLES_NAMES = Object.keys(EXAMPLES);
 
 function findExamples(search: string) {
   if (search === '') {
@@ -181,7 +171,7 @@ function BackButton(props: HeaderBackButtonProps) {
 const PERSISTENCE_KEY = 'NAVIGATION_STATE_V1';
 
 export default function App() {
-  const [isReady, setIsReady] = React.useState(__DEV__ ? false : true);
+  const [isReady, setIsReady] = React.useState(!__DEV__);
   const [initialState, setInitialState] = React.useState();
 
   React.useEffect(() => {

apps/common-app/src/examples/AnimatedTabBarExample.tsx

@@ -24,7 +24,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import Svg, { Path } from 'react-native-svg';
 import * as shape from 'd3-shape';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import type { IconProp } from '@fortawesome/fontawesome-svg-core';
 
 const { width, height } = Dimensions.get('window');
 

apps/common-app/src/examples/ChatHeadsExample.tsx

@@ -8,10 +8,8 @@ import Animated, {
   withSpring,
   clamp,
 } from 'react-native-reanimated';
-import {
-  PanGestureHandler,
-  PanGestureHandlerGestureEvent,
-} from 'react-native-gesture-handler';
+import type { PanGestureHandlerGestureEvent } from 'react-native-gesture-handler';
+import { PanGestureHandler } from 'react-native-gesture-handler';
 
 const { width: windowWidth, height: windowHeight } = Dimensions.get('window');
 

apps/common-app/src/examples/ComposedHandlerInternalMergingExample.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Text, View, StyleSheet } from 'react-native';
 import type { NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
+import type { EventHandlerProcessed } from 'react-native-reanimated';
 import Animated, {
-  EventHandlerProcessed,
   interpolateColor,
   useAnimatedScrollHandler,
   useAnimatedStyle,

apps/common-app/src/examples/CubesExample.tsx

@@ -222,7 +222,7 @@ function CubeWithEulerAngles() {
       transformOrigin(matrix, origin);
 
       return {
-        transform: [{ perspective: 1000 }, { matrix: matrix }],
+        transform: [{ perspective: 1000 }, { matrix }],
         backgroundColor: sidesColors[i],
       };
     })
@@ -261,7 +261,7 @@ function CubeWithQuaternions() {
       transformOrigin(matrix, origin);
 
       return {
-        transform: [{ perspective: 1000 }, { matrix: matrix }],
+        transform: [{ perspective: 1000 }, { matrix }],
         backgroundColor: sidesColors[i],
       };
     })

apps/common-app/src/examples/CustomHandler/AnimatedText.tsx

@@ -1,16 +1,8 @@
 import React from 'react';
-import {
-  StyleProp,
-  StyleSheet,
-  TextInput,
-  TextInputProps,
-  TextStyle,
-} from 'react-native';
-import Animated, {
-  SharedValue,
-  useAnimatedProps,
-} from 'react-native-reanimated';
-import type { AnimatedStyle } from 'react-native-reanimated';
+import type { StyleProp, TextInputProps, TextStyle } from 'react-native';
+import { StyleSheet, TextInput } from 'react-native';
+import Animated, { useAnimatedProps } from 'react-native-reanimated';
+import type { AnimatedStyle, SharedValue } from 'react-native-reanimated';
 
 Animated.addWhitelistedNativeProps({ text: true });
 

apps/common-app/src/examples/CustomHandler/PagerExample.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
 import Animated, {
-  SharedValue,
   useDerivedValue,
   useSharedValue,
 } from 'react-native-reanimated';

apps/common-app/src/examples/CustomHandler/useAnimatedPagerHandler.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   PageScrollStateChangedNativeEvent,
   PagerViewOnPageScrollEvent,
   PagerViewOnPageSelectedEvent,

apps/common-app/src/examples/DragAndSnapExample.tsx

@@ -8,10 +8,8 @@ import Animated, {
   interpolate,
   Extrapolation,
 } from 'react-native-reanimated';
-import {
-  PanGestureHandler,
-  PanGestureHandlerGestureEvent,
-} from 'react-native-gesture-handler';
+import type { PanGestureHandlerGestureEvent } from 'react-native-gesture-handler';
+import { PanGestureHandler } from 'react-native-gesture-handler';
 
 export default function DragAndSnapExample() {
   const translation = {

apps/common-app/src/examples/EmojiWaterfallExample.tsx

@@ -1,6 +1,6 @@
+import type { SharedValue } from 'react-native-reanimated';
 import Animated, {
   Easing,
-  SharedValue,
   interpolate,
   useAnimatedStyle,
   useSharedValue,

apps/common-app/src/examples/ExtrapolationExample.tsx

@@ -8,10 +8,8 @@ import Animated, {
   withTiming,
   Extrapolation,
 } from 'react-native-reanimated';
-import {
-  PanGestureHandler,
-  PanGestureHandlerGestureEvent,
-} from 'react-native-gesture-handler';
+import type { PanGestureHandlerGestureEvent } from 'react-native-gesture-handler';
+import { PanGestureHandler } from 'react-native-gesture-handler';
 
 export default function ExtrapolationExample() {
   const translation = {

apps/common-app/src/examples/FrameCallbackExample.tsx

@@ -1,5 +1,5 @@
+import type { FrameInfo } from 'react-native-reanimated';
 import Animated, {
-  FrameInfo,
   useAnimatedStyle,
   useFrameCallback,
   useSharedValue,

apps/common-app/src/examples/Game2048Example.tsx

@@ -1,4 +1,5 @@
-import { Text, StyleSheet, View, ColorValue, Alert } from 'react-native';
+import type { ColorValue } from 'react-native';
+import { Text, StyleSheet, View, Alert } from 'react-native';
 import Animated, { LinearTransition, ZoomIn } from 'react-native-reanimated';
 
 import React from 'react';

apps/common-app/src/examples/GestureHandlerExample.tsx

@@ -3,15 +3,17 @@ import Animated, {
   useSharedValue,
   withSpring,
 } from 'react-native-reanimated';
-import {
-  Gesture,
-  GestureDetector,
-  GestureHandlerRootView,
+import type {
   GestureStateManager,
   GestureTouchEvent,
   GestureUpdateEvent,
   PanGestureChangeEventPayload,
 } from 'react-native-gesture-handler';
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+} from 'react-native-gesture-handler';
 
 import React from 'react';
 import { StyleSheet } from 'react-native';

apps/common-app/src/examples/IPodExample.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { View, StyleSheet, Dimensions, Text } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
@@ -9,12 +10,9 @@ import Animated, {
   useAnimatedGestureHandler,
   Extrapolation,
   interpolate,
-  SharedValue,
 } from 'react-native-reanimated';
-import {
-  PanGestureHandler,
-  PanGestureHandlerGestureEvent,
-} from 'react-native-gesture-handler';
+import type { PanGestureHandlerGestureEvent } from 'react-native-gesture-handler';
+import { PanGestureHandler } from 'react-native-gesture-handler';
 
 const data = [
   { artist: 'Nirvana', song: 'Smells Like Teen Spirit' },

apps/common-app/src/examples/JSPropsExample.tsx

@@ -1,4 +1,5 @@
-import { TextInput, View, StyleSheet, ColorValue } from 'react-native';
+import type { ColorValue } from 'react-native';
+import { TextInput, View, StyleSheet } from 'react-native';
 import React from 'react';
 import Svg, { Path, Circle, G } from 'react-native-svg';
 import Animated, {

apps/common-app/src/examples/LayoutAnimations/Carousel.tsx

@@ -1,12 +1,6 @@
 import Animated, { SlideInLeft, SlideOutRight } from 'react-native-reanimated';
-import {
-  Button,
-  Image,
-  ImageSourcePropType,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
+import type { ImageSourcePropType } from 'react-native';
+import { Button, Image, StyleSheet, Text, View } from 'react-native';
 import React, { useState } from 'react';
 
 const AnimatedImage = Animated.createAnimatedComponent(Image);

apps/common-app/src/examples/LayoutAnimations/CustomLayout.tsx

@@ -1,5 +1,5 @@
+import type { LayoutAnimationFunction } from 'react-native-reanimated';
 import Animated, {
-  LayoutAnimationFunction,
   makeMutable,
   withDelay,
   withSequence,

apps/common-app/src/examples/LayoutAnimations/HabitsExample.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Platform, Pressable, StyleSheet, View, Text } from 'react-native';
+import type { AnimatedProps } from 'react-native-reanimated';
 import Animated, {
   FadeInLeft,
   FadeInDown,
   ZoomIn,
   LightSpeedInLeft,
   BounceIn,
-  AnimatedProps,
   FadeOut,
 } from 'react-native-reanimated';
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';

apps/common-app/src/examples/LayoutAnimations/Modal.tsx

@@ -1,7 +1,9 @@
-import Animated, {
+import type {
   EntryAnimationsValues,
   EntryExitAnimationFunction,
   ExitAnimationsValues,
+} from 'react-native-reanimated';
+import Animated, {
   useAnimatedStyle,
   withTiming,
 } from 'react-native-reanimated';

apps/common-app/src/examples/LayoutAnimations/ModalNewAPI.tsx

@@ -1,7 +1,9 @@
-import Animated, {
+import type {
   EntryAnimationsValues,
   EntryExitAnimationFunction,
   ExitAnimationsValues,
+} from 'react-native-reanimated';
+import Animated, {
   Layout,
   withDelay,
   withTiming,

apps/common-app/src/examples/LayoutAnimations/NativeModals.tsx

@@ -1,11 +1,9 @@
 import { Alert, Modal, Pressable, StyleSheet, Text, View } from 'react-native';
-import {
-  NativeStackNavigationProp,
-  createNativeStackNavigator,
-} from '@react-navigation/native-stack';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React, { useState } from 'react';
 
-import { ParamListBase } from '@react-navigation/native';
+import type { ParamListBase } from '@react-navigation/native';
 
 // import { createStackNavigator } from "@react-navigation/stack";
 

apps/common-app/src/examples/LayoutAnimations/NestedNativeStacksWithLayout.tsx

@@ -2,10 +2,8 @@ import Animated, { SlideOutLeft, SlideOutRight } from 'react-native-reanimated';
 import { Button, StyleSheet, View } from 'react-native';
 
 import React from 'react';
-import {
-  NativeStackScreenProps,
-  createNativeStackNavigator,
-} from '@react-navigation/native-stack';
+import type { NativeStackScreenProps } from '@react-navigation/native-stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 type ParamList = {
   First?: {};

apps/common-app/src/examples/LayoutAnimations/ReactionsCounterExample.tsx

@@ -1,6 +1,8 @@
-import Animated, {
+import type {
   EntryAnimationsValues,
   ExitAnimationsValues,
+} from 'react-native-reanimated';
+import Animated, {
   useAnimatedStyle,
   useSharedValue,
   withDelay,

apps/common-app/src/examples/LayoutAnimations/WaterfallGridExample.tsx

@@ -1,5 +1,5 @@
+import type { BaseAnimationBuilder } from 'react-native-reanimated';
 import Animated, {
-  BaseAnimationBuilder,
   BounceOut,
   CurvedTransition,
   FadingTransition,
@@ -11,7 +11,8 @@ import Animated, {
   SequencedTransition,
   combineTransition,
 } from 'react-native-reanimated';
-import { Image, LayoutChangeEvent, Text, View, StyleSheet } from 'react-native';
+import type { LayoutChangeEvent } from 'react-native';
+import { Image, Text, View, StyleSheet } from 'react-native';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { ScrollView, TapGestureHandler } from 'react-native-gesture-handler';
 
@@ -120,7 +121,7 @@ export function WaterfallGrid({
           key={pok.address}
           style={[
             {
-              width: width,
+              width,
               height: pokHeight,
               backgroundColor: pok.color,
               left: cur * width + (cur + 1) * margin,
@@ -135,7 +136,7 @@ export function WaterfallGrid({
             <AnimatedImage
               layout={layoutTransition}
               source={{ uri: pok.address }}
-              style={{ width: width, height: width }}
+              style={{ width, height: width }}
             />
           </TapGestureHandler>
         </Animated.View>
@@ -148,7 +149,7 @@ export function WaterfallGrid({
       {cardsMemo.length === 0 && <Text> Loading </Text>}
       {cardsMemo.length !== 0 && (
         <ScrollView>
-          <View style={{ height: height }}>{cardsMemo}</View>
+          <View style={{ height }}>{cardsMemo}</View>
         </ScrollView>
       )}
     </View>
@@ -167,7 +168,7 @@ export default function WaterfallGridExample() {
           style={styles.picker}
           itemStyle={{ height: 50 }}
           onValueChange={(itemValue) => {
-            setSelectedTransition(itemValue as string);
+            setSelectedTransition(itemValue);
           }}>
           <Picker.Item label="LinearTransition" value="LinearTransition" />
           <Picker.Item

apps/common-app/src/examples/LightBoxExample.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useRef, useEffect, Component } from 'react';
+import type { Component } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import Animated, {
   useSharedValue,
   useAnimatedStyle,