Update example

Kureev · Jul 15, 2017 · e636cfc · e636cfc
1 parent c4af819
commit e636cfc
Show file tree

Hide file tree

Showing 28 changed files with 4,297 additions and 202 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -9,13 +9,13 @@
 
     "react/jsx-filename-extension": [1, { "extensions": [".js"] }],
     "react/sort-comp": [1, {
-      order: [
-        'type-annotations',
-        'static-methods',
-        'lifecycle',
-        'everything-else',
-        'render',
-      ],
+      "order": [
+        "type-annotations",
+        "static-methods",
+        "lifecycle",
+        "everything-else",
+        "render"
+      ]
     }]
   }
 }
diff --git a/examples/Basic/.babelrc b/examples/Basic/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["react-native"]
+}
diff --git a/examples/Basic/.flowconfig b/examples/Basic/.flowconfig
@@ -1,13 +1,18 @@
 [ignore]
+; We fork some components by platform
+.*/*[.]android.js
 
-# We fork some components by platform.
-.*/*.android.js
+; Ignore "BUCK" generated dirs
+<PROJECT_ROOT>/\.buckd/
 
-# Ignore templates with `@flow` in header
-.*/local-cli/generator.*
+; Ignore unexpected extra "@providesModule"
+.*/node_modules/.*/node_modules/fbjs/.*
 
-# Ignore malformed json
-.*/node_modules/y18n/test/.*\.json
+; Ignore duplicate module providers
+; For RN Apps installed via npm, "Libraries" folder is inside
+; "node_modules/react-native" but in the source repo it is in the root
+.*/Libraries/react-native/React.js
+.*/Libraries/react-native/ReactNative.js
 
 [include]
 
@@ -17,25 +22,24 @@ node_modules/react-native/flow
 flow/
 
 [options]
-module.system=haste
-
-esproposal.class_static_fields=enable
-esproposal.class_instance_fields=enable
+emoji=true
 
-experimental.strict_type_args=true
+module.system=haste
 
 munge_underscores=true
 
-module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
 module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
 
 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-7]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-7]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-7]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-7]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
+
+unsafe.enable_getters_and_setters=true
 
 [version]
-^0.27.0
+^0.47.0
diff --git a/examples/Basic/.gitattributes b/examples/Basic/.gitattributes
@@ -0,0 +1 @@
+*.pbxproj -text
diff --git a/examples/Basic/.gitignore b/examples/Basic/.gitignore
@@ -22,20 +22,32 @@ DerivedData
 *.xcuserstate
 project.xcworkspace
 
-# Android/IJ
+# Android/IntelliJ
 #
-*.iml
+build/
 .idea
 .gradle
 local.properties
+*.iml
 
 # node.js
 #
 node_modules/
 npm-debug.log
+yarn-error.log
 
 # BUCK
 buck-out/
 \.buckd/
