Merge pull request #17 from bamlab/improve-dev-experience

Improve dev experience

Author: Nhacsam

.circleci/config.yml

@@ -0,0 +1,39 @@
+# Javascript Node CircleCI 2.0 configuration file
+#
+# Check https://circleci.com/docs/2.0/language-javascript/ for more details
+#
+version: 2
+jobs:
+  build:
+    docker:
+      # specify the version you desire here
+      - image: circleci/node:7.10
+      
+      # Specify service dependencies here if necessary
+      # CircleCI maintains a library of pre-built images
+      # documented at https://circleci.com/docs/2.0/circleci-images/
+      # - image: circleci/mongo:3.4.4
+
+    working_directory: ~/react-native-image-header-scroll-view
+
+    steps:
+      - checkout
+
+      # Download and cache dependencies
+      - restore_cache:
+          keys:
+          - v1-dependencies-{{ checksum "package.json" }}
+          # fallback to using the latest cache if no exact match is found
+          - v1-dependencies-
+
+      - run: yarn install && cd example && yarn install && cd ..
+
+      - save_cache:
+          paths:
+            - node_modules
+          key: v1-dependencies-{{ checksum "package.json" }}
+        
+      # run tests!
+      - run: yarn test
+
+

.eslintignore

@@ -0,0 +1,6 @@
+**/node_modules
+**/android
+**/ios
+**/vendors
+**/coverage
+**/flow-coverage

.eslintrc

@@ -1,10 +1,28 @@
 {
-  "extends": "airbnb",
-  "parser": "babel-eslint",
+  "extends": [
+    "react-app",
+    "prettier",
+    "prettier/flowtype",
+    "prettier/react"
+  ],
+  "plugins": [
+    "flowtype",
+    "react",
+    "prettier"
+  ],
+  "globals": {
+    "__DEV__": true
+  },
   "rules": {
-    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
-    "import/no-extraneous-dependencies": [0],
-    "import/no-unresolved": [2, { ignore: ['^react(-native)?$'] }],
-    "import/extensions": [2, { "js": "never", "json": "always" }]
+    "no-use-before-define": 0,
+    "no-unused-vars": "error",
+    "prettier/prettier": [
+      "error",
+      {
+        "trailingComma": "es5",
+        "singleQuote": true,
+        "printWidth": 100
+      }
+    ]
   }
 }

.flowconfig

