react-native-scrollable-tabview/examples/TestApp/App.js at master · sundak09/react-native-scrollable-tabview · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
import React, {Component} from 'react'
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native'

import {NativeRouter, Route, Link} from 'react-router-native'

import CollapsibleExample from './app/CollapsibleExample'
import OverlayExample from './app/OverlayExample'
import ScrollableTabsExample from './app/ScrollableTabsExample'
import ScrollableTabsExampleMultiple from './app/ScrollableTabsExampleMultiple'
import FBTabBar from './app/FBTabBar'
import SimpleExample from './app/SimpleExample'
import DynamicExample from './app/DynamicExample'

import {ROUTE} from './app/lib/route'
const IndexRoutes = () => (<View style={styles.nav}>
  {routes.map(route => <Link
    key={route.index}
    to={route.route}
    underlayColor='#f0f4f7'
    style={styles.navItem}>
    <Text>{route.title}</Text>
    </Link>)}
    </View>
)

const routes = [
  {
    index: 0,
    title: 'Home',
    route: ROUTE.INDEX,
    component: <IndexRoutes/>
},
{
  index: 1,
    title: 'Tab Bar',
  route: ROUTE.TAB_BAR,
  component: <FBTabBar/>
},
{
  index: 2,
    title: 'Simple Example',
  route: ROUTE.SIMPLE_EXAMPLE,
  component: <SimpleExample/>
},
{
  index: 3,
    route: ROUTE.OVERLAY,
  title: 'Overlay',
  component: <OverlayExample/>
},
{
  index: 4,
    route: ROUTE.SCROLLABLE_TABS,
  title: 'Scrollable tabs',
  component: <ScrollableTabsExample/>
},
{
  index: 4,
    route: ROUTE.SCROLLABLE_TABS_MULTIPLE,
  title: 'Scrollable tabs multiple',
  component: <ScrollableTabsExampleMultiple/>
},
{
  index: 5,
    route: ROUTE.DYNAMIC_TABS,
  title: 'Dynamic Tabs',
  component: <DynamicExample/>
},
{
  index: 6,
    route: ROUTE.COLLAPSIBLE_TABS,
  title: 'CollapsibleExample',
  component: <CollapsibleExample/>
}

]

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
      {this._renderRoutes()}
      </View>
  )
  }

  _renderRoutes = () => <NativeRouter>
<View style={styles.container}>
    {routes.map(route => {
        // const Component = route.component
        return <Route key={route.index} exact path={route.route} component={() => route.component}/>
      })}
    </View>
    </NativeRouter>

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    flexDirection: 'column'

  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5
  },
  nav: {
    flexDirection: 'column'
  },
  navItem: {
    alignItems: 'center',
    padding: 30
  },
  subNavItem: {
    padding: 5
  },
  topic: {
    textAlign: 'center',
    fontSize: 15
  }
})