Skip to content

Commit 194dc68

Browse files
FuYaoDeFuYaoDe
authored
Merge pull request #29 from auser/feature/components
Feature/components
2 parents d77d044 + d16166e commit 194dc68

File tree

7 files changed

+221
-107
lines changed

7 files changed

+221
-107
lines changed

‎AppIntro.js‎

Lines changed: 36 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ import {
1111
Platform,
1212
} from 'react-native';
1313
import Swiper from 'react-native-swiper';
14+
import DoneButton from './components/DoneButton';
15+
import SkipButton from './components/SkipButton';
16+
import RenderDots from './components/Dots';
17+
1418
const windowsWidth = Dimensions.get('window').width;
1519
const windowsHeight = Dimensions.get('window').height;
1620

@@ -62,13 +66,6 @@ const defaulStyles = {
6266
},
6367
activeDotStyle: {
6468
backgroundColor: '#fff',
65-
width: 13,
66-
height: 13,
67-
borderRadius: 7,
68-
marginLeft: 7,
69-
marginRight: 7,
70-
marginTop: 7,
71-
marginBottom: 7,
7269
},
7370
paginationContainer: {
7471
position: 'absolute',
@@ -189,21 +186,6 @@ export default class AppIntro extends Component {
189186
}
190187

191188
renderPagination = (index, total, context) => {
192-
const { activeDotColor, dotColor, rightTextColor, leftTextColor } = this.props;
193-
const ActiveDot = (
194-
<View
195-
style={[this.styles.activeDotStyle, { backgroundColor: activeDotColor }]}
196-
/>
197-
);
198-
const Dot = <View style={[this.styles.dotStyle, { backgroundColor: dotColor }]} />;
199-
let dots = [];
200-
for (let i = 0; i < total; i++) {
201-
dots.push(i === index ?
202-
React.cloneElement(ActiveDot, { key: i })
203-
:
204-
React.cloneElement(Dot, { key: i })
205-
);
206-
}
207189
let isDoneBtnShow;
208190
let isSkipBtnShow;
209191
if (index === total - 1) {
@@ -219,91 +201,27 @@ export default class AppIntro extends Component {
219201
isDoneBtnShow = false;
220202
isSkipBtnShow = true;
221203
}
222-
let controllBts;
223-
if (Platform.OS === 'ios') {
224-
controllBts = (
225-
<View style={this.styles.paginationContainer}>
226-
<Animated.View style={[this.styles.btnContainer, {
227-
opacity: this.state.skipFadeOpacity,
228-
transform: [{
229-
translateX: this.state.skipFadeOpacity.interpolate({
230-
inputRange: [0, 1],
231-
outputRange: [0, 15],
232-
}),
233-
}],
234-
}]}
235-
>
236-
<TouchableOpacity
237-
style={this.styles.full}
238-
onPress={isSkipBtnShow ? () => this.props.onSkipBtnClick(index) : null}
239-
>
240-
<Text style={[this.styles.controllText, { color: leftTextColor }]}>{this.props.skipBtnLabel}</Text>
241-
</TouchableOpacity>
242-
</Animated.View>
243-
<View style={this.styles.dotContainer}>
244-
{dots}
245-
</View>
246-
<View style={this.styles.btnContainer}>
247-
<Animated.View style={[this.styles.full, { height: 0 }, {
248-
opacity: this.state.doneFadeOpacity,
249-
transform: [{
250-
translateX: this.state.skipFadeOpacity.interpolate({
251-
inputRange: [0, 1],
252-
outputRange: [0, 20],
253-
}),
254-
}],
255-
}]}
256-
>
257-
<View style={this.styles.full}>
258-
<Text style={[this.styles.controllText, {
259-
color: rightTextColor, paddingRight: 30,
260-
}]}
261-
>{this.props.doneBtnLabel}</Text>
262-
</View>
263-
</Animated.View>
264-
<Animated.View style={[this.styles.full, { height: 0 }, { opacity: this.state.nextOpacity }]}>
265-
<TouchableOpacity style={this.styles.full}
266-
onPress={ isDoneBtnShow ?
267-
this.props.onDoneBtnClick : this.onNextBtnClick.bind(this, context)}
268-
>
269-
<Text style={[this.styles.nextButtonText, { color: rightTextColor }]}>{this.props.nextBtnLabel}</Text>
270-
</TouchableOpacity>
271-
</Animated.View>
272-
</View>
273-
</View>
274-
);
275-
} else {
276-
controllBts = (
277-
<View style={this.styles.paginationContainer}>
278-
<View style={[this.styles.btnContainer, {
279-
paddingBottom: 5,
280-
opacity: isSkipBtnShow ? 1 : 0,
281-
}]}
282-
>
283-
<TouchableOpacity
284-
style={this.styles.full}
285-
onPress={isSkipBtnShow ? () => this.props.onSkipBtnClick(index) : null}
286-
>
287-
<Text style={[this.styles.controllText, { color: leftTextColor }]}>{this.props.skipBtnLabel}</Text>
288-
</TouchableOpacity>
289-
</View>
290-
<View style={this.styles.dotContainer}>
291-
{dots}
292-
</View>
293-
<View style={[this.styles.btnContainer, { height: 0, paddingBottom: 5 }]}>
294-
<TouchableOpacity style={this.styles.full}
295-
onPress={ isDoneBtnShow ?
296-
this.props.onDoneBtnClick : this.onNextBtnClick.bind(this, context)}
297-
>
298-
<Text style={[this.styles.nextButtonText, { color: rightTextColor }]}>
299-
{isDoneBtnShow ? this.props.doneBtnLabel : this.props.nextBtnLabel}
300-
</Text>
301-
</TouchableOpacity>
302-
</View>
303-
</View>
304-
);
305-
}
306-
return controllBts;
204+
return (
205+
<View style={[this.styles.paginationContainer]}>
206+
{this.props.showSkipButton && <SkipButton
207+
{...this.props}
208+
{...this.state}
209+
isSkipBtnShow={isSkipBtnShow}
210+
styles={this.styles}
211+
onSkipBtnClick={() => this.props.onSkipBtnClick(index)} />}
212+
{this.props.showDots && RenderDots(index, total, {
213+
...this.props,
214+
styles: this.styles
215+
})}
216+
{this.props.showDoneButton && <DoneButton
217+
{...this.props}
218+
{...this.state}
219+
isDoneBtnShow={isDoneBtnShow}
220+
styles={this.styles}
221+
onNextBtnClick={this.onNextBtnClick.bind(this, context)}
222+
onDoneBtnClick={this.props.onDoneBtnClick} />}
223+
</View>
224+
);
307225
}
308226

309227
renderBasicSlidePage = (index, {
@@ -396,6 +314,7 @@ export default class AppIntro extends Component {
396314
{androidPages}
397315
<Swiper
398316
loop={false}
317+
index={this.props.defaultIndex}
399318
renderPagination={this.renderPagination}
400319
onMomentumScrollEnd={(e, state) => {
401320
this.props.onSlideChange(state.index, state.total);
@@ -434,6 +353,12 @@ AppIntro.propTypes = {
434353
PropTypes.element,
435354
]),
436355
customStyles: PropTypes.object,
356+
defaultIndex: PropTypes.number,
357+
showSkipButton: PropTypes.bool,
358+
showDoneButton: PropTypes.bool,
359+
showDots: PropTypes.bool,
360+
renderDoneButton: PropTypes.element,
361+
renderSkipButton: PropTypes.element
437362
};
438363

439364
AppIntro.defaultProps = {
@@ -449,4 +374,8 @@ AppIntro.defaultProps = {
449374
doneBtnLabel: 'Done',
450375
skipBtnLabel: 'Skip',
451376
nextBtnLabel: '›',
377+
defaultIndex: 0,
378+
showSkipButton: true,
379+
showDoneButton: true,
380+
showDots: true
452381
};

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,9 @@ And in Android, image inside view component, view need width、height.
174174
| skipBtnLabel | string、Text element | Skip | The bottom left custom Text label |
175175
| nextBtnLabel | string、Text element | › | The bottom left custom Text label |
176176
| pageArray | array | | In the basic usage, you can input object array to render basic view example: ```[[{title: 'Page 1', description: 'Description 1', img: 'https://goo.gl/uwzs0C', imgStyle: {height: 80 * 2.5, width: 109 * 2.5 }, backgroundColor: '#fa931d', fontColor: '#fff', level: 10 }]``` , level is parallax effect level ,if you use pageArray you can't use custom view |
177+
| defaultIndex | number | 0 | number of the index of the initial index |
178+
| renderSkipButton | bool | true | a boolean defining if we should render the skip button |
179+
| renderDoneButton | bool | true | a boolean that defines if we should render the done button |
177180

178181
##### **Children View Properties**
179182
| Prop | PropType | Default Value | Description |

‎components/DoneButton.android.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react'
2+
import {
3+
Text,
4+
View,
5+
TouchableOpacity,
6+
} from 'react-native';
7+
8+
export const DoneButton = ({
9+
styles, onDoneBtnClick, onNextBtnClick,
10+
rightTextColor, isDoneBtnShow,
11+
doneBtnLabel, nextBtnLabel,
12+
}) => {
13+
return (
14+
<View style={[styles.btnContainer, { height: 0, paddingBottom: 5 }]}>
15+
<TouchableOpacity style={styles.full}
16+
onPress={ isDoneBtnShow ? onDoneBtnClick : onNextBtnClick}
17+
>
18+
<Text style={[styles.nextButtonText, { color: rightTextColor }]}>
19+
{isDoneBtnShow ? doneBtnLabel : nextBtnLabel}
20+
</Text>
21+
</TouchableOpacity>
22+
</View>
23+
)
24+
}
25+
26+
export default DoneButton

‎components/DoneButton.ios.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React from 'react'
2+
import {
3+
Text,
4+
View,
5+
TouchableOpacity,
6+
Animated
7+
} from 'react-native';
8+
9+
export const DoneButton = ({
10+
styles, onDoneBtnClick, onNextBtnClick,
11+
rightTextColor, isDoneBtnShow,
12+
doneBtnLabel, nextBtnLabel,
13+
doneFadeOpacity, skipFadeOpacity, nextOpacity
14+
}) => {
15+
return (
16+
<View style={styles.btnContainer}>
17+
<Animated.View style={[styles.full, { height: 0 }, {
18+
opacity: doneFadeOpacity,
19+
transform: [{
20+
translateX: skipFadeOpacity.interpolate({
21+
inputRange: [0, 1],
22+
outputRange: [0, 20],
23+
}),
24+
}],
25+
}]}
26+
>
27+
<View style={styles.full}>
28+
<Text style={[styles.controllText, {
29+
color: rightTextColor, paddingRight: 30,
30+
}]}>
31+
{doneBtnLabel}
32+
</Text>
33+
</View>
34+
</Animated.View>
35+
<Animated.View style={[styles.full, { height: 0 }, { opacity: nextOpacity }]}>
36+
<TouchableOpacity style={styles.full}
37+
onPress={ isDoneBtnShow ? onDoneBtnClick : onNextBtnClick}>
38+
<Text style={[styles.nextButtonText, { color: rightTextColor }]}>
39+
{nextBtnLabel}
40+
</Text>
41+
</TouchableOpacity>
42+
</Animated.View>
43+
</View>
44+
)
45+
}
46+
47+
export default DoneButton
48+

‎components/Dots.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from 'react'
2+
import {
3+
Text,
4+
View
5+
} from 'react-native';
6+
7+
export const Dot = ({
8+
styles, dotColor, activeDotColor, active
9+
}) => {
10+
if (active) {
11+
return (
12+
<View
13+
style={[styles.dotStyle, styles.activeDotStyle, {
14+
backgroundColor: activeDotColor
15+
}]}
16+
/>
17+
);
18+
} else {
19+
return (
20+
<View
21+
style={[styles.dotStyle, {
22+
backgroundColor: dotColor
23+
}]} />
24+
);
25+
}
26+
}
27+
28+
export const RenderDots = (index, total, props) => {
29+
let dots = [];
30+
for (let i = 0; i < total; i++) {
31+
dots.push(React.createElement(Dot, {
32+
...props,
33+
key: i,
34+
active: i === index
35+
}));
36+
}
37+
return dots;
38+
}
39+
40+
export default RenderDots;

‎components/SkipButton.android.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react'
2+
import {
3+
Text,
4+
View,
5+
TouchableOpacity,
6+
Animated
7+
} from 'react-native';
8+
9+
export const SkipButton = ({
10+
styles, onSkipBtnClick, isSkipBtnShow,
11+
leftTextColor,
12+
skipBtnLabel,
13+
skipFadeOpacity
14+
}) => {
15+
return (
16+
<View style={[styles.btnContainer, {
17+
paddingBottom: 5,
18+
opacity: isSkipBtnShow ? 1 : 0,
19+
}]}>
20+
<TouchableOpacity
21+
style={styles.full}
22+
onPress={isSkipBtnShow ? () => onSkipBtnClick(index) : null}>
23+
<Text style={[styles.controllText, { color: leftTextColor }]}>
24+
{skipBtnLabel}
25+
</Text>
26+
</TouchableOpacity>
27+
</View>
28+
)
29+
}
30+
31+
export default SkipButton

‎components/SkipButton.ios.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react'
2+
import {
3+
Text,
4+
View,
5+
TouchableOpacity,
6+
Animated
7+
} from 'react-native';
8+
9+
export const SkipButton = ({
10+
styles, onSkipBtnClick, isSkipBtnShow,
11+
rightTextColor,
12+
skipBtnLabel,
13+
skipFadeOpacity
14+
}) => {
15+
return (
16+
<Animated.View style={[styles.btnContainer, {
17+
opacity: skipFadeOpacity,
18+
transform: [{
19+
translateX: skipFadeOpacity.interpolate({
20+
inputRange: [0, 1],
21+
outputRange: [0, 15],
22+
}),
23+
}],
24+
}]}
25+
>
26+
<TouchableOpacity
27+
style={styles.full}
28+
onPress={isSkipBtnShow ? () => onSkipBtnClick(index) : null}>
29+
<Text style={[styles.controllText, { color: rightTextColor }]}>
30+
{skipBtnLabel}
31+
</Text>
32+
</TouchableOpacity>
33+
</Animated.View>
34+
)
35+
}
36+
37+
export default SkipButton

0 commit comments

Comments
 (0)