Supported Material motion shared element container transforms (Android)

NavigationReactNative/sample/twitter/android/app/build.gradle

@@ -189,7 +189,7 @@ dependencies {
     implementation "com.facebook.react:react-native:+"  // From node_modules
 
     implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
-    implementation 'com.google.android.material:material:1.1.0'
+    implementation 'com.google.android.material:material:1.4.0'
 
     debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
       exclude group:'com.facebook.fbjni'

NavigationReactNative/sample/zoom/App.js

@@ -47,7 +47,10 @@ Linking.addEventListener('url', ({url}) => openLink(url));
 
 const App = () => (
   <NavigationHandler stateNavigator={stateNavigator}>
-    <NavigationStack sharedElements={(_, {name}) => name && [name]} />
+    <NavigationStack
+      sharedElement={(_, {color, search}) => !search ? color : null}
+      crumbStyle={from => from ? 'enter_crumb' : 'exit_crumb'}
+      unmountStyle={from => from ? 'enter_mount' : 'exit_mount'} />
   </NavigationHandler>
 );
 export default App;

NavigationReactNative/sample/zoom/Detail.js

@@ -3,7 +3,7 @@ import {Platform, StyleSheet, ScrollView, Text, View, TouchableHighlight} from '
 import {NavigationContext} from 'navigation-react';
 import {NavigationBar, RightBar, BarButton, TitleBar, SharedElement} from 'navigation-react-native';
 
-const Detail = ({colors, color, name, filter, search}) => {
+const Detail = ({colors, color, search}) => {
   const {stateNavigator} = useContext(NavigationContext);
   return (
     <>
@@ -21,28 +21,23 @@ const Detail = ({colors, color, name, filter, search}) => {
         </RightBar>
       </NavigationBar>
       <ScrollView contentInsetAdjustmentBehavior="automatic">
-        <SharedElement name={name} style={styles.color} transition="overshoot">
+        <SharedElement name={color} style={styles.color} duration={250}>
           <View style={{backgroundColor: color, flex: 1}} />
+          <Text style={styles.text}>{color}</Text>
         </SharedElement>
-        <Text style={styles.text}>{color}</Text>
         <View style={styles.colors}>
           {[1,2,3].map(i => colors[(colors.indexOf(color) + i) % 15])
-            .map(subcolor => {
-              const suffix = search ? '_search' : '';
-              const matched = !filter || subcolor.indexOf(filter.toLowerCase()) !== -1;
-              const name = matched ? subcolor + suffix : null;
-              return (
-                <TouchableHighlight
-                  key={subcolor}
-                  style={[styles.subcolor, {backgroundColor: subcolor}]}
-                  underlayColor={subcolor}
-                  onPress={() => {
-                    stateNavigator.navigate('detail', {color: subcolor, name, filter, search});
-                  }}>
-                    <View />
-                </TouchableHighlight>
-              )
-            }
+            .map(subcolor => (
+              <TouchableHighlight
+                key={subcolor}
+                style={[styles.subcolor, {backgroundColor: subcolor}]}
+                underlayColor={subcolor}
+                onPress={() => {
+                  stateNavigator.navigate('detail', {color: subcolor, search});
+                }}>
+                  <View />
+              </TouchableHighlight>
+            )
           )}
         </View>
       </ScrollView>
@@ -70,16 +65,17 @@ const styles = StyleSheet.create({
     paddingTop: 10,
   },
   color: {
-    height: 300,
+    height: 400,
     marginTop: 10,
     marginLeft: 15,
-    marginRight: 15,
+    marginRight: 15
   },
   text:{
     fontSize: 80,
     color: '#000',
     textAlign:'center',
     fontWeight: 'bold',
+    backgroundColor: 'white'
   },
   colors: {
     flexDirection: 'row',

NavigationReactNative/sample/zoom/Grid.js

@@ -1,47 +1,46 @@
 import React, {useContext, useState} from 'react';
-import {Platform, StyleSheet, ScrollView, View, TouchableHighlight} from 'react-native';
+import {Platform, StyleSheet, ScrollView, View, TouchableHighlight, Text} from 'react-native';
 import {NavigationContext} from 'navigation-react';
 import {SharedElement, NavigationBar, SearchBar, RightBar, BarButton} from 'navigation-react-native';
 
-const Colors = ({colors, children, filter}) => {
+const Container = (props) => (
+  Platform.OS === 'ios' ? <ScrollView {...props}/> : <View {...props} />
+);
+
+const SearchResults = ({colors, text}) => {
   const {stateNavigator} = useContext(NavigationContext);
-  const suffix = filter != null ? '_search' : '';
-  const matchedColors = colors.filter(color => (
-    !filter || color.indexOf(filter.toLowerCase()) !== -1
-  ));
   return (
     <ScrollView
       style={styles.scene}
       contentInsetAdjustmentBehavior="automatic">
-      <View style={styles.colors}>
-        {matchedColors.map(color => (
-          <TouchableHighlight
-            key={color}
-            style={styles.color}
-            underlayColor={color}                
-            onPress={() => {
-              stateNavigator.navigate('detail', {
-                color, name: color + suffix, filter, search: filter != null
-              });
-            }}>
-            <SharedElement name={color + suffix} style={{flex: 1}}>
-              <View style={{backgroundColor: color, flex: 1}} />
-            </SharedElement>
-          </TouchableHighlight>
-        ))}
-        {children}
+      <View>
+        {colors
+          .filter(color => (
+            !text || color.indexOf(text.toLowerCase()) !== -1
+          ))
+          .map(color => (
+            <TouchableHighlight
+              key={color}
+              style={styles.result}
+              underlayColor="white"
+              onPress={() => {
+                stateNavigator.navigate('detail', {color, search: true});
+              }}>
+                <>
+                  <View style={{backgroundColor: color, width: 100, height: 50}} />
+                  <Text style={{fontSize: 25, marginLeft: 10}}>{color}</Text>
+                </>
+            </TouchableHighlight>
+          ))}
       </View>
     </ScrollView>
-  );
+  )
 }
 
-const Container = (props) => (
-  Platform.OS === 'ios' ? <ScrollView {...props}/> : <View {...props} />
-);
-
 const Grid = ({colors}) => {
   const [text, setText] = useState('');
-  return (    
+  const {stateNavigator} = useContext(NavigationContext);
+  return (
     <Container
       style={styles.scene}
       collapsable={false}
@@ -55,13 +54,32 @@ const Grid = ({colors}) => {
           autoCapitalize="none"
           obscureBackground={false}
           onChangeText={text => setText(text)}>
-          <Colors colors={colors} filter={text} />
+          <SearchResults colors={colors} text={text} />
         </SearchBar>
         <RightBar>
           <BarButton title="search" show="always" search={true} />
         </RightBar>
       </NavigationBar>
-      <Colors colors={colors} />
+      <ScrollView
+        style={styles.scene}
+        contentInsetAdjustmentBehavior="automatic">
+        <View style={styles.colors}>
+          {colors.map(color => (
+            <TouchableHighlight
+              key={color}
+              style={styles.color}
+              underlayColor="transparent"                
+              onPress={() => {
+                stateNavigator.navigate('detail', {color});
+              }}>
+              <SharedElement name={color} style={{flex: 1}} duration={250}>
+                <View style={{backgroundColor: color, flex: 1}} />
+                <Text style={styles.text}>{color}</Text>
+              </SharedElement>
+            </TouchableHighlight>
+          ))}
+        </View>
+      </ScrollView>
     </Container>
   );
 };
@@ -86,4 +104,16 @@ const styles = StyleSheet.create({
     marginRight: 10,
     marginBottom: 20,
   },
-});
+  text: {
+    fontSize: 25,
+    textAlign: 'center',
+    fontWeight: 'bold',
+    backgroundColor: 'white'
+  },
+  result: {
+    flex: 1,
+    flexDirection: 'row',
+    margin: 10,
+    alignItems: 'center'    
+  }
+});

NavigationReactNative/sample/zoom/android/app/src/main/res/anim/enter_crumb.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<set xmlns:android="http://schemas.android.com/apk/res/android">
+    <scale android:fromXScale="80%p"
+        android:toXScale="100%p"
+        android:fromYScale="80%p"
+        android:toYScale="100%p"
+        android:pivotX="50%p"
+        android:pivotY="50%p"
+        android:duration="250" />
+    <alpha android:fromAlpha="0"
+        android:toAlpha="1.0"
+        android:duration="250"/>
+</set>

NavigationReactNative/sample/zoom/android/app/src/main/res/anim/enter_mount.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<set xmlns:android="http://schemas.android.com/apk/res/android">
+    <alpha android:fromAlpha="0"
+        android:toAlpha="1.0"
+        android:duration="250"/>
+</set>

NavigationReactNative/sample/zoom/android/app/src/main/res/anim/exit_crumb.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<set xmlns:android="http://schemas.android.com/apk/res/android">
+    <scale android:fromXScale="100%p"
+        android:toXScale="80%p"
+        android:fromYScale="100%p"
+        android:toYScale="80%p"
+        android:pivotX="50%p"
+        android:pivotY="50%p"
+        android:duration="250" />
+    <alpha android:fromAlpha="1"
+        android:toAlpha="0"
+        android:duration="250"/>
+</set>

NavigationReactNative/sample/zoom/android/app/src/main/res/anim/exit_mount.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<set xmlns:android="http://schemas.android.com/apk/res/android">
+    <alpha android:fromAlpha="1"
+        android:toAlpha="0"
+        android:duration="250"/>
+</set>

NavigationReactNative/src/NavigationStack.tsx

@@ -4,7 +4,7 @@ import { Crumb, State } from 'navigation';
 import { NavigationContext, AsyncStateNavigator } from 'navigation-react';
 import PopSync from './PopSync';
 import Scene from './Scene';
-type NavigationStackProps = {stateNavigator: AsyncStateNavigator, title: (state: State, data: any) => string, crumbStyle: any, unmountStyle: any, hidesTabBar: any, sharedElements: any, renderScene: (state: State, data: any) => ReactNode};
+type NavigationStackProps = {stateNavigator: AsyncStateNavigator, title: (state: State, data: any) => string, crumbStyle: any, unmountStyle: any, hidesTabBar: any, sharedElement: any, renderScene: (state: State, data: any) => ReactNode};
 type NavigationStackState = {stateNavigator: AsyncStateNavigator, keys: string[]};
 
 class NavigationStack extends React.Component<NavigationStackProps, NavigationStackState> {
@@ -22,7 +22,7 @@ class NavigationStack extends React.Component<NavigationStackProps, NavigationSt
         unmountStyle: () => null,
         crumbStyle: () => null,
         hidesTabBar: () => false,
-        sharedElements: () => null
+        sharedElement: () => null
     }
     static getDerivedStateFromProps({stateNavigator}: NavigationStackProps, {keys: prevKeys, stateNavigator: prevStateNavigator}: NavigationStackState) {
         if (stateNavigator === prevStateNavigator)
@@ -62,7 +62,7 @@ class NavigationStack extends React.Component<NavigationStackProps, NavigationSt
             stateNavigator.navigateBack(crumbs.length);
     }
     getAnimation() {
-        var {stateNavigator, unmountStyle, crumbStyle, sharedElements: getSharedElements} = this.props;
+        var {stateNavigator, unmountStyle, crumbStyle, sharedElement: getSharedElement} = this.props;
         var {state, data, oldState, oldData, oldUrl, crumbs, nextCrumb} = stateNavigator.stateContext;
         if (!oldState)
             return null;
@@ -71,20 +71,20 @@ class NavigationStack extends React.Component<NavigationStackProps, NavigationSt
             var {state: nextState, data: nextData} = crumbs.concat(nextCrumb)[oldCrumbs.length + 1];
             var enterAnim = unmountStyle(true, state, data, crumbs);
             var exitAnim = crumbStyle(false, oldState, oldData, oldCrumbs, nextState, nextData);
-            var sharedElements = getSharedElements(state, data, crumbs);
+            var sharedElement = getSharedElement(state, data, crumbs);
         }
         if (crumbs.length < oldCrumbs.length) {
             var nextCrumb = new Crumb(oldData, oldState, null, null, false);
             var {state: nextState, data: nextData} = oldCrumbs.concat(nextCrumb)[crumbs.length + 1];
             var enterAnim = crumbStyle(true, state, data, crumbs, nextState, nextData);
             var exitAnim = unmountStyle(false, oldState, oldData, oldCrumbs);
-            var oldSharedElements = getSharedElements(oldState, oldData, oldCrumbs);
+            var oldSharedElement = getSharedElement(oldState, oldData, oldCrumbs);
         }
         if (crumbs.length === oldCrumbs.length) {
             var enterAnim = unmountStyle(true, state, data, crumbs);
             var exitAnim = unmountStyle(false, oldState, oldData, oldCrumbs, state, data);
         }
-        return {enterAnim, exitAnim, sharedElements, oldSharedElements};
+        return {enterAnim, exitAnim, sharedElement, oldSharedElement};
     }
     render() {
         var {keys} = this.state;

NavigationReactNative/src/SharedElement.tsx

@@ -1,13 +1,10 @@
 import React from 'react';
 import { requireNativeComponent, Platform, View } from 'react-native';
 
-var SharedElement = ({transition, ...props}) => (
-    Platform.OS == 'android' ? (
-        <NVSharedElement
-            enterTransition={typeof transition !== 'function' ? transition : transition(true)}
-            exitTransition={typeof transition !== 'function' ? transition : transition(false)}
-            {...props} />
-    ) : <View {...props} />
+var SharedElement = ({ style, children, ...props }) => (
+    Platform.OS == 'android'
+        ? <NVSharedElement {...props} style={style}>{children}</NVSharedElement>
+        : <View style={style}>{children}</View>
 );
 
 var NVSharedElement = requireNativeComponent<any>('NVSharedElement', null);

NavigationReactNative/src/android/build.gradle

@@ -38,7 +38,7 @@ repositories {
 
 dependencies {
     implementation 'com.facebook.react:react-native:+'
-    implementation 'com.google.android.material:material:1.1.0'
+    implementation 'com.google.android.material:material:1.4.0'
     implementation 'androidx.viewpager2:viewpager2:1.0.0'
 }
 

NavigationReactNative/src/android/src/main/java/com/navigation/reactnative/NavigationStackManager.java

@@ -38,14 +38,14 @@ public void setExitAnim(NavigationStackView view, String exitAnim) {
         view.exitAnim = exitAnim;
     }
 
-    @ReactProp(name = "sharedElements")
-    public void setSharedElements(NavigationStackView view, ReadableArray sharedElements) {
-        view.sharedElementNames = sharedElements;
+    @ReactProp(name = "sharedElement")
+    public void setSharedElement(NavigationStackView view, String sharedElement) {
+        view.sharedElementName = sharedElement;
     }
 
-    @ReactProp(name = "oldSharedElements")
-    public void setOldSharedElements(NavigationStackView view, ReadableArray oldSharedElements) {
-        view.oldSharedElementNames = oldSharedElements;
+    @ReactProp(name = "oldSharedElement")
+    public void setOldSharedElement(NavigationStackView view, String oldSharedElement) {
+        view.oldSharedElementName = oldSharedElement;
     }
 
     @Nonnull