dynamic example

Author: skv-headless

examples/FacebookTabsExample/DynamicExample.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {
+  Text,
+} from 'react-native';
+import TimerMixin from 'react-timer-mixin';
+
+import ScrollableTabView, { DefaultTabBar, } from 'react-native-scrollable-tab-view';
+
+export default React.createClass({
+  mixins: [TimerMixin],
+
+  getInitialState() {
+    return {
+      tabs: [],
+    };
+  },
+
+  componentDidMount() {
+    this.setTimeout(
+      () => { this.setState({ tabs: [1, 2, 3, ], }); },
+      100
+    );
+  },
+
+  render() {
+    return <ScrollableTabView
+      style={{marginTop: 20, }}
+      renderTabBar={() => <DefaultTabBar />}
+    >
+    {this.state.tabs.map((tab, i) => {
+      return <Text tabLabel={`tab${i}`} key={i}>{`tab${i}`}</Text>
+    })}
+    </ScrollableTabView>;
+  },
+});

examples/FacebookTabsExample/index.android.js

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

examples/FacebookTabsExample/index.ios.js

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

examples/FacebookTabsExample/FacebookTabsExample.js renamed to examples/FacebookTabsExample/index.js

@@ -11,6 +11,7 @@ import SimpleExample from './SimpleExample';
 import ScrollableTabsExample from './ScrollableTabsExample';
 import OverlayExample from './OverlayExample';
 import FacebookExample from './FacebookExample';
+import DynamicExample from './DynamicExample';
 
 export default React.createClass({
   render() {
@@ -31,6 +32,8 @@ export default React.createClass({
       return <OverlayExample />;
     case 'facebook':
       return <FacebookExample />;
+    case 'dynamic':
+      return <DynamicExample />;
     default:
       return <View style={styles.container}>
         <TouchableOpacity
@@ -60,6 +63,13 @@ export default React.createClass({
         >
           <Text>Facebook tabs example</Text>
         </TouchableOpacity>
+
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => nav.push({id: 'dynamic', })}
+        >
+          <Text>Dynamic tabs example</Text>
+        </TouchableOpacity>
       </View>;
     }
   },

examples/FacebookTabsExample/package.json

@@ -9,6 +9,7 @@
     "react": "^15.1.0",
     "react-native": "^0.28.0",
     "react-native-scrollable-tab-view": "../..",
-    "react-native-vector-icons": "^2.0.3"
+    "react-native-vector-icons": "^2.0.3",
+    "react-timer-mixin": "^0.13.3"
   }
 }