From a03f6fdac0b268acb6d5f30f80f913169aa90c56 Mon Sep 17 00:00:00 2001
From: Maciej Stosio <maciekstosio@users.noreply.github.com>
Date: Fri, 4 Oct 2024 16:47:42 +0200
Subject: [PATCH 1/6] feat: allow preload using activityState

---
 .../com/swmansion/rnscreens/ScreenStack.kt    |  30 +-
 apps/src/tests/TestPreload.tsx                | 369 ++++++++++++++++++
 apps/src/tests/index.ts                       |   1 +
 ios/RNSScreenStack.mm                         |   3 +-
 4 files changed, 396 insertions(+), 7 deletions(-)
 create mode 100644 apps/src/tests/TestPreload.tsx

diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenStack.kt b/android/src/main/java/com/swmansion/rnscreens/ScreenStack.kt
index a4e6fea83e..75453fa7ae 100644
--- a/android/src/main/java/com/swmansion/rnscreens/ScreenStack.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/ScreenStack.kt
@@ -104,7 +104,7 @@ class ScreenStack(
 
         for (i in screenWrappers.indices.reversed()) {
             val screenWrapper = getScreenFragmentWrapperAt(i)
-            if (!dismissedWrappers.contains(screenWrapper)) {
+            if (!dismissedWrappers.contains(screenWrapper) && screenWrapper.screen.activityState !== Screen.ActivityState.INACTIVE) {
                 if (newTop == null) {
                     newTop = screenWrapper
                 } else {
@@ -182,8 +182,16 @@ class ScreenStack(
                                 R.anim.rns_no_animation_medium,
                             )
                         StackAnimation.FADE_FROM_BOTTOM -> it.setCustomAnimations(R.anim.rns_fade_from_bottom, R.anim.rns_no_animation_350)
-                        StackAnimation.IOS_FROM_RIGHT -> it.setCustomAnimations(R.anim.rns_ios_from_right_foreground_open, R.anim.rns_ios_from_right_background_open)
-                        StackAnimation.IOS_FROM_LEFT -> it.setCustomAnimations(R.anim.rns_ios_from_left_foreground_open, R.anim.rns_ios_from_left_background_open)
+                        StackAnimation.IOS_FROM_RIGHT ->
+                            it.setCustomAnimations(
+                                R.anim.rns_ios_from_right_foreground_open,
+                                R.anim.rns_ios_from_right_background_open,
+                            )
+                        StackAnimation.IOS_FROM_LEFT ->
+                            it.setCustomAnimations(
+                                R.anim.rns_ios_from_left_foreground_open,
+                                R.anim.rns_ios_from_left_background_open,
+                            )
                     }
                 } else {
                     when (stackAnimation) {
@@ -221,8 +229,16 @@ class ScreenStack(
                                 R.anim.rns_slide_out_to_bottom,
                             )
                         StackAnimation.FADE_FROM_BOTTOM -> it.setCustomAnimations(R.anim.rns_no_animation_250, R.anim.rns_fade_to_bottom)
-                        StackAnimation.IOS_FROM_RIGHT -> it.setCustomAnimations(R.anim.rns_ios_from_right_background_close, R.anim.rns_ios_from_right_foreground_close)
-                        StackAnimation.IOS_FROM_LEFT -> it.setCustomAnimations(R.anim.rns_ios_from_left_background_close, R.anim.rns_ios_from_left_foreground_close)
+                        StackAnimation.IOS_FROM_RIGHT ->
+                            it.setCustomAnimations(
+                                R.anim.rns_ios_from_right_background_close,
+                                R.anim.rns_ios_from_right_foreground_close,
+                            )
+                        StackAnimation.IOS_FROM_LEFT ->
+                            it.setCustomAnimations(
+                                R.anim.rns_ios_from_left_background_close,
+                                R.anim.rns_ios_from_left_foreground_close,
+                            )
                     }
                 }
             }
@@ -258,7 +274,9 @@ class ScreenStack(
                     break
                 }
                 // detach all screens that should not be visible
-                if (fragmentWrapper !== newTop && !dismissedWrappers.contains(fragmentWrapper)) {
+                if ((fragmentWrapper !== newTop && !dismissedWrappers.contains(fragmentWrapper)) ||
+                    fragmentWrapper.screen.activityState === Screen.ActivityState.INACTIVE
+                ) {
                     it.remove(fragmentWrapper.fragment)
                 }
             }
diff --git a/apps/src/tests/TestPreload.tsx b/apps/src/tests/TestPreload.tsx
new file mode 100644
index 0000000000..58e4ae91f0
--- /dev/null
+++ b/apps/src/tests/TestPreload.tsx
@@ -0,0 +1,369 @@
+import * as React from 'react';
+
+
+ import { View, Text, Button } from 'react-native';
+ import {
+   useNavigation,
+   CommonActions,
+   NavigationContainer,
+ } from '@react-navigation/native';
+ import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+ function HomeScreen() {
+   const navigation = useNavigation();
+
+   return (
+     <View
+       style={{
+         flex: 1,
+         gap: 8,
+         alignItems: 'center',
+         justifyContent: 'center',
+       }}
+     >
+       <Text>Home!</Text>
+       <Button
+         title='Navigate to Home'
+         onPress={() => {
+           navigation.dispatch(
+             CommonActions.navigate('Home2')
+           );
+         }}
+       />
+       <Button
+         title='Preload CardProfile'
+         onPress={() => {
+           navigation.dispatch(
+             CommonActions.preload('CardProfile', { user: 'jane' })
+           );
+         }}
+       />
+       <Button
+         title='Navigate to CardProfile'
+         onPress={() => {
+           navigation.dispatch(
+             CommonActions.navigate('CardProfile', { user: 'jane' })
+           );
+         }}
+       />
+       <Button
+         title='Preload ModalProfile'
+         onPress={() => {
+           navigation.dispatch(
+             CommonActions.preload('ModalProfile', { user: 'jane' })
+           );
+         }}
+       />
+       <Button
+         title='Navigate to ModalProfile'
+         onPress={() => {
+           navigation.dispatch(
+             CommonActions.navigate('ModalProfile', { user: 'jane' })
+           );
+         }}
+       />
+       <Button
+         title='Preload TabScreen'
+         onPress={() => {
+           navigation.dispatch(
+             CommonActions.preload('TabScreen', { user: 'jane' })
+           );
+         }}
+       />
+       <Button
+         title='Navigate to TabScreen'
+         onPress={() => {
+           navigation.dispatch(
+             CommonActions.navigate('TabScreen', { user: 'jane' })
+           );
+         }}
+       />
+     </View>
+   );
+ }
+
+ function ProfileScreen({ route }: any) {
+   const navigation = useNavigation();
+   const [startTime] = React.useState(Date.now());
+   const [endTime, setEndTime] = React.useState<number | null>(null);
+
+   React.useEffect(() => {
+     const unsubscribe = navigation.addListener('focus', () => {
+       setEndTime(Date.now());
+     });
+
+     return () => {
+       unsubscribe();
+     };
+   }, [navigation]);
+
+   return (
+     <View
+       style={{
+         flex: 1,
+         gap: 8,
+         alignItems: 'center',
+         justifyContent: 'center',
+       }}
+     >
+       <Text>Profile!</Text>
+       <Text>{route.params.user}'s profile</Text>
+       <Text>Preloaded for: {endTime ? endTime - startTime : 'N/A'}ms</Text>
+     </View>
+   );
+ }
+
+ const Tab = createBottomTabNavigator();
+ const StackTabA = createNativeStackNavigator();
+
+ function TabA() {
+  return (
+    <StackTabA.Navigator>
+      <StackTabA.Screen name="TabA_1" component={TabA_1} />
+      <StackTabA.Screen name="TabA_2" component={TabA_2} />
+    </StackTabA.Navigator>
+  );
+}
+
+function TabA_1() {
+  const navigation = useNavigation();
+  const [startTime] = React.useState(Date.now());
+  const [endTime, setEndTime] = React.useState<number | null>(null);
+
+  React.useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', () => {
+      setEndTime(Date.now());
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [navigation]);
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        gap: 8,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Text>TabA_1!</Text>
+      <Text>Preloaded for: {endTime ? endTime - startTime : 'N/A'}ms</Text>
+      <Button
+         title='Preload TabA_2'
+         onPress={() => {
+           navigation.dispatch(
+             CommonActions.preload('TabA_2', { user: 'jane' })
+           );
+         }}
+       />
+      <Button
+         title='Navigate to TabA_2'
+         onPress={() => {
+           navigation.dispatch(
+             CommonActions.navigate('TabA_2', { user: 'jane' })
+           );
+         }}
+       />
+    </View>
+  );
+}
+
+function TabA_2() {
+  const navigation = useNavigation();
+  const [startTime] = React.useState(Date.now());
+  const [endTime, setEndTime] = React.useState<number | null>(null);
+
+  React.useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', () => {
+      setEndTime(Date.now());
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [navigation]);
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        gap: 8,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Text>TabA_2!</Text>
+      <Text>Preloaded for: {endTime ? endTime - startTime : 'N/A'}ms</Text>
+      <Button
+         title='Preload ModalProfile'
+         onPress={() => {
+           navigation.dispatch(
+             CommonActions.preload('ModalProfile', { user: 'jane' })
+           );
+         }}
+       />
+       <Button
+         title='Navigate to ModalProfile'
+         onPress={() => {
+           navigation.dispatch(
+             CommonActions.navigate('ModalProfile', { user: 'jane' })
+           );
+         }}
+       />
+    </View>
+  );
+}
+
+const StackTabB = createNativeStackNavigator();
+
+function TabB() {
+ return (
+   <StackTabA.Navigator>
+     <StackTabA.Screen name="TabB_1" component={TabB_1} />
+     <StackTabA.Screen name="TabB_2" component={TabB_2} />
+   </StackTabA.Navigator>
+ );
+}
+
+function TabB_1() {
+ const navigation = useNavigation();
+ const [startTime] = React.useState(Date.now());
+ const [endTime, setEndTime] = React.useState<number | null>(null);
+
+ React.useEffect(() => {
+   const unsubscribe = navigation.addListener('focus', () => {
+     setEndTime(Date.now());
+   });
+
+   return () => {
+     unsubscribe();
+   };
+ }, [navigation]);
+
+ return (
+   <View
+     style={{
+       flex: 1,
+       gap: 8,
+       alignItems: 'center',
+       justifyContent: 'center',
+     }}
+   >
+     <Text>TabB_1!</Text>
+     <Text>Preloaded for: {endTime ? endTime - startTime : 'N/A'}ms</Text>
+     <Button
+        title='Preload TabB_2'
+        onPress={() => {
+          navigation.dispatch(
+            CommonActions.preload('TabB_2', { user: 'jane' })
+          );
+        }}
+      />
+     <Button
+        title='Navigate to TabB_2'
+        onPress={() => {
+          navigation.dispatch(
+            CommonActions.navigate('TabB_2', { user: 'jane' })
+          );
+        }}
+      />
+   </View>
+ );
+}
+
+function TabB_2() {
+ const navigation = useNavigation();
+ const [startTime] = React.useState(Date.now());
+ const [endTime, setEndTime] = React.useState<number | null>(null);
+
+ React.useEffect(() => {
+   const unsubscribe = navigation.addListener('focus', () => {
+     setEndTime(Date.now());
+   });
+
+   return () => {
+     unsubscribe();
+   };
+ }, [navigation]);
+
+ return (
+   <View
+     style={{
+       flex: 1,
+       gap: 8,
+       alignItems: 'center',
+       justifyContent: 'center',
+     }}
+   >
+     <Text>TabB_2!</Text>
+     <Text>Preloaded for: {endTime ? endTime - startTime : 'N/A'}ms</Text>
+     <Button
+         title='Preload ModalProfile'
+         onPress={() => {
+           navigation.dispatch(
+             CommonActions.preload('ModalProfile', { user: 'jane' })
+           );
+         }}
+       />
+       <Button
+         title='Navigate to ModalProfile'
+         onPress={() => {
+           navigation.dispatch(
+             CommonActions.navigate('ModalProfile', { user: 'jane' })
+           );
+         }}
+       />
+   </View>
+ );
+}
+
+
+ function TabScreen({ route }: any) {
+
+  console.log('route?.params?.user', route?.params?.user);
+
+  return (
+    <Tab.Navigator>
+      <Tab.Screen name="TabA" component={TabA} />
+      <Tab.Screen name="TabB" component={TabB} />
+    </Tab.Navigator>
+  );
+}
+
+ const Stack = createNativeStackNavigator();
+
+ const App = () => (
+   <NavigationContainer>
+     <Stack.Navigator>
+       <Stack.Screen
+         name="Home"
+         component={HomeScreen}
+       />
+       <Stack.Screen
+         name="Home2"
+         component={HomeScreen}
+         options={{ presentation: 'card' }}
+       />
+       <Stack.Screen
+         name="CardProfile"
+         component={ProfileScreen}
+         options={{ presentation: 'card' }}
+       />
+       <Stack.Screen
+         name="ModalProfile"
+         component={ProfileScreen}
+         options={{ presentation: 'modal' }}
+       />
+       <Stack.Screen
+         name="TabScreen"
+         component={TabScreen}
+       />
+     </Stack.Navigator>
+   </NavigationContainer>
+ );
+
+ export default App;
\ No newline at end of file
diff --git a/apps/src/tests/index.ts b/apps/src/tests/index.ts
index eea1285008..ce795171ee 100644
--- a/apps/src/tests/index.ts
+++ b/apps/src/tests/index.ts
@@ -114,4 +114,5 @@ export { default as Test2282 } from './Test2282';
 export { default as Test2332 } from './Test2332';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
 export { default as TestHeader } from './TestHeader';
