Add multi-platform-toolbar recipe

Author: warlyware

chapter-12/multi-platform-toolbar/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["babel-preset-expo"],
+  "env": {
+    "development": {
+      "plugins": ["transform-react-jsx-source"]
+    }
+  }
+}

chapter-12/multi-platform-toolbar/.gitignore

@@ -0,0 +1,3 @@
+node_modules/**/*
+.expo/*
+npm-debug.*

chapter-12/multi-platform-toolbar/.watchmanconfig

@@ -0,0 +1 @@
+{}

chapter-12/multi-platform-toolbar/App.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import Toolbar from './Toolbar';
+
+export default class App extends React.Component {
+  render() {
+    var toolbarItems = [{
+      id: 1,
+      title: 'Tab One',
+    }, {
+      id: 2,
+      title: 'Tab Two',
+    }, {
+      id: 3,
+      title: 'Tab Three',
+    }];
+
+    return (
+      <Toolbar items={toolbarItems} />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

chapter-12/multi-platform-toolbar/app.json

@@ -0,0 +1,27 @@
+{
+  "expo": {
+    "name": "multi-platform-toolbar",
+    "description": "This project is really great.",
+    "slug": "multi-platform-toolbar",
+    "privacy": "public",
+    "sdkVersion": "28.0.0",
+    "platforms": ["ios", "android"],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

chapter-12/multi-platform-toolbar/assets/icon.png

@@ -0,0 +1,37 @@
+import React from 'react';
+import {
+  Text,
+  View,
+  TouchableOpacity,
+  TouchableNativeFeedback,
+  Platform
+} from 'react-native';
+
+const Toolbar = ({ items }) => {
+  if (Platform.OS === 'ios') {
+    return <View style={{ flex: 1, flexDirection: 'row', marginTop: 24 }}>
+      {items.map((item, idx) => (
+        <TouchableOpacity key={idx}>
+          <View style={{ padding: 20 }}>
+            <Text>{item.title}</Text>
+          </View>
+        </TouchableOpacity>
+      ))}
+    </View>
+  }
+  if (Platform.OS === 'android') {
+    return (<View style={{ flex: 1, flexDirection: 'column' }}>
+      {items.map((item, idx)=>{
+        return (
+          <TouchableNativeFeedback key={idx}>
+            <View style={{ padding: 20 }}>
+              <Text>{item.title}</Text>
+            </View>
+          </TouchableNativeFeedback>
+        )
+      })}
+    </View>);
+  }
+};
+
+export default Toolbar;

chapter-12/multi-platform-toolbar/assets/splash.png

@@ -0,0 +1,9 @@
+{
+  "main": "node_modules/expo/AppEntry.js",
+  "private": true,
+  "dependencies": {
+    "expo": "^28.0.0",
+    "react": "16.3.1",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-28.0.0.tar.gz"
+  }
+}