Skip to content

Commit e9007e9

Browse files
machourHoussein Djirdeh
machour
authored and
Houssein Djirdeh
committed
refactor: Drop rn-app-intro in favor of react-native-swiper (#493)
* refactor: Drop rn-app-intro in favor of react-native-swiper * fix: Don't embed swiper in a View, so that it works on Android
1 parent c9e7b50 commit e9007e9

File tree

3 files changed

+123
-143
lines changed

3 files changed

+123
-143
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@
7474
"react-native-photo-view": "^1.5.2",
7575
"react-native-safari-view": "^2.0.0",
7676
"react-native-search-bar": "^3.0.0",
77+
"react-native-swiper": "^1.5.13",
7778
"react-native-syntax-highlighter": "^1.2.1",
7879
"react-native-table-component": "^1.0.5",
7980
"react-native-vector-icons": "^4.4.0",
@@ -88,7 +89,6 @@
8889
"redux-persist-transform-encrypt": "^1.0.2",
8990
"redux-thunk": "^2.2.0",
9091
"reselect": "^3.0.1",
91-
"rn-app-intro": "^0.0.4",
9292
"styled-components": "^2.2.1"
9393
},
9494
"devDependencies": {

‎src/auth/screens/login.screen.js

Lines changed: 117 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
Modal,
1515
} from 'react-native';
1616
import { Button, Icon } from 'react-native-elements';
17-
import AppIntro from 'rn-app-intro';
17+
import Swiper from 'react-native-swiper';
1818
import queryString from 'query-string';
1919
import CookieManager from 'react-native-cookies';
2020

