Skip to content

Commit 0f6a056

Browse files
auserauser
committed
Feature components
1 parent 3084708 commit 0f6a056

File tree

3 files changed

+116
-86
lines changed

3 files changed

+116
-86
lines changed

‎AppIntro.js‎

Lines changed: 42 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import {
1111
Platform,
1212
} from 'react-native';
1313
import Swiper from 'react-native-swiper';
14+
import DoneButton from './components/DoneButton';
15+
1416
const windowsWidth = Dimensions.get('window').width;
1517
const windowsHeight = Dimensions.get('window').height;
1618

@@ -182,92 +184,41 @@ export default class AppIntro extends Component {
182184
}
183185

184186
renderSkipButton = (isSkipBtnShow, index) => {
185-
if (this.props.showSkipButton) {
186187
if (Platform.OS === 'ios') {
187-
return (
188-
<Animated.View style={[this.styles.btnContainer, {
189-
opacity: this.state.skipFadeOpacity,
190-
transform: [{
191-
translateX: this.state.skipFadeOpacity.interpolate({
192-
inputRange: [0, 1],
193-
outputRange: [0, 15],
194-
}),
195-
}],
196-
}]}
197-
>
198-
<TouchableOpacity
199-
style={this.styles.full}
200-
onPress={isSkipBtnShow ? () => this.props.onSkipBtnClick(index) : null}
201-
>
202-
<Text style={[this.styles.controllText, { color: this.props.rightTextColor }]}>{this.props.skipBtnLabel}</Text>
203-
</TouchableOpacity>
204-
</Animated.View>
205-
)
206-
} else {
207-
return (
208-
<View style={[this.styles.btnContainer, {
209-
paddingBottom: 5,
210-
opacity: isSkipBtnShow ? 1 : 0,
211-
}]}
188+
return (
189+
<Animated.View style={[this.styles.btnContainer, {
190+
opacity: this.state.skipFadeOpacity,
191+
transform: [{
192+
translateX: this.state.skipFadeOpacity.interpolate({
193+
inputRange: [0, 1],
194+
outputRange: [0, 15],
195+
}),
196+
}],
197+
}]}
198+
>
199+
<TouchableOpacity
200+
style={this.styles.full}
201+
onPress={isSkipBtnShow ? () => this.props.onSkipBtnClick(index) : null}
212202
>
213-
<TouchableOpacity
214-
style={this.styles.full}
215-
onPress={isSkipBtnShow ? () => this.props.onSkipBtnClick(index) : null}
216-
>
217-
<Text style={[this.styles.controllText, { color: this.props.leftTextColor }]}>{this.props.skipBtnLabel}</Text>
218-
</TouchableOpacity>
219-
</View>
203+
<Text style={[this.styles.controllText, { color: this.props.rightTextColor }]}>{this.props.skipBtnLabel}</Text>
204+
</TouchableOpacity>
205+
</Animated.View>
220206
)
221-
}
222-
}
223-
}
224-
225-
renderDoneButton = (isDoneBtnShow, context) => {
226-
if (this.props.showDoneButton) {
227-
if (Platform.OS === 'ios') {
228-
return (
229-
<View style={this.styles.btnContainer}>
230-
<Animated.View style={[this.styles.full, { height: 0 }, {
231-
opacity: this.state.doneFadeOpacity,
232-
transform: [{
233-
translateX: this.state.skipFadeOpacity.interpolate({
234-
inputRange: [0, 1],
235-
outputRange: [0, 20],
236-
}),
237-
}],
238-
}]}
239-
>
240-
<View style={this.styles.full}>
241-
<Text style={[this.styles.controllText, {
242-
color: rightTextColor, paddingRight: 30,
243-
}]}
244-
>{this.props.doneBtnLabel}</Text>
245-
</View>
246-
</Animated.View>
247-
<Animated.View style={[this.styles.full, { height: 0 }, { opacity: this.state.nextOpacity }]}>
248-
<TouchableOpacity style={this.styles.full}
249-
onPress={ isDoneBtnShow ?
250-
this.props.onDoneBtnClick : this.onNextBtnClick.bind(this, context)}
251-
>
252-
<Text style={[this.styles.nextButtonText, { color: this.props.rightTextColor }]}>{this.props.nextBtnLabel}</Text>
253-
</TouchableOpacity>
254-
</Animated.View>
255-
</View>
256-
)
257-
} else {
258-
return (
259-
<View style={[this.styles.btnContainer, { height: 0, paddingBottom: 5 }]}>
260-
<TouchableOpacity style={this.styles.full}
261-
onPress={ isDoneBtnShow ?
262-
this.props.onDoneBtnClick : this.onNextBtnClick.bind(this, context)}
263-
>
264-
<Text style={[this.styles.nextButtonText, { color: this.props.rightTextColor }]}>
265-
{isDoneBtnShow ? this.props.doneBtnLabel : this.props.nextBtnLabel}
266-
</Text>
267-
</TouchableOpacity>
268-
</View>
269-
)
270-
}
207+
} else {
208+
return (
209+
<View style={[this.styles.btnContainer, {
210+
paddingBottom: 5,
211+
opacity: isSkipBtnShow ? 1 : 0,
212+
}]}
213+
>
214+
<TouchableOpacity
215+
style={this.styles.full}
216+
onPress={isSkipBtnShow ? () => this.props.onSkipBtnClick(index) : null}
217+
>
218+
<Text style={[this.styles.controllText, { color: this.props.leftTextColor }]}>{this.props.skipBtnLabel}</Text>
219+
</TouchableOpacity>
220+
</View>
221+
)
271222
}
272223
}
273224

@@ -282,7 +233,6 @@ export default class AppIntro extends Component {
282233
}
283234

284235
renderPagination = (index, total, context) => {
285-
console.log('renderPagination ->', index, total);
286236
const { activeDotColor, dotColor, rightTextColor, leftTextColor } = this.props;
287237
const ActiveDot = (
288238
<View
@@ -319,9 +269,15 @@ console.log('renderPagination ->', index, total);
319269
}
320270
return (
321271
<View style={[this.styles.paginationContainer]}>
322-
{this.renderSkipButton(isSkipBtnShow, index)}
272+
{this.props.showSkipButton && this.renderSkipButton(isSkipBtnShow, index)}
323273
{this.renderDots(dots)}
324-
{this.renderDoneButton(isDoneBtnShow, context)}
274+
{this.props.showDoneButton && <DoneButton
275+
{...this.props}
276+
{...this.state}
277+
isDoneBtnShow={isDoneBtnShow}
278+
styles={this.styles}
279+
onNextBtnClick={this.onNextBtnClick.bind(this, context)}
280+
onDoneBtnClick={this.props.onDoneBtnClick} />}
325281
</View>
326282
);
327283
}

‎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+

0 commit comments

Comments
 (0)