feat: add 'slide_from_bottom' animation

software-mansion · Nov 29, 2020 · 213883e · 213883e
1 parent d3646ae
commit 213883e
Show file tree

Hide file tree

Showing 9 changed files with 120 additions and 95 deletions.
diff --git a/TestsExample/src/Test42.js b/TestsExample/src/Test42.js
@@ -8,121 +8,121 @@ import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 const Stack = createNativeStackNavigator();
 
 export default function NativeNavigation() {
-  return (
-    <NavigationContainer>
-      <Stack.Navigator
-        screenOptions={{
-          stackPresentation: 'modal',
-        }}>
-        <Stack.Screen
-          name="Home"
-          component={Home}
-          options={{
-            screenOrientation: 'portrait_up',
-          }}
-        />
-        <Stack.Screen
-          name="Profile"
-          component={TabNavigator}
-          options={{
-            screenOrientation: 'landscape',
-          }}
-        />
-      </Stack.Navigator>
-    </NavigationContainer>
-  );
+    return (
+        <NavigationContainer>
+            <Stack.Navigator
+                screenOptions={{
+                    stackPresentation: 'modal',
+                }}>
+                <Stack.Screen
+                    name="Home"
+                    component={Home}
+                    options={{
+                        screenOrientation: 'portrait_up',
+                    }}
+                />
+                <Stack.Screen
+                    name="Profile"
+                    component={TabNavigator}
+                    options={{
+                        screenOrientation: 'landscape',
+                    }}
+                />
+            </Stack.Navigator>
+        </NavigationContainer>
+    );
 }
 
 const Tab = createBottomTabNavigator();
 
 const TabNavigator = (props) => (
-  <Tab.Navigator screensEnabled={true}>
-    <Tab.Screen name="Tab1" component={Home} />
-    <Tab.Screen name="Tab2" component={Inner} />
-    <Tab.Screen name="Tab3" component={Home} />
-  </Tab.Navigator>
+    <Tab.Navigator screensEnabled={true}>
+        <Tab.Screen name="Tab1" component={Home} />
+        <Tab.Screen name="Tab2" component={Inner} />
+        <Tab.Screen name="Tab3" component={Home} />
+    </Tab.Navigator>
 );
 
 const NestedTab = createBottomTabNavigator();
 
 const NestedTabNavigator = (props) => (
-  <NestedTab.Navigator screensEnabled={true}>
-    <NestedTab.Screen name="Tab1" component={Home} />
-  </NestedTab.Navigator>
+    <NestedTab.Navigator screensEnabled={true}>
+        <NestedTab.Screen name="Tab1" component={Home} />
+    </NestedTab.Navigator>
 );
 
 const InnerStack = createNativeStackNavigator();
 
 const Inner = (props) => (
-  <InnerStack.Navigator
-    screenOptions={{
-      screenOrientation: 'portrait_down',
-    }}>
-    <InnerStack.Screen name="DeeperHome" component={Home} />
-  </InnerStack.Navigator>
+    <InnerStack.Navigator
+        screenOptions={{
+            screenOrientation: 'portrait_down',
+        }}>
+        <InnerStack.Screen name="DeeperHome" component={Home} />
+    </InnerStack.Navigator>
 );
 
 function Home({navigation}) {
-  const [yes, setYes] = React.useState(true);
-  return (
-    <ScrollView
-      style={{backgroundColor: 'yellow'}}
-      contentInsetAdjustmentBehavior="automatic"
-      >
-      <View style={styles.leftTop} />
-      <Button
-        title="Profile"
-        onPress={() => {
-          navigation.push('Profile');
-        }}
-      />
-      <Button
-        title="status bar style"
-        onPress={() => {
-          navigation.setOptions({
-            screenOrientation: Math.random() > 0.5 ? 'portrait' : 'landscape',
-          });
-          setYes(!yes);
-        }}
-      />
-    </ScrollView>
-  );
+    const [yes, setYes] = React.useState(true);
+    return (
+        <ScrollView
+            style={{backgroundColor: 'yellow'}}
+            contentInsetAdjustmentBehavior="automatic"
+        >
+            <View style={styles.leftTop} />
+            <Button
+                title="Profile"
+                onPress={() => {
+                    navigation.push('Profile');
+                }}
+            />
+            <Button
+                title="status bar style"
+                onPress={() => {
+                    navigation.setOptions({
+                        screenOrientation: Math.random() > 0.5 ? 'portrait' : 'landscape',
+                    });
+                    setYes(!yes);
+                }}
+            />
+        </ScrollView>
+    );
 }
 
 function Profile({navigation}) {
-  const [yes, setYes] = React.useState(true);
-  return (
-    <ScrollView style={{backgroundColor: 'red'}}>
-      <Text>Profile</Text>
-      <Button
-        title="Home"
-        onPress={() => {
-          navigation.navigate('Home');
-        }}
-      />
-      <Button
-        title="One more Profile"
-        onPress={() => {
-          navigation.push('Profile');
-        }}
-      />
-      <Button
-        title="status bar style"
-        onPress={() => {
-          navigation.setOptions({
-            statusBarHidden: yes,
-          });
-          setYes(!yes);
-        }}
-      />
-    </ScrollView>
-  );
+    const [yes, setYes] = React.useState(true);
+    return (
+        <ScrollView style={{backgroundColor: 'red'}}>
+            <Text>Profile</Text>
+            <Button
+                title="Home"
+                onPress={() => {
+                    navigation.navigate('Home');
+                }}
+            />
+            <Button
+                title="One more Profile"
+                onPress={() => {
+                    navigation.push('Profile');
+                }}
+            />
+            <Button
+                title="status bar style"
+                onPress={() => {
+                    navigation.setOptions({
+                        statusBarHidden: yes,
+                    });
+                    setYes(!yes);
+                }}
+            />
+        </ScrollView>
+    );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
 });
