Make it possible to go back to menu from key example and improve banner on menu screen (#3479)

* Make it possible to go back to menu from key example and improve banner on menu screen

* Fix NavigationPlayground flow error

packages/react-navigation/examples/NavigationPlayground/js/App.js

@@ -6,6 +6,8 @@ import { Constants, ScreenOrientation } from 'expo';
 ScreenOrientation.allow(ScreenOrientation.Orientation.ALL);
 
 import {
+  Animated,
+  Image,
   Platform,
   ScrollView,
   StyleSheet,
@@ -16,7 +18,6 @@ import {
 } from 'react-native';
 import { SafeAreaView, StackNavigator } from 'react-navigation';
 
-import Banner from './Banner';
 import CustomTabs from './CustomTabs';
 import CustomTransitioner from './CustomTransitioner';
 import Drawer from './Drawer';
@@ -141,41 +142,117 @@ const ExampleRoutes = {
   },
 };
 
-class MainScreen extends React.Component<*> {
+type State = {
+  scrollY: Animated.Value,
+};
+class MainScreen extends React.Component<any, State> {
+  state = {
+    scrollY: new Animated.Value(0),
+  };
+
   render() {
     const { navigation } = this.props;
 
+    const scale = this.state.scrollY.interpolate({
+      inputRange: [-450, 0, 100],
+      outputRange: [2, 1, 0.8],
+      extrapolate: 'clamp',
+    });
+
+    const translateY = this.state.scrollY.interpolate({
+      inputRange: [-450, 0, 100],
+      outputRange: [-150, 0, 40],
+    });
+
+    const opacity = this.state.scrollY.interpolate({
+      inputRange: [0, 50],
+      outputRange: [1, 0],
+      extrapolate: 'clamp',
+    });
+
+    const backgroundScale = this.state.scrollY.interpolate({
+      inputRange: [-450, 0],
+      outputRange: [3, 1],
+      extrapolate: 'clamp',
+    });
+
+    const backgroundTranslateY = this.state.scrollY.interpolate({
+      inputRange: [-450, 0],
+      outputRange: [0, 0],
+    });
+
     return (
       <View style={{ flex: 1 }}>
-        <ScrollView style={{ flex: 1 }}>
-          <Banner />
-          {Object.keys(ExampleRoutes).map((routeName: string) => (
-            <TouchableOpacity
-              key={routeName}
-              onPress={() => {
-                const { path, params, screen } = ExampleRoutes[routeName];
-                const { router } = screen;
-                const action =
-                  path && router.getActionForPathAndParams(path, params);
-                navigation.navigate(routeName, {}, action);
-              }}
+        <Animated.ScrollView
+          style={{ flex: 1 }}
+          scrollEventThrottle={1}
+          onScroll={Animated.event(
+            [
+              {
+                nativeEvent: { contentOffset: { y: this.state.scrollY } },
+              },
+            ],
+            { useNativeDriver: true }
+          )}
+        >
+          <Animated.View
+            style={[
+              styles.backgroundUnderlay,
+              {
+                transform: [
+                  { scale: backgroundScale },
+                  { translateY: backgroundTranslateY },
+                ],
+              },
+            ]}
+          />
+          <Animated.View
+            style={{ opacity, transform: [{ scale }, { translateY }] }}
+          >
+            <SafeAreaView
+              style={styles.bannerContainer}
+              forceInset={{ top: 'always' }}
             >
-              <SafeAreaView
-                style={styles.itemContainer}
-                forceInset={{ vertical: 'never' }}
-              >
-                <View style={styles.item}>
-                  <Text style={styles.title}>
-                    {ExampleInfo[routeName].name}
-                  </Text>
-                  <Text style={styles.description}>
-                    {ExampleInfo[routeName].description}
-                  </Text>
-                </View>
-              </SafeAreaView>
-            </TouchableOpacity>
-          ))}
-        </ScrollView>
+              <View style={styles.banner}>
+                <Image
+                  source={require('./assets/NavLogo.png')}
+                  style={styles.bannerImage}
+                />
+                <Text style={styles.bannerTitle}>
+                  React Navigation Examples
+                </Text>
+              </View>
+            </SafeAreaView>
+          </Animated.View>
+
+          <SafeAreaView forceInset={{ bottom: 'always' }}>
+            <View style={{ backgroundColor: '#fff' }}>
+              {Object.keys(ExampleRoutes).map((routeName: string) => (
+                <TouchableOpacity
+                  key={routeName}
+                  onPress={() => {
+                    const { path, params, screen } = ExampleRoutes[routeName];
+                    const { router } = screen;
+                    const action =
+                      path && router.getActionForPathAndParams(path, params);
+                    navigation.navigate(routeName, {}, action);
+                  }}
+                >
+                  <View style={styles.itemContainer}>
+                    <View style={styles.item}>
+                      <Text style={styles.title}>
+                        {ExampleInfo[routeName].name}
+                      </Text>
+                      <Text style={styles.description}>
+                        {ExampleInfo[routeName].description}
+                      </Text>
+                    </View>
+                  </View>
+                </TouchableOpacity>
+              ))}
+            </View>
+          </SafeAreaView>
+        </Animated.ScrollView>
         <StatusBar barStyle="light-content" />
         <View style={styles.statusBarUnderlay} />
       </View>
@@ -238,4 +315,36 @@ const styles = StyleSheet.create({
     fontSize: 13,
     color: '#999',
   },
+  backgroundUnderlay: {
+    backgroundColor: '#673ab7',
+    position: 'absolute',
+    top: -100,
+    height: 300,
+    left: 0,
+    right: 0,
+  },
+  bannerContainer: {
+    // backgroundColor: '#673ab7',
+    paddingTop: 20,
+    alignItems: 'center',
+  },
+  banner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+  },
+  bannerImage: {
+    width: 36,
+    height: 36,
+    resizeMode: 'contain',
+    tintColor: '#fff',
+    margin: 8,
+  },
+  bannerTitle: {
+    fontSize: 18,
+    fontWeight: '200',
+    color: '#fff',
+    marginVertical: 8,
+    marginRight: 5,
+  },
 });

packages/react-navigation/examples/NavigationPlayground/js/StacksWithKeys.js

@@ -17,6 +17,10 @@ class HomeScreen extends React.Component<any, any> {
             })
           }
         />
+        <Button
+          title="Go back to other examples"
+          onPress={() => this.props.navigation.goBack(null)}
+        />
         <StatusBar barStyle="default" />
       </View>
     );
@@ -68,7 +72,7 @@ class SettingsScreen extends React.Component<any, any> {
           onPress={() =>
             this.props.navigation.navigate({
               routeName: 'Profile',
-              key: 'A'
+              key: 'A',
             })
           }
         />