/
index.js
108 lines (99 loc) · 3.09 KB
/
index.js
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
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { View, ScrollView, Dimensions, Text, TouchableOpacity, StyleSheet } from 'react-native';
import tinycolor from 'tinycolor2';
import PageData from './components/PageData';
import Paginator from './components/Paginator';
export default class Onboarding extends Component {
constructor() {
super();
this.state = {
currentPage: 0,
};
}
updatePosition = (event) => {
const { contentOffset, layoutMeasurement } = event.nativeEvent;
const pageFraction = contentOffset.x / layoutMeasurement.width;
const page = Math.round(pageFraction);
const isLastPage = this.props.pages.length === page + 1;
if (isLastPage && pageFraction - page > 0.3) {
this.props.onEnd();
} else {
this.setState({ currentPage: page });
}
};
goNext = () => {
const { width } = Dimensions.get('window');
const { currentPage } = this.state;
const nextPage = currentPage + 1;
const offsetX = nextPage * width;
this.refs.scroll.scrollTo({
x: offsetX,
animated: true
}, () => {
this.setState({ currentPage: nextPage });
});
};
render() {
const { width, height } = Dimensions.get('window');
const { pages, bottomOverlay, showSkip, showNext, showDone } = this.props;
const currentPage = pages[this.state.currentPage] || pages[0];
const { backgroundColor } = currentPage;
const isLight = tinycolor(backgroundColor).getBrightness() > 180;
return (
<View style={{ flex: 1, backgroundColor: backgroundColor, justifyContent: 'center' }}>
<ScrollView
ref="scroll"
pagingEnabled={true}
horizontal={true}
showsHorizontalScrollIndicator={false}
onScroll={this.updatePosition}
scrollEventThrottle={100}
>
{pages.map(({ image, title, subtitle, titleStyles, subtitleStyles }, idx) => (
<PageData
key={idx}
isLight={isLight}
image={image}
title={title}
subtitle={subtitle}
titleStyles={titleStyles}
subtitleStyles={subtitleStyles}
width={width}
height={height}
/>
))}
</ScrollView>
<Paginator
isLight={isLight}
overlay={bottomOverlay}
showSkip={showSkip}
showNext={showNext}
showDone={showDone}
pages={pages.length}
currentPage={this.state.currentPage}
onEnd={this.props.onEnd}
onNext={this.goNext}
/>
</View>
);
}
}
Onboarding.propTypes = {
pages: PropTypes.arrayOf(PropTypes.shape({
backgroundColor: PropTypes.string.isRequired,
image: PropTypes.element.isRequired,
title: PropTypes.string.isRequired,
subtitle: PropTypes.string.isRequired,
})).isRequired,
bottomOverlay: PropTypes.bool,
showSkip: PropTypes.bool,
showNext: PropTypes.bool,
showDone: PropTypes.bool,
};
Onboarding.defaultProps = {
bottomOverlay: true,
showSkip: true,
showNext: true,
showDone: true,
};