fiber compat

.gitignore

@@ -3,3 +3,4 @@ npm-debug.log
 node_modules/
 .idea/
 .reploy
+.DS_Store

examples/FacebookTabsExample/.flowconfig → Example/.flowconfig

@@ -26,8 +26,6 @@ emoji=true
 
 module.system=haste
 
-experimental.strict_type_args=true
-
 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'
@@ -36,12 +34,12 @@ suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-2]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-2]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-9]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-9]\\|[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.42.0
+^0.49.1

examples/FacebookTabsExample/DynamicExample.js → Example/DynamicExample.js

@@ -5,8 +5,9 @@ import {
 } from 'react-native';
 import TimerMixin from 'react-timer-mixin';
 import ScrollableTabView, { ScrollableTabBar, } from 'react-native-scrollable-tab-view';
+import createReactClass from 'create-react-class';
 
-const Child = React.createClass({
+const Child = createReactClass({
   onEnter() {
     console.log('enter: ' + this.props.i); // eslint-disable-line no-console
   },
@@ -21,7 +22,7 @@ const Child = React.createClass({
   },
 });
 
-export default React.createClass({
+export default createReactClass({
   mixins: [TimerMixin, ],
   children: [],
 

Example/FacebookExample.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  ScrollView,
+} from 'react-native';
+
+import FacebookTabBar from './FacebookTabBar';
+import ScrollableTabView from 'react-native-scrollable-tab-view';
+
+export default () => {
+  return <ScrollableTabView
+    style={{marginTop: 20, }}
+    initialPage={1}
+    renderTabBar={() => <FacebookTabBar />}
+  >
+    <ScrollView tabLabel="ios-paper" style={styles.tabView}>
+      <View style={styles.card}>
+        <Text>News</Text>
+      </View>
+    </ScrollView>
+    <ScrollView tabLabel="ios-people" style={styles.tabView}>
+      <View style={styles.card}>
+        <Text>Friends</Text>
+      </View>
+    </ScrollView>
+    <ScrollView tabLabel="ios-chatboxes" style={styles.tabView}>
+      <View style={styles.card}>
+        <Text>Messenger</Text>
+      </View>
+    </ScrollView>
+    <ScrollView tabLabel="ios-notifications" style={styles.tabView}>
+      <View style={styles.card}>
+        <Text>Notifications</Text>
+      </View>
+    </ScrollView>
+    <ScrollView tabLabel="ios-list" style={styles.tabView}>
+      <View style={styles.card}>
+        <Text>Other nav</Text>
+      </View>
+    </ScrollView>
+  </ScrollableTabView>;
+}
+
+const styles = StyleSheet.create({
+  tabView: {
+    flex: 1,
+    padding: 10,
+    backgroundColor: 'rgba(0,0,0,0.01)',
+  },
+  card: {
+    borderWidth: 1,
+    backgroundColor: '#fff',
+    borderColor: 'rgba(0,0,0,0.1)',
+    margin: 5,
+    height: 150,
+    padding: 15,
+    shadowColor: '#ccc',
+    shadowOffset: { width: 2, height: 2, },
+    shadowOpacity: 0.5,
+    shadowRadius: 3,
+  },
+});

examples/FacebookTabsExample/FacebookTabBar.js → Example/FacebookTabBar.js

@@ -7,37 +7,36 @@ import {
 } from 'react-native';
 import Icon from 'react-native-vector-icons/Ionicons';
 
-const FacebookTabBar = React.createClass({
-  tabIcons: [],
+class FacebookTabBar extends React.Component {
+  icons = [];
 
-  propTypes: {
-    goToPage: React.PropTypes.func,
-    activeTab: React.PropTypes.number,
-    tabs: React.PropTypes.array,
-  },
+  constructor(props) {
+    super(props);
+    this.icons = [];
+  }
 
   componentDidMount() {
-    this._listener = this.props.scrollValue.addListener(this.setAnimationValue);
-  },
+    this._listener = this.props.scrollValue.addListener(this.setAnimationValue.bind(this));
+  }
 
   setAnimationValue({ value, }) {
-    this.tabIcons.forEach((icon, i) => {
+    this.icons.forEach((icon, i) => {
       const progress = (value - i >= 0 && value - i <= 1) ? value - i : 1;
       icon.setNativeProps({
         style: {
           color: this.iconColor(progress),
         },
       });
     });
-  },
+  }
 
   //color between rgb(59,89,152) and rgb(204,204,204)
   iconColor(progress) {
     const red = 59 + (204 - 59) * progress;
     const green = 89 + (204 - 89) * progress;
     const blue = 152 + (204 - 152) * progress;
     return `rgb(${red}, ${green}, ${blue})`;
-  },
+  }
 
   render() {
     return <View style={[styles.tabs, this.props.style, ]}>
@@ -47,13 +46,13 @@ const FacebookTabBar = React.createClass({
             name={tab}
             size={30}
             color={this.props.activeTab === i ? 'rgb(59,89,152)' : 'rgb(204,204,204)'}
-            ref={(icon) => { this.tabIcons[i] = icon; }}
+            ref={(icon) => { this.icons[i] = icon; }}
           />
         </TouchableOpacity>;
       })}
     </View>;
-  },
-});
+  }
+}
 
 const styles = StyleSheet.create({
   tab: {

Example/OverlayExample.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import {
+  StyleSheet,
+  ScrollView,
+} from 'react-native';
+
+import ScrollableTabView, { DefaultTabBar, } from 'react-native-scrollable-tab-view';
+import Icon from 'react-native-vector-icons/Ionicons';
+
+// Using tabBarPosition='overlayTop' or 'overlayBottom' lets the content show through a
+// semitransparent tab bar. Note that if you build a custom tab bar component, its outer container
+// must consume a 'style' prop (e.g. <View style={this.props.style}) to support this feature.
+export default () => {
+  return <ScrollableTabView
+    style={styles.container}
+    renderTabBar={()=><DefaultTabBar backgroundColor='rgba(255, 255, 255, 0.7)' />}
+    tabBarPosition='overlayTop'
+  >
+    <ScrollView tabLabel='iOS'>
+      <Icon name='logo-apple' color='black' size={300} style={styles.icon} />
+      <Icon name='ios-phone-portrait' color='black' size={300} style={styles.icon} />
+      <Icon name='logo-apple' color='#DBDDDE' size={300} style={styles.icon} />
+      <Icon name='ios-phone-portrait' color='#DBDDDE' size={300} style={styles.icon} />
+    </ScrollView>
+    <ScrollView tabLabel='Android'>
+      <Icon name='logo-android' color='#A4C639' size={300} style={styles.icon} />
+      <Icon name='logo-android' color='black' size={300} style={styles.icon} />
+      <Icon name='logo-android' color='brown' size={300} style={styles.icon} />
+    </ScrollView>
+  </ScrollableTabView>;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 30,
+  },
+  icon: {
+    width: 300,
+    height: 300,
+    alignSelf: 'center',
+  },
+});

Example/ScrollableTabsExample.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import {
+  Text,
+  View,
+} from 'react-native';
+
+import ScrollableTabView, { ScrollableTabBar, } from 'react-native-scrollable-tab-view';
+
+export default () => {
+  return <ScrollableTabView
+    style={{marginTop: 20, }}
+    initialPage={0}
+    renderTabBar={() => <ScrollableTabBar />}
+  >
+    <Text tabLabel='Tab #1'>My</Text>
+    <Text tabLabel='Tab #2 word word'>favorite</Text>
+    <Text tabLabel='Tab #3 word word word'>project</Text>
+    <Text tabLabel='Tab #4 word word word word'>favorite</Text>
+    <Text tabLabel='Tab #5'>project</Text>
+  </ScrollableTabView>;
+}

Example/SimpleExample.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import {
+  Text,
+} from 'react-native';
+
+import ScrollableTabView, {DefaultTabBar, } from 'react-native-scrollable-tab-view';
+
+export default () => {
+  return <ScrollableTabView
+    style={{marginTop: 20, }}
+    initialPage={1}
+    renderTabBar={() => <DefaultTabBar />}
+  >
+    <Text tabLabel='Tab #1'>My</Text>
+    <Text tabLabel='Tab #2'>favorite</Text>
+    <Text tabLabel='Tab #3'>project</Text>
+  </ScrollableTabView>;
+}

Example/__tests__/index.android.js

@@ -0,0 +1,12 @@
+import 'react-native';
+import React from 'react';
+import Index from '../index.android.js';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+  const tree = renderer.create(
+    <Index />
+  );
+});

Example/__tests__/index.ios.js

@@ -0,0 +1,12 @@
+import 'react-native';
+import React from 'react';
+import Index from '../index.ios.js';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+  const tree = renderer.create(
+    <Index />
+  );
+});

examples/FacebookTabsExample/android/app/BUCK → Example/android/app/BUCK

@@ -45,12 +45,12 @@ android_library(
 
 android_build_config(
     name = "build_config",
-    package = "com.facebooktabsexample",
+    package = "com.example",
 )
 
 android_resource(
     name = "res",
-    package = "com.facebooktabsexample",
+    package = "com.example",
     res = "src/main/res",
 )
 

examples/FacebookTabsExample/android/app/build.gradle → Example/android/app/build.gradle

@@ -33,6 +33,13 @@ import com.android.build.OutputFile
  *   // bundleInPaidRelease: true,
  *   // bundleInBeta: true,
  *
+ *   // whether to disable dev mode in custom build variants (by default only disabled in release)
+ *   // for example: to disable dev mode in the staging build type (if configured)
+ *   devDisabledInStaging: true,
+ *   // The configuration property can be in the following formats
+ *   //         'devDisabledIn${productFlavor}${buildType}'
+ *   //         'devDisabledIn${buildType}'
+ *
  *   // the root of your project, i.e. where "package.json" lives
  *   root: "../../",
  *
@@ -87,7 +94,7 @@ android {
     buildToolsVersion "23.0.1"
 
     defaultConfig {
-        applicationId "com.facebooktabsexample"
+        applicationId "com.example"
         minSdkVersion 16
         targetSdkVersion 22
         versionCode 1

examples/FacebookTabsExample/android/app/src/main/AndroidManifest.xml → Example/android/app/src/main/AndroidManifest.xml

@@ -1,5 +1,5 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    package="com.facebooktabsexample"
+    package="com.example"
     android:versionCode="1"
     android:versionName="1.0">
 

examples/FacebookTabsExample/android/app/src/main/java/com/facebooktabsexample/MainActivity.java → Example/android/app/src/main/java/com/example/MainActivity.java

@@ -1,4 +1,4 @@
-package com.facebooktabsexample;
+package com.example;
 
 import com.facebook.react.ReactActivity;
 
@@ -10,6 +10,6 @@ public class MainActivity extends ReactActivity {
      */
     @Override
     protected String getMainComponentName() {
-        return "FacebookTabsExample";
+        return "Example";
     }
 }

examples/FacebookTabsExample/android/app/src/main/java/com/facebooktabsexample/MainApplication.java → Example/android/app/src/main/java/com/example/MainApplication.java

@@ -1,4 +1,4 @@
-package com.facebooktabsexample;
+package com.example;
 
 import android.app.Application;
 

Example/android/app/src/main/res/values/strings.xml

@@ -0,0 +1,3 @@
+<resources>
+    <string name="app_name">Example</string>
+</resources>

examples/FacebookTabsExample/android/settings.gradle → Example/android/settings.gradle

@@ -1,4 +1,4 @@
-rootProject.name = 'FacebookTabsExample'
+rootProject.name = 'Example'
 include ':react-native-vector-icons'
 project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
 

Example/app.json

@@ -0,0 +1,4 @@
+{
+  "name": "Example",
+  "displayName": "Example"
+}

Example/index.android.js

@@ -0,0 +1,4 @@
+import { AppRegistry, } from 'react-native';
+import Example from './index.js';
+
+AppRegistry.registerComponent('Example', () => Example);

Example/index.ios.js

@@ -0,0 +1,4 @@
+import { AppRegistry, } from 'react-native';
+import Example from './index.js';
+
+AppRegistry.registerComponent('Example', () => Example);