Merge branch 'main' into @kkafar/native-native-animtions-for-ios-nati…

…ve-native
software-mansion · Nov 6, 2024 · 0e13917 · 0e13917
2 parents 23300c6 + 46c843e
commit 0e13917
Show file tree

Hide file tree

Showing 28 changed files with 524 additions and 227 deletions.
diff --git a/README.md b/README.md
@@ -106,9 +106,13 @@ Screens are already integrated with the React Native's most popular navigation l
 
 ## Supported react-native version
 
+### Support for Paper
+
+Paper is the default rendering system for React Native versions prior to 0.76.
+
 | library version | react-native version |
 | --------------- | -------------------- |
-| 3.33.0+         | 0.72.0+
+| 3.33.0+         | 0.72.0+              |
 | 3.32.0+         | 0.71.0+              |
 | 3.30.0+         | 0.68.0+              |
 | 3.14.0+         | 0.64.0+              |
@@ -123,6 +127,7 @@ Here's a table with summary of supported `react-native` versions when Fabric is
 
 | library version | react-native version |
 | --------------- | -------------------- |
+| 3.35.0+         | 0.76.0+              |
 | 3.33.0+         | 0.75.0+              |
 | 3.32.0+         | 0.74.0+              |
 | 3.28.0+         | 0.73.0+              |

diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenManagerDelegate.java
@@ -52,7 +52,7 @@ public void setProperty(T view, String propName, @Nullable Object value) {
         mViewManager.setFullScreenSwipeEnabled(view, value == null ? false : (boolean) value);
         break;
       case "fullScreenSwipeShadowEnabled":
-        mViewManager.setFullScreenSwipeShadowEnabled(view, value == null ? false : (boolean) value);
+        mViewManager.setFullScreenSwipeShadowEnabled(view, value == null ? true : (boolean) value);
         break;
       case "homeIndicatorHidden":
         mViewManager.setHomeIndicatorHidden(view, value == null ? false : (boolean) value);

diff --git a/apps/src/screens/SwipeBackAnimation.tsx b/apps/src/screens/SwipeBackAnimation.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 import { View, StyleSheet } from 'react-native';
 import {
   createNativeStackNavigator,
+  NativeStackNavigationOptions,
   NativeStackNavigationProp,
 } from '@react-navigation/native-stack';
-import { Button } from '../shared';
+import { Button, SettingsPicker } from '../shared';
 
 type StackParamList = {
   ScreenA: undefined;
@@ -27,12 +28,36 @@ interface ScreenBProps {
   navigation: NativeStackNavigationProp<StackParamList, 'ScreenB'>;
 }
 
-const ScreenB = ({ navigation }: ScreenBProps): React.JSX.Element => (
-  <View style={{ ...styles.container, backgroundColor: 'thistle' }}>
-    <Button title="Go ScreenC" onPress={() => navigation.navigate('ScreenC')} />
-    <Button title="Go back" onPress={() => navigation.goBack()} />
-  </View>
-);
+const ScreenB = ({ navigation }: ScreenBProps): React.JSX.Element => {
+  const [gestureType, setGestureType] = React.useState<NonNullable<NativeStackNavigationOptions['gestureType']>>('twoDimensionalSwipe');
+
+  React.useEffect(() => {
+    navigation.setOptions({
+      gestureType,
+    });
+  }, [gestureType]);
+
+  return (
+    <View style={{ ...styles.container, backgroundColor: 'thistle' }}>
+        <SettingsPicker<NonNullable<NativeStackNavigationOptions['gestureType']>>
+          label="Stack animation"
+          value={gestureType}
+          onValueChange={setGestureType}
+          items={[
+            "swipeRight",
+            "swipeLeft",
+            "swipeUp",
+            "swipeDown",
+            "verticalSwipe",
+            "horizontalSwipe",
+            "twoDimensionalSwipe",
+          ]}
+        />
+      <Button title="Go ScreenC" onPress={() => navigation.navigate('ScreenC')} />
+      <Button title="Go back" onPress={() => navigation.goBack()} />
+    </View>
+  );
+}
 
 interface ScreenCProps {
   navigation: NativeStackNavigationProp<StackParamList, 'ScreenC'>;
@@ -56,10 +81,6 @@ const App = (): React.JSX.Element => (
     <Stack.Screen
       name="ScreenB"
       component={ScreenB}
-      options={{
-        // @ts-ignore: goBackGesture is not implemented yet in react-navigation
-        goBackGesture: 'twoDimensionalSwipe',
-      }}
     />
     <Stack.Screen name="ScreenC" component={ScreenC} />
   </Stack.Navigator>

diff --git a/apps/src/tests/Test1649/index.tsx b/apps/src/tests/Test1649/index.tsx
@@ -66,9 +66,6 @@ export default function App(): JSX.Element {
               contentStyle: {
                 backgroundColor: 'firebrick',
               },
-              unstable_screenStyle: {
-                backgroundColor: 'firebrick',
-              },
               // unstable_footerComponent: Footer(),
               ...sheetOptions,
             }}
@@ -107,9 +104,6 @@ export default function App(): JSX.Element {
               headerShown: false,
               presentation: 'formSheet',
               sheetElevation: 24,
-              unstable_screenStyle: {
-                backgroundColor: 'firebrick',
-              },
               ...sheetOptions,
               sheetAllowedDetents: [0.7],
             }}

diff --git a/apps/src/tests/Test1649/routes.tsx b/apps/src/tests/Test1649/routes.tsx
@@ -45,9 +45,6 @@ const routes: Record<string, RouteDescriptor> = {
       headerShown: false,
       presentation: 'formSheet',
       sheetElevation: 24,
-      unstable_screenStyle: {
-        backgroundColor: 'firebrick',
-      },
       ...sheetInitialOptions,
     },
   },

diff --git a/apps/src/tests/TestScreenAnimation.tsx b/apps/src/tests/TestScreenAnimation.tsx
@@ -67,8 +67,7 @@ const App = (): JSX.Element => (
             name="ScreenB"
             component={ScreenB}
             options={{
-              // @ts-ignore: goBackGesture is not implemented yet in react-navigation
-              goBackGesture: 'twoDimensionalSwipe',
+              gestureType: 'twoDimensionalSwipe',
             }}
           />
           <Stack.Screen name="ScreenC" component={ScreenC} />

diff --git a/apps/src/tests/TestScreenAnimationV5.tsx b/apps/src/tests/TestScreenAnimationV5.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { View, StyleSheet, Button } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import {
+  NativeStackNavigationProp,
+  createNativeStackNavigator,
+} from 'react-native-screens/native-stack'
+import { GestureDetectorProvider } from 'react-native-screens/gesture-handler';
+
+type StackParamList = {
+  ScreenA: undefined;
+  ScreenB: undefined;
+  ScreenC: undefined;
+};
+
+interface MainScreenProps {
+  navigation: NativeStackNavigationProp<StackParamList, 'ScreenA'>;
+}
+
+const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => (
+  <View style={{ ...styles.container, backgroundColor: 'moccasin' }}>
+    <Button
+      title="Go ScreenB"
+      onPress={() => {
+        navigation.navigate('ScreenB');
+      }}
+    />
+    <Button onPress={() => navigation.pop()} title="🔙 Back to Examples" />
+  </View>
+);
+
+interface ScreenBProps {
+  navigation: NativeStackNavigationProp<StackParamList, 'ScreenB'>;
+}
+
+const ScreenB = ({ navigation }: ScreenBProps): JSX.Element => (
+  <View style={{ ...styles.container, backgroundColor: 'thistle' }}>
+    <Button title="Go ScreenC" onPress={() => navigation.navigate('ScreenC')} />
+    <Button title="Go back" onPress={() => navigation.goBack()} />
+  </View>
+);
+
+interface ScreenCProps {
+  navigation: NativeStackNavigationProp<StackParamList, 'ScreenC'>;
+}
+
+const ScreenC = ({ navigation }: ScreenCProps): JSX.Element => (
+  <View style={{ ...styles.container, backgroundColor: 'blue' }}>
+    <Button title="Go back" onPress={() => navigation.goBack()} />
+  </View>
+);
+
+const Stack = createNativeStackNavigator<StackParamList>();
+
+const App = (): JSX.Element => (
+  <GestureHandlerRootView style={{ flex: 1 }}>
+    <NavigationContainer>
+      <GestureDetectorProvider>
+        <Stack.Navigator
+          screenOptions={{
+            headerBackVisible: false,
+            animation: 'none',
+          }}>
+          <Stack.Screen name="ScreenA" component={MainScreen} />
+          <Stack.Screen
+            name="ScreenB"
+            component={ScreenB}
+            options={{
+              goBackGesture: 'twoDimensionalSwipe',
+            }}
+          />
+          <Stack.Screen name="ScreenC" component={ScreenC} />
+        </Stack.Navigator>
+      </GestureDetectorProvider>
+    </NavigationContainer>
+  </GestureHandlerRootView>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 10,
+  },
+});
+
+export default App;
diff --git a/apps/src/tests/index.ts b/apps/src/tests/index.ts
@@ -117,6 +117,7 @@ export { default as Test2332 } from './Test2332';
 export { default as Test2379 } from './Test2379';
 export { default as Test2395 } from './Test2395';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
