App.tsx

import {NavigationContainer} from '@react-navigation/native';
import {
  createNativeStackNavigator,
  NativeStackScreenProps,
} from '@react-navigation/native-stack';
import {useState} from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';
import Animated, {useSharedValue} from 'react-native-reanimated';

export type StackParamList = {
  First: undefined;
  Second: undefined;
  Third: undefined;
};

const Stack = createNativeStackNavigator<StackParamList>();

const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <View>
      <Text>Rerenders: {count}</Text>
      <Button
        title="Trigger Rerender"
        onPress={() => setCount(count + 1)}
        color="#aaa"
      />
    </View>
  );
};

const First = ({navigation}: NativeStackScreenProps<StackParamList>) => {
  const animatedValue = useSharedValue(1);

  return (
    <View style={styles.container}>
      <Animated.View
        style={[
          styles.animatedContainer,
          {transform: [{scale: animatedValue}]},
        ]}>
        <Text>Animated.View</Text>
      </Animated.View>
      <Button
        title="Go Next"
        onPress={() => {
          navigation.navigate('Second');
        }}
      />
    </View>
  );
};

const Second = ({navigation}: NativeStackScreenProps<StackParamList>) => {
  return (
    <View style={styles.container}>
      <Counter />
      <Button
        title="Go Next"
        onPress={() => {
          navigation.navigate('Third');
        }}
      />
    </View>
  );
};

const Third = ({navigation}: NativeStackScreenProps<StackParamList>) => {
  return (
    <View style={styles.container}>
      <Counter />
      <Button title="Go Back" onPress={navigation.goBack} />
    </View>
  );
};

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="First" component={First} />
        <Stack.Screen name="Second" component={Second} />
        <Stack.Screen name="Third" component={Third} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    gap: 20,
    justifyContent: 'center',
    alignItems: 'center',
    marginVertical: 120,
    marginHorizontal: 20,
    borderWidth: 1,
    borderStyle: 'dashed',
  },
  animatedContainer: {
    width: 150,
    height: 150,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#a2d2ff',
  },
});