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
|
import React from 'react';
import { View } from 'react-native';
import { RkStyleSheet } from 'react-native-ui-kitten';
import {
GradientButton,
PaginationIndicator,
} from '../../components/';
import { Walkthrough } from '../../components/walkthrough';
import { Walkthrough1 } from './walkthrough1';
import { Walkthrough2 } from './walkthrough2';
import NavigationType from '../../config/navigation/propTypes';
export class WalkthroughScreen extends React.Component {
static propTypes = {
navigation: NavigationType.isRequired,
};
static navigationOptions = {
header: null,
};
state = {
index: 0,
};
onWalkThroughIndexChanged = (index) => {
this.setState({ index });
};
onStartButtonPressed = () => {
this.props.navigation.navigate('Articles2');
};
render = () => (
<View style={styles.screen}>
<Walkthrough onChanged={this.onWalkThroughIndexChanged}>
<Walkthrough1 />
<Walkthrough2 />
</Walkthrough>
<PaginationIndicator length={2} current={this.state.index} />
<GradientButton
rkType='large'
style={styles.button}
text="GET STARTED"
onPress={this.onStartButtonPressed}
/>
</View>
)
}
const styles = RkStyleSheet.create(theme => ({
screen: {
backgroundColor: theme.colors.screen.base,
paddingVertical: 28,
alignItems: 'center',
flex: 1,
},
button: {
marginTop: 25,
marginHorizontal: 16,
},
}));
|
