Skip to content
This repository was archived by the owner on Nov 27, 2022. It is now read-only.

Commit a623d7e

Browse files
satya164satya164
committed
example: add a separate example with scrollviews
1 parent e8b28ac commit a623d7e

9 files changed

+90
-13
lines changed

‎example/src/BottomBarIconExample.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { Component } from 'react';
22
import { View, Image, StyleSheet } from 'react-native';
33
import { TabViewAnimated, TabViewPage, TabBarBottom } from 'react-native-tab-view';
4-
import ListViewExample from './ListViewExample';
54

65
const styles = StyleSheet.create({
76
container: {
@@ -66,7 +65,7 @@ export default class TopBarIconExample extends Component {
6665
_renderScene = ({ route }) => {
6766
switch (route.key) {
6867
case '1':
69-
return <ListViewExample />;
68+
return <View style={[ styles.page, { backgroundColor: '#ff4081' } ]} />;
7069
case '2':
7170
return <View style={[ styles.page, { backgroundColor: '#673ab7' } ]} />;
7271
case '3':

‎example/src/BottomBarIconTextExample.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { Component } from 'react';
22
import { View, Image, StyleSheet } from 'react-native';
33
import { TabViewAnimated, TabViewPage, TabBarBottom } from 'react-native-tab-view';
4-
import ListViewExample from './ListViewExample';
54

65
const styles = StyleSheet.create({
76
container: {
@@ -66,7 +65,7 @@ export default class TopBarIconExample extends Component {
6665
_renderScene = ({ route }) => {
6766
switch (route.key) {
6867
case '1':
69-
return <ListViewExample />;
68+
return <View style={[ styles.page, { backgroundColor: '#ff4081' } ]} />;
7069
case '2':
7170
return <View style={[ styles.page, { backgroundColor: '#673ab7' } ]} />;
7271
case '3':

‎example/src/ListViewExample.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { ListView, View, Text, StyleSheet } from 'react-native';
33

44
const styles = StyleSheet.create({
55
container: {
6-
backgroundColor: '#ff4081',
76
padding: 8,
87
},
98
row: {
@@ -62,6 +61,7 @@ export default class ListViewExample extends Component {
6261
render() {
6362
return (
6463
<ListView
64+
{...this.props}
6565
contentContainerStyle={styles.container}
6666
dataSource={this.state.dataSource}
6767
renderRow={this._renderRow}

‎example/src/NoAnimationExample.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { Component } from 'react';
22
import { View, Image, StyleSheet } from 'react-native';
33
import { TabViewAnimated, TabViewPage, TabBarBottom } from 'react-native-tab-view';
4-
import ListViewExample from './ListViewExample';
54

65
const styles = StyleSheet.create({
76
container: {
@@ -66,7 +65,7 @@ export default class TopBarIconExample extends Component {
6665
_renderScene = ({ route }) => {
6766
switch (route.key) {
6867
case '1':
69-
return <ListViewExample />;
68+
return <View style={[ styles.page, { backgroundColor: '#ff4081' } ]} />;
7069
case '2':
7170
return <View style={[ styles.page, { backgroundColor: '#673ab7' } ]} />;
7271
case '3':

‎example/src/ScrollViewsExample.js‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import React, { Component } from 'react';
2+
import { View, StyleSheet } from 'react-native';
3+
import { TabViewAnimated, TabViewPage, TabBarTop } from 'react-native-tab-view';
4+
import ListViewExample from './ListViewExample';
5+
6+
const styles = StyleSheet.create({
7+
container: {
8+
flex: 1,
9+
},
10+
tabbar: {
11+
backgroundColor: '#2196f3',
12+
},
13+
indicator: {
14+
backgroundColor: '#ffeb3b',
15+
}
16+
});
17+
18+
export default class TopBarTextExample extends Component {
19+
static propTypes = {
20+
style: View.propTypes.style,
21+
};
22+
23+
state = {
24+
navigation: {
25+
index: 0,
26+
routes: [
27+
{ key: '1', title: 'First' },
28+
{ key: '2', title: 'Second' },
29+
{ key: '3', title: 'Third' },
30+
],
31+
},
32+
};
33+
34+
_handleChangeTab = (index) => {
35+
this.setState({
36+
navigation: { ...this.state.navigation, index },
37+
});
38+
};
39+
40+
_renderHeader = (props) => {
41+
return (
42+
<TabBarTop
43+
{...props}
44+
pressColor='rgba(0, 0, 0, .2)'
45+
indicatorStyle={styles.indicator}
46+
style={styles.tabbar}
47+
/>
48+
);
49+
};
50+
51+
_renderScene = ({ route }) => {
52+
switch (route.key) {
53+
case '1':
54+
return <ListViewExample style={{ backgroundColor: '#ff4081' }} />;
55+
case '2':
56+
return <ListViewExample style={{ backgroundColor: '#673ab7' }} />;
57+
case '3':
58+
return <ListViewExample style={{ backgroundColor: '#4caf50' }} />;
59+
default:
60+
return null;
61+
}
62+
};
63+
64+
_renderPage = (props) => {
65+
return <TabViewPage {...props} renderScene={this._renderScene} />;
66+
};
67+
68+
render() {
69+
return (
70+
<TabViewAnimated
71+
style={[ styles.container, this.props.style ]}
72+
navigationState={this.state.navigation}
73+
renderScene={this._renderPage}
74+
renderHeader={this._renderHeader}
75+
onRequestChangeTab={this._handleChangeTab}
76+
/>
77+
);
78+
}
79+
}

‎example/src/TabViewExample.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import TopBarIconTextExample from './TopBarIconTextExample';
1414
import BottomBarIconExample from './BottomBarIconExample';
1515
import BottomBarIconTextExample from './BottomBarIconTextExample';
1616
import NoAnimationExample from './NoAnimationExample';
17+
import ScrollViewsExample from './ScrollViewsExample';
1718

1819
const styles = StyleSheet.create({
1920
container: {
@@ -59,6 +60,7 @@ export default class TabViewExample extends Component {
5960
'Icon only bottom bar',
6061
'Icon + Text bottom bar',
6162
'No animation',
63+
'Scroll views',
6264
]
6365
};
6466

@@ -100,6 +102,8 @@ export default class TabViewExample extends Component {
100102
return <BottomBarIconTextExample />;
101103
case 5:
102104
return <NoAnimationExample />;
105+
case 6:
106+
return <ScrollViewsExample style={styles.example} />;
103107
default:
104108
return null;
105109
}

‎example/src/TopBarIconExample.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { Component } from 'react';
22
import { View, Image, StyleSheet } from 'react-native';
33
import { TabViewAnimated, TabViewPage, TabBarTop } from 'react-native-tab-view';
4-
import ListViewExample from './ListViewExample';
54

65
const styles = StyleSheet.create({
76
container: {
@@ -70,7 +69,7 @@ export default class TopBarIconExample extends Component {
7069
_renderScene = ({ route }) => {
7170
switch (route.key) {
7271
case '1':
73-
return <ListViewExample />;
72+
return <View style={[ styles.page, { backgroundColor: '#ff4081' } ]} />;
7473
case '2':
7574
return <View style={[ styles.page, { backgroundColor: '#673ab7' } ]} />;
7675
case '3':

‎example/src/TopBarIconTextExample.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { Component } from 'react';
22
import { View, Image, StyleSheet } from 'react-native';
33
import { TabViewAnimated, TabViewPage, TabBarTop } from 'react-native-tab-view';
4-
import ListViewExample from './ListViewExample';
54

65
const styles = StyleSheet.create({
76
container: {
@@ -70,7 +69,7 @@ export default class TopBarIconExample extends Component {
7069
_renderScene = ({ route }) => {
7170
switch (route.key) {
7271
case '1':
73-
return <ListViewExample />;
72+
return <View style={[ styles.page, { backgroundColor: '#ff4081' } ]} />;
7473
case '2':
7574
return <View style={[ styles.page, { backgroundColor: '#673ab7' } ]} />;
7675
case '3':

‎example/src/TopBarTextExample.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { Component } from 'react';
22
import { View, StyleSheet } from 'react-native';
33
import { TabViewAnimated, TabViewPage, TabBarTop } from 'react-native-tab-view';
4-
import ListViewExample from './ListViewExample';
54

65
const styles = StyleSheet.create({
76
container: {
@@ -56,7 +55,7 @@ export default class TopBarTextExample extends Component {
5655
_renderScene = ({ route }) => {
5756
switch (route.key) {
5857
case '1':
59-
return <ListViewExample />;
58+
return <View style={[ styles.page, { backgroundColor: '#ff4081' } ]} />;
6059
case '2':
6160
return <View style={[ styles.page, { backgroundColor: '#673ab7' } ]} />;
6261
case '3':

0 commit comments

Comments
 (0)