🚧 (example) improve example with a tab bar and instructions

Author: tpucci

example/src/App.tsx

@@ -1,58 +1,79 @@
 import React, { Component } from 'react';
-import { Instagram } from './canals/Instagram';
-import { FullScreenPortal } from 'react-gondola';
 import { View, TouchableOpacity, Text } from 'react-native';
-import { Navigation } from 'react-gondola/Navigation';
+import { Navigation } from 'react-gondola';
+import { FullScreenPortal, Canal, Screen } from 'react-gondola';
+import { Instagram } from './canals/Instagram';
+import { Welcome } from './Welcome';
 
 interface State {
-  example: null | 'Instagram';
+  example: null | 'Instagram' | 'Welcome';
 }
 
-const EXAMPLES = { Instagram };
+const EXAMPLES = { Welcome, Instagram };
 
 export default class App extends Component<{}, State> {
   state: State = {
-    example: 'Instagram',
+    example: 'Welcome',
   };
 
   render() {
-    if (!this.state.example) {
-      return (
-        <View style={{ alignItems: 'center', flex: 1, justifyContent: 'center' }}>
-          {Object.keys(EXAMPLES).map(example => (
-            <TouchableOpacity
-              key={example}
-              onPress={() => {
-                // @ts-ignore
-                this.setState({ example });
-              }}
-              style={{
-                paddingHorizontal: 16,
-                paddingVertical: 8,
-                backgroundColor: 'cyan',
-                borderRadius: 4,
-                marginTop: 8,
-              }}
-            >
-              <Text>{example}</Text>
-            </TouchableOpacity>
-          ))}
-        </View>
-      );
-    }
-
-    const Example = EXAMPLES[this.state.example];
-
     return (
       <>
         <FullScreenPortal>
-          <Example />
+          <Canal style={{ flex: 1 }}>
+            {Object.keys(EXAMPLES).map(example => (
+              <Screen
+                key={example}
+                name={example}
+                // @ts-ignore
+                Component={EXAMPLES[example]}
+                visible={this.state.example === example}
+                onBack={() => {
+                  this.setState({ example: 'Welcome' });
+                }}
+              />
+            ))}
+          </Canal>
+          <View
+            style={{
+              height: 48,
+              justifyContent: 'space-around',
+              flexDirection: 'row',
+              shadowColor: '#000',
+              shadowOffset: {
+                width: 0,
+                height: 2,
+              },
+              shadowOpacity: 0.25,
+              shadowRadius: 3.84,
+              elevation: 5,
+              backgroundColor: 'white',
+            }}
+          >
+            {Object.keys(EXAMPLES).map(example => (
+              <TouchableOpacity
+                key={example}
+                onPress={() => {
+                  // @ts-ignore
+                  this.setState({ example });
+                }}
+                style={{
+                  justifyContent: 'center',
+                  borderTopWidth: 2,
+                  paddingBottom: 2,
+                  borderTopColor: this.state.example === example ? 'blue' : 'transparent',
+                }}
+              >
+                <Text>{example}</Text>
+              </TouchableOpacity>
+            ))}
+          </View>
         </FullScreenPortal>
         <TouchableOpacity
-          style={{ position: 'absolute', bottom: 8, right: 8 }}
+          style={{ position: 'absolute', top: 20, left: 0 }}
           onPress={Navigation.instance.back}
         >
-          <View style={{ backgroundColor: 'black', borderRadius: 4 }}>
+          <View style={{ backgroundColor: 'black', borderBottomRightRadius: 4 }}>
             <Text style={{ color: 'white', margin: 4 }}>Go Back</Text>
           </View>
         </TouchableOpacity>

example/src/Welcome.tsx

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import { View, Text } from 'react-native';
+
+export class Welcome extends Component {
+  render() {
+    return (
+      <View style={{ flex: 1, justifyContent: 'center', padding: 16 }}>
+        <Text style={{ fontSize: 32, fontWeight: '500', textAlign: 'center', marginBottom: 16 }}>
+          Welcome in React Gondola !
+        </Text>
+        <Text style={{ marginTop: 16 }}>
+          Choose an example in the tab bar to explore this example app.
+        </Text>
+        <Text style={{ marginTop: 16 }}>
+          To go back, press the GoBack button in the top left corner.
+        </Text>
+      </View>
+    );
+  }
+}

example/src/canals/Instagram/getRandomUser.ts

@@ -5,25 +5,27 @@ const users = [
     color: 'green',
     emoji: '💵',
     name: 'Joe Dalton',
-    description: "🏜 I'm a villain in the FarWest",
+    description:
+      "🏜 I'm a villain in the FarWest\n Try to long press a picture to see a fullscreen sneak peek !",
   },
   {
     color: 'blue',
     emoji: '🛰',
     name: 'Luke Skywalker',
-    description: 'Casting for a sitcom',
+    description:
+      'Casting for a sitcom\n Try to long press a picture to see a fullscreen sneak peek !',
   },
   {
     color: 'red',
     emoji: '👀',
     name: 'Mario',
-    description: 'Looking for Peach',
+    description: 'Looking for Peach\n Try to long press a picture to see a fullscreen sneak peek !',
   },
   {
     color: 'yellow',
     emoji: '🎤',
     name: 'Christophe Maé',
-    description: "🎶 J'avoueeeeee",
+    description: "🎶 J'avoueeeeee\n Try to long press a picture to see a fullscreen sneak peek !",
   },
 ];