-android/app/libs
-android/keystores/debug.keystore
+*.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md
+
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots
diff --git a/examples/Basic/Basic.js b/examples/Basic/Basic.js
@@ -1,15 +1,15 @@
-const React = require('react');
-const SideMenu = require('react-native-side-menu');
-const Menu = require('./Menu');
-
-const {
+import React, { Component } from 'react';
+import {
   StyleSheet,
   Text,
   View,
   Image,
   TouchableOpacity,
-} = require('react-native');
-const { Component } = React;
+} from 'react-native';
+import SideMenu from 'react-native-side-menu';
+import Menu from './Menu';
+
+const image = require('./assets/menu.png');
 
 const styles = StyleSheet.create({
   button: {
@@ -40,29 +40,17 @@ const styles = StyleSheet.create({
   },
 });
 
-class Button extends Component {
-  handlePress(e) {
-    if (this.props.onPress) {
-      this.props.onPress(e);
-    }
-  }
+export default class Basic extends Component {
+  constructor(props) {
+    super(props);
 
-  render() {
-    return (
-      <TouchableOpacity
-        onPress={this.handlePress.bind(this)}
-        style={this.props.style}>
-        <Text>{this.props.children}</Text>
-      </TouchableOpacity>
-    );
-  }
-}
+    this.toggle = this.toggle.bind(this);
 
-module.exports = class Basic extends Component {
-  state = {
-    isOpen: false,
-    selectedItem: 'About',
-  };
+    this.state = {
+      isOpen: false,
+      selectedItem: 'About',
+    };
+  }
 
   toggle() {
     this.setState({
@@ -71,15 +59,14 @@ module.exports = class Basic extends Component {
   }
 
   updateMenuState(isOpen) {
-    this.setState({ isOpen, });
+    this.setState({ isOpen });
   }
 
-  onMenuItemSelected = (item) => {
+  onMenuItemSelected = item =>
     this.setState({
       isOpen: false,
       selectedItem: item,
     });
-  }
 
   render() {
     const menu = <Menu onItemSelected={this.onMenuItemSelected} />;
@@ -88,7 +75,8 @@ module.exports = class Basic extends Component {
       <SideMenu
         menu={menu}
         isOpen={this.state.isOpen}
-        onChange={(isOpen) => this.updateMenuState(isOpen)}>
+        onChange={isOpen => this.updateMenuState(isOpen)}
+      >
         <View style={styles.container}>
           <Text style={styles.welcome}>
             Welcome to React Native!
@@ -104,11 +92,16 @@ module.exports = class Basic extends Component {
             Current selected menu item is: {this.state.selectedItem}
           </Text>
         </View>
-        <Button style={styles.button} onPress={() => this.toggle()}>
+        <TouchableOpacity
+          onPress={this.toggle}
+          style={styles.button}
+        >
           <Image
-            source={require('./assets/menu.png')} style={{width: 32, height: 32}} />
-        </Button>
+            source={image}
+            style={{ width: 32, height: 32 }}
+          />
+        </TouchableOpacity>
       </SideMenu>
     );
   }
-};
+}
diff --git a/examples/Basic/Menu.js b/examples/Basic/Menu.js
@@ -1,13 +1,13 @@
-const React = require('react');
-const {
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
   Dimensions,
   StyleSheet,
   ScrollView,
   View,
   Image,
   Text,
-} = require('react-native');
-const { Component } = React;
+} from 'react-native';
 
 const window = Dimensions.get('window');
 const uri = 'https://pickaface.net/gallery/avatar/Opi51c74d0125fd4.png';
@@ -42,33 +42,34 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = class Menu extends Component {
-  static propTypes = {
-    onItemSelected: React.PropTypes.func.isRequired,
-  };
+export default function Menu({ onItemSelected }) {
+  return (
+    <ScrollView scrollsToTop={false} style={styles.menu}>
+      <View style={styles.avatarContainer}>
+        <Image
+          style={styles.avatar}
+          source={{ uri }}
+        />
+        <Text style={styles.name}>Your name</Text>
+      </View>
 
-  render() {
-    return (
-      <ScrollView scrollsToTop={false} style={styles.menu}>
-        <View style={styles.avatarContainer}>
-          <Image
-            style={styles.avatar}
-            source={{ uri, }}/>
-          <Text style={styles.name}>Your name</Text>
-        </View>
+      <Text
+        onPress={() => onItemSelected('About')}
+        style={styles.item}
+      >
+        About
+      </Text>
 
-        <Text
-          onPress={() => this.props.onItemSelected('About')}
-          style={styles.item}>
-          About
-        </Text>
+      <Text
+        onPress={() => onItemSelected('Contacts')}
+        style={styles.item}
+      >
+        Contacts
+      </Text>
+    </ScrollView>
+  );
+}
 
-        <Text
-          onPress={() => this.props.onItemSelected('Contacts')}
-          style={styles.item}>
-          Contacts
-        </Text>
-      </ScrollView>
-    );
-  }
+Menu.propTypes = {
+  onItemSelected: PropTypes.func.isRequired,
 };