feat: change modal logic

TestsExample/ios/Podfile.lock

@@ -308,7 +308,7 @@ PODS:
     - React
   - RNReanimated (1.13.1):
     - React
-  - RNScreens (2.17.0):
+  - RNScreens (2.17.1):
     - React-Core
   - RNSearchBar (3.5.1):
     - React
@@ -506,7 +506,7 @@ SPEC CHECKSUMS:
   RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
   RNGestureHandler: 7a5833d0f788dbd107fbb913e09aa0c1ff333c39
   RNReanimated: dd8c286ab5dd4ba36d3a7fef8bff7e08711b5476
-  RNScreens: 23c1fbf7797261321f6db93fdcbd9913573535e4
+  RNScreens: b6c9607e6fe47c1b6e2f1910d2acd46dd7ecea3a
   RNSearchBar: 9860431356b7d12a8449d2fddb2b5f3c78d1e99f
   RNVectorIcons: bc69e6a278b14842063605de32bec61f0b251a59
   Yoga: 7d13633d129fd179e01b8953d38d47be90db185a

TestsExample/package.json

@@ -6,7 +6,9 @@
     "android": "react-native run-android",
     "ios": "react-native run-ios",
     "start": "react-native start",
-    "test": "jest"
+    "test": "jest",
+    "lint": "eslint --ext '.js,.ts,.tsx' --fix src && yarn check-types",
+    "check-types": "tsc --noEmit"
   },
   "dependencies": {
     "@react-native-community/masked-view": "^0.1.10",

TestsExample/src/Test642.js → TestsExample/src/Test642.tsx

@@ -1,24 +1,28 @@
 // connected PRs: #679, #675
-import {NavigationContainer} from '@react-navigation/native';
 import React from 'react';
-import {ScrollView, StyleSheet, View, Button} from 'react-native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import {ScrollView, View, Button} from 'react-native';
+import {createNativeStackNavigator, NativeStackNavigationProp} from 'react-native-screens/native-stack';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 
+type Props = {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+}
+
 const Stack = createNativeStackNavigator();
 
-export default function NativeNavigation() {
+export default function App(): JSX.Element {
   return (
     <NavigationContainer>
       <Stack.Navigator
         screenOptions={{
-          stackPresentation: 'modal',
+          stackPresentation: "modal",
         }}>
         <Stack.Screen
           name="Home"
           component={Home}
           options={{
-            statusBarStyle: 'light',
+            statusBarStyle: 'dark',
           }}
         />
         <Stack.Screen
@@ -28,15 +32,23 @@ export default function NativeNavigation() {
             statusBarStyle: 'dark',
           }}
         />
+        <Stack.Screen
+          name="Home2"
+          component={Home}
+          options={{
+            statusBarStyle: 'light',
+            stackPresentation: "fullScreenModal",
+          }}
+        />
       </Stack.Navigator>
     </NavigationContainer>
   );
 }
 
 const Tab = createBottomTabNavigator();
 
-const TabNavigator = (props) => (
-  <Tab.Navigator screensEnabled={true}>
+const TabNavigator = () => (
+  <Tab.Navigator>
     <Tab.Screen name="Tab1" component={Home} />
     <Tab.Screen name="Tab2" component={Inner} />
     <Tab.Screen name="Tab3" component={Home} />
@@ -45,7 +57,7 @@ const TabNavigator = (props) => (
 
 const InnerStack = createNativeStackNavigator();
 
-const Inner = (props) => (
+const Inner = () => (
   <InnerStack.Navigator
     screenOptions={{
       statusBarStyle: 'dark',
@@ -54,25 +66,40 @@ const Inner = (props) => (
   </InnerStack.Navigator>
 );
 
-function Home({navigation}) {
+function Home({navigation}: Props) {
   const [yes, setYes] = React.useState(true);
   return (
     <ScrollView
-      style={{backgroundColor: 'yellow'}}
+      style={{backgroundColor: 'rgba(255,255,0,0.5)'}}
       contentInsetAdjustmentBehavior="automatic"
       >
-      <View style={styles.leftTop} />
+      <View />
       <Button
         title="TabNavigator"
         onPress={() => {
           navigation.push('TabNavigator');
         }}
       />
+      <Button
+        title="Home2"
+        onPress={() => {
+          navigation.push('Home2');
+        }}
+      />
       <Button
         title="status bar style"
         onPress={() => {
           navigation.setOptions({
-            statusBarStyle: Math.random() > 0.5 ? 'light' : 'dark',
+            statusBarStyle: yes ? 'light' : 'dark',
+          });
+          setYes(!yes);
+        }}
+      />
+      <Button
+        title="Change title"
+        onPress={() => {
+          navigation.setOptions({
+            title: yes ? 'Home' : 'NotHome',
           });
           setYes(!yes);
         }}
@@ -86,11 +113,3 @@ function Home({navigation}) {
     </ScrollView>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

TestsExample/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../tsconfig.json",
+  "baseUrl": ".",
+  "include": ["**/*.ts", "**/*.tsx", "**/*.js"]
+}

ios/RNSScreen.m

@@ -310,7 +310,7 @@ - (instancetype)initWithView:(UIView *)view
 #if !TARGET_OS_TV
 - (UIViewController *)childViewControllerForStatusBarStyle
 {
-  UIViewController *vc = [self findChildVCForConfig];
+  UIViewController *vc = [self findChildVCForConfigIncludingModals:NO];
   return vc == self ? nil : vc;
 }
 
@@ -322,7 +322,7 @@ - (UIStatusBarStyle)preferredStatusBarStyle
 
 - (UIViewController *)childViewControllerForStatusBarHidden
 {
-  UIViewController *vc = [self findChildVCForConfig];
+  UIViewController *vc = [self findChildVCForConfigIncludingModals:NO];
   return vc == self ? nil : vc;
 }
 
@@ -334,7 +334,7 @@ - (BOOL)prefersStatusBarHidden
 
 - (UIStatusBarAnimation)preferredStatusBarUpdateAnimation
 {
-  UIViewController *vc = [self findChildVCForConfig];
+  UIViewController *vc = [self findChildVCForConfigIncludingModals:NO];
 
   if ([vc isKindOfClass:[RNSScreen class]]) {
     RNSScreenStackHeaderConfig *config = [(RNSScreen *)vc findScreenConfig];
@@ -345,7 +345,7 @@ - (UIStatusBarAnimation)preferredStatusBarUpdateAnimation
 
 - (UIInterfaceOrientationMask)supportedInterfaceOrientations
 {
-  UIViewController *vc = [self findChildVCForConfig];
+  UIViewController *vc = [self findChildVCForConfigIncludingModals:YES];
 
   if ([vc isKindOfClass:[RNSScreen class]]) {
     RNSScreenStackHeaderConfig *config = [(RNSScreen *)vc findScreenConfig];
@@ -356,19 +356,20 @@ - (UIInterfaceOrientationMask)supportedInterfaceOrientations
 
 // if the returned vc is a child, it means that it can provide config;
 // if the returned vc is self, it means that there is no child for config and self has config to provide,
-// so we return self which results in asking self for preferredStatusBarStyle;
+// so we return self which results in asking self for preferredStatusBarStyle/Animation etc.;
 // if the returned vc is nil, it means none of children could provide config and self does not have config either,
 // so if it was asked by parent, it will fallback to parent's option, or use default option if it is the top Screen
-- (UIViewController *)findChildVCForConfig
+- (UIViewController *)findChildVCForConfigIncludingModals:(BOOL)includingModals
 {
   UIViewController *lastViewController = [[self childViewControllers] lastObject];
   if ([self.presentedViewController isKindOfClass:[RNSScreen class]]) {
     lastViewController = self.presentedViewController;
-    // setting this makes the modal vc being asked for appearance,
-    // so it doesn't matter what we return here since the modal's root screen will be asked
-    lastViewController.modalPresentationCapturesStatusBarAppearance = YES;
+    // we don't want to allow controlling of status bar appearance when we present non-fullScreen modal
+    // and it is not possible if `modalPresentationCapturesStatusBarAppearance` is not set to YES, so even
+    // if we went into a modal here and ask it, it wouldn't take any effect. For fullScreen modals, the system
+    // asks them by itself, so we can stop traversing here.
     // for screen orientation, we need to start the search again from that modal
-    return [(RNSScreen *)lastViewController findChildVCForConfig] ?: lastViewController;
+    return !includingModals ? nil : [(RNSScreen *)lastViewController findChildVCForConfigIncludingModals:includingModals] ?: lastViewController;
   }
 
   UIViewController *selfOrNil = [self findScreenConfig] != nil ? self : nil;
@@ -382,7 +383,7 @@ - (UIViewController *)findChildVCForConfig
       // we use `childViewControllerForStatusBarStyle` for all options since the behavior is the same for all of them
       UIViewController *childScreen = [lastViewController childViewControllerForStatusBarStyle];
       if ([childScreen isKindOfClass:[RNSScreen class]]) {
-        return [(RNSScreen *)childScreen findChildVCForConfig] ?: selfOrNil;
+        return [(RNSScreen *)childScreen findChildVCForConfigIncludingModals:includingModals] ?: selfOrNil;
       } else {
         return selfOrNil;
       }

ios/RNSScreenStackHeaderConfig.m

@@ -97,7 +97,8 @@ - (void)updateViewControllerIfNeeded
     nextVC = nav.topViewController;
   }
 
-  if (vc != nil && nextVC == vc) {
+  // if nav is nil, it means we are in a fullScreen modal, so there is no nextVC, but we still want to update
+  if (vc != nil && (nav == nil || nextVC == vc)) {
     [RNSScreenStackHeaderConfig updateViewController:self.screenView.controller
                                           withConfig:self
                                             animated:YES];

package.json

@@ -7,7 +7,7 @@
     "start": "react-native start",
     "test:unit": "jest --passWithNoTests",
     "format": "prettier --write --list-different './src/**/*.{js,ts,tsx}'",
-    "lint": "eslint --ext '.js,.ts,.tsx' --fix src && npm run check-types",
+    "lint": "eslint --ext '.js,.ts,.tsx' --fix src && yarn check-types",
     "precommit": "yarn format && yarn lint",
     "release": "npm login && release-it",
     "prepare": "bob build"

tsconfig.json

@@ -22,6 +22,5 @@
     "strict": true,
     "target": "esnext"
   },
-  "exclude": ["node_modules"],
-  "include": ["**/*.ts", "**/*.tsx"]
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
 }