@@ -0,0 +1,57 @@
+[ignore]
+; We fork some components by platform
+.*/*[.]android.js
+
+; Ignore "BUCK" generated dirs
+<PROJECT_ROOT>/\.buckd/
+
+; Ignore unexpected extra "@providesModule"
+.*/node_modules/.*/node_modules/fbjs/.*
+
+; 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
+
+.*/node_modules/react-navigation
+
+; Do not remove all example to have react-native
+.*/example/main.js
+.*/example/Pages/.*
+
+; Remove duplication between example and .
+.*/example/node_modules/fbjs/
+
+; Remove not passing libs
+.*/example/node_modules/react-native-tab-view/
+
+[include]
+
+[libs]
+example/node_modules/react-native/Libraries/react-native/react-native-interface.js
+example/node_modules/react-native/flow
+flow/
+
+[options]
+emoji=true
+
+module.system=haste
+
+munge_underscores=true
+
+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\\.\\(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.47.0

example/.babelrc

@@ -1,3 +1,3 @@
 {
-"presets": ["react-native", "react-native-stage-0/decorator-support"]
+"presets": ["react-native"]
 }

example/.gitignore

@@ -51,5 +51,3 @@ buck-out/
 fastlane/report.xml
 fastlane/Preview.html
 fastlane/screenshots
-
-ImageHeaderScrollView/*.js

example/Pages/Menu.js

@@ -74,6 +74,7 @@ const Menu = props =>
       text="Forms and buttons"
       target="avignon"
     />
+    <Button {...props} image={require('../assets/pullrefresh.jpg')} text="Pull To Refresh" target="pullrefresh" />
   </ScrollView>;
 
 Menu.route = {

example/Pages/PullToRefresh.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import {
+  StyleSheet,
+  Text,
+  Image,
+  TouchableOpacity,
+  View,
+  Dimensions,
+  RefreshControl,
+} from 'react-native';
+import { Header } from 'react-navigation';
+
+import HeaderImageScrollView from 'react-native-image-header-scroll-view';
+
+const MIN_HEIGHT = Header.HEIGHT;
+const MAX_HEIGHT = 200;
+
+class BasicUsage extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      refreshing: false,
+    };
+  }
+
+  _onRefresh() {
+    this.setState({
+      refreshing: true,
+    });
+
+    setTimeout(() => {
+      this.setState({
+        refreshing: false,
+      });
+    }, 2000);
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <HeaderImageScrollView
+          maxHeight={MAX_HEIGHT}
+          minHeight={MIN_HEIGHT}
+          minOverlayOpacity={0.4}
+          renderHeader={() =>
+            <Image source={require('../assets/pullrefresh.jpg')} style={styles.image} />}
+          refreshControl={
+            <RefreshControl
+              refreshing={this.state.refreshing}
+              onRefresh={this._onRefresh.bind(this)}
+              tintColor="white"
+            />
+          }
+          renderTouchableFixedForeground={() =>
+            <View style={{ height: MAX_HEIGHT, justifyContent: 'center', alignItems: 'center' }}>
+              <TouchableOpacity onPress={() => console.log('tap!!')} style={styles.button}>
+                <Text style={styles.buttonText}>Click Me!</Text>
+              </TouchableOpacity>
+            </View>}
+        >
+          <View style={{ height: 1000 }} />
+        </HeaderImageScrollView>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  image: {
+    height: MAX_HEIGHT,
+    width: Dimensions.get('window').width,
+  },
+  button: {
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 30,
+    borderColor: 'white',
+    backgroundColor: '#00000066',
+  },
+  buttonText: {
+    color: 'white',
+    backgroundColor: 'transparent',
+  },
+});
+
+export default BasicUsage;

example/Pages/index.js

@@ -3,3 +3,4 @@ export { default as TvShow } from './TvShow';
 export { default as BasicUsage } from './BasicUsage';
 export { default as ColorsPage } from './Colors';
 export { default as Avignon } from './Avignon';
+export { default as PullToRefresh } from './PullToRefresh';

example/android/app/BUCK

@@ -1,5 +1,3 @@
-import re
-
 # To learn about Buck see [Docs](https://buckbuild.com/).
 # To run your application with Buck:
 # - install Buck
@@ -11,56 +9,57 @@ import re
 #
 
 lib_deps = []
+
 for jarfile in glob(['libs/*.jar']):
-  name = 'jars__' + re.sub(r'^.*/([^/]+)\.jar$', r'\1', jarfile)
+  name = 'jars__' + jarfile[jarfile.rindex('/') + 1: jarfile.rindex('.jar')]
   lib_deps.append(':' + name)
   prebuilt_jar(
     name = name,
     binary_jar = jarfile,
   )
 
 for aarfile in glob(['libs/*.aar']):
-  name = 'aars__' + re.sub(r'^.*/([^/]+)\.aar$', r'\1', aarfile)
+  name = 'aars__' + aarfile[aarfile.rindex('/') + 1: aarfile.rindex('.aar')]
   lib_deps.append(':' + name)
   android_prebuilt_aar(
     name = name,
     aar = aarfile,
   )
 
 android_library(
-  name = 'all-libs',
-  exported_deps = lib_deps
+    name = "all-libs",
+    exported_deps = lib_deps,
 )
 
 android_library(
-  name = 'app-code',
-  srcs = glob([
-    'src/main/java/**/*.java',
-  ]),
-  deps = [
-    ':all-libs',
-    ':build_config',
-    ':res',
-  ],
+    name = "app-code",
+    srcs = glob([
+        "src/main/java/**/*.java",
+    ]),
+    deps = [
+        ":all-libs",
+        ":build_config",
+        ":res",
+    ],
 )
 
 android_build_config(
-  name = 'build_config',
-  package = 'com.imageheaderscrollview',
+    name = "build_config",
+    package = "com.imageheaderscrollview",
 )
 
 android_resource(
-  name = 'res',
-  res = 'src/main/res',
-  package = 'com.imageheaderscrollview',
+    name = "res",
+    package = "com.imageheaderscrollview",
+    res = "src/main/res",
 )
 
 android_binary(
-  name = 'app',
-  package_type = 'debug',
-  manifest = 'src/main/AndroidManifest.xml',
-  keystore = '//android/keystores:debug',
-  deps = [
-    ':app-code',
-  ],
+    name = "app",
+    keystore = "//android/keystores:debug",
+    manifest = "src/main/AndroidManifest.xml",
+    package_type = "debug",
+    deps = [
+        ":app-code",
+    ],
 )