+export { default as TestScreenAnimationV5 } from './TestScreenAnimationV5';
 export { default as TestHeader } from './TestHeader';
 export { default as TestPreload } from './TestPreload';
 export { default as TestActivityStateProgression } from './TestActivityStateProgression';

diff --git a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
@@ -60,7 +60,7 @@ Boolean indicating whether the swipe gesture should work on whole screen. Swipin
 
 Boolean indicating whether the full screen dismiss gesture has shadow under view during transition. The gesture uses custom transition and thus
 doesn't have a shadow by default. When enabled, a custom shadow view is added during the transition which tries to mimic the
-default iOS shadow. Defaults to `false`.
+default iOS shadow. Defaults to `true`.
 
 ### `gestureEnabled` (iOS only)
 
@@ -223,7 +223,7 @@ Allows for the customization of how the given screen should appear/disappear whe
 - `"fade"` – fades screen in or out
 - `fade_from_bottom` – performs a fade from bottom animation
 - `"flip"` – flips the screen, requires `stackPresentation: "modal"` (iOS only)
-- `"simple_push"` – performs a default animation, but without shadow and native header transition (iOS only)
+- `"simple_push"` – performs a default animation, but without native header transition (iOS only)
 - `"slide_from_bottom"` - slide in the new screen from bottom to top
 - `"slide_from_right"` - slide in the new screen from right to left (Android only, resolves to default transition on iOS)
 - `"slide_from_left"` - slide in the new screen from left to right

diff --git a/ios/RNSConvert.mm b/ios/RNSConvert.mm
@@ -1,7 +1,7 @@
 #import "RNSConvert.h"
 
 #ifndef RCT_NEW_ARCH_ENABLED
-#import <react/RCTAssert.h>
+#import <React/RCTAssert.h>
 #endif // !RCT_NEW_ARCH_ENABLED
 
 @implementation RNSConvert

diff --git a/ios/RNSScreen.mm b/ios/RNSScreen.mm
@@ -119,6 +119,7 @@ - (void)initCommonProps
   _hasOrientationSet = NO;
   _hasHomeIndicatorHiddenSet = NO;
   _activityState = RNSActivityStateUndefined;
+  _fullScreenSwipeShadowEnabled = YES;
 #if !TARGET_OS_TV
   _sheetExpandsWhenScrolledToEdge = YES;
 #endif // !TARGET_OS_TV

diff --git a/native-stack/README.md b/native-stack/README.md
@@ -96,7 +96,7 @@ Boolean indicating whether the swipe gesture should work on whole screen. Swipin
 
 Boolean indicating whether the full screen dismiss gesture has shadow under view during transition. The gesture uses custom transition and thus
 doesn't have a shadow by default. When enabled, a custom shadow view is added during the transition which tries to mimic the
-default iOS shadow. Defaults to `false`.
+default iOS shadow. Defaults to `true`.
 
 #### `gestureEnabled` (iOS only)
 
