From f4294de53be937bbc3f248b011b17f39851b8401 Mon Sep 17 00:00:00 2001 From: Mark Vayngrib Date: Sat, 16 Dec 2017 22:35:54 -0500 Subject: [PATCH 01/12] support web --- components/DoneButton.web.js | 1 + components/SkipButton.web.js | 1 + 2 files changed, 2 insertions(+) create mode 100644 components/DoneButton.web.js create mode 100644 components/SkipButton.web.js diff --git a/components/DoneButton.web.js b/components/DoneButton.web.js new file mode 100644 index 0000000..c7a3f10 --- /dev/null +++ b/components/DoneButton.web.js @@ -0,0 +1 @@ +module.exports = require('./DoneButton.ios') diff --git a/components/SkipButton.web.js b/components/SkipButton.web.js new file mode 100644 index 0000000..d83b651 --- /dev/null +++ b/components/SkipButton.web.js @@ -0,0 +1 @@ +module.exports = require('./SkipButton.ios') From cb0e80a1cccf882a0bf5ca88f0fba18b81bb1c75 Mon Sep 17 00:00:00 2001 From: pgmemk Date: Sun, 14 Jan 2018 14:39:26 -0500 Subject: [PATCH 02/12] Done button is not all clickable --- components/DoneButton.ios.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/components/DoneButton.ios.js b/components/DoneButton.ios.js index a6d2c9e..12dc5e9 100644 --- a/components/DoneButton.ios.js +++ b/components/DoneButton.ios.js @@ -26,7 +26,7 @@ export const DoneButton = ({ > {doneBtnLabel} @@ -36,7 +36,7 @@ export const DoneButton = ({ - {nextBtnLabel} + {isDoneBtnShow ? doneButton : nextBtnLabel} @@ -45,4 +45,3 @@ export const DoneButton = ({ } export default DoneButton - \ No newline at end of file From 5323d2764d3e0e2093bcfa3d345817b6dbace752 Mon Sep 17 00:00:00 2001 From: pgmemk Date: Sun, 14 Jan 2018 14:44:49 -0500 Subject: [PATCH 03/12] Done button is not all clickable --- components/DoneButton.ios.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/DoneButton.ios.js b/components/DoneButton.ios.js index 12dc5e9..879ba3d 100644 --- a/components/DoneButton.ios.js +++ b/components/DoneButton.ios.js @@ -36,7 +36,7 @@ export const DoneButton = ({ - {isDoneBtnShow ? doneButton : nextBtnLabel} + {isDoneBtnShow ? doneBtnLabel : nextBtnLabel} From 303c3eef19a11eb1952e2118bde81ef219ef0e17 Mon Sep 17 00:00:00 2001 From: Mark Vayngrib Date: Wed, 14 Feb 2018 15:15:28 -0500 Subject: [PATCH 04/12] fix: don't crash on undefined level --- AppIntro.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/AppIntro.js b/AppIntro.js index 52b42d9..aeaf268 100644 --- a/AppIntro.js +++ b/AppIntro.js @@ -157,7 +157,7 @@ export default class AppIntro extends Component { { toValue: value }, ).start(); } - getTransform = (index, offset, level) => { + getTransform = (index, offset, level=0) => { const isFirstPage = index === 0; const statRange = isFirstPage ? 0 : windowsWidth * (index - 1); const endRange = isFirstPage ? windowsWidth : windowsWidth * index; From 750e5a9744ffce76f68b233c341c5eee66817886 Mon Sep 17 00:00:00 2001 From: Mark Vayngrib Date: Sat, 17 Mar 2018 19:56:39 -0400 Subject: [PATCH 05/12] fix: proptypes --- AppIntro.js | 3 ++- package.json | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/AppIntro.js b/AppIntro.js index aeaf268..e814e46 100644 --- a/AppIntro.js +++ b/AppIntro.js @@ -1,5 +1,6 @@ import assign from 'assign-deep'; -import React, { Component, PropTypes } from 'react'; +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import { StatusBar, StyleSheet, diff --git a/package.json b/package.json index ed3fbd5..2e623a1 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "homepage": "https://github.com/fuyaode/react-native-app-intro#readme", "dependencies": { "assign-deep": "^0.4.5", - "react-native-swiper": "git+https://github.com/FuYaoDe/react-native-swiper.git" + "prop-types": "^15.5", + "react-native-swiper": "github:tradle/react-native-swiper#dev" } } From f8712befca27b7ec9f9ff3279a7c3290bb9e4506 Mon Sep 17 00:00:00 2001 From: Mark Vayngrib Date: Thu, 22 Mar 2018 14:55:56 -0400 Subject: [PATCH 06/12] fix: web --- components/DoneButton.web.js | 3 ++- components/SkipButton.web.js | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/components/DoneButton.web.js b/components/DoneButton.web.js index c7a3f10..96c7351 100644 --- a/components/DoneButton.web.js +++ b/components/DoneButton.web.js @@ -1 +1,2 @@ -module.exports = require('./DoneButton.ios') +import DoneButton from './DoneButton.ios' +export default DoneButton diff --git a/components/SkipButton.web.js b/components/SkipButton.web.js index d83b651..ff5ecd4 100644 --- a/components/SkipButton.web.js +++ b/components/SkipButton.web.js @@ -1 +1,2 @@ -module.exports = require('./SkipButton.ios') +import SkipButton from './SkipButton.ios' +export default SkipButton From f774220db421109ecf627ec9883b742bd2722486 Mon Sep 17 00:00:00 2001 From: Mark Vayngrib Date: Thu, 22 Mar 2018 15:59:35 -0400 Subject: [PATCH 07/12] fix: pagination style, simplify onNextBtnClick --- AppIntro.js | 39 +++++++++++++-------------------------- 1 file changed, 13 insertions(+), 26 deletions(-) diff --git a/AppIntro.js b/AppIntro.js index e814e46..4e78b7e 100644 --- a/AppIntro.js +++ b/AppIntro.js @@ -81,16 +81,16 @@ const defaulStyles = { backgroundColor: 'transparent', }, dotContainer: { - flex: 0.6, + flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', }, btnContainer: { - flex: 0.2, + flex: 1, justifyContent: 'center', alignItems: 'center', - height: 50, + height: 50 }, nextButtonText: { fontSize: 25, @@ -119,23 +119,10 @@ export default class AppIntro extends Component { }; } - onNextBtnClick = (context) => { - if (context.state.isScrolling || context.state.total < 2) return; - const state = context.state; - const diff = (context.props.loop ? 1 : 0) + 1 + context.state.index; - let x = 0; - if (state.dir === 'x') x = diff * state.width; - if (Platform.OS === 'ios') { - context.refs.scrollView.scrollTo({ y: 0, x }); - } else { - context.refs.scrollView.setPage(diff); - context.onScrollEnd({ - nativeEvent: { - position: diff, - }, - }); - } - this.props.onNextBtnClick(context.state.index); + onNextBtnClick = (swiper) => { + // scrollTo really means scroll forward some offset + swiper.scrollTo(1); + this.props.onNextBtnClick(swiper.state.index); } setDoneBtnOpacity = (value) => { @@ -187,10 +174,10 @@ export default class AppIntro extends Component { }; } - renderPagination = (index, total, context) => { + renderPagination = (index, total, swiper) => { let isDoneBtnShow; let isSkipBtnShow; - if (index === total - 1) { + if (index >= total - 1) { this.setDoneBtnOpacity(1); this.setSkipBtnOpacity(0); this.setNextOpacity(0); @@ -222,7 +209,7 @@ export default class AppIntro extends Component { {...this.state} isDoneBtnShow={isDoneBtnShow} styles={this.styles} - onNextBtnClick={this.onNextBtnClick.bind(this, context)} + onNextBtnClick={this.onNextBtnClick.bind(this, swiper)} onDoneBtnClick={this.props.onDoneBtnClick} /> : } @@ -310,9 +297,7 @@ export default class AppIntro extends Component { if (pageArray.length > 0) { pages = pageArray.map((page, i) => this.renderBasicSlidePage(i, page)); } else { - if (Platform.OS === 'ios') { - pages = childrens.map((children, i) => this.renderChild(children, i, i)); - } else { + if (Platform.OS === 'android') { androidPages = childrens.map((children, i) => { const { transform } = this.getTransform(i, -windowsWidth / 3 * 2, 1); pages.push(); @@ -330,6 +315,8 @@ export default class AppIntro extends Component { ); }); + } else { + pages = childrens.map((children, i) => this.renderChild(children, i, i)); } } From bab39954c66acb101f196cfb750454482e2c98ca Mon Sep 17 00:00:00 2001 From: Mark Vayngrib Date: Mon, 23 Jul 2018 12:39:42 -0400 Subject: [PATCH 08/12] fix: don't crash if page is missing backgroundColor --- AppIntro.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/AppIntro.js b/AppIntro.js index 4e78b7e..8f13cbd 100644 --- a/AppIntro.js +++ b/AppIntro.js @@ -19,8 +19,8 @@ import RenderDots from './components/Dots'; const windowsWidth = Dimensions.get('window').width; const windowsHeight = Dimensions.get('window').height; - -const defaulStyles = { +const getPageBackgroundColor = page => page.backgroundColor || defaultStyles.slide.backgroundColor +const defaultStyles = { header: { flex: 0.5, justifyContent: 'center', @@ -109,7 +109,7 @@ export default class AppIntro extends Component { constructor(props) { super(props); - this.styles = StyleSheet.create(assign({}, defaulStyles, props.customStyles)); + this.styles = StyleSheet.create(assign({}, defaultStyles, props.customStyles)); this.state = { skipFadeOpacity: new Animated.Value(1), @@ -321,7 +321,7 @@ export default class AppIntro extends Component { } if (this.isToTintStatusBar()) { - StatusBar.setBackgroundColor(this.shadeStatusBarColor(this.props.pageArray[0].backgroundColor, -0.3), false); + StatusBar.setBackgroundColor(this.shadeStatusBarColor(getPageBackgroundColor(this.props.pageArray[0]), -0.3), false); } return ( @@ -333,7 +333,7 @@ export default class AppIntro extends Component { renderPagination={this.renderPagination} onMomentumScrollEnd={(e, state) => { if (this.isToTintStatusBar()) { - StatusBar.setBackgroundColor(this.shadeStatusBarColor(this.props.pageArray[state.index].backgroundColor, -0.3), false); + StatusBar.setBackgroundColor(this.shadeStatusBarColor(getPageBackgroundColor(this.props.pageArray[state.index]), -0.3), false); } this.props.onSlideChange(state.index, state.total); From c1ca89ffc8687f03199a098051a43028c5dbc9a8 Mon Sep 17 00:00:00 2001 From: pgmemk Date: Tue, 16 Apr 2019 12:37:01 -0400 Subject: [PATCH 09/12] fix: upgrading to rn 0.59.3 --- AppIntro.js | 1 + 1 file changed, 1 insertion(+) diff --git a/AppIntro.js b/AppIntro.js index 8f13cbd..e75c943 100644 --- a/AppIntro.js +++ b/AppIntro.js @@ -330,6 +330,7 @@ export default class AppIntro extends Component { { if (this.isToTintStatusBar()) { From 844a6fee95bc9122e0e97de47502930cc699e73d Mon Sep 17 00:00:00 2001 From: pgmemk Date: Mon, 1 Nov 2021 22:03:17 -0400 Subject: [PATCH 10/12] feat: add gradient to the background --- AppIntro.js | 39 ++++++++++++++++++++++++++++++++------- package.json | 3 ++- 2 files changed, 34 insertions(+), 8 deletions(-) diff --git a/AppIntro.js b/AppIntro.js index e75c943..b5d287a 100644 --- a/AppIntro.js +++ b/AppIntro.js @@ -1,5 +1,6 @@ import assign from 'assign-deep'; import React, { Component } from 'react'; +import LinearGradient from 'react-native-web-linear-gradient' import PropTypes from 'prop-types'; import { StatusBar, @@ -19,8 +20,8 @@ import RenderDots from './components/Dots'; const windowsWidth = Dimensions.get('window').width; const windowsHeight = Dimensions.get('window').height; -const getPageBackgroundColor = page => page.backgroundColor || defaultStyles.slide.backgroundColor -const defaultStyles = { + +const defaulStyles = { header: { flex: 0.5, justifyContent: 'center', @@ -42,6 +43,13 @@ const defaultStyles = { backgroundColor: '#9DD6EB', padding: 15, }, + noBgSlide: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#9DD6EB', + padding: 15, + }, title: { color: '#fff', fontSize: 30, @@ -109,7 +117,7 @@ export default class AppIntro extends Component { constructor(props) { super(props); - this.styles = StyleSheet.create(assign({}, defaultStyles, props.customStyles)); + this.styles = StyleSheet.create(assign({}, defaulStyles, props.customStyles)); this.state = { skipFadeOpacity: new Animated.Value(1), @@ -230,7 +238,25 @@ export default class AppIntro extends Component { const AnimatedStyle2 = this.getTransform(index, 0, level); const AnimatedStyle3 = this.getTransform(index, 15, level); const imgSource = (typeof img === 'string') ? {uri: img} : img; - const pageView = ( + let colors = backgroundColor.split(',') + let pageView + if (colors.length > 1) { + pageView = + + + + + + {title} + + + {description} + + + + } + else + pageView = ( @@ -321,7 +347,7 @@ export default class AppIntro extends Component { } if (this.isToTintStatusBar()) { - StatusBar.setBackgroundColor(this.shadeStatusBarColor(getPageBackgroundColor(this.props.pageArray[0]), -0.3), false); + StatusBar.setBackgroundColor(this.shadeStatusBarColor(this.props.pageArray[0].backgroundColor, -0.3), false); } return ( @@ -330,11 +356,10 @@ export default class AppIntro extends Component { { if (this.isToTintStatusBar()) { - StatusBar.setBackgroundColor(this.shadeStatusBarColor(getPageBackgroundColor(this.props.pageArray[state.index]), -0.3), false); + StatusBar.setBackgroundColor(this.shadeStatusBarColor(this.props.pageArray[state.index].backgroundColor, -0.3), false); } this.props.onSlideChange(state.index, state.total); diff --git a/package.json b/package.json index 2e623a1..511b0f6 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "dependencies": { "assign-deep": "^0.4.5", "prop-types": "^15.5", - "react-native-swiper": "github:tradle/react-native-swiper#dev" + "react-native-swiper": "github:tradle/react-native-swiper#dev", + "react-native-web-linear-gradient": "^1.1.2" } } From 340cf0f7f76054d66721a1b9daefd1b6903f3f02 Mon Sep 17 00:00:00 2001 From: pgmemk Date: Mon, 1 Nov 2021 22:03:17 -0400 Subject: [PATCH 11/12] feat: add gradient to the background --- AppIntro.js | 44 ++++++++++++++++++++++++++++++++++++-------- package.json | 3 ++- 2 files changed, 38 insertions(+), 9 deletions(-) diff --git a/AppIntro.js b/AppIntro.js index e75c943..b912f88 100644 --- a/AppIntro.js +++ b/AppIntro.js @@ -1,5 +1,6 @@ import assign from 'assign-deep'; import React, { Component } from 'react'; +import LinearGradient from 'react-native-web-linear-gradient' import PropTypes from 'prop-types'; import { StatusBar, @@ -19,8 +20,8 @@ import RenderDots from './components/Dots'; const windowsWidth = Dimensions.get('window').width; const windowsHeight = Dimensions.get('window').height; -const getPageBackgroundColor = page => page.backgroundColor || defaultStyles.slide.backgroundColor -const defaultStyles = { + +const defaulStyles = { header: { flex: 0.5, justifyContent: 'center', @@ -42,10 +43,18 @@ const defaultStyles = { backgroundColor: '#9DD6EB', padding: 15, }, + noBgSlide: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#9DD6EB', + padding: 15, + }, title: { color: '#fff', fontSize: 30, paddingBottom: 20, + paddingTop: 10, }, description: { color: '#fff', @@ -109,7 +118,7 @@ export default class AppIntro extends Component { constructor(props) { super(props); - this.styles = StyleSheet.create(assign({}, defaultStyles, props.customStyles)); + this.styles = StyleSheet.create(assign({}, defaulStyles, props.customStyles)); this.state = { skipFadeOpacity: new Animated.Value(1), @@ -230,7 +239,27 @@ export default class AppIntro extends Component { const AnimatedStyle2 = this.getTransform(index, 0, level); const AnimatedStyle3 = this.getTransform(index, 15, level); const imgSource = (typeof img === 'string') ? {uri: img} : img; - const pageView = ( + let colors = backgroundColor.split(',') + let pageView + if (colors.length > 1) { + pageView = ( + + + + + + + {title} + + + {description} + + + + ) + } + else + pageView = ( @@ -244,7 +273,7 @@ export default class AppIntro extends Component { - ); + ) return pageView; } @@ -321,7 +350,7 @@ export default class AppIntro extends Component { } if (this.isToTintStatusBar()) { - StatusBar.setBackgroundColor(this.shadeStatusBarColor(getPageBackgroundColor(this.props.pageArray[0]), -0.3), false); + StatusBar.setBackgroundColor(this.shadeStatusBarColor(this.props.pageArray[0].backgroundColor, -0.3), false); } return ( @@ -330,11 +359,10 @@ export default class AppIntro extends Component { { if (this.isToTintStatusBar()) { - StatusBar.setBackgroundColor(this.shadeStatusBarColor(getPageBackgroundColor(this.props.pageArray[state.index]), -0.3), false); + StatusBar.setBackgroundColor(this.shadeStatusBarColor(this.props.pageArray[state.index].backgroundColor, -0.3), false); } this.props.onSlideChange(state.index, state.total); diff --git a/package.json b/package.json index 2e623a1..511b0f6 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "dependencies": { "assign-deep": "^0.4.5", "prop-types": "^15.5", - "react-native-swiper": "github:tradle/react-native-swiper#dev" + "react-native-swiper": "github:tradle/react-native-swiper#dev", + "react-native-web-linear-gradient": "^1.1.2" } } From 6915fdc4249c473049335b5353cdffd132914368 Mon Sep 17 00:00:00 2001 From: pgmemk Date: Mon, 1 Nov 2021 22:35:43 -0400 Subject: [PATCH 12/12] feat: linear gradient for web mode --- AppIntro.js | 2 +- package.json | 3 +++ web/shims/LinearGradient.js | 2 ++ 3 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 web/shims/LinearGradient.js diff --git a/AppIntro.js b/AppIntro.js index b912f88..6aedb24 100644 --- a/AppIntro.js +++ b/AppIntro.js @@ -1,6 +1,6 @@ import assign from 'assign-deep'; import React, { Component } from 'react'; -import LinearGradient from 'react-native-web-linear-gradient' +import LinearGradient from 'react-native-linear-gradient' import PropTypes from 'prop-types'; import { StatusBar, diff --git a/package.json b/package.json index 511b0f6..da69f70 100644 --- a/package.json +++ b/package.json @@ -31,5 +31,8 @@ "prop-types": "^15.5", "react-native-swiper": "github:tradle/react-native-swiper#dev", "react-native-web-linear-gradient": "^1.1.2" + }, + "browser": { + "react-native-linear-gradient": "./web/shims/LinearGradient" } } diff --git a/web/shims/LinearGradient.js b/web/shims/LinearGradient.js new file mode 100644 index 0000000..272d3be --- /dev/null +++ b/web/shims/LinearGradient.js @@ -0,0 +1,2 @@ +import LinearGradient from 'react-native-web-linear-gradient' +export default LinearGradient \ No newline at end of file