chore: improve the example app

packages/tabs/example/App.js

@@ -27,9 +27,18 @@ class Home extends React.Component {
 }
 
 const App = createStackNavigator({
-  Home,
-  BottomTabs,
-  MaterialTopTabs,
+  Home: {
+    screen: Home,
+    navigationOptions: { title: 'Examples' },
+  },
+  BottomTabs: {
+    screen: BottomTabs,
+    navigationOptions: { title: 'Bottom tabs' },
+  },
+  MaterialTopTabs: {
+    screen: MaterialTopTabs,
+    navigationOptions: { title: 'Material top tabs' },
+  },
 });
 
 const styles = {

packages/tabs/example/src/BottomTabs.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { View, Text } from 'react-native';
 import { createBottomTabNavigator } from 'react-navigation-tabs';
 import { MaterialIcons } from '@expo/vector-icons';
+import PhotoGrid from './shared/PhotoGrid';
 
 const tabBarIcon = name => ({ tintColor }) => (
   <MaterialIcons name={name} color={tintColor} size={24} />
@@ -13,11 +13,7 @@ class Album extends React.Component {
   };
 
   render() {
-    return (
-      <View>
-        <Text>Album</Text>
-      </View>
-    );
+    return <PhotoGrid id="album" />;
   }
 }
 
@@ -27,11 +23,7 @@ class Library extends React.Component {
   };
 
   render() {
-    return (
-      <View>
-        <Text>Library</Text>
-      </View>
-    );
+    return <PhotoGrid id="library" />;
   }
 }
 
@@ -41,11 +33,7 @@ class History extends React.Component {
   };
 
   render() {
-    return (
-      <View>
-        <Text>History</Text>
-      </View>
-    );
+    return <PhotoGrid id="history" />;
   }
 }
 
@@ -55,11 +43,7 @@ class Cart extends React.Component {
   };
 
   render() {
-    return (
-      <View>
-        <Text>Cart</Text>
-      </View>
-    );
+    return <PhotoGrid id="cart" />;
   }
 }
 

packages/tabs/example/src/MaterialTopTabs.js

@@ -1,34 +1,23 @@
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { createMaterialTopTabNavigator } from 'react-navigation-tabs';
+import PhotoGrid from './shared/PhotoGrid';
 
 class Album extends React.Component {
   render() {
-    return (
-      <View>
-        <Text>Album</Text>
-      </View>
-    );
+    return <PhotoGrid id="album" />;
   }
 }
 
 class Library extends React.Component {
   render() {
-    return (
-      <View>
-        <Text>Library</Text>
-      </View>
-    );
+    return <PhotoGrid id="library" />;
   }
 }
 
 class History extends React.Component {
   render() {
-    return (
-      <View>
-        <Text>History</Text>
-      </View>
-    );
+    return <PhotoGrid id="history" />;
   }
 }
 

packages/tabs/example/src/shared/PhotoGrid.js

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { View, Image, ScrollView, Dimensions, StyleSheet } from 'react-native';
+
+export default function PhotoGrid({ id }) {
+  const PHOTOS = Array.from({ length: 24 }).map(
+    (_, i) => `https://unsplash.it/300/300/?random&__id=${id}${i}`
+  );
+
+  return (
+    <ScrollView contentContainerStyle={styles.content}>
+      {PHOTOS.map(uri => (
+        <View key={uri} style={styles.item}>
+          <Image source={{ uri }} style={styles.photo} />
+        </View>
+      ))}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  content: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    padding: 4,
+  },
+  item: {
+    height: Dimensions.get('window').width / 2,
+    width: '50%',
+    padding: 4,
+  },
+  photo: {
+    flex: 1,
+    resizeMode: 'cover',
+  },
+});