Update navigation playground app

packages/react-navigation/examples/NavigationPlayground/.expo-shared/assets.json

@@ -0,0 +1,7 @@
+{
+  "2597acb02c2c2a7cf6627e6e3570f99612cb9e87847e685e6a60b5668e2799a0": true,
+  "5e5a970a20c69dd6ecd2e5c3db621effc6e7eba78c972a63dacd69e9e6734616": true,
+  "69ef6f9ec53cb7b1657de525c6c77f03fcecbe3607d4b6086995c73024a013fe": true,
+  "33e0eb31a7feec0d570d18432ac02c90520557ee17f021652be26b0a51fb9dcc": true,
+  "89ed26367cdb9b771858e026f2eb95bfdb90e5ae943e716575327ec325f39c44": true
+}

packages/react-navigation/examples/NavigationPlayground/app.json

@@ -1,6 +1,7 @@
 {
   "expo": {
-    "name": "NavigationPlayground",
+    "name": "React Navigation Playground",
+    "description": "Explore various patterns for navigation",
     "slug": "NavigationPlayground",
     "privacy": "public",
     "sdkVersion": "32.0.0",

packages/react-navigation/examples/NavigationPlayground/src/CustomTabUI.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import {
+  Alert,
+  TouchableOpacity,
   LayoutAnimation,
   StatusBar,
   StyleSheet,
@@ -8,6 +10,7 @@ import {
 } from 'react-native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import {
+  MaterialTopTabBar,
   createMaterialTopTabNavigator,
   NavigationScreenProp,
   NavigationState,
@@ -53,9 +56,9 @@ class MyHomeScreen extends React.Component<Props> {
   }
 }
 
-class RecommendedScreen extends React.Component<Props> {
+class StarredScreen extends React.Component<Props> {
   static navigationOptions = {
-    tabBarLabel: 'Recommended',
+    tabBarLabel: 'Starred',
     tabBarIcon: ({
       tintColor,
       focused,
@@ -76,7 +79,7 @@ class RecommendedScreen extends React.Component<Props> {
     const { navigation } = this.props;
     return (
       <SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
-        <Text>Recommended Screen</Text>
+        <Text>Starred Screen</Text>
         <Button
           onPress={() => navigation.navigate('Home')}
           title="Go to home tab"
@@ -87,6 +90,21 @@ class RecommendedScreen extends React.Component<Props> {
   }
 }
 
+type MaterialTopTabBarProps = React.ComponentProps<typeof MaterialTopTabBar>;
+
+class MaterialTopTabBarWrapper extends React.Component<MaterialTopTabBarProps> {
+  render() {
+    return (
+      <SafeAreaView
+        style={{ backgroundColor: '#000' }}
+        forceInset={{ top: 'always', horizontal: 'never', bottom: 'never' }}
+      >
+        <MaterialTopTabBar {...this.props} />
+      </SafeAreaView>
+    );
+  }
+}
+
 class FeaturedScreen extends React.Component<Props> {
   static navigationOptions = ({
     navigation,
@@ -125,11 +143,21 @@ class FeaturedScreen extends React.Component<Props> {
   }
 }
 
-const SimpleTabs = createMaterialTopTabNavigator({
-  Home: MyHomeScreen,
-  Recommended: RecommendedScreen,
-  Featured: FeaturedScreen,
-});
+const SimpleTabs = createMaterialTopTabNavigator(
+  {
+    Home: MyHomeScreen,
+    Starred: StarredScreen,
+    Featured: FeaturedScreen,
+  },
+  {
+    tabBarComponent: MaterialTopTabBarWrapper,
+    tabBarOptions: {
+      style: {
+        backgroundColor: '#000',
+      },
+    },
+  }
+);
 
 class TabNavigator extends React.Component<Props> {
   static router = SimpleTabs.router;
@@ -143,25 +171,32 @@ class TabNavigator extends React.Component<Props> {
     let bottom = null;
     if (activeRoute.routeName !== 'Home') {
       bottom = (
-        <View style={{ height: 50, borderTopWidth: StyleSheet.hairlineWidth }}>
-          <Button
-            title="Check out"
+        <View
+          style={{
+            height: 50,
+            borderTopWidth: StyleSheet.hairlineWidth,
+            backgroundColor: '#000',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <TouchableOpacity
             onPress={() => {
+              Alert.alert('hello!');
               //
             }}
-          />
+          >
+            <Text style={{ fontSize: 20, color: '#fff', fontWeight: 'bold' }}>
+              Check out
+            </Text>
+          </TouchableOpacity>
         </View>
       );
     }
     return (
       <View style={{ flex: 1 }}>
-        <StatusBar barStyle="default" />
-        <SafeAreaView
-          style={{ flex: 1 }}
-          forceInset={{ horizontal: 'always', top: 'always' }}
-        >
-          <SimpleTabs navigation={navigation} />
-        </SafeAreaView>
+        <StatusBar barStyle="light-content" />
+        <SimpleTabs navigation={navigation} />
         {bottom}
       </View>
     );