diff --git a/android/src/main/java/com/swmansion/rnscreens/Screen.java b/android/src/main/java/com/swmansion/rnscreens/Screen.java
@@ -30,7 +30,8 @@ public enum StackAnimation {
     NONE,
     FADE,
     SLIDE_FROM_RIGHT,
-    SLIDE_FROM_LEFT
+    SLIDE_FROM_LEFT,
+    SLIDE_FROM_BOTTOM
   }
 
   public enum ReplaceAnimation {

diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenStack.java b/android/src/main/java/com/swmansion/rnscreens/ScreenStack.java
@@ -192,6 +192,10 @@ protected void performUpdate() {
             customAnimation = true;
             getOrCreateTransaction().setCustomAnimations(R.anim.rns_slide_in_from_left, R.anim.rns_slide_out_to_right);
             break;
+          case SLIDE_FROM_BOTTOM:
+            customAnimation = true;
+            getOrCreateTransaction().setCustomAnimations(R.anim.rns_slide_in_from_bottom, R.anim.rns_slide_out_to_bottom);
+            break;
         }
 
         if (!customAnimation) {
@@ -217,6 +221,10 @@ protected void performUpdate() {
           customAnimation = true;
           getOrCreateTransaction().setCustomAnimations(R.anim.rns_slide_in_from_right, R.anim.rns_slide_out_to_left);
           break;
+        case SLIDE_FROM_BOTTOM:
+          customAnimation = true;
+          getOrCreateTransaction().setCustomAnimations(R.anim.rns_slide_in_from_bottom, R.anim.rns_slide_out_to_bottom);
+          break;
       }
 
       if (!customAnimation) {

diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenViewManager.java b/android/src/main/java/com/swmansion/rnscreens/ScreenViewManager.java
@@ -71,6 +71,8 @@ public void setStackAnimation(Screen view, String animation) {
       view.setStackAnimation(Screen.StackAnimation.SLIDE_FROM_RIGHT);
     } else if ("slide_from_left".equals(animation)) {
       view.setStackAnimation(Screen.StackAnimation.SLIDE_FROM_LEFT);
+    } else if ("slide_from_bottom".equals(animation)) {
+      view.setStackAnimation(Screen.StackAnimation.SLIDE_FROM_BOTTOM);
     }
   }
 

diff --git a/android/src/main/res/anim/rns_slide_in_from_bottom.xml b/android/src/main/res/anim/rns_slide_in_from_bottom.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<translate xmlns:android="http://schemas.android.com/apk/res/android"
+           android:duration="@android:integer/config_mediumAnimTime"
+           android:fromYDelta="100%"
+           android:toYDelta="0%" />
diff --git a/android/src/main/res/anim/rns_slide_out_to_bottom.xml b/android/src/main/res/anim/rns_slide_out_to_bottom.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<translate xmlns:android="http://schemas.android.com/apk/res/android"
+           android:duration="@android:integer/config_mediumAnimTime"
+           android:fromYDelta="0%"
+           android:toYDelta="100%" />
diff --git a/createNativeStackNavigator/README.md b/createNativeStackNavigator/README.md
@@ -127,6 +127,7 @@ How the given screen should appear/disappear when pushed or popped at the top of
 - `flip` – Flips the screen, requires stackPresentation: `modal` (iOS only).
 - `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 (Android only, resolves to default transition on iOS)
+- `slide_from_bottom` - slide in the new screen from bottom to top (Android only, resolves to default transition on iOS)
 - `none` - The screen appears/disappears without an animation.
 
 Defaults to `default`.

diff --git a/ios/RNSScreen.m b/ios/RNSScreen.m
@@ -519,6 +519,7 @@ @implementation RCTConvert (RNSScreen)
                                                   @"flip": @(RNSScreenStackAnimationFlip),
                                                   @"slide_from_right": @(RNSScreenStackAnimationDefault),
                                                   @"slide_from_left": @(RNSScreenStackAnimationDefault),
+                                                  @"slide_from_bottom": @(RNSScreenStackAnimationDefault),
                                                   }), RNSScreenStackAnimationDefault, integerValue)
 
 RCT_ENUM_CONVERTER(RNSScreenReplaceAnimation, (@{

diff --git a/src/index.d.ts b/src/index.d.ts
@@ -28,7 +28,8 @@ declare module 'react-native-screens' {
     | 'flip'
     | 'none'
     | 'slide_from_right'
-    | 'slide_from_left';
+    | 'slide_from_left'
+    | 'slide_from_bottom';
   export type BlurEffectTypes =
     | 'extraLight'
     | 'light'
@@ -98,6 +99,7 @@ declare module 'react-native-screens' {
      *  @type "flip" – flips the screen, requires stackPresentation: "modal" (iOS only)
      *  @type "slide_from_right" - slide in the new screen from right to left (Android only, resolves to default transition on iOS)
      *  @type "slide_from_left" - slide in the new screen from left to right (Android only, resolves to default transition on iOS)
+     *  @type "slide_from_bottom" - slide in the new screen from bottom to top (Android only, resolves to default transition on iOS)
      *  @type "none" – the screen appears/dissapears without an animation
      */
     stackAnimation?: StackAnimationTypes;