+export { default as TestPreload } from './TestPreload';
 export { default as TestModalNavigation } from './TestModalNavigation';
diff --git a/ios/RNSScreenStack.mm b/ios/RNSScreenStack.mm
index 14d1872b50..c4ae120309 100644
--- a/ios/RNSScreenStack.mm
+++ b/ios/RNSScreenStack.mm
@@ -641,7 +641,7 @@ - (void)updateContainer
   NSMutableArray<UIViewController *> *pushControllers = [NSMutableArray new];
   NSMutableArray<UIViewController *> *modalControllers = [NSMutableArray new];
   for (RNSScreenView *screen in _reactSubviews) {
-    if (!screen.dismissed && screen.controller != nil) {
+    if (!screen.dismissed && screen.controller != nil && screen.activityState != RNSActivityStateInactive) {
       if (pushControllers.count == 0) {
         // first screen on the list needs to be places as "push controller"
         [pushControllers addObject:screen.controller];
@@ -915,6 +915,7 @@ - (void)navigationController:(UINavigationController *)navigationController
 - (void)markChildUpdated
 {
   // do nothing
+  [self updateContainer];
 }
 
 - (void)didUpdateChildren

From 1e7baada817f934ec39aee00d6543ec52f80b6d4 Mon Sep 17 00:00:00 2001
From: Maciej Stosio <maciekstosio@users.noreply.github.com>
Date: Wed, 9 Oct 2024 12:59:12 +0200
Subject: [PATCH 2/6] feat: assert activityState progression in NativeStack

---
 .../java/com/swmansion/rnscreens/Screen.kt    | 17 ++++-
 .../tests/TestActivityStateProgression.tsx    | 63 +++++++++++++++++++
 apps/src/tests/index.ts                       |  1 +
 ios/RNSScreen.mm                              |  4 ++
 react-navigation                              |  2 +-
 src/components/Screen.tsx                     | 14 +++++
 src/components/helpers/usePrevious.tsx        | 11 ++++
 7 files changed, 108 insertions(+), 4 deletions(-)
 create mode 100644 apps/src/tests/TestActivityStateProgression.tsx
 create mode 100644 src/components/helpers/usePrevious.tsx

diff --git a/android/src/main/java/com/swmansion/rnscreens/Screen.kt b/android/src/main/java/com/swmansion/rnscreens/Screen.kt
index 68956f02bc..7318327e75 100644
--- a/android/src/main/java/com/swmansion/rnscreens/Screen.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/Screen.kt
@@ -234,6 +234,9 @@ class Screen(
         if (activityState == this.activityState) {
             return
         }
+        if (container is ScreenStack && this.activityState != null && activityState.toInt() < this.activityState!!.toInt()) {
+            throw IllegalStateException("[RNScreens] activityState can only progress in NativeStack")
+        }
         this.activityState = activityState
         container?.notifyChildUpdate()
     }
@@ -478,9 +481,17 @@ class Screen(
     }
 
     enum class ActivityState {
-        INACTIVE,
-        TRANSITIONING_OR_BELOW_TOP,
-        ON_TOP,
+        INACTIVE {
+            override fun toInt() = 0
+        },
+        TRANSITIONING_OR_BELOW_TOP {
+            override fun toInt() = 1
+        },
+        ON_TOP {
+            override fun toInt() = 2
+        }, ;
+
+        abstract fun toInt(): Int
     }
 
     enum class WindowTraits {
diff --git a/apps/src/tests/TestActivityStateProgression.tsx b/apps/src/tests/TestActivityStateProgression.tsx
new file mode 100644
index 0000000000..e69f97a730
--- /dev/null
+++ b/apps/src/tests/TestActivityStateProgression.tsx
@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { View, Text, Button } from 'react-native';
+import { Screen, ScreenStack } from '../../../src';
+
+function HomeScreen({setActivityState}: {setActivityState: (state: 0 | 1 | 2) => void}) {
+  console.log("Render home")
+   return (
+     <View
+       style={{
+         flex: 1,
+         gap: 8,
+         alignItems: 'center',
+         justifyContent: 'center',
+       }}
+     >
+       <Text>Home!</Text>
+       <Button 
+          title='Set Activity State to 2'
+          onPress={() => setActivityState(2)} 
+       />
+     </View>
+   );
+ }
+
+function ProfileScreen({setActivityState}: {setActivityState: (state: 0 | 1 | 2) => void}) {
+  console.log("Render profile")
+   return (
+     <View
+       style={{
+         flex: 1,
+         gap: 8,
+         alignItems: 'center',
+         justifyContent: 'center',
+       }}
+     >
+       <Text>Profile!</Text>
+       <Button 
+          title='Set Activity State to 0'
+          onPress={() => setActivityState(0)} 
+       />
+     </View>
+   );
+ }
+
+ const App = () => {
+  const [activityState, setActivityState] = React.useState<0 | 1 | 2>(0);
+  console.log("activityState", activityState);
+ 
+  /**
+   * Remove isNativeStack if you want to test native checks
+   */
+  return (
+    <ScreenStack style={{flex: 1}}> 
+      <Screen activityState={2} isNativeStack>
+        <HomeScreen setActivityState={setActivityState} />
+      </Screen>
+      <Screen activityState={activityState} isNativeStack>
+        <ProfileScreen setActivityState={setActivityState} />
+      </Screen>
+    </ScreenStack>
+  );
+ }
+ export default App;
\ No newline at end of file
diff --git a/apps/src/tests/index.ts b/apps/src/tests/index.ts
index ce795171ee..280892d2d3 100644
--- a/apps/src/tests/index.ts
+++ b/apps/src/tests/index.ts
@@ -115,4 +115,5 @@ export { default as Test2332 } from './Test2332';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
 export { default as TestHeader } from './TestHeader';
 export { default as TestPreload } from './TestPreload';
+export { default as TestActivityStateProgression } from './TestActivityStateProgression';
 export { default as TestModalNavigation } from './TestModalNavigation';
diff --git a/ios/RNSScreen.mm b/ios/RNSScreen.mm
index 9b1cc543a0..7f2fd3b8d9 100644
--- a/ios/RNSScreen.mm
+++ b/ios/RNSScreen.mm
@@ -304,6 +304,10 @@ - (void)setActivityStateOrNil:(NSNumber *)activityStateOrNil
 {
   int activityState = [activityStateOrNil intValue];
   if (activityStateOrNil != nil && activityState != -1 && activityState != _activityState) {
+    if ([_controller.navigationController isKindOfClass:RNSNavigationController.class] &&
+        _activityState < activityState) {
+      RCTLogError(@"[RNScreens] activityState can only progress in NativeStack");
+    }
     _activityState = activityState;
     [_reactSuperview markChildUpdated];
   }
diff --git a/react-navigation b/react-navigation
index 782248d992..4caf3cb849 160000
--- a/react-navigation
+++ b/react-navigation
@@ -1 +1 @@
-Subproject commit 782248d9922c9e71ba65ea1d93b09abd6f84fe5c
+Subproject commit 4caf3cb849a8708a36d0dbf22dac432d2ca780be
diff --git a/src/components/Screen.tsx b/src/components/Screen.tsx
index e49b249d63..a2b26ab7b9 100644
--- a/src/components/Screen.tsx
+++ b/src/components/Screen.tsx
@@ -16,6 +16,7 @@ import {
 // Native components
 import ScreenNativeComponent from '../fabric/ScreenNativeComponent';
 import ModalScreenNativeComponent from '../fabric/ModalScreenNativeComponent';
+import { usePrevious } from './helpers/usePrevious';
 
 type NativeScreenProps = Omit<
   ScreenProps,
@@ -163,6 +164,7 @@ export const InnerScreen = React.forwardRef<View, ScreenProps>(
   function InnerScreen(props, ref) {
     const innerRef = React.useRef<ViewConfig | null>(null);
     React.useImperativeHandle(ref, () => innerRef.current!, []);
+    const prevActivityState = usePrevious(props.activityState);
 
     const setRef = (ref: ViewConfig) => {
       innerRef.current = ref;
@@ -237,6 +239,18 @@ export const InnerScreen = React.forwardRef<View, ScreenProps>(
         activityState = active !== 0 ? 2 : 0; // in the new version, we need one of the screens to have value of 2 after the transition
       }
 
+      if (
+        isNativeStack &&
+        prevActivityState !== undefined &&
+        activityState !== undefined
+      ) {
+        if (prevActivityState > activityState) {
+          throw new Error(
+            '[RNScreens] activityState cannot be decreased in NativeStack',
+          );
+        }
+      }
+
       const handleRef = (ref: ViewConfig) => {
         if (ref?.viewConfig?.validAttributes?.style) {
           ref.viewConfig.validAttributes.style = {
diff --git a/src/components/helpers/usePrevious.tsx b/src/components/helpers/usePrevious.tsx
new file mode 100644
index 0000000000..22b422777a
--- /dev/null
+++ b/src/components/helpers/usePrevious.tsx
@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+
+export function usePrevious<T>(state: T): T | undefined {
+  const ref = useRef<T>();
+
+  useEffect(() => {
+    ref.current = state;
+  });
+
+  return ref.current;
+}

From fb799c38e185e0ab855d5278c4aa472c1191bdfb Mon Sep 17 00:00:00 2001
From: Maciej Stosio <maciekstosio@users.noreply.github.com>
Date: Wed, 9 Oct 2024 13:14:16 +0200
Subject: [PATCH 3/6] docs: update guide for library authors

---
 guides/GUIDE_FOR_LIBRARY_AUTHORS.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
index d86bd10c9a..c7e4fee14e 100644
--- a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
+++ b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
@@ -16,7 +16,7 @@ While transitioning between views we may want to activate a second screen for th
 ## `<Screen/>`
 
 This component is a container for views we want to display on a navigation screen.
-It is designed to only be rendered as a direct child of `ScreenContainer`.
+It is designed to only be rendered as a direct child of `ScreenContainer` or `ScreenStack`.
 In addition to plain React Native [View props](http://facebook.github.io/react-native/docs/view#props) this component only accepts a single additional property called `activityState`.
 When `activityState` is set to `0`, the parent container will detach its views from the native view hierarchy. When `activityState` is set to `1`, the `Screen` will stay attached, but on iOS it will not respond to touches. We only want to set `activityState` to `1` for during the transition or e.g. for modal presentation, where the previous screen should be visible, but not interactive. When `activityState` is set to `2`, the views will be attached and will respond to touches as long as the parent container is attached too. When one of the `Screen` components get the `activityState` value set to `2`, we interpret it as the end of the transition.
 
@@ -30,6 +30,9 @@ When `activityState` is set to `0`, the parent container will detach its views f
 </ScreenContainer>
 ```
 
+When used in `<ScreenStack />` `activityState` can only be increased. The checks are added (in both native sides and JS part) to prevent situation when it's being removed, but still exists in in React Tree or if someones tries to preload already displayed screen. 
+
+
 ## `<ScreenStack>`
 
 Screen stack component expects one or more `Screen` components as direct children and renders them in a platform-native stack container (for iOS it is `UINavigationController` and for Android inside `Fragment` container). For `Screen` components placed as children of `ScreenStack` the `activityState` property is ignored and instead the screen that corresponds to the last child is rendered as active. All types of updates done to the list of children are acceptable when the top element is exchanged the container will use platform default (unless customized) animation to transition between screens.

From 588dd0243709e81a4c243eeec9d72788546ce755 Mon Sep 17 00:00:00 2001
From: Maciej Stosio <maciekstosio@users.noreply.github.com>
Date: Wed, 9 Oct 2024 13:15:23 +0200
Subject: [PATCH 4/6] fix: eof empty line

---
 apps/src/tests/TestActivityStateProgression.tsx | 3 ++-
 apps/src/tests/TestPreload.tsx                  | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/src/tests/TestActivityStateProgression.tsx b/apps/src/tests/TestActivityStateProgression.tsx
index e69f97a730..bcccf225d6 100644
--- a/apps/src/tests/TestActivityStateProgression.tsx
+++ b/apps/src/tests/TestActivityStateProgression.tsx
@@ -60,4 +60,5 @@ function ProfileScreen({setActivityState}: {setActivityState: (state: 0 | 1 | 2)
     </ScreenStack>
   );
  }
- export default App;
\ No newline at end of file
+ export default App;
+ 
\ No newline at end of file
diff --git a/apps/src/tests/TestPreload.tsx b/apps/src/tests/TestPreload.tsx
index 58e4ae91f0..6e5041631d 100644
--- a/apps/src/tests/TestPreload.tsx
+++ b/apps/src/tests/TestPreload.tsx
@@ -366,4 +366,5 @@ function TabB_2() {
    </NavigationContainer>
  );
 
- export default App;
\ No newline at end of file
+ export default App;
+ 
\ No newline at end of file

From 00350011e8e4d79773309630a4cf847b57a2094b Mon Sep 17 00:00:00 2001
From: Maciej Stosio <maciekstosio@users.noreply.github.com>
Date: Wed, 9 Oct 2024 13:16:59 +0200
Subject: [PATCH 5/6] fix: fix formatting

---
 .../tests/TestActivityStateProgression.tsx    |  95 ++--
 apps/src/tests/TestPreload.tsx                | 516 +++++++++---------
 2 files changed, 299 insertions(+), 312 deletions(-)

diff --git a/apps/src/tests/TestActivityStateProgression.tsx b/apps/src/tests/TestActivityStateProgression.tsx
index bcccf225d6..045e1e16c5 100644
--- a/apps/src/tests/TestActivityStateProgression.tsx
+++ b/apps/src/tests/TestActivityStateProgression.tsx
@@ -2,55 +2,61 @@ import * as React from 'react';
 import { View, Text, Button } from 'react-native';
 import { Screen, ScreenStack } from '../../../src';
 
-function HomeScreen({setActivityState}: {setActivityState: (state: 0 | 1 | 2) => void}) {
-  console.log("Render home")
-   return (
-     <View
-       style={{
-         flex: 1,
-         gap: 8,
-         alignItems: 'center',
-         justifyContent: 'center',
-       }}
-     >
-       <Text>Home!</Text>
-       <Button 
-          title='Set Activity State to 2'
-          onPress={() => setActivityState(2)} 
-       />
-     </View>
-   );
- }
+function HomeScreen({
+  setActivityState,
+}: {
+  setActivityState: (state: 0 | 1 | 2) => void;
+}) {
+  console.log('Render home');
+  return (
+    <View
+      style={{
+        flex: 1,
+        gap: 8,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <Text>Home!</Text>
+      <Button
+        title="Set Activity State to 2"
+        onPress={() => setActivityState(2)}
+      />
+    </View>
+  );
+}
 
-function ProfileScreen({setActivityState}: {setActivityState: (state: 0 | 1 | 2) => void}) {
-  console.log("Render profile")
-   return (
-     <View
-       style={{
-         flex: 1,
-         gap: 8,
-         alignItems: 'center',
-         justifyContent: 'center',
-       }}
-     >
-       <Text>Profile!</Text>
-       <Button 
-          title='Set Activity State to 0'
-          onPress={() => setActivityState(0)} 
-       />
-     </View>
-   );
- }
+function ProfileScreen({
+  setActivityState,
+}: {
+  setActivityState: (state: 0 | 1 | 2) => void;
+}) {
+  console.log('Render profile');
+  return (
+    <View
+      style={{
+        flex: 1,
+        gap: 8,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <Text>Profile!</Text>
+      <Button
+        title="Set Activity State to 0"
+        onPress={() => setActivityState(0)}
+      />
+    </View>
+  );
+}
 
- const App = () => {
+const App = () => {
   const [activityState, setActivityState] = React.useState<0 | 1 | 2>(0);
-  console.log("activityState", activityState);
- 
+  console.log('activityState', activityState);
+
   /**
    * Remove isNativeStack if you want to test native checks
    */
   return (
-    <ScreenStack style={{flex: 1}}> 
+    <ScreenStack style={{ flex: 1 }}>
       <Screen activityState={2} isNativeStack>
         <HomeScreen setActivityState={setActivityState} />
       </Screen>
@@ -59,6 +65,5 @@ function ProfileScreen({setActivityState}: {setActivityState: (state: 0 | 1 | 2)
       </Screen>
     </ScreenStack>
   );
- }
- export default App;
- 
\ No newline at end of file
+};
+export default App;
diff --git a/apps/src/tests/TestPreload.tsx b/apps/src/tests/TestPreload.tsx
index 6e5041631d..ec67ff6f80 100644
--- a/apps/src/tests/TestPreload.tsx
+++ b/apps/src/tests/TestPreload.tsx
@@ -1,123 +1,118 @@
 import * as React from 'react';
 
-
- import { View, Text, Button } from 'react-native';
- import {
-   useNavigation,
-   CommonActions,
-   NavigationContainer,
- } from '@react-navigation/native';
- import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { View, Text, Button } from 'react-native';
+import {
+  useNavigation,
+  CommonActions,
+  NavigationContainer,
+} from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
- function HomeScreen() {
-   const navigation = useNavigation();
-
-   return (
-     <View
-       style={{
-         flex: 1,
-         gap: 8,
-         alignItems: 'center',
-         justifyContent: 'center',
-       }}
-     >
-       <Text>Home!</Text>
-       <Button
-         title='Navigate to Home'
-         onPress={() => {
-           navigation.dispatch(
-             CommonActions.navigate('Home2')
-           );
-         }}
-       />
-       <Button
-         title='Preload CardProfile'
-         onPress={() => {
-           navigation.dispatch(
-             CommonActions.preload('CardProfile', { user: 'jane' })
-           );
-         }}
-       />
-       <Button
-         title='Navigate to CardProfile'
-         onPress={() => {
-           navigation.dispatch(
-             CommonActions.navigate('CardProfile', { user: 'jane' })
-           );
-         }}
-       />
-       <Button
-         title='Preload ModalProfile'
-         onPress={() => {
-           navigation.dispatch(
-             CommonActions.preload('ModalProfile', { user: 'jane' })
-           );
-         }}
-       />
-       <Button
-         title='Navigate to ModalProfile'
-         onPress={() => {
-           navigation.dispatch(
-             CommonActions.navigate('ModalProfile', { user: 'jane' })
-           );
-         }}
-       />
-       <Button
-         title='Preload TabScreen'
-         onPress={() => {
-           navigation.dispatch(
-             CommonActions.preload('TabScreen', { user: 'jane' })
-           );
-         }}
-       />
-       <Button
-         title='Navigate to TabScreen'
-         onPress={() => {
-           navigation.dispatch(
-             CommonActions.navigate('TabScreen', { user: 'jane' })
-           );
-         }}
-       />
-     </View>
-   );
- }
-
- function ProfileScreen({ route }: any) {
-   const navigation = useNavigation();
-   const [startTime] = React.useState(Date.now());
-   const [endTime, setEndTime] = React.useState<number | null>(null);
-
-   React.useEffect(() => {
-     const unsubscribe = navigation.addListener('focus', () => {
-       setEndTime(Date.now());
-     });
-
-     return () => {
-       unsubscribe();
-     };
-   }, [navigation]);
-
-   return (
-     <View
-       style={{
-         flex: 1,
-         gap: 8,
-         alignItems: 'center',
-         justifyContent: 'center',
-       }}
-     >
-       <Text>Profile!</Text>
-       <Text>{route.params.user}'s profile</Text>
-       <Text>Preloaded for: {endTime ? endTime - startTime : 'N/A'}ms</Text>
-     </View>
-   );
- }
-
- const Tab = createBottomTabNavigator();
- const StackTabA = createNativeStackNavigator();
-
- function TabA() {
+function HomeScreen() {
+  const navigation = useNavigation();
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        gap: 8,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <Text>Home!</Text>
+      <Button
+        title="Navigate to Home"
+        onPress={() => {
+          navigation.dispatch(CommonActions.navigate('Home2'));
+        }}
+      />
+      <Button
+        title="Preload CardProfile"
+        onPress={() => {
+          navigation.dispatch(
+            CommonActions.preload('CardProfile', { user: 'jane' }),
+          );
+        }}
+      />
+      <Button
+        title="Navigate to CardProfile"
+        onPress={() => {
+          navigation.dispatch(
+            CommonActions.navigate('CardProfile', { user: 'jane' }),
+          );
+        }}
+      />
+      <Button
+        title="Preload ModalProfile"
+        onPress={() => {
+          navigation.dispatch(
+            CommonActions.preload('ModalProfile', { user: 'jane' }),
+          );
+        }}
+      />
+      <Button
+        title="Navigate to ModalProfile"
+        onPress={() => {
+          navigation.dispatch(
+            CommonActions.navigate('ModalProfile', { user: 'jane' }),
+          );
+        }}
+      />
+      <Button
+        title="Preload TabScreen"
+        onPress={() => {
+          navigation.dispatch(
+            CommonActions.preload('TabScreen', { user: 'jane' }),
+          );
+        }}
+      />
+      <Button
+        title="Navigate to TabScreen"
+        onPress={() => {
+          navigation.dispatch(
+            CommonActions.navigate('TabScreen', { user: 'jane' }),
+          );
+        }}
+      />
+    </View>
+  );
+}
+
+function ProfileScreen({ route }: any) {
+  const navigation = useNavigation();
+  const [startTime] = React.useState(Date.now());
+  const [endTime, setEndTime] = React.useState<number | null>(null);
+
+  React.useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', () => {
+      setEndTime(Date.now());
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [navigation]);
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        gap: 8,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <Text>Profile!</Text>
+      <Text>{route.params.user}'s profile</Text>
+      <Text>Preloaded for: {endTime ? endTime - startTime : 'N/A'}ms</Text>
+    </View>
+  );
+}
+
+const Tab = createBottomTabNavigator();
+const StackTabA = createNativeStackNavigator();
+
+function TabA() {
   return (
     <StackTabA.Navigator>
       <StackTabA.Screen name="TabA_1" component={TabA_1} />
@@ -148,26 +143,25 @@ function TabA_1() {
         gap: 8,
         alignItems: 'center',
         justifyContent: 'center',
-      }}
-    >
+      }}>
       <Text>TabA_1!</Text>
       <Text>Preloaded for: {endTime ? endTime - startTime : 'N/A'}ms</Text>
       <Button
-         title='Preload TabA_2'
-         onPress={() => {
-           navigation.dispatch(
-             CommonActions.preload('TabA_2', { user: 'jane' })
-           );
-         }}
-       />
+        title="Preload TabA_2"
+        onPress={() => {
+          navigation.dispatch(
+            CommonActions.preload('TabA_2', { user: 'jane' }),
+          );
+        }}
+      />
       <Button
-         title='Navigate to TabA_2'
-         onPress={() => {
-           navigation.dispatch(
-             CommonActions.navigate('TabA_2', { user: 'jane' })
-           );
-         }}
-       />
+        title="Navigate to TabA_2"
+        onPress={() => {
+          navigation.dispatch(
+            CommonActions.navigate('TabA_2', { user: 'jane' }),
+          );
+        }}
+      />
     </View>
   );
 }
@@ -194,26 +188,25 @@ function TabA_2() {
         gap: 8,
         alignItems: 'center',
         justifyContent: 'center',
-      }}
-    >
+      }}>
       <Text>TabA_2!</Text>
       <Text>Preloaded for: {endTime ? endTime - startTime : 'N/A'}ms</Text>
       <Button
-         title='Preload ModalProfile'
-         onPress={() => {
-           navigation.dispatch(
-             CommonActions.preload('ModalProfile', { user: 'jane' })
-           );
-         }}
-       />
-       <Button
-         title='Navigate to ModalProfile'
-         onPress={() => {
-           navigation.dispatch(
-             CommonActions.navigate('ModalProfile', { user: 'jane' })
-           );
-         }}
-       />
+        title="Preload ModalProfile"
+        onPress={() => {
+          navigation.dispatch(
+            CommonActions.preload('ModalProfile', { user: 'jane' }),
+          );
+        }}
+      />
+      <Button
+        title="Navigate to ModalProfile"
+        onPress={() => {
+          navigation.dispatch(
+            CommonActions.navigate('ModalProfile', { user: 'jane' }),
+          );
+        }}
+      />
     </View>
   );
 }
@@ -221,109 +214,105 @@ function TabA_2() {
 const StackTabB = createNativeStackNavigator();
 
 function TabB() {
- return (
-   <StackTabA.Navigator>
-     <StackTabA.Screen name="TabB_1" component={TabB_1} />
-     <StackTabA.Screen name="TabB_2" component={TabB_2} />
-   </StackTabA.Navigator>
- );
+  return (
+    <StackTabA.Navigator>
+      <StackTabA.Screen name="TabB_1" component={TabB_1} />
+      <StackTabA.Screen name="TabB_2" component={TabB_2} />
+    </StackTabA.Navigator>
+  );
 }
 
 function TabB_1() {
- const navigation = useNavigation();
- const [startTime] = React.useState(Date.now());
- const [endTime, setEndTime] = React.useState<number | null>(null);
-
- React.useEffect(() => {
-   const unsubscribe = navigation.addListener('focus', () => {
-     setEndTime(Date.now());
-   });
-
-   return () => {
-     unsubscribe();
-   };
- }, [navigation]);
-
- return (
-   <View
-     style={{
-       flex: 1,
-       gap: 8,
-       alignItems: 'center',
-       justifyContent: 'center',
-     }}
-   >
-     <Text>TabB_1!</Text>
-     <Text>Preloaded for: {endTime ? endTime - startTime : 'N/A'}ms</Text>
-     <Button
-        title='Preload TabB_2'
+  const navigation = useNavigation();
+  const [startTime] = React.useState(Date.now());
+  const [endTime, setEndTime] = React.useState<number | null>(null);
+
+  React.useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', () => {
+      setEndTime(Date.now());
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [navigation]);
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        gap: 8,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <Text>TabB_1!</Text>
+      <Text>Preloaded for: {endTime ? endTime - startTime : 'N/A'}ms</Text>
+      <Button
+        title="Preload TabB_2"
         onPress={() => {
           navigation.dispatch(
-            CommonActions.preload('TabB_2', { user: 'jane' })
+            CommonActions.preload('TabB_2', { user: 'jane' }),
           );
         }}
       />
-     <Button
-        title='Navigate to TabB_2'
+      <Button
+        title="Navigate to TabB_2"
         onPress={() => {
           navigation.dispatch(
-            CommonActions.navigate('TabB_2', { user: 'jane' })
+            CommonActions.navigate('TabB_2', { user: 'jane' }),
           );
         }}
       />
-   </View>
- );
+    </View>
+  );
 }
 
 function TabB_2() {
- const navigation = useNavigation();
- const [startTime] = React.useState(Date.now());
- const [endTime, setEndTime] = React.useState<number | null>(null);
-
- React.useEffect(() => {
-   const unsubscribe = navigation.addListener('focus', () => {
-     setEndTime(Date.now());
-   });
-
-   return () => {
-     unsubscribe();
-   };
- }, [navigation]);
-
- return (
-   <View
-     style={{
-       flex: 1,
-       gap: 8,
-       alignItems: 'center',
-       justifyContent: 'center',
-     }}
-   >
-     <Text>TabB_2!</Text>
-     <Text>Preloaded for: {endTime ? endTime - startTime : 'N/A'}ms</Text>
-     <Button
-         title='Preload ModalProfile'
-         onPress={() => {
-           navigation.dispatch(
-             CommonActions.preload('ModalProfile', { user: 'jane' })
-           );
-         }}
-       />
-       <Button
-         title='Navigate to ModalProfile'
-         onPress={() => {
-           navigation.dispatch(
-             CommonActions.navigate('ModalProfile', { user: 'jane' })
-           );
-         }}
-       />
-   </View>
- );
-}
+  const navigation = useNavigation();
+  const [startTime] = React.useState(Date.now());
+  const [endTime, setEndTime] = React.useState<number | null>(null);
 
+  React.useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', () => {
+      setEndTime(Date.now());
+    });
 
- function TabScreen({ route }: any) {
+    return () => {
+      unsubscribe();
+    };
+  }, [navigation]);
 
+  return (
+    <View
+      style={{
+        flex: 1,
+        gap: 8,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <Text>TabB_2!</Text>
+      <Text>Preloaded for: {endTime ? endTime - startTime : 'N/A'}ms</Text>
+      <Button
+        title="Preload ModalProfile"
+        onPress={() => {
+          navigation.dispatch(
+            CommonActions.preload('ModalProfile', { user: 'jane' }),
+          );
+        }}
+      />
+      <Button
+        title="Navigate to ModalProfile"
+        onPress={() => {
+          navigation.dispatch(
+            CommonActions.navigate('ModalProfile', { user: 'jane' }),
+          );
+        }}
+      />
+    </View>
+  );
+}
+
+function TabScreen({ route }: any) {
   console.log('route?.params?.user', route?.params?.user);
 
   return (
@@ -334,37 +323,30 @@ function TabB_2() {
   );
 }
 
- const Stack = createNativeStackNavigator();
-
- const App = () => (
-   <NavigationContainer>
-     <Stack.Navigator>
-       <Stack.Screen
-         name="Home"
-         component={HomeScreen}
-       />
-       <Stack.Screen
-         name="Home2"
-         component={HomeScreen}
-         options={{ presentation: 'card' }}
-       />
-       <Stack.Screen
-         name="CardProfile"
-         component={ProfileScreen}
-         options={{ presentation: 'card' }}
-       />
-       <Stack.Screen
-         name="ModalProfile"
-         component={ProfileScreen}
-         options={{ presentation: 'modal' }}
-       />
-       <Stack.Screen
-         name="TabScreen"
-         component={TabScreen}
-       />
-     </Stack.Navigator>
-   </NavigationContainer>
- );
-
- export default App;
- 
\ No newline at end of file
+const Stack = createNativeStackNavigator();
+
+const App = () => (
+  <NavigationContainer>
+    <Stack.Navigator>
+      <Stack.Screen name="Home" component={HomeScreen} />
+      <Stack.Screen
+        name="Home2"
+        component={HomeScreen}
+        options={{ presentation: 'card' }}
+      />
+      <Stack.Screen
+        name="CardProfile"
+        component={ProfileScreen}
+        options={{ presentation: 'card' }}
+      />
+      <Stack.Screen
+        name="ModalProfile"
+        component={ProfileScreen}
+        options={{ presentation: 'modal' }}
+      />
+      <Stack.Screen name="TabScreen" component={TabScreen} />
+    </Stack.Navigator>
+  </NavigationContainer>
+);
+
+export default App;

From bf86f39a105c6e443733fd46dec719bd5635001b Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Wed, 9 Oct 2024 14:21:37 +0200
Subject: [PATCH 6/6] Simplify check for activity state regression

---
 .../main/java/com/swmansion/rnscreens/Screen.kt  | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/android/src/main/java/com/swmansion/rnscreens/Screen.kt b/android/src/main/java/com/swmansion/rnscreens/Screen.kt
index 182bf5f9f7..f5178f3e4d 100644
--- a/android/src/main/java/com/swmansion/rnscreens/Screen.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/Screen.kt
@@ -234,7 +234,7 @@ class Screen(
         if (activityState == this.activityState) {
             return
         }
-        if (container is ScreenStack && this.activityState != null && activityState.toInt() < this.activityState!!.toInt()) {
+        if (container is ScreenStack && this.activityState != null && activityState < this.activityState!!) {
             throw IllegalStateException("[RNScreens] activityState can only progress in NativeStack")
         }
         this.activityState = activityState
@@ -481,17 +481,9 @@ class Screen(
     }
 
     enum class ActivityState {
-        INACTIVE {
-            override fun toInt() = 0
-        },
-        TRANSITIONING_OR_BELOW_TOP {
-            override fun toInt() = 1
-        },
-        ON_TOP {
-            override fun toInt() = 2
-        }, ;
-
-        abstract fun toInt(): Int
+        INACTIVE,
+        TRANSITIONING_OR_BELOW_TOP,
+        ON_TOP,
     }
 
     enum class WindowTraits {