@@ -325,7 +325,7 @@ How the given screen should appear/disappear when pushed or popped at the top of
 - `fade` - fades screen in or out.
 - `fade_from_bottom` – performs a fade from bottom animation
 - `flip` – flips the screen, requires stackPresentation: `modal` (iOS only)
-- `simple_push` – performs a default animation, but without shadow and native header transition (iOS only)
+- `simple_push` – performs a default animation, but without native header transition (iOS only)
 - `slide_from_bottom` – performs a slide from bottom animation
 - `slide_from_right` - slide in the new screen from right to left (Android only, resolves to default transition on iOS)
 - `slide_from_left` - slide in the new screen from left to right

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-screens",
-  "version": "4.0.0-beta.16",
+  "version": "4.0.0-beta.17",
   "description": "Native navigation primitives for your React Native app.",
   "scripts": {
     "submodules": "git submodule update --init --recursive && (cd react-navigation && yarn)",

diff --git a/react-native.config.js b/react-native.config.js
@@ -1,34 +1,22 @@
-let supportsCodegenConfig = false;
-try {
-  const rnCliAndroidVersion =
-    require('@react-native-community/cli-platform-android/package.json').version;
-  const [major] = rnCliAndroidVersion.split('.');
-  supportsCodegenConfig = major >= 9;
-} catch (e) {
-  // ignore
-}
-
 module.exports = {
   dependency: {
     platforms: {
-      android: supportsCodegenConfig 
-      ? {
-          componentDescriptors: [
-            "RNSFullWindowOverlayComponentDescriptor",
-            "RNSScreenContainerComponentDescriptor",
-            "RNSScreenNavigationContainerComponentDescriptor",
-            "RNSScreenStackHeaderConfigComponentDescriptor",
-            "RNSScreenStackHeaderSubviewComponentDescriptor",
-            "RNSScreenStackComponentDescriptor",
-            "RNSSearchBarComponentDescriptor",
-            'RNSScreenComponentDescriptor',
-            "RNSScreenFooterComponentDescriptor",
-            "RNSScreenContentWrapperComponentDescriptor",
-            'RNSModalScreenComponentDescriptor'
-          ],
-          cmakeListsPath: "../android/src/main/jni/CMakeLists.txt"
-        } 
-      : {},
+      android: {
+        componentDescriptors: [
+          "RNSFullWindowOverlayComponentDescriptor",
+          "RNSScreenContainerComponentDescriptor",
+          "RNSScreenNavigationContainerComponentDescriptor",
+          "RNSScreenStackHeaderConfigComponentDescriptor",
+          "RNSScreenStackHeaderSubviewComponentDescriptor",
+          "RNSScreenStackComponentDescriptor",
+          "RNSSearchBarComponentDescriptor",
+          'RNSScreenComponentDescriptor',
+          "RNSScreenFooterComponentDescriptor",
+          "RNSScreenContentWrapperComponentDescriptor",
+          'RNSModalScreenComponentDescriptor'
+        ],
+        cmakeListsPath: "../android/src/main/jni/CMakeLists.txt"
+      },
     },
   },
 };
diff --git a/src/components/DebugContainer.tsx b/src/components/DebugContainer.tsx
@@ -16,9 +16,9 @@ type ContainerProps = ViewProps & {
  * See https://github.com/software-mansion/react-native-screens/pull/1825
  * for detailed explanation.
  */
-let DebugContainer: React.ComponentType<ContainerProps> = (props) => {
+let DebugContainer: React.ComponentType<ContainerProps> = props => {
   return <ScreenContentWrapper {...props} />;
-}
+};
 
 if (process.env.NODE_ENV !== 'production') {
   // eslint-disable-next-line react/display-name

diff --git a/src/components/DebugContainer.web.tsx b/src/components/DebugContainer.web.tsx
@@ -2,6 +2,6 @@ import * as React from 'react';
 import { type ViewProps } from 'react-native';
 import ScreenContentWrapper from './ScreenContentWrapper';
 
-export default function DebugContainer(props: ViewProps)  {
+export default function DebugContainer(props: ViewProps) {
   return <ScreenContentWrapper {...props} />;
 }