@@ -100,6 +100,14 @@ const styles = StyleSheet.create({
100100
justifyContent: 'center',
101101
alignItems: 'center',
102102
},
103+
signInContainer: {
104+
position: 'absolute',
105+
right: 0,
106+
left: 0,
107+
bottom: 80,
108+
justifyContent: 'center',
109+
alignItems: 'center',
110+
},
103111
slide: {
104112
flex: 1,
105113
justifyContent: 'center',
@@ -224,6 +232,12 @@ class Login extends Component {
224232
}
225233
};
226234

235+
shouldDisplayIntro() {
236+
const { isLoggingIn, isAuthenticated } = this.props;
237+
238+
return !isAuthenticated && !isLoggingIn && this.state.asyncStorageChecked;
239+
}
240+
227241
renderLoading() {
228242
return (
229243
<View style={styles.browserLoader}>
@@ -234,130 +248,120 @@ class Login extends Component {
234248
}
235249

236250
render() {
237-
const { locale, isLoggingIn, isAuthenticated } = this.props;
251+
const { locale, isLoggingIn } = this.props;
238252

239253
return (
240254
<ViewContainer barColor="light">
241-
{!isAuthenticated &&
242-
!isLoggingIn &&
243-
this.state.asyncStorageChecked && (
244-
<View style={styles.container}>
245-
<Modal
246-
animationType="slide"
247-
onRequestClose={() => null}
248-
visible={this.state.modalVisible}
249-
style={styles.container}
250-
>
251-
<View style={styles.modalContainer}>
252-
<View style={styles.browserSection}>
253-
<WebView
254-
source={{
255-
uri: `https://github.com/login/oauth/authorize?response_type=token&client_id=${CLIENT_ID}&redirect_uri=gitpoint://welcome&scope=user%20repo&state=${stateRandom}`,
256-
}}
257-
onLoadStart={e => this.toggleCancelButton(e, true)}
258-
onLoadEnd={e => this.toggleCancelButton(e, false)}
259-
onNavigationStateChange={e =>
260-
this.onNavigationStateChange(e)}
261-
renderLoading={() => this.renderLoading()}
262-
startInLoadingState
263-
/>
264-
</View>
265-
<View style={styles.miniSection}>
266-
<Button
267-
title={translate('auth.login.cancel', locale)}
268-
buttonStyle={styles.button}
269-
disabled={this.state.cancelDisabled}
270-
textStyle={styles.buttonText}
271-
onPress={() =>
272-
this.setModalVisible(!this.state.modalVisible)}
273-
/>
274-
</View>
275-
</View>
276-
</Modal>
277-
<View style={styles.miniSection}>
278-
<Image
279-
style={styles.logo}
280-
source={require('../../assets/logo.png')}
255+
{this.shouldDisplayIntro() && (
256+
<Swiper
257+
loop={false}
258+
dotColor="#FFFFFF55"
259+
activeDotColor={colors.white}
260+
>
261+
<View style={[styles.slide, styles.slide1]}>
262+
<Image
263+
style={styles.logo}
264+
source={require('../../assets/logo.png')}
265+
/>
266+
<Text style={styles.title}>
267+
{translate('auth.login.welcomeTitle', locale)}
268+
</Text>
269+
<Text style={styles.message}>
270+
{translate('auth.login.welcomeMessage', locale)}
271+
</Text>
272+
</View>
273+
<View style={[styles.slide, styles.slide2]}>
274+
<Icon
275+
style={styles.icon}
276+
color={colors.white}
277+
size={85}
278+
name="bell"
279+
type="octicon"
280+
/>
281+
<Text style={styles.title}>
282+
{translate('auth.login.notificationsTitle', locale)}
283+
</Text>
284+
<Text style={styles.message}>
285+
{translate('auth.login.notificationsMessage', locale)}
286+
</Text>
287+
</View>
288+
<View style={[styles.slide, styles.slide3]}>
289+
<Icon
290+
containerStyle={styles.iconMargin}
291+
style={styles.icon}
292+
color={colors.white}
293+
size={85}
294+
name="repo"
295+
type="octicon"
296+
/>
297+
<Text style={styles.title}>
298+
{translate('auth.login.reposTitle', locale)}
299+
</Text>
300+
<Text style={styles.message}>
301+
{translate('auth.login.reposMessage', locale)}
302+
</Text>
303+
</View>
304+
<View style={[styles.slide, styles.slide4]}>
305+
<Icon
306+
containerStyle={styles.iconMargin}
307+
style={styles.icon}
308+
color={colors.white}
309+
size={85}
310+
name="git-pull-request"
311+
type="octicon"
312+
/>
313+
<Text style={styles.title}>
314+
{translate('auth.login.issuesTitle', locale)}
315+
</Text>
316+
<Text style={styles.message}>
317+
{translate('auth.login.issuesMessage', locale)}
318+
</Text>
319+
</View>
320+
</Swiper>
321+
)}
322+
{this.shouldDisplayIntro() && (
323+
<View style={styles.signInContainer}>
324+
<Button
325+
raised
326+
title={translate('auth.login.signInButton', locale)}
327+
buttonStyle={styles.button}
328+
textStyle={styles.buttonText}
329+
onPress={() => this.setModalVisible(true)}
330+
/>
331+
</View>
332+
)}
333+
{this.shouldDisplayIntro() && (
334+
<Modal
335+
animationType="slide"
336+
onRequestClose={() => null}
337+
visible={this.state.modalVisible}
338+
style={styles.container}
339+
>
340+
<View style={styles.modalContainer}>
341+
<View style={styles.browserSection}>
342+
<WebView
343+
source={{
344+
uri: `https://github.com/login/oauth/authorize?response_type=token&client_id=${CLIENT_ID}&redirect_uri=gitpoint://welcome&scope=user%20repo&state=${stateRandom}`,
345+
}}
346+
onLoadStart={e => this.toggleCancelButton(e, true)}
347+
onLoadEnd={e => this.toggleCancelButton(e, false)}
348+
onNavigationStateChange={e => this.onNavigationStateChange(e)}
349+
renderLoading={() => this.renderLoading()}
350+
startInLoadingState
281351
/>
282352
</View>
283-
<View style={styles.contentSection}>
284-
<AppIntro
285-
activeDotColor={colors.white}
286-
showSkipButton={false}
287-
showDoneButton={false}
288-
>
289-
<View style={[styles.slide, styles.slide1]}>
290-
<Image
291-
style={styles.logo}
292-
source={require('../../assets/logo.png')}
293-
/>
294-
<Text style={styles.title}>
295-
{translate('auth.login.welcomeTitle', locale)}
296-
</Text>
297-
<Text style={styles.message}>
298-
{translate('auth.login.welcomeMessage', locale)}
299-
</Text>
300-
</View>
301-
<View style={[styles.slide, styles.slide2]}>
302-
<Icon
303-
style={styles.icon}
304-
color={colors.white}
305-
size={85}
306-
name="bell"
307-
type="octicon"
308-
/>
309-
<Text style={styles.title}>
310-
{translate('auth.login.notificationsTitle', locale)}
311-
</Text>
312-
<Text style={styles.message}>
313-
{translate('auth.login.notificationsMessage', locale)}
314-
</Text>
315-
</View>
316-
<View style={[styles.slide, styles.slide3]}>
317-
<Icon
318-
containerStyle={styles.iconMargin}
319-
style={styles.icon}
320-
color={colors.white}
321-
size={85}
322-
name="repo"
323-
type="octicon"
324-
/>
325-
<Text style={styles.title}>
326-
{translate('auth.login.reposTitle', locale)}
327-
</Text>
328-
<Text style={styles.message}>
329-
{translate('auth.login.reposMessage', locale)}
330-
</Text>
331-
</View>
332-
<View style={[styles.slide, styles.slide4]}>
333-
<Icon
334-
containerStyle={styles.iconMargin}
335-
style={styles.icon}
336-
color={colors.white}
337-
size={85}
338-
name="git-pull-request"
339-
type="octicon"
340-
/>
341-
<Text style={styles.title}>
342-
{translate('auth.login.issuesTitle', locale)}
343-
</Text>
344-
<Text style={styles.message}>
345-
{translate('auth.login.issuesMessage', locale)}
346-
</Text>
347-
</View>
348-
</AppIntro>
349-
</View>
350353
<View style={styles.miniSection}>
351354
<Button
352-
raised
353-
title={translate('auth.login.signInButton', locale)}
355+
title={translate('auth.login.cancel', locale)}
354356
buttonStyle={styles.button}
357+
disabled={this.state.cancelDisabled}
355358
textStyle={styles.buttonText}
356-
onPress={() => this.setModalVisible(true)}
359+
onPress={() => this.setModalVisible(!this.state.modalVisible)}
357360
/>
358361
</View>
359362
</View>
360-
)}
363+
</Modal>
364+
)}
361365
{isLoggingIn && (
362366
<View style={styles.browserLoader}>
363367
<Text style={styles.browserLoadingLabel}>

‎yarn.lock

Lines changed: 5 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -320,18 +320,6 @@ assert-plus@^0.2.0:
320320
version "0.2.0"
321321
resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-0.2.0.tgz#d74e1b87e7affc0db8aadb7021f3fe48101ab234"
322322

323-
assign-deep@^0.4.5:
324-
version "0.4.6"
325-
resolved "https://registry.yarnpkg.com/assign-deep/-/assign-deep-0.4.6.tgz#2192a989354843093a03eff941c9473a9bc58a1d"
326-
dependencies:
327-
assign-symbols "^0.1.1"
328-
is-primitive "^2.0.0"
329-
kind-of "^5.0.2"
330-
331-
assign-symbols@^0.1.1:
332-
version "0.1.1"
333-
resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-0.1.1.tgz#cb025944ef4ec8a3693f086e9e112c74e3a0fed9"
334-
335323
ast-types-flow@0.0.7:
336324
version "0.0.7"
337325
resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
@@ -3998,10 +3986,6 @@ kind-of@^4.0.0:
39983986
dependencies:
39993987
is-buffer "^1.1.5"
40003988

4001-
kind-of@^5.0.2:
4002-
version "5.0.2"
4003-
resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.0.2.tgz#f57bec933d9a2209ffa96c5c08343607b7035fda"
4004-
40053989
klaw@^1.0.0:
40063990
version "1.3.1"
40073991
resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439"
@@ -5444,11 +5428,11 @@ react-native-side-menu@^0.20.1:
54445428
version "0.20.3"
54455429
resolved "https://registry.yarnpkg.com/react-native-side-menu/-/react-native-side-menu-0.20.3.tgz#5dffe3e237018360ed081433d505ea454cba9ca4"
54465430

5447-
"react-native-swiper@git+https://github.com/FuYaoDe/react-native-swiper.git":
5448-
version "1.4.4"
5449-
resolved "git+https://github.com/FuYaoDe/react-native-swiper.git#a6417ff41a8b2d490bdcc4541015ab35736d4595"
5431+
react-native-swiper@^1.5.13:
5432+
version "1.5.13"
5433+
resolved "https://registry.yarnpkg.com/react-native-swiper/-/react-native-swiper-1.5.13.tgz#fa695cd4ab77b9a9df2d2bfee38ea7274dd07a2e"
54505434
dependencies:
5451-
react-timer-mixin "^0.13.3"
5435+
prop-types "^15.5.10"
54525436

54535437
react-native-syntax-highlighter@^1.2.1:
54545438
version "1.2.3"
@@ -5619,7 +5603,7 @@ react-test-renderer@16.0.0-alpha.6:
56195603
fbjs "^0.8.9"
56205604
object-assign "^4.1.0"
56215605

5622-
react-timer-mixin@^0.13.2, react-timer-mixin@^0.13.3:
5606+
react-timer-mixin@^0.13.2:
56235607
version "0.13.3"
56245608
resolved "https://registry.yarnpkg.com/react-timer-mixin/-/react-timer-mixin-0.13.3.tgz#0da8b9f807ec07dc3e854d082c737c65605b3d22"
56255609

@@ -6051,14 +6035,6 @@ rimraf@~2.2.6:
60516035
version "2.2.8"
60526036
resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.2.8.tgz#e439be2aaee327321952730f99a8929e4fc50582"
60536037

6054-
rn-app-intro@^0.0.4:
6055-
version "0.0.4"
6056-
resolved "https://registry.yarnpkg.com/rn-app-intro/-/rn-app-intro-0.0.4.tgz#c094d36fa0f2c437799d5c11c89d5fbf4cc961c5"
6057-
dependencies:
6058-
assign-deep "^0.4.5"
6059-
prop-types "^15.5.10"
6060-
react-native-swiper "git+https://github.com/FuYaoDe/react-native-swiper.git"
6061-
60626038
rn-host-detect@^1.1.3:
60636039
version "1.1.3"
60646040
resolved "https://registry.yarnpkg.com/rn-host-detect/-/rn-host-detect-1.1.3.tgz#242d76e2fa485c48d751416e65b7cce596969e91"

0 commit comments

Comments
 (0)