Add some examples

2026-03-27 01:34:25 +08:00 · 2018-08-03 16:20:25 +02:00
parent 3c9ea4ee07
commit 45730efb29
16 changed files with 599 additions and 181 deletions
--- a/Example/App.js
+++ b/Example/App.js
@@ -1,196 +1,94 @@
-import React, { Component } from 'react';
+import React from 'react';
 import {
-  StyleSheet,
-  Button,
+  Text,
  View,
-  TextInput,
-  Animated,
-  Easing,
+  FlatList,
+  StyleSheet,
+  TouchableHighlight,
 } from 'react-native';
-import { Screen, ScreenContainer, ScreenStack } from 'react-native-screens';
+import { createStackNavigator, createSwitchNavigator } from 'react-navigation';

-const COLORS = ['azure', 'pink', 'cyan'];
+import Stack from './stack';
+import Container from './container';
+import Navigation from './navigation';

-export class Stack extends Component {
-  constructor(props) {
-    super(props);
+const SCREENS = {
+  Stack: { screen: Stack, title: 'ScreenStack example' },
+  Container: { screen: Container, title: 'ScreenContainer example' },
+  Navigation: { screen: Navigation, title: 'React Navigation example' },
+};

-    const progress = new Animated.Value(0);
-    const slideIn = progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [320, 0],
-    });
-    const slideOut = progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, 320],
-    });
-    const backSlideIn = progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [-50, 0],
-    });
-    const backSlideOut = progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, -50],
-    });
-
-    this.state = {
-      stack: ['azure'],
-      transitioning: 0,
-      progress,
-      slideIn,
-      slideOut,
-      backSlideIn,
-      backSlideOut,
-    };
-  }
-  push(key) {
-    this.setState({ stack: [...this.state.stack, key], transitioning: 1 });
-    this.state.progress.setValue(0);
-    Animated.timing(this.state.progress, {
-      duration: 5000,
-      easing: Easing.out(Easing.quad),
-      toValue: 1,
-      useNativeDriver: true,
-    }).start(() => {
-      this.setState({ transitioning: 0 });
-    });
-  }
-  pop() {
-    this.setState({ transitioning: -1 });
-    this.state.progress.setValue(0);
-    Animated.timing(this.state.progress, {
-      duration: 5000,
-      easing: Easing.out(Easing.quad),
-      toValue: 1,
-      useNativeDriver: true,
-    }).start(() => {
-      this.setState({
-        transitioning: 0,
-        stack: this.state.stack.slice(0, -1),
-      });
-    });
-  }
-  renderScreen = (key, index) => {
-    let style = StyleSheet.absoluteFill;
-    const { stack, transitioning } = this.state;
-    if (index === stack.length - 1) {
-      if (transitioning > 0) {
-        style = {
-          ...StyleSheet.absoluteFillObject,
-          transform: [{ translateX: this.state.slideIn }],
-        };
-      } else if (transitioning < 0) {
-        style = {
-          ...StyleSheet.absoluteFillObject,
-          transform: [{ translateX: this.state.slideOut }],
-        };
-      }
-    } else if (index === stack.length - 2) {
-      if (transitioning > 0) {
-        style = {
-          ...StyleSheet.absoluteFillObject,
-          transform: [{ translateX: this.state.backSlideOut }],
-        };
-      } else if (transitioning < 0) {
-        style = {
-          ...StyleSheet.absoluteFillObject,
-          transform: [{ translateX: this.state.backSlideIn }],
-        };
-      }
-    }
-    const active =
-      index === stack.length - 1 ||
-      (transitioning !== 0 && index === stack.length - 2);
-    return (
-      <Screen style={style} key={key} active={active}>
-        {this.props.renderScreen(key)}
-      </Screen>
-    );
+class MainScreen extends React.Component {
+  static navigationOptions = {
+    title: '📱 React Native Screens Examples',
  };
  render() {
-    const screens = this.state.stack.map(this.renderScreen);
+    const data = Object.keys(SCREENS).map(key => ({ key }));
    return (
-      <ScreenStack
-        transitioning={this.state.transitioning}
-        progress={this.state.progress}
-        style={styles.container}>
-        {screens}
-      </ScreenStack>
-    );
-    // return (
-    //   <ScreenContainer style={styles.container}>{screens}</ScreenContainer>
-    // );
-  }
-}
-
-// class Inner extends Component {
-//   state = { size: 20, display: 'flex' };
-//   componentDidMount() {
-//     setInterval(() => {
-//       this.setState({ size: Math.random() * 10 + 10 });
-//     }, 1500);
-//     setTimeout(() => this.setState({ display: 'none' }), 2000);
-//   }
-//   render() {
-//     return (
-//       <View collapsable={false} style={{ display: this.state.display }}>
-//         <LifecycleAwareView
-//           style={{
-//             width: this.state.size,
-//             height: this.state.size,
-//             backgroundColor: 'red',
-//           }}
-//         />
-//       </View>
-//     );
-//   }
-// }
-
-class App extends Component {
-  renderScreen = key => {
-    const index = COLORS.indexOf(key);
-    const color = key;
-    const pop = index > 0 ? () => this.stack.pop() : null;
-    const push = index < 2 ? () => this.stack.push(COLORS[index + 1]) : null;
-    return (
-      <View
-        style={{
-          flex: 1,
-          backgroundColor: color,
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}>
-        {pop && <Button title="Pop" onPress={pop} />}
-        {push && <Button title="Push" onPress={push} />}
-        <TextInput placeholder="Hello" style={styles.textInput} />
-      </View>
-    );
-  };
-  render() {
-    return (
-      <Stack
-        ref={stack => (this.stack = stack)}
-        renderScreen={this.renderScreen}
+      <FlatList
+        style={styles.list}
+        data={data}
+        ItemSeparatorComponent={ItemSeparator}
+        renderItem={props => (
+          <MainScreenItem
+            {...props}
+            onPressItem={({ key }) => this.props.navigation.navigate(key)}
+          />
+        )}
      />
    );
  }
 }

-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
+const ItemSeparator = () => <View style={styles.separator} />;
+
+class MainScreenItem extends React.Component {
+  _onPress = () => this.props.onPressItem(this.props.item);
+  render() {
+    const { key } = this.props.item;
+    return (
+      <TouchableHighlight onPress={this._onPress}>
+        <View style={styles.button}>
+          <Text style={styles.buttonText}>{SCREENS[key].title || key}</Text>
+        </View>
+      </TouchableHighlight>
+    );
+  }
+}
+
+const MainScreenNav = createStackNavigator({
+  MainScreen: { screen: MainScreen },
+});
+
+const ExampleApp = createSwitchNavigator(
+  {
+    Main: { screen: MainScreenNav },
+    ...SCREENS,
  },
-  textInput: {
-    backgroundColor: 'white',
-    borderWidth: 1,
+  {
+    initialRouteName: 'Main',
+  }
+);
+
+const styles = StyleSheet.create({
+  list: {
+    backgroundColor: '#EFEFF4',
+  },
+  separator: {
+    height: 1,
+    backgroundColor: '#DBDBE0',
+  },
+  buttonText: {
+    backgroundColor: 'transparent',
+  },
+  button: {
+    flex: 1,
+    height: 60,
    padding: 10,
-    marginHorizontal: 20,
-    alignSelf: 'stretch',
-    borderColor: 'black',
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#fff',
  },
 });

-export default App;
+export default ExampleApp;
--- a/Example/container.js
+++ b/Example/container.js
@@ -0,0 +1,100 @@
+import React, { Component } from 'react';
+import { StyleSheet, Button, View, TextInput } from 'react-native';
+import { Screen, ScreenContainer } from 'react-native-screens';
+
+export class LazyTabs extends Component {
+  state = {
+    screens: ['azure'],
+    active: 'azure',
+  };
+  goto(key) {
+    let { screens } = this.state;
+    if (screens.indexOf(key) === -1) {
+      screens = [...screens, key];
+    }
+    this.setState({ active: key, screens });
+  }
+  renderScreen = (key, index) => {
+    const active = key === this.state.active;
+    return (
+      <Screen style={StyleSheet.absoluteFill} key={key} active={active}>
+        {this.props.renderScreen(key)}
+      </Screen>
+    );
+  };
+  render() {
+    const screens = this.state.screens.map(this.renderScreen);
+    return (
+      <ScreenContainer style={styles.container}>{screens}</ScreenContainer>
+    );
+  }
+}
+
+class App extends Component {
+  renderScreen = key => {
+    const color = key;
+    return (
+      <View
+        style={{
+          flex: 1,
+          backgroundColor: color,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}>
+        <TextInput placeholder="Hello" style={styles.textInput} />
+      </View>
+    );
+  };
+  render() {
+    return (
+      <View style={styles.container}>
+        <LazyTabs
+          ref={tabs => (this.tabs = tabs)}
+          renderScreen={this.renderScreen}
+        />
+        <View style={styles.tabbar}>
+          <Button
+            style={styles.tabbutton}
+            title="azure"
+            onPress={() => this.tabs.goto('azure')}
+          />
+          <Button
+            style={styles.tabbutton}
+            title="pink"
+            onPress={() => this.tabs.goto('pink')}
+          />
+          <Button
+            style={styles.tabbutton}
+            title="cyan"
+            onPress={() => this.tabs.goto('cyan')}
+          />
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F5FCFF',
+  },
+  tabbar: {
+    alignSelf: 'stretch',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    backgroundColor: '#eee',
+    borderTopWidth: 1,
+    borderColor: '#ddd',
+  },
+  textInput: {
+    backgroundColor: 'white',
+    borderWidth: 1,
+    padding: 10,
+    marginHorizontal: 20,
+    alignSelf: 'stretch',
+    borderColor: 'black',
+  },
+});
+
+export default App;
--- a/Example/navigation/img/dawid-zawila-628275-unsplash.jpg
+++ b/Example/navigation/img/dawid-zawila-628275-unsplash.jpg
--- a/Example/navigation/img/dawid-zawila-715178-unsplash.jpg
+++ b/Example/navigation/img/dawid-zawila-715178-unsplash.jpg
--- a/Example/navigation/img/hires/dawid-zawila-628275-unsplash.jpg
+++ b/Example/navigation/img/hires/dawid-zawila-628275-unsplash.jpg
--- a/Example/navigation/img/hires/dawid-zawila-715178-unsplash.jpg
+++ b/Example/navigation/img/hires/dawid-zawila-715178-unsplash.jpg
--- a/Example/navigation/img/hires/janusz-maniak-143024-unsplash.jpg
+++ b/Example/navigation/img/hires/janusz-maniak-143024-unsplash.jpg
--- a/Example/navigation/img/hires/janusz-maniak-272680-unsplash.jpg
+++ b/Example/navigation/img/hires/janusz-maniak-272680-unsplash.jpg
--- a/Example/navigation/img/hires/mariusz-prusaczyk-185182-unsplash.jpg
+++ b/Example/navigation/img/hires/mariusz-prusaczyk-185182-unsplash.jpg
--- a/Example/navigation/img/janusz-maniak-143024-unsplash.jpg
+++ b/Example/navigation/img/janusz-maniak-143024-unsplash.jpg
--- a/Example/navigation/img/janusz-maniak-272680-unsplash.jpg
+++ b/Example/navigation/img/janusz-maniak-272680-unsplash.jpg
--- a/Example/navigation/img/mariusz-prusaczyk-185182-unsplash.jpg
+++ b/Example/navigation/img/mariusz-prusaczyk-185182-unsplash.jpg
--- a/Example/navigation/index.js
+++ b/Example/navigation/index.js
@@ -0,0 +1,125 @@
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  Button,
+  View,
+  TextInput,
+  Animated,
+  Image,
+  requireNativeComponent,
+} from 'react-native';
+import { createStackNavigator } from 'react-navigation';
+// import { createStackNavigator } from './react-navigation/react-navigation';
+
+export const LifecycleAwareView = requireNativeComponent(
+  'RNSLifecycleAwareView',
+  null
+);
+
+const IMGS = [
+  require('./img/dawid-zawila-628275-unsplash.jpg'),
+  require('./img/dawid-zawila-715178-unsplash.jpg'),
+  require('./img/janusz-maniak-143024-unsplash.jpg'),
+  require('./img/janusz-maniak-272680-unsplash.jpg'),
+];
+
+const Background = ({ index }) => (
+  <Image
+    resizeMode="cover"
+    source={IMGS[index % IMGS.length]}
+    style={{
+      opacity: 0.5,
+      width: null,
+      height: null,
+      ...StyleSheet.absoluteFillObject,
+    }}
+  />
+);
+
+class DetailsScreen extends React.Component {
+  static navigationOptions = ({ navigation }) => {
+    return {
+      title: 'Details screen #' + navigation.getParam('index', '0'),
+    };
+  };
+  animvalue = new Animated.Value(0);
+  rotation = this.animvalue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+  state = { count: 1, text: '' };
+  componentDidMount() {
+    Animated.loop(
+      Animated.timing(this.animvalue, {
+        toValue: 1,
+        duration: 1000,
+        useNativeDriver: false,
+      })
+    ).start();
+    setInterval(() => this.setState({ count: this.state.count + 1 }), 500);
+  }
+  render() {
+    const index = this.props.navigation.getParam('index', 0);
+    return (
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <Background index={index} />
+        <Button
+          title="More details"
+          onPress={() =>
+            this.props.navigation.push('Details', {
+              index: index + 1,
+            })
+          }
+        />
+        <TextInput
+          placeholder="Hello"
+          style={styles.textInput}
+          onChangeText={text => this.setState({ text })}
+          text={this.state.text}
+        />
+        <Animated.View
+          style={{
+            transform: [
+              {
+                rotate: this.rotation,
+              },
+            ],
+            marginTop: 20,
+            borderColor: 'blue',
+            borderWidth: 3,
+            width: 20,
+            height: 20,
+          }}
+        />
+      </View>
+    );
+  }
+}
+
+const App = createStackNavigator(
+  {
+    Details: DetailsScreen,
+  },
+  {
+    initialRouteName: 'Details',
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  textInput: {
+    backgroundColor: 'white',
+    borderWidth: 1,
+    padding: 10,
+    marginHorizontal: 20,
+    alignSelf: 'stretch',
+    borderColor: 'black',
+  },
+});
+
+export default App;
--- a/Example/package.json
+++ b/Example/package.json
@@ -10,7 +10,8 @@
  "dependencies": {
    "react": "16.4.1",
    "react-native": "0.56.0",
-    "react-native-screens": "file:.."
+    "react-native-screens": "file:..",
+    "react-navigation": "^2.10.0"
  },
  "devDependencies": {
    "babel-jest": "23.4.2",
@@ -21,4 +22,4 @@
  "jest": {
    "preset": "react-native"
  }
-}
+}
--- a/Example/stack.js
+++ b/Example/stack.js
@@ -0,0 +1,173 @@
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  Button,
+  View,
+  TextInput,
+  Animated,
+  Easing,
+} from 'react-native';
+import { Screen, ScreenStack } from 'react-native-screens';
+
+const COLORS = ['azure', 'pink', 'cyan'];
+
+export class Stack extends Component {
+  constructor(props) {
+    super(props);
+
+    const progress = new Animated.Value(0);
+    const slideIn = progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [320, 0],
+    });
+    const slideOut = progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, 320],
+    });
+    const backSlideIn = progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [-50, 0],
+    });
+    const backSlideOut = progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, -50],
+    });
+
+    this.state = {
+      stack: ['azure'],
+      transitioning: 0,
+      progress,
+      slideIn,
+      slideOut,
+      backSlideIn,
+      backSlideOut,
+    };
+  }
+  push(key) {
+    this.setState({ stack: [...this.state.stack, key], transitioning: 1 });
+    this.state.progress.setValue(0);
+    Animated.timing(this.state.progress, {
+      duration: 500,
+      easing: Easing.out(Easing.quad),
+      toValue: 1,
+      useNativeDriver: true,
+    }).start(() => {
+      this.setState({ transitioning: 0 });
+    });
+  }
+  pop() {
+    this.setState({ transitioning: -1 });
+    this.state.progress.setValue(0);
+    Animated.timing(this.state.progress, {
+      duration: 500,
+      easing: Easing.out(Easing.quad),
+      toValue: 1,
+      useNativeDriver: true,
+    }).start(() => {
+      this.setState({
+        transitioning: 0,
+        stack: this.state.stack.slice(0, -1),
+      });
+    });
+  }
+  renderScreen = (key, index) => {
+    let style = StyleSheet.absoluteFill;
+    const { stack, transitioning } = this.state;
+    if (index === stack.length - 1) {
+      if (transitioning > 0) {
+        style = {
+          ...StyleSheet.absoluteFillObject,
+          transform: [{ translateX: this.state.slideIn }],
+        };
+      } else if (transitioning < 0) {
+        style = {
+          ...StyleSheet.absoluteFillObject,
+          transform: [{ translateX: this.state.slideOut }],
+        };
+      }
+    } else if (index === stack.length - 2) {
+      if (transitioning > 0) {
+        style = {
+          ...StyleSheet.absoluteFillObject,
+          transform: [{ translateX: this.state.backSlideOut }],
+        };
+      } else if (transitioning < 0) {
+        style = {
+          ...StyleSheet.absoluteFillObject,
+          transform: [{ translateX: this.state.backSlideIn }],
+        };
+      }
+    }
+    const active =
+      index === stack.length - 1 ||
+      (transitioning !== 0 && index === stack.length - 2);
+    return (
+      <Screen style={style} key={key} active={active}>
+        {this.props.renderScreen(key)}
+      </Screen>
+    );
+  };
+  render() {
+    const screens = this.state.stack.map(this.renderScreen);
+    return (
+      <ScreenStack
+        transitioning={this.state.transitioning}
+        progress={this.state.progress}
+        style={styles.container}>
+        {screens}
+      </ScreenStack>
+    );
+    // return (
+    //   <ScreenContainer style={styles.container}>{screens}</ScreenContainer>
+    // );
+  }
+}
+
+class App extends Component {
+  renderScreen = key => {
+    const index = COLORS.indexOf(key);
+    const color = key;
+    const pop = index > 0 ? () => this.stack.pop() : null;
+    const push = index < 2 ? () => this.stack.push(COLORS[index + 1]) : null;
+    return (
+      <View
+        style={{
+          flex: 1,
+          backgroundColor: color,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}>
+        {pop && <Button title="Pop" onPress={pop} />}
+        {push && <Button title="Push" onPress={push} />}
+        <TextInput placeholder="Hello" style={styles.textInput} />
+      </View>
+    );
+  };
+  render() {
+    return (
+      <Stack
+        ref={stack => (this.stack = stack)}
+        renderScreen={this.renderScreen}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  textInput: {
+    backgroundColor: 'white',
+    borderWidth: 1,
+    padding: 10,
+    marginHorizontal: 20,
+    alignSelf: 'stretch',
+    borderColor: 'black',
+  },
+});
+
+export default App;
--- a/Example/yarn.lock
+++ b/Example/yarn.lock
@@ -1447,6 +1447,10 @@ ci-info@^1.0.0:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.1.3.tgz#710193264bb05c77b8c90d02f5aaf22216a667b2"

+clamp@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/clamp/-/clamp-1.0.1.tgz#66a0e64011816e37196828fdc8c8c147312c8634"
+
 class-utils@^0.3.5:
  version "0.3.6"
  resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
@@ -1617,6 +1621,13 @@ create-react-class@^15.6.3:
    loose-envify "^1.3.1"
    object-assign "^4.1.1"

+create-react-context@^0.2.1:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.2.tgz#9836542f9aaa22868cd7d4a6f82667df38019dca"
+  dependencies:
+    fbjs "^0.8.0"
+    gud "^1.0.0"
+
 cross-spawn@^5.0.1, cross-spawn@^5.1.0:
  version "5.1.0"
  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -2028,7 +2039,7 @@ fbjs@0.8.16:
    setimmediate "^1.0.5"
    ua-parser-js "^0.7.9"

-fbjs@^0.8.14, fbjs@^0.8.16, fbjs@^0.8.9:
+fbjs@^0.8.0, fbjs@^0.8.14, fbjs@^0.8.16, fbjs@^0.8.9:
  version "0.8.17"
  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
  dependencies:
@@ -2262,6 +2273,10 @@ growly@^1.3.0:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"

+gud@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
+
 handlebars@^4.0.3:
  version "4.0.11"
  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.11.tgz#630a35dfe0294bc281edae6ffc5d329fc7982dcc"
@@ -2334,6 +2349,10 @@ has@^1.0.1:
  dependencies:
    function-bind "^1.1.1"

+hoist-non-react-statics@^2.2.0, hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
+
 home-or-tmp@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
@@ -2625,6 +2644,10 @@ is-windows@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"

+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+
 isarray@1.0.0, isarray@~1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -3925,6 +3948,12 @@ path-parse@^1.0.5:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"

+path-to-regexp@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
+  dependencies:
+    isarray "0.0.1"
+
 path-type@^1.0.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
@@ -4055,7 +4084,7 @@ prompts@^0.1.9:
    kleur "^2.0.1"
    sisteransi "^0.1.1"

-prop-types@^15.5.8, prop-types@^15.6.0:
+prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1:
  version "15.6.2"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
  dependencies:
@@ -4082,6 +4111,13 @@ qs@~6.5.1:
  version "6.5.2"
  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"

+query-string@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.1.0.tgz#01e7d69f6a0940dac67a937d6c6325647aa4532a"
+  dependencies:
+    decode-uri-component "^0.2.0"
+    strict-uri-encode "^2.0.0"
+
 randomatic@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-3.0.0.tgz#d35490030eb4f7578de292ce6dfb04a91a128923"
@@ -4122,9 +4158,53 @@ react-is@^16.4.1:
  version "16.4.2"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.2.tgz#84891b56c2b6d9efdee577cc83501dfc5ecead88"

+react-lifecycles-compat@^3, react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+
+react-native-dismiss-keyboard@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/react-native-dismiss-keyboard/-/react-native-dismiss-keyboard-1.0.0.tgz#32886242b3f2317e121f3aeb9b0a585e2b879b49"
+
+react-native-drawer-layout-polyfill@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/react-native-drawer-layout-polyfill/-/react-native-drawer-layout-polyfill-1.3.2.tgz#192c84d7a5a6b8a6d2be2c7daa5e4164518d0cc7"
+  dependencies:
+    react-native-drawer-layout "1.3.2"
+
+react-native-drawer-layout@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/react-native-drawer-layout/-/react-native-drawer-layout-1.3.2.tgz#b9740d7663a1dc4f88a61b9c6d93d2d948ea426e"
+  dependencies:
+    react-native-dismiss-keyboard "1.0.0"
+
+react-native-safe-area-view@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.7.0.tgz#38f5ab9368d6ef9e5d18ab64212938af3ec39421"
+  dependencies:
+    hoist-non-react-statics "^2.3.1"
+
+react-native-safe-area-view@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.8.0.tgz#22d78cb8e8658d04a10cd53c1546e0bc86cb7aea"
+  dependencies:
+    hoist-non-react-statics "^2.3.1"
+
 "react-native-screens@file:..":
  version "1.0.0-alpha.1"

+react-native-tab-view@^0.0.77:
+  version "0.0.77"
+  resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-0.0.77.tgz#11ceb8e7c23100d07e628dc151b57797524d00d4"
+  dependencies:
+    prop-types "^15.6.0"
+
+react-native-tab-view@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-1.0.2.tgz#66e0bc6d38a227ed2b212e3a256b7902f6ce02ed"
+  dependencies:
+    prop-types "^15.6.1"
+
 react-native@0.56.0:
  version "0.56.0"
  resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.56.0.tgz#66686f781ec39a44376aadd4bbc55c8573ab61e5"
@@ -4181,6 +4261,43 @@ react-native@0.56.0:
    xmldoc "^0.4.0"
    yargs "^9.0.0"

+react-navigation-deprecated-tab-navigator@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/react-navigation-deprecated-tab-navigator/-/react-navigation-deprecated-tab-navigator-1.3.0.tgz#015dcae1e977b984ca7e99245261c15439026bb7"
+  dependencies:
+    react-native-tab-view "^0.0.77"
+
+react-navigation-drawer@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/react-navigation-drawer/-/react-navigation-drawer-0.5.0.tgz#d91b6a6ec65c34ba78c00f814b1e6508922cc9ec"
+  dependencies:
+    react-native-drawer-layout-polyfill "^1.3.2"
+
+react-navigation-tabs@0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/react-navigation-tabs/-/react-navigation-tabs-0.6.0.tgz#2f526194f4360e56c2702e736887449acc2080dc"
+  dependencies:
+    hoist-non-react-statics "^2.5.0"
+    prop-types "^15.6.1"
+    react-lifecycles-compat "^3.0.4"
+    react-native-safe-area-view "^0.7.0"
+    react-native-tab-view "^1.0.0"
+
+react-navigation@^2.10.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-2.10.0.tgz#b525821261bedb3b4d3ee91564cad32fca2bd684"
+  dependencies:
+    clamp "^1.0.1"
+    create-react-context "^0.2.1"
+    hoist-non-react-statics "^2.2.0"
+    path-to-regexp "^1.7.0"
+    query-string "^6.1.0"
+    react-lifecycles-compat "^3"
+    react-native-safe-area-view "^0.8.0"
+    react-navigation-deprecated-tab-navigator "1.3.0"
+    react-navigation-drawer "0.5.0"
+    react-navigation-tabs "0.6.0"
+
 react-proxy@^1.1.7:
  version "1.1.8"
  resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-1.1.8.tgz#9dbfd9d927528c3aa9f444e4558c37830ab8c26a"
@@ -4776,6 +4893,10 @@ stream-buffers@~2.2.0:
  version "2.2.0"
  resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-2.2.0.tgz#91d5f5130d1cef96dcfa7f726945188741d09ee4"

+strict-uri-encode@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
+
 string-length@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"