├── .gitignore ├── .npmignore ├── AppIntro.js ├── Example ├── .buckconfig ├── .eslintrc.js ├── .flowconfig ├── .gitignore ├── .watchmanconfig ├── AppIntro.js ├── android │ ├── app │ │ ├── BUCK │ │ ├── build.gradle │ │ ├── proguard-rules.pro │ │ └── src │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ └── com │ │ │ │ └── example │ │ │ │ └── MainActivity.java │ │ │ └── res │ │ │ ├── mipmap-hdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-mdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xhdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xxhdpi │ │ │ └── ic_launcher.png │ │ │ └── values │ │ │ ├── strings.xml │ │ │ └── styles.xml │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ ├── keystores │ │ ├── BUCK │ │ └── debug.keystore.properties │ └── settings.gradle ├── img │ ├── 1 │ │ ├── c1.png │ │ ├── c2.png │ │ ├── c3.png │ │ ├── c4.png │ │ └── c5.png │ ├── 2 │ │ ├── 1.png │ │ ├── 2.png │ │ └── 3.png │ ├── 3 │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ └── 5.png │ └── 4 │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ └── 4.png ├── index.android.js ├── index.ios.js ├── ios │ ├── Example.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── Example.xcscheme │ ├── Example │ │ ├── AppDelegate.h │ │ ├── AppDelegate.m │ │ ├── Base.lproj │ │ │ └── LaunchScreen.xib │ │ ├── Images.xcassets │ │ │ └── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ ├── Info.plist │ │ └── main.m │ └── ExampleTests │ │ ├── ExampleTests.m │ │ └── Info.plist └── package.json ├── LICENSE ├── README.md ├── assets └── sample-android.gif ├── components ├── DoneButton.android.js ├── DoneButton.ios.js ├── Dots.js ├── SkipButton.android.js └── SkipButton.ios.js ├── package.json └── package.json.old /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 18 | .grunt 19 | 20 | # node-waf configuration 21 | .lock-wscript 22 | 23 | # Compiled binary addons (http://nodejs.org/api/addons.html) 24 | build/Release 25 | 26 | # Dependency directory 27 | node_modules 28 | 29 | # Optional npm cache directory 30 | .npm 31 | 32 | # Optional REPL history 33 | .node_repl_history 34 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | +Example 2 | +assets 3 | -------------------------------------------------------------------------------- /AppIntro.js: -------------------------------------------------------------------------------- 1 | import assign from 'assign-deep'; 2 | import PropTypes from 'prop-types'; 3 | import React, { Component } from 'react'; 4 | import { 5 | StatusBar, 6 | StyleSheet, 7 | Text, 8 | View, 9 | Animated, 10 | Dimensions, 11 | Image, 12 | Platform, 13 | } from 'react-native'; 14 | import Swiper from 'react-native-swiper'; 15 | import DoneButton from './components/DoneButton'; 16 | import SkipButton from './components/SkipButton'; 17 | import RenderDots from './components/Dots'; 18 | 19 | const windowsWidth = Dimensions.get('window').width; 20 | const windowsHeight = Dimensions.get('window').height; 21 | 22 | const defaultStyles = { 23 | header: { 24 | flex: 0.5, 25 | justifyContent: 'center', 26 | alignItems: 'center', 27 | }, 28 | pic: { 29 | width: 150, 30 | height: 150, 31 | }, 32 | info: { 33 | flex: 0.5, 34 | alignItems: 'center', 35 | padding: 30, 36 | }, 37 | slide: { 38 | flex: 1, 39 | justifyContent: 'center', 40 | alignItems: 'center', 41 | backgroundColor: '#9DD6EB', 42 | padding: 15, 43 | }, 44 | title: { 45 | color: '#fff', 46 | fontSize: 30, 47 | paddingBottom: 20, 48 | }, 49 | description: { 50 | color: '#fff', 51 | fontSize: 20, 52 | }, 53 | controllText: { 54 | color: '#fff', 55 | fontSize: 22, 56 | fontWeight: 'bold', 57 | }, 58 | dotStyle: { 59 | backgroundColor: 'rgba(255,255,255,.3)', 60 | width: 13, 61 | height: 13, 62 | borderRadius: 7, 63 | marginLeft: 7, 64 | marginRight: 7, 65 | marginTop: 7, 66 | marginBottom: 7, 67 | }, 68 | activeDotStyle: { 69 | backgroundColor: '#fff', 70 | }, 71 | paginationContainer: { 72 | position: 'absolute', 73 | bottom: 25, 74 | left: 0, 75 | right: 0, 76 | flexDirection: 'row', 77 | flex: 1, 78 | justifyContent: 'center', 79 | alignItems: 'center', 80 | backgroundColor: 'transparent', 81 | }, 82 | dotContainer: { 83 | flex: 0.6, 84 | flexDirection: 'row', 85 | justifyContent: 'center', 86 | alignItems: 'center', 87 | }, 88 | btnContainer: { 89 | flex: 0.2, 90 | justifyContent: 'center', 91 | alignItems: 'center', 92 | height: 50, 93 | }, 94 | nextButtonText: { 95 | fontSize: 25, 96 | fontWeight: 'bold', 97 | fontFamily: 'Arial', 98 | }, 99 | full: { 100 | height: 80, 101 | width: 100, 102 | justifyContent: 'center', 103 | alignItems: 'center', 104 | }, 105 | } 106 | 107 | export default class AppIntro extends Component { 108 | constructor(props) { 109 | super(props); 110 | 111 | this.styles = StyleSheet.create(assign({}, defaultStyles, props.customStyles)); 112 | 113 | this.state = { 114 | skipFadeOpacity: new Animated.Value(1), 115 | doneFadeOpacity: new Animated.Value(0), 116 | nextOpacity: new Animated.Value(1), 117 | parallax: new Animated.Value(0), 118 | }; 119 | } 120 | 121 | onNextBtnClick = (context) => { 122 | if (context.state.isScrolling || context.state.total < 2) return; 123 | const state = context.state; 124 | const diff = (context.props.loop ? 1 : 0) + 1 + context.state.index; 125 | let x = 0; 126 | if (state.dir === 'x') x = diff * state.width; 127 | if (Platform.OS === 'ios') { 128 | context.refs.scrollView.scrollTo({ y: 0, x }); 129 | } else { 130 | context.refs.scrollView.setPage(diff); 131 | context.onScrollEnd({ 132 | nativeEvent: { 133 | position: diff, 134 | }, 135 | }); 136 | } 137 | this.props.onNextBtnClick(context.state.index); 138 | } 139 | 140 | setDoneBtnOpacity = (value) => { 141 | Animated.timing( 142 | this.state.doneFadeOpacity, 143 | { toValue: value }, 144 | ).start(); 145 | } 146 | 147 | setSkipBtnOpacity = (value) => { 148 | Animated.timing( 149 | this.state.skipFadeOpacity, 150 | { toValue: value }, 151 | ).start(); 152 | } 153 | 154 | setNextOpacity = (value) => { 155 | Animated.timing( 156 | this.state.nextOpacity, 157 | { toValue: value }, 158 | ).start(); 159 | } 160 | getTransform = (index, offset, level) => { 161 | const isFirstPage = index === 0; 162 | const statRange = isFirstPage ? 0 : windowsWidth * (index - 1); 163 | const endRange = isFirstPage ? windowsWidth : windowsWidth * index; 164 | const startOpacity = isFirstPage ? 1 : 0; 165 | const endOpacity = isFirstPage ? 1 : 1; 166 | const leftPosition = isFirstPage ? 0 : windowsWidth / 3; 167 | const rightPosition = isFirstPage ? -windowsWidth / 3 : 0; 168 | const transform = [{ 169 | transform: [ 170 | { 171 | translateX: this.state.parallax.interpolate({ 172 | inputRange: [statRange, endRange], 173 | outputRange: [ 174 | isFirstPage ? leftPosition : leftPosition - (offset * level), 175 | isFirstPage ? rightPosition + (offset * level) : rightPosition, 176 | ], 177 | }), 178 | }], 179 | }, { 180 | opacity: this.state.parallax.interpolate({ 181 | inputRange: [statRange, endRange], outputRange: [startOpacity, endOpacity], 182 | }), 183 | }]; 184 | return { 185 | transform, 186 | }; 187 | } 188 | 189 | renderPagination = (index, total, context) => { 190 | let isDoneBtnShow; 191 | let isSkipBtnShow; 192 | if (index === total - 1) { 193 | this.setDoneBtnOpacity(1); 194 | this.setSkipBtnOpacity(0); 195 | this.setNextOpacity(0); 196 | isDoneBtnShow = true; 197 | isSkipBtnShow = false; 198 | } else { 199 | this.setDoneBtnOpacity(0); 200 | this.setSkipBtnOpacity(1); 201 | this.setNextOpacity(1); 202 | isDoneBtnShow = false; 203 | isSkipBtnShow = true; 204 | } 205 | return ( 206 | 207 | {this.props.showSkipButton ? this.props.onSkipBtnClick(index)} /> : 213 | 214 | } 215 | {this.props.showDots && RenderDots(index, total, { 216 | ...this.props, 217 | styles: this.styles 218 | })} 219 | {this.props.showDoneButton ? : 226 | 227 | } 228 | 229 | ); 230 | } 231 | 232 | renderBasicSlidePage = (index, { 233 | title, 234 | description, 235 | img, 236 | imgStyle, 237 | backgroundColor, 238 | fontColor, 239 | level, 240 | }) => { 241 | const AnimatedStyle1 = this.getTransform(index, 10, level); 242 | const AnimatedStyle2 = this.getTransform(index, 0, level); 243 | const AnimatedStyle3 = this.getTransform(index, 15, level); 244 | const imgSource = (typeof img === 'string') ? {uri: img} : img; 245 | const pageView = ( 246 | 247 | 248 | 249 | 250 | 251 | 252 | {title} 253 | 254 | 255 | {description} 256 | 257 | 258 | 259 | ); 260 | return pageView; 261 | } 262 | 263 | renderChild = (children, pageIndex, index) => { 264 | const level = children.props.level || 0; 265 | const { transform } = this.getTransform(pageIndex, 10, level); 266 | const root = children.props.children; 267 | let nodes = children; 268 | if (Array.isArray(root)) { 269 | nodes = root.map((node, i) => this.renderChild(node, pageIndex, `${index}_${i}`)); 270 | } 271 | let animatedChild = children; 272 | if (level !== 0) { 273 | animatedChild = ( 274 | 275 | {nodes} 276 | 277 | ); 278 | } else { 279 | animatedChild = ( 280 | 281 | {nodes} 282 | 283 | ); 284 | } 285 | return animatedChild; 286 | } 287 | 288 | shadeStatusBarColor(color, percent) { 289 | const first = parseInt(color.slice(1), 16); 290 | const black = first & 0x0000FF; 291 | const green = first >> 8 & 0x00FF; 292 | const percentage = percent < 0 ? percent * -1 : percent; 293 | const red = first >> 16; 294 | const theme = percent < 0 ? 0 : 255; 295 | const finalColor = (0x1000000 + (Math.round((theme - red) * percentage) + red) * 0x10000 + (Math.round((theme - green) * percentage) + green) * 0x100 + (Math.round((theme - black) * percentage) + black)).toString(16).slice(1); 296 | 297 | return `#${finalColor}`; 298 | } 299 | 300 | isToTintStatusBar() { 301 | return this.props.pageArray && this.props.pageArray.length > 0 && Platform.OS === 'android' 302 | } 303 | 304 | render() { 305 | const childrens = this.props.children; 306 | const { pageArray } = this.props; 307 | let pages = []; 308 | let androidPages = null; 309 | if (pageArray.length > 0) { 310 | pages = pageArray.map((page, i) => this.renderBasicSlidePage(i, page)); 311 | } else { 312 | if (Platform.OS === 'ios') { 313 | pages = childrens.map((children, i) => this.renderChild(children, i, i)); 314 | } else { 315 | androidPages = childrens.map((children, i) => { 316 | const { transform } = this.getTransform(i, -windowsWidth / 3 * 2, 1); 317 | pages.push(); 318 | return ( 319 | 328 | {this.renderChild(children, i, i)} 329 | 330 | ); 331 | }); 332 | } 333 | } 334 | 335 | if (this.isToTintStatusBar()) { 336 | const statusBarColor = this.props.pageArray[0].statusBarColor || this.props.pageArray[0].backgroundColor || undefined; 337 | 338 | if (statusBarColor) { 339 | StatusBar.setBackgroundColor(this.shadeStatusBarColor(statusBarColor, -0.3), false); 340 | } 341 | } 342 | 343 | return ( 344 | 345 | {androidPages} 346 | { 353 | if (this.isToTintStatusBar()) { 354 | const statusBarColor = this.props.pageArray[state.index].statusBarColor || this.props.pageArray[state.index].backgroundColor || undefined; 355 | 356 | if (statusBarColor) { 357 | StatusBar.setBackgroundColor(this.shadeStatusBarColor(statusBarColor, -0.3), false); 358 | } 359 | } 360 | 361 | this.props.onSlideChange(state.index, state.total); 362 | }} 363 | onScroll={Animated.event( 364 | [{ x: this.state.parallax }] 365 | )} 366 | > 367 | {pages} 368 | 369 | 370 | ); 371 | } 372 | } 373 | 374 | AppIntro.propTypes = { 375 | dotColor: PropTypes.string, 376 | activeDotColor: PropTypes.string, 377 | rightTextColor: PropTypes.string, 378 | leftTextColor: PropTypes.string, 379 | onSlideChange: PropTypes.func, 380 | onSkipBtnClick: PropTypes.func, 381 | onDoneBtnClick: PropTypes.func, 382 | onNextBtnClick: PropTypes.func, 383 | pageArray: PropTypes.array, 384 | doneBtnLabel: PropTypes.oneOfType([ 385 | PropTypes.string, 386 | PropTypes.element, 387 | ]), 388 | skipBtnLabel: PropTypes.oneOfType([ 389 | PropTypes.string, 390 | PropTypes.element, 391 | ]), 392 | nextBtnLabel: PropTypes.oneOfType([ 393 | PropTypes.string, 394 | PropTypes.element, 395 | ]), 396 | customStyles: PropTypes.object, 397 | defaultIndex: PropTypes.number, 398 | showSkipButton: PropTypes.bool, 399 | showDoneButton: PropTypes.bool, 400 | showDots: PropTypes.bool, 401 | allowFontScaling: PropTypes.bool, 402 | fontSize: PropTypes.number 403 | }; 404 | 405 | AppIntro.defaultProps = { 406 | dotColor: 'rgba(255,255,255,.3)', 407 | activeDotColor: '#fff', 408 | rightTextColor: '#fff', 409 | leftTextColor: '#fff', 410 | pageArray: [], 411 | autoplay: false, 412 | autoplayTimeout: 4, 413 | onSlideChange: () => {}, 414 | onSkipBtnClick: () => {}, 415 | onDoneBtnClick: () => {}, 416 | onNextBtnClick: () => {}, 417 | doneBtnLabel: 'Done', 418 | skipBtnLabel: 'Skip', 419 | customStyles : {}, 420 | nextBtnLabel: '›', 421 | defaultIndex: 0, 422 | showSkipButton: true, 423 | showDoneButton: true, 424 | showDots: true, 425 | allowFontScaling: true, 426 | fontSize: 22 427 | }; 428 | -------------------------------------------------------------------------------- /Example/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /Example/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "extends": "airbnb", 3 | "plugins": [ 4 | "react" 5 | ], 6 | "parser": "babel-eslint", 7 | "rules": { 8 | "strict": 0 9 | }, 10 | "globals": { 11 | "describe": false, 12 | "it": false, 13 | "before": false, 14 | } 15 | }; 16 | -------------------------------------------------------------------------------- /Example/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | 3 | # We fork some components by platform. 4 | .*/*.web.js 5 | .*/*.android.js 6 | 7 | # Some modules have their own node_modules with overlap 8 | .*/node_modules/node-haste/.* 9 | 10 | # Ugh 11 | .*/node_modules/babel.* 12 | .*/node_modules/babylon.* 13 | .*/node_modules/invariant.* 14 | 15 | # Ignore react and fbjs where there are overlaps, but don't ignore 16 | # anything that react-native relies on 17 | .*/node_modules/fbjs/lib/Map.js 18 | .*/node_modules/fbjs/lib/fetch.js 19 | .*/node_modules/fbjs/lib/ExecutionEnvironment.js 20 | .*/node_modules/fbjs/lib/ErrorUtils.js 21 | 22 | # Flow has a built-in definition for the 'react' module which we prefer to use 23 | # over the currently-untyped source 24 | .*/node_modules/react/react.js 25 | .*/node_modules/react/lib/React.js 26 | .*/node_modules/react/lib/ReactDOM.js 27 | 28 | .*/__mocks__/.* 29 | .*/__tests__/.* 30 | 31 | .*/commoner/test/source/widget/share.js 32 | 33 | # Ignore commoner tests 34 | .*/node_modules/commoner/test/.* 35 | 36 | # See https://github.com/facebook/flow/issues/442 37 | .*/react-tools/node_modules/commoner/lib/reader.js 38 | 39 | # Ignore jest 40 | .*/node_modules/jest-cli/.* 41 | 42 | # Ignore Website 43 | .*/website/.* 44 | 45 | # Ignore generators 46 | .*/local-cli/generator.* 47 | 48 | # Ignore BUCK generated folders 49 | .*\.buckd/ 50 | 51 | .*/node_modules/is-my-json-valid/test/.*\.json 52 | .*/node_modules/iconv-lite/encodings/tables/.*\.json 53 | .*/node_modules/y18n/test/.*\.json 54 | .*/node_modules/spdx-license-ids/spdx-license-ids.json 55 | .*/node_modules/spdx-exceptions/index.json 56 | .*/node_modules/resolve/test/subdirs/node_modules/a/b/c/x.json 57 | .*/node_modules/resolve/lib/core.json 58 | .*/node_modules/jsonparse/samplejson/.*\.json 59 | .*/node_modules/json5/test/.*\.json 60 | .*/node_modules/ua-parser-js/test/.*\.json 61 | .*/node_modules/builtin-modules/builtin-modules.json 62 | .*/node_modules/binary-extensions/binary-extensions.json 63 | .*/node_modules/url-regex/tlds.json 64 | .*/node_modules/joi/.*\.json 65 | .*/node_modules/isemail/.*\.json 66 | .*/node_modules/tr46/.*\.json 67 | 68 | 69 | [include] 70 | 71 | [libs] 72 | node_modules/react-native/Libraries/react-native/react-native-interface.js 73 | node_modules/react-native/flow 74 | flow/ 75 | 76 | [options] 77 | module.system=haste 78 | 79 | esproposal.class_static_fields=enable 80 | esproposal.class_instance_fields=enable 81 | 82 | munge_underscores=true 83 | 84 | module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub' 85 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\)$' -> 'RelativeImageStub' 86 | 87 | suppress_type=$FlowIssue 88 | suppress_type=$FlowFixMe 89 | suppress_type=$FixMe 90 | 91 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-2]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) 92 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-2]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ 93 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 94 | 95 | [version] 96 | ^0.22.0 97 | -------------------------------------------------------------------------------- /Example/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IJ 26 | # 27 | .idea 28 | .gradle 29 | local.properties 30 | 31 | # node.js 32 | # 33 | node_modules/ 34 | npm-debug.log 35 | 36 | # BUCK 37 | buck-out/ 38 | \.buckd/ 39 | android/app/libs 40 | android/keystores/debug.keystore 41 | -------------------------------------------------------------------------------- /Example/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /Example/AppIntro.js: -------------------------------------------------------------------------------- 1 | import assign from 'assign-deep'; 2 | import PropTypes from 'prop-types'; 3 | import React, { Component } from 'react'; 4 | import { 5 | StatusBar, 6 | StyleSheet, 7 | Text, 8 | View, 9 | Animated, 10 | Dimensions, 11 | Image, 12 | Platform, 13 | } from 'react-native'; 14 | import Swiper from 'react-native-swiper'; 15 | import DoneButton from './components/DoneButton'; 16 | import SkipButton from './components/SkipButton'; 17 | import RenderDots from './components/Dots'; 18 | 19 | const windowsWidth = Dimensions.get('window').width; 20 | const windowsHeight = Dimensions.get('window').height; 21 | 22 | const defaulStyles = { 23 | header: { 24 | flex: 0.5, 25 | justifyContent: 'center', 26 | alignItems: 'center', 27 | }, 28 | pic: { 29 | width: 150, 30 | height: 150, 31 | }, 32 | info: { 33 | flex: 0.5, 34 | alignItems: 'center', 35 | padding: 30, 36 | }, 37 | slide: { 38 | flex: 1, 39 | justifyContent: 'center', 40 | alignItems: 'center', 41 | backgroundColor: '#9DD6EB', 42 | padding: 15, 43 | }, 44 | title: { 45 | color: '#fff', 46 | fontSize: 30, 47 | paddingBottom: 20, 48 | }, 49 | description: { 50 | color: '#fff', 51 | fontSize: 20, 52 | }, 53 | controllText: { 54 | color: '#fff', 55 | fontSize: 22, 56 | fontWeight: 'bold', 57 | }, 58 | dotStyle: { 59 | backgroundColor: 'rgba(255,255,255,.3)', 60 | width: 13, 61 | height: 13, 62 | borderRadius: 7, 63 | marginLeft: 7, 64 | marginRight: 7, 65 | marginTop: 7, 66 | marginBottom: 7, 67 | }, 68 | activeDotStyle: { 69 | backgroundColor: '#fff', 70 | }, 71 | paginationContainer: { 72 | position: 'absolute', 73 | bottom: 25, 74 | left: 0, 75 | right: 0, 76 | flexDirection: 'row', 77 | flex: 1, 78 | justifyContent: 'center', 79 | alignItems: 'center', 80 | backgroundColor: 'transparent', 81 | }, 82 | dotContainer: { 83 | flex: 0.6, 84 | flexDirection: 'row', 85 | justifyContent: 'center', 86 | alignItems: 'center', 87 | }, 88 | btnContainer: { 89 | flex: 0.2, 90 | justifyContent: 'center', 91 | alignItems: 'center', 92 | height: 50, 93 | }, 94 | nextButtonText: { 95 | fontSize: 25, 96 | fontWeight: 'bold', 97 | fontFamily: 'Arial', 98 | }, 99 | full: { 100 | height: 80, 101 | width: 100, 102 | justifyContent: 'center', 103 | alignItems: 'center', 104 | }, 105 | } 106 | 107 | export default class AppIntro extends Component { 108 | constructor(props) { 109 | super(props); 110 | 111 | this.styles = StyleSheet.create(assign({}, defaulStyles, props.customStyles)); 112 | 113 | this.state = { 114 | skipFadeOpacity: new Animated.Value(1), 115 | doneFadeOpacity: new Animated.Value(0), 116 | nextOpacity: new Animated.Value(1), 117 | parallax: new Animated.Value(0), 118 | }; 119 | } 120 | 121 | onNextBtnClick = (context) => { 122 | if (context.state.isScrolling || context.state.total < 2) return; 123 | const state = context.state; 124 | const diff = (context.props.loop ? 1 : 0) + 1 + context.state.index; 125 | let x = 0; 126 | if (state.dir === 'x') x = diff * state.width; 127 | if (Platform.OS === 'ios') { 128 | context.refs.scrollView.scrollTo({ y: 0, x }); 129 | } else { 130 | context.refs.scrollView.setPage(diff); 131 | context.onScrollEnd({ 132 | nativeEvent: { 133 | position: diff, 134 | }, 135 | }); 136 | } 137 | this.props.onNextBtnClick(context.state.index); 138 | } 139 | 140 | setDoneBtnOpacity = (value) => { 141 | Animated.timing( 142 | this.state.doneFadeOpacity, 143 | { toValue: value }, 144 | ).start(); 145 | } 146 | 147 | setSkipBtnOpacity = (value) => { 148 | Animated.timing( 149 | this.state.skipFadeOpacity, 150 | { toValue: value }, 151 | ).start(); 152 | } 153 | 154 | setNextOpacity = (value) => { 155 | Animated.timing( 156 | this.state.nextOpacity, 157 | { toValue: value }, 158 | ).start(); 159 | } 160 | getTransform = (index, offset, level) => { 161 | const isFirstPage = index === 0; 162 | const statRange = isFirstPage ? 0 : windowsWidth * (index - 1); 163 | const endRange = isFirstPage ? windowsWidth : windowsWidth * index; 164 | const startOpacity = isFirstPage ? 1 : 0; 165 | const endOpacity = isFirstPage ? 1 : 1; 166 | const leftPosition = isFirstPage ? 0 : windowsWidth / 3; 167 | const rightPosition = isFirstPage ? -windowsWidth / 3 : 0; 168 | const transform = [{ 169 | transform: [ 170 | { 171 | translateX: this.state.parallax.interpolate({ 172 | inputRange: [statRange, endRange], 173 | outputRange: [ 174 | isFirstPage ? leftPosition : leftPosition - (offset * level), 175 | isFirstPage ? rightPosition + (offset * level) : rightPosition, 176 | ], 177 | }), 178 | }], 179 | }, { 180 | opacity: this.state.parallax.interpolate({ 181 | inputRange: [statRange, endRange], outputRange: [startOpacity, endOpacity], 182 | }), 183 | }]; 184 | return { 185 | transform, 186 | }; 187 | } 188 | 189 | renderPagination = (index, total, context) => { 190 | let isDoneBtnShow; 191 | let isSkipBtnShow; 192 | if (index === total - 1) { 193 | this.setDoneBtnOpacity(1); 194 | this.setSkipBtnOpacity(0); 195 | this.setNextOpacity(0); 196 | isDoneBtnShow = true; 197 | isSkipBtnShow = false; 198 | } else { 199 | this.setDoneBtnOpacity(0); 200 | this.setSkipBtnOpacity(1); 201 | this.setNextOpacity(1); 202 | isDoneBtnShow = false; 203 | isSkipBtnShow = true; 204 | } 205 | return ( 206 | 207 | {this.props.showSkipButton ? this.props.onSkipBtnClick(index)} /> : 213 | 214 | } 215 | {this.props.showDots && RenderDots(index, total, { 216 | ...this.props, 217 | styles: this.styles 218 | })} 219 | {this.props.showDoneButton ? : 226 | 227 | } 228 | 229 | ); 230 | } 231 | 232 | renderBasicSlidePage = (index, { 233 | title, 234 | description, 235 | img, 236 | imgStyle, 237 | backgroundColor, 238 | fontColor, 239 | level, 240 | }) => { 241 | const AnimatedStyle1 = this.getTransform(index, 10, level); 242 | const AnimatedStyle2 = this.getTransform(index, 0, level); 243 | const AnimatedStyle3 = this.getTransform(index, 15, level); 244 | const imgSource = (typeof img === 'string') ? {uri: img} : img; 245 | const pageView = ( 246 | 247 | 248 | 249 | 250 | 251 | 252 | {title} 253 | 254 | 255 | {description} 256 | 257 | 258 | 259 | ); 260 | return pageView; 261 | } 262 | 263 | renderChild = (children, pageIndex, index) => { 264 | const level = children.props.level || 0; 265 | const { transform } = this.getTransform(pageIndex, 10, level); 266 | const root = children.props.children; 267 | let nodes = children; 268 | if (Array.isArray(root)) { 269 | nodes = root.map((node, i) => this.renderChild(node, pageIndex, `${index}_${i}`)); 270 | } 271 | let animatedChild = children; 272 | if (level !== 0) { 273 | animatedChild = ( 274 | 275 | {nodes} 276 | 277 | ); 278 | } else { 279 | animatedChild = ( 280 | 281 | {nodes} 282 | 283 | ); 284 | } 285 | return animatedChild; 286 | } 287 | 288 | shadeStatusBarColor(color, percent) { 289 | const first = parseInt(color.slice(1), 16); 290 | const black = first & 0x0000FF; 291 | const green = first >> 8 & 0x00FF; 292 | const percentage = percent < 0 ? percent * -1 : percent; 293 | const red = first >> 16; 294 | const theme = percent < 0 ? 0 : 255; 295 | const finalColor = (0x1000000 + (Math.round((theme - red) * percentage) + red) * 0x10000 + (Math.round((theme - green) * percentage) + green) * 0x100 + (Math.round((theme - black) * percentage) + black)).toString(16).slice(1); 296 | 297 | return `#${finalColor}`; 298 | } 299 | 300 | isToTintStatusBar() { 301 | return this.props.pageArray && this.props.pageArray.length > 0 && Platform.OS === 'android' 302 | } 303 | 304 | render() { 305 | const childrens = this.props.children; 306 | const { pageArray } = this.props; 307 | let pages = []; 308 | let androidPages = null; 309 | if (pageArray.length > 0) { 310 | pages = pageArray.map((page, i) => this.renderBasicSlidePage(i, page)); 311 | } else { 312 | if (Platform.OS === 'ios') { 313 | pages = childrens.map((children, i) => this.renderChild(children, i, i)); 314 | } else { 315 | androidPages = childrens.map((children, i) => { 316 | const { transform } = this.getTransform(i, -windowsWidth / 3 * 2, 1); 317 | pages.push(); 318 | return ( 319 | 328 | {this.renderChild(children, i, i)} 329 | 330 | ); 331 | }); 332 | } 333 | } 334 | 335 | if (this.isToTintStatusBar()) { 336 | const statusBarColor = this.props.pageArray[0].statusBarColor || this.props.pageArray[0].backgroundColor || undefined; 337 | 338 | if (statusBarColor) { 339 | StatusBar.setBackgroundColor(this.shadeStatusBarColor(statusBarColor, -0.3), false); 340 | } 341 | } 342 | 343 | return ( 344 | 345 | {androidPages} 346 | { 351 | if (this.isToTintStatusBar()) { 352 | const statusBarColor = this.props.pageArray[state.index].statusBarColor || this.props.pageArray[state.index].backgroundColor || undefined; 353 | 354 | if (statusBarColor) { 355 | StatusBar.setBackgroundColor(this.shadeStatusBarColor(statusBarColor, -0.3), false); 356 | } 357 | } 358 | 359 | this.props.onSlideChange(state.index, state.total); 360 | }} 361 | onScroll={Animated.event( 362 | [{ x: this.state.parallax }] 363 | )} 364 | > 365 | {pages} 366 | 367 | 368 | ); 369 | } 370 | } 371 | 372 | AppIntro.propTypes = { 373 | dotColor: PropTypes.string, 374 | activeDotColor: PropTypes.string, 375 | rightTextColor: PropTypes.string, 376 | leftTextColor: PropTypes.string, 377 | onSlideChange: PropTypes.func, 378 | onSkipBtnClick: PropTypes.func, 379 | onDoneBtnClick: PropTypes.func, 380 | onNextBtnClick: PropTypes.func, 381 | pageArray: PropTypes.array, 382 | doneBtnLabel: PropTypes.oneOfType([ 383 | PropTypes.string, 384 | PropTypes.element, 385 | ]), 386 | skipBtnLabel: PropTypes.oneOfType([ 387 | PropTypes.string, 388 | PropTypes.element, 389 | ]), 390 | nextBtnLabel: PropTypes.oneOfType([ 391 | PropTypes.string, 392 | PropTypes.element, 393 | ]), 394 | customStyles: PropTypes.object, 395 | defaultIndex: PropTypes.number, 396 | showSkipButton: PropTypes.bool, 397 | showDoneButton: PropTypes.bool, 398 | showDots: PropTypes.bool, 399 | }; 400 | 401 | AppIntro.defaultProps = { 402 | dotColor: 'rgba(255,255,255,.3)', 403 | activeDotColor: '#fff', 404 | rightTextColor: '#fff', 405 | leftTextColor: '#fff', 406 | pageArray: [], 407 | onSlideChange: () => {}, 408 | onSkipBtnClick: () => {}, 409 | onDoneBtnClick: () => {}, 410 | onNextBtnClick: () => {}, 411 | doneBtnLabel: 'Done', 412 | skipBtnLabel: 'Skip', 413 | nextBtnLabel: '›', 414 | defaultIndex: 0, 415 | showSkipButton: true, 416 | showDoneButton: true, 417 | showDots: true 418 | }; 419 | -------------------------------------------------------------------------------- /Example/android/app/BUCK: -------------------------------------------------------------------------------- 1 | import re 2 | 3 | # To learn about Buck see [Docs](https://buckbuild.com/). 4 | # To run your application with Buck: 5 | # - install Buck 6 | # - `npm start` - to start the packager 7 | # - `cd android` 8 | # - `cp ~/.android/debug.keystore keystores/debug.keystore` 9 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 10 | # - `buck install -r android/app` - compile, install and run application 11 | # 12 | 13 | lib_deps = [] 14 | for jarfile in glob(['libs/*.jar']): 15 | name = 'jars__' + re.sub(r'^.*/([^/]+)\.jar$', r'\1', jarfile) 16 | lib_deps.append(':' + name) 17 | prebuilt_jar( 18 | name = name, 19 | binary_jar = jarfile, 20 | ) 21 | 22 | for aarfile in glob(['libs/*.aar']): 23 | name = 'aars__' + re.sub(r'^.*/([^/]+)\.aar$', r'\1', aarfile) 24 | lib_deps.append(':' + name) 25 | android_prebuilt_aar( 26 | name = name, 27 | aar = aarfile, 28 | ) 29 | 30 | android_library( 31 | name = 'all-libs', 32 | exported_deps = lib_deps 33 | ) 34 | 35 | android_library( 36 | name = 'app-code', 37 | srcs = glob([ 38 | 'src/main/java/**/*.java', 39 | ]), 40 | deps = [ 41 | ':all-libs', 42 | ':build_config', 43 | ':res', 44 | ], 45 | ) 46 | 47 | android_build_config( 48 | name = 'build_config', 49 | package = 'com.example', 50 | ) 51 | 52 | android_resource( 53 | name = 'res', 54 | res = 'src/main/res', 55 | package = 'com.example', 56 | ) 57 | 58 | android_binary( 59 | name = 'app', 60 | package_type = 'debug', 61 | manifest = 'src/main/AndroidManifest.xml', 62 | keystore = '//android/keystores:debug', 63 | deps = [ 64 | ':app-code', 65 | ], 66 | ) 67 | -------------------------------------------------------------------------------- /Example/android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | 3 | import com.android.build.OutputFile 4 | 5 | /** 6 | * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets 7 | * and bundleReleaseJsAndAssets). 8 | * These basically call `react-native bundle` with the correct arguments during the Android build 9 | * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the 10 | * bundle directly from the development server. Below you can see all the possible configurations 11 | * and their defaults. If you decide to add a configuration block, make sure to add it before the 12 | * `apply from: "../../node_modules/react-native/react.gradle"` line. 13 | * 14 | * project.ext.react = [ 15 | * // the name of the generated asset file containing your JS bundle 16 | * bundleAssetName: "index.android.bundle", 17 | * 18 | * // the entry file for bundle generation 19 | * entryFile: "index.android.js", 20 | * 21 | * // whether to bundle JS and assets in debug mode 22 | * bundleInDebug: false, 23 | * 24 | * // whether to bundle JS and assets in release mode 25 | * bundleInRelease: true, 26 | * 27 | * // whether to bundle JS and assets in another build variant (if configured). 28 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants 29 | * // The configuration property can be in the following formats 30 | * // 'bundleIn${productFlavor}${buildType}' 31 | * // 'bundleIn${buildType}' 32 | * // bundleInFreeDebug: true, 33 | * // bundleInPaidRelease: true, 34 | * // bundleInBeta: true, 35 | * 36 | * // the root of your project, i.e. where "package.json" lives 37 | * root: "../../", 38 | * 39 | * // where to put the JS bundle asset in debug mode 40 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug", 41 | * 42 | * // where to put the JS bundle asset in release mode 43 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release", 44 | * 45 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 46 | * // require('./image.png')), in debug mode 47 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", 48 | * 49 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 50 | * // require('./image.png')), in release mode 51 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release", 52 | * 53 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means 54 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to 55 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle 56 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/ 57 | * // for example, you might want to remove it from here. 58 | * inputExcludes: ["android/**", "ios/**"] 59 | * ] 60 | */ 61 | 62 | apply from: "../../node_modules/react-native/react.gradle" 63 | 64 | /** 65 | * Set this to true to create two separate APKs instead of one: 66 | * - An APK that only works on ARM devices 67 | * - An APK that only works on x86 devices 68 | * The advantage is the size of the APK is reduced by about 4MB. 69 | * Upload all the APKs to the Play Store and people will download 70 | * the correct one based on the CPU architecture of their device. 71 | */ 72 | def enableSeparateBuildPerCPUArchitecture = false 73 | 74 | /** 75 | * Run Proguard to shrink the Java bytecode in release builds. 76 | */ 77 | def enableProguardInReleaseBuilds = false 78 | 79 | android { 80 | compileSdkVersion 23 81 | buildToolsVersion "23.0.1" 82 | 83 | defaultConfig { 84 | applicationId "com.example" 85 | minSdkVersion 16 86 | targetSdkVersion 22 87 | versionCode 1 88 | versionName "1.0" 89 | ndk { 90 | abiFilters "armeabi-v7a", "x86" 91 | } 92 | } 93 | splits { 94 | abi { 95 | reset() 96 | enable enableSeparateBuildPerCPUArchitecture 97 | universalApk false // If true, also generate a universal APK 98 | include "armeabi-v7a", "x86" 99 | } 100 | } 101 | buildTypes { 102 | release { 103 | minifyEnabled enableProguardInReleaseBuilds 104 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 105 | } 106 | } 107 | // applicationVariants are e.g. debug, release 108 | applicationVariants.all { variant -> 109 | variant.outputs.each { output -> 110 | // For each separate APK per architecture, set a unique version code as described here: 111 | // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits 112 | def versionCodes = ["armeabi-v7a":1, "x86":2] 113 | def abi = output.getFilter(OutputFile.ABI) 114 | if (abi != null) { // null for the universal-debug, universal-release variants 115 | output.versionCodeOverride = 116 | versionCodes.get(abi) * 1048576 + defaultConfig.versionCode 117 | } 118 | } 119 | } 120 | } 121 | 122 | dependencies { 123 | compile fileTree(dir: "libs", include: ["*.jar"]) 124 | compile "com.android.support:appcompat-v7:23.0.1" 125 | compile "com.facebook.react:react-native:+" // From node_modules 126 | } 127 | 128 | // Run this once to be able to run the application with BUCK 129 | // puts all compile dependencies into folder libs for BUCK to use 130 | task copyDownloadableDepsToLibs(type: Copy) { 131 | from configurations.compile 132 | into 'libs' 133 | } 134 | -------------------------------------------------------------------------------- /Example/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | 19 | # Disabling obfuscation is useful if you collect stack traces from production crashes 20 | # (unless you are using a system that supports de-obfuscate the stack traces). 21 | -dontobfuscate 22 | 23 | # React Native 24 | 25 | # Keep our interfaces so they can be used by other ProGuard rules. 26 | # See http://sourceforge.net/p/proguard/bugs/466/ 27 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip 28 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters 29 | 30 | # Do not strip any method/class that is annotated with @DoNotStrip 31 | -keep @com.facebook.proguard.annotations.DoNotStrip class * 32 | -keepclassmembers class * { 33 | @com.facebook.proguard.annotations.DoNotStrip *; 34 | } 35 | 36 | -keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * { 37 | void set*(***); 38 | *** get*(); 39 | } 40 | 41 | -keep class * extends com.facebook.react.bridge.JavaScriptModule { *; } 42 | -keep class * extends com.facebook.react.bridge.NativeModule { *; } 43 | -keepclassmembers,includedescriptorclasses class * { native ; } 44 | -keepclassmembers class * { @com.facebook.react.uimanager.UIProp ; } 45 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactProp ; } 46 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactPropGroup ; } 47 | 48 | -dontwarn com.facebook.react.** 49 | 50 | # okhttp 51 | 52 | -keepattributes Signature 53 | -keepattributes *Annotation* 54 | -keep class com.squareup.okhttp.** { *; } 55 | -keep interface com.squareup.okhttp.** { *; } 56 | -dontwarn com.squareup.okhttp.** 57 | 58 | # okio 59 | 60 | -keep class sun.misc.Unsafe { *; } 61 | -dontwarn java.nio.file.* 62 | -dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement 63 | -dontwarn okio.** 64 | 65 | # stetho 66 | 67 | -dontwarn com.facebook.stetho.** 68 | -------------------------------------------------------------------------------- /Example/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 12 | 13 | 18 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /Example/android/app/src/main/java/com/example/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.example; 2 | 3 | import com.facebook.react.ReactActivity; 4 | import com.facebook.react.ReactPackage; 5 | import com.facebook.react.shell.MainReactPackage; 6 | 7 | import java.util.Arrays; 8 | import java.util.List; 9 | 10 | public class MainActivity extends ReactActivity { 11 | 12 | /** 13 | * Returns the name of the main component registered from JavaScript. 14 | * This is used to schedule rendering of the component. 15 | */ 16 | @Override 17 | protected String getMainComponentName() { 18 | return "Example"; 19 | } 20 | 21 | /** 22 | * Returns whether dev mode should be enabled. 23 | * This enables e.g. the dev menu. 24 | */ 25 | @Override 26 | protected boolean getUseDeveloperSupport() { 27 | return BuildConfig.DEBUG; 28 | } 29 | 30 | /** 31 | * A list of packages used by the app. If the app uses additional views 32 | * or modules besides the default ones, add more packages here. 33 | */ 34 | @Override 35 | protected List getPackages() { 36 | return Arrays.asList( 37 | new MainReactPackage() 38 | ); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sh1n1x/react-native-app-intro/82e89472e7b916fcb3ebaf136169f83b90c533a1/Example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sh1n1x/react-native-app-intro/82e89472e7b916fcb3ebaf136169f83b90c533a1/Example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sh1n1x/react-native-app-intro/82e89472e7b916fcb3ebaf136169f83b90c533a1/Example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sh1n1x/react-native-app-intro/82e89472e7b916fcb3ebaf136169f83b90c533a1/Example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | Example 3 | 4 | -------------------------------------------------------------------------------- /Example/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Example/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | repositories { 5 | jcenter() 6 | } 7 | dependencies { 8 | classpath 'com.android.tools.build:gradle:1.3.1' 9 | 10 | // NOTE: Do not place your application dependencies here; they belong 11 | // in the individual module build.gradle files 12 | } 13 | } 14 | 15 | allprojects { 16 | repositories { 17 | mavenLocal() 18 | jcenter() 19 | maven { 20 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 21 | url "$projectDir/../../node_modules/react-native/android" 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Example/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m 13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | android.useDeprecatedNdk=true 21 | -------------------------------------------------------------------------------- /Example/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sh1n1x/react-native-app-intro/82e89472e7b916fcb3ebaf136169f83b90c533a1/Example/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /Example/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | zipStoreBase=GRADLE_USER_HOME 4 | zipStorePath=wrapper/dists 5 | distributionUrl=https\://services.gradle.org/distributions/gradle-2.4-all.zip 6 | -------------------------------------------------------------------------------- /Example/android/gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | ############################################################################## 4 | ## 5 | ## Gradle start up script for UN*X 6 | ## 7 | ############################################################################## 8 | 9 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 10 | DEFAULT_JVM_OPTS="" 11 | 12 | APP_NAME="Gradle" 13 | APP_BASE_NAME=`basename "$0"` 14 | 15 | # Use the maximum available, or set MAX_FD != -1 to use that value. 16 | MAX_FD="maximum" 17 | 18 | warn ( ) { 19 | echo "$*" 20 | } 21 | 22 | die ( ) { 23 | echo 24 | echo "$*" 25 | echo 26 | exit 1 27 | } 28 | 29 | # OS specific support (must be 'true' or 'false'). 30 | cygwin=false 31 | msys=false 32 | darwin=false 33 | case "`uname`" in 34 | CYGWIN* ) 35 | cygwin=true 36 | ;; 37 | Darwin* ) 38 | darwin=true 39 | ;; 40 | MINGW* ) 41 | msys=true 42 | ;; 43 | esac 44 | 45 | # For Cygwin, ensure paths are in UNIX format before anything is touched. 46 | if $cygwin ; then 47 | [ -n "$JAVA_HOME" ] && JAVA_HOME=`cygpath --unix "$JAVA_HOME"` 48 | fi 49 | 50 | # Attempt to set APP_HOME 51 | # Resolve links: $0 may be a link 52 | PRG="$0" 53 | # Need this for relative symlinks. 54 | while [ -h "$PRG" ] ; do 55 | ls=`ls -ld "$PRG"` 56 | link=`expr "$ls" : '.*-> \(.*\)$'` 57 | if expr "$link" : '/.*' > /dev/null; then 58 | PRG="$link" 59 | else 60 | PRG=`dirname "$PRG"`"/$link" 61 | fi 62 | done 63 | SAVED="`pwd`" 64 | cd "`dirname \"$PRG\"`/" >&- 65 | APP_HOME="`pwd -P`" 66 | cd "$SAVED" >&- 67 | 68 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 69 | 70 | # Determine the Java command to use to start the JVM. 71 | if [ -n "$JAVA_HOME" ] ; then 72 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 73 | # IBM's JDK on AIX uses strange locations for the executables 74 | JAVACMD="$JAVA_HOME/jre/sh/java" 75 | else 76 | JAVACMD="$JAVA_HOME/bin/java" 77 | fi 78 | if [ ! -x "$JAVACMD" ] ; then 79 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 80 | 81 | Please set the JAVA_HOME variable in your environment to match the 82 | location of your Java installation." 83 | fi 84 | else 85 | JAVACMD="java" 86 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 87 | 88 | Please set the JAVA_HOME variable in your environment to match the 89 | location of your Java installation." 90 | fi 91 | 92 | # Increase the maximum file descriptors if we can. 93 | if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then 94 | MAX_FD_LIMIT=`ulimit -H -n` 95 | if [ $? -eq 0 ] ; then 96 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 97 | MAX_FD="$MAX_FD_LIMIT" 98 | fi 99 | ulimit -n $MAX_FD 100 | if [ $? -ne 0 ] ; then 101 | warn "Could not set maximum file descriptor limit: $MAX_FD" 102 | fi 103 | else 104 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 105 | fi 106 | fi 107 | 108 | # For Darwin, add options to specify how the application appears in the dock 109 | if $darwin; then 110 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 111 | fi 112 | 113 | # For Cygwin, switch paths to Windows format before running java 114 | if $cygwin ; then 115 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 116 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 117 | 118 | # We build the pattern for arguments to be converted via cygpath 119 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 120 | SEP="" 121 | for dir in $ROOTDIRSRAW ; do 122 | ROOTDIRS="$ROOTDIRS$SEP$dir" 123 | SEP="|" 124 | done 125 | OURCYGPATTERN="(^($ROOTDIRS))" 126 | # Add a user-defined pattern to the cygpath arguments 127 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 128 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 129 | fi 130 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 131 | i=0 132 | for arg in "$@" ; do 133 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 134 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 135 | 136 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 137 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 138 | else 139 | eval `echo args$i`="\"$arg\"" 140 | fi 141 | i=$((i+1)) 142 | done 143 | case $i in 144 | (0) set -- ;; 145 | (1) set -- "$args0" ;; 146 | (2) set -- "$args0" "$args1" ;; 147 | (3) set -- "$args0" "$args1" "$args2" ;; 148 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;; 149 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 150 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 151 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 152 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 153 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 154 | esac 155 | fi 156 | 157 | # Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules 158 | function splitJvmOpts() { 159 | JVM_OPTS=("$@") 160 | } 161 | eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS 162 | JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME" 163 | 164 | exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@" 165 | -------------------------------------------------------------------------------- /Example/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @if "%DEBUG%" == "" @echo off 2 | @rem ########################################################################## 3 | @rem 4 | @rem Gradle startup script for Windows 5 | @rem 6 | @rem ########################################################################## 7 | 8 | @rem Set local scope for the variables with windows NT shell 9 | if "%OS%"=="Windows_NT" setlocal 10 | 11 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 12 | set DEFAULT_JVM_OPTS= 13 | 14 | set DIRNAME=%~dp0 15 | if "%DIRNAME%" == "" set DIRNAME=. 16 | set APP_BASE_NAME=%~n0 17 | set APP_HOME=%DIRNAME% 18 | 19 | @rem Find java.exe 20 | if defined JAVA_HOME goto findJavaFromJavaHome 21 | 22 | set JAVA_EXE=java.exe 23 | %JAVA_EXE% -version >NUL 2>&1 24 | if "%ERRORLEVEL%" == "0" goto init 25 | 26 | echo. 27 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 28 | echo. 29 | echo Please set the JAVA_HOME variable in your environment to match the 30 | echo location of your Java installation. 31 | 32 | goto fail 33 | 34 | :findJavaFromJavaHome 35 | set JAVA_HOME=%JAVA_HOME:"=% 36 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 37 | 38 | if exist "%JAVA_EXE%" goto init 39 | 40 | echo. 41 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 42 | echo. 43 | echo Please set the JAVA_HOME variable in your environment to match the 44 | echo location of your Java installation. 45 | 46 | goto fail 47 | 48 | :init 49 | @rem Get command-line arguments, handling Windowz variants 50 | 51 | if not "%OS%" == "Windows_NT" goto win9xME_args 52 | if "%@eval[2+2]" == "4" goto 4NT_args 53 | 54 | :win9xME_args 55 | @rem Slurp the command line arguments. 56 | set CMD_LINE_ARGS= 57 | set _SKIP=2 58 | 59 | :win9xME_args_slurp 60 | if "x%~1" == "x" goto execute 61 | 62 | set CMD_LINE_ARGS=%* 63 | goto execute 64 | 65 | :4NT_args 66 | @rem Get arguments from the 4NT Shell from JP Software 67 | set CMD_LINE_ARGS=%$ 68 | 69 | :execute 70 | @rem Setup the command line 71 | 72 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 73 | 74 | @rem Execute Gradle 75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 76 | 77 | :end 78 | @rem End local scope for the variables with windows NT shell 79 | if "%ERRORLEVEL%"=="0" goto mainEnd 80 | 81 | :fail 82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 83 | rem the _cmd.exe /c_ return code! 84 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 85 | exit /b 1 86 | 87 | :mainEnd 88 | if "%OS%"=="Windows_NT" endlocal 89 | 90 | :omega 91 | -------------------------------------------------------------------------------- /Example/android/keystores/BUCK: -------------------------------------------------------------------------------- 1 | keystore( 2 | name = 'debug', 3 | store = 'debug.keystore', 4 | properties = 'debug.keystore.properties', 5 | visibility = [ 6 | 'PUBLIC', 7 | ], 8 | ) 9 | -------------------------------------------------------------------------------- /Example/android/keystores/debug.keystore.properties: -------------------------------------------------------------------------------- 1 | key.store=debug.keystore 2 | key.alias=androiddebugkey 3 | key.store.password=android 4 | key.alias.password=android 5 | -------------------------------------------------------------------------------- /Example/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'Example' 2 | 3 | include ':app' 4 | -------------------------------------------------------------------------------- /Example/img/1/c1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sh1n1x/react-native-app-intro/82e89472e7b916fcb3ebaf136169f83b90c533a1/Example/img/1/c1.png -------------------------------------------------------------------------------- /Example/img/1/c2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sh1n1x/react-native-app-intro/82e89472e7b916fcb3ebaf136169f83b90c533a1/Example/img/1/c2.png -------------------------------------------------------------------------------- /Example/img/1/c3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sh1n1x/react-native-app-intro/82e89472e7b916fcb3ebaf136169f83b90c533a1/Example/img/1/c3.png -------------------------------------------------------------------------------- /Example/img/1/c4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sh1n1x/react-native-app-intro/82e89472e7b916fcb3ebaf136169f83b90c533a1/Example/img/1/c4.png -------------------------------------------------------------------------------- /Example/img/1/c5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sh1n1x/react-native-app-intro/82e89472e7b916fcb3ebaf136169f83b90c533a1/Example/img/1/c5.png -------------------------------------------------------------------------------- /Example/img/2/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sh1n1x/react-native-app-intro/82e89472e7b916fcb3ebaf136169f83b90c533a1/Example/img/2/1.png -------------------------------------------------------------------------------- /Example/img/2/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sh1n1x/react-native-app-intro/82e89472e7b916fcb3ebaf136169f83b90c533a1/Example/img/2/2.png -------------------------------------------------------------------------------- /Example/img/2/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sh1n1x/react-native-app-intro/82e89472e7b916fcb3ebaf136169f83b90c533a1/Example/img/2/3.png -------------------------------------------------------------------------------- /Example/img/3/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sh1n1x/react-native-app-intro/82e89472e7b916fcb3ebaf136169f83b90c533a1/Example/img/3/1.png -------------------------------------------------------------------------------- /Example/img/3/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sh1n1x/react-native-app-intro/82e89472e7b916fcb3ebaf136169f83b90c533a1/Example/img/3/2.png -------------------------------------------------------------------------------- /Example/img/3/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sh1n1x/react-native-app-intro/82e89472e7b916fcb3ebaf136169f83b90c533a1/Example/img/3/3.png -------------------------------------------------------------------------------- /Example/img/3/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sh1n1x/react-native-app-intro/82e89472e7b916fcb3ebaf136169f83b90c533a1/Example/img/3/4.png -------------------------------------------------------------------------------- /Example/img/3/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sh1n1x/react-native-app-intro/82e89472e7b916fcb3ebaf136169f83b90c533a1/Example/img/3/5.png -------------------------------------------------------------------------------- /Example/img/4/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sh1n1x/react-native-app-intro/82e89472e7b916fcb3ebaf136169f83b90c533a1/Example/img/4/1.png -------------------------------------------------------------------------------- /Example/img/4/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sh1n1x/react-native-app-intro/82e89472e7b916fcb3ebaf136169f83b90c533a1/Example/img/4/2.png -------------------------------------------------------------------------------- /Example/img/4/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sh1n1x/react-native-app-intro/82e89472e7b916fcb3ebaf136169f83b90c533a1/Example/img/4/3.png -------------------------------------------------------------------------------- /Example/img/4/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sh1n1x/react-native-app-intro/82e89472e7b916fcb3ebaf136169f83b90c533a1/Example/img/4/4.png -------------------------------------------------------------------------------- /Example/index.android.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * @flow 5 | */ 6 | 7 | import React, { Component } from 'react'; 8 | import { 9 | AppRegistry, 10 | StyleSheet, 11 | Text, 12 | View, 13 | Alert, 14 | Image, 15 | Dimensions, 16 | } from 'react-native'; 17 | const windowsWidth = Dimensions.get('window').width; 18 | const windowsHeight = Dimensions.get('window').height; 19 | import AppIntro from 'react-native-app-intro'; 20 | // import AppIntro from './AppIntro'; 21 | 22 | const styles = StyleSheet.create({ 23 | slide: { 24 | flex: 1, 25 | justifyContent: 'center', 26 | alignItems: 'center', 27 | backgroundColor: '#9DD6EB', 28 | padding: 15, 29 | }, 30 | header: { 31 | flex: 0.5, 32 | justifyContent: 'center', 33 | alignItems: 'center', 34 | }, 35 | pic: { 36 | width: 75 * 2, 37 | height: 63 * 2, 38 | }, 39 | text: { 40 | color: '#fff', 41 | fontSize: 30, 42 | fontWeight: 'bold', 43 | }, 44 | info: { 45 | flex: 0.5, 46 | alignItems: 'center', 47 | padding: 40 48 | }, 49 | title: { 50 | color: '#fff', 51 | fontSize: 30, 52 | paddingBottom: 20, 53 | }, 54 | description: { 55 | color: '#fff', 56 | fontSize: 20, 57 | }, 58 | }); 59 | 60 | class Example extends Component { 61 | 62 | onSkipBtnHandle = (index) => { 63 | Alert.alert('Skip'); 64 | console.log(index); 65 | } 66 | doneBtnHandle = () => { 67 | Alert.alert('Done'); 68 | } 69 | nextBtnHandle = (index) => { 70 | Alert.alert('Next'); 71 | console.log(index); 72 | } 73 | onSlideChangeHandle = (index, total) => { 74 | console.log(index, total); 75 | } 76 | 77 | render() { 78 | return ( 79 | 85 | 86 | 87 | 88 | 89 | 90 | 98 | 99 | 100 | 108 | 109 | 110 | 118 | 119 | 120 | 121 | 122 | AppIntro 123 | Pretty Simple Useful in your app tour! 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 139 | 140 | 141 | 149 | 150 | 151 | 152 | 153 | Title! 154 | description! 155 | 156 | 157 | 158 | 159 | 167 | 168 | 169 | 177 | 178 | 179 | 180 | 181 | 182 | 190 | 191 | 192 | 193 | 194 | Title! 195 | description! 196 | 197 | 198 | 199 | 200 | 208 | 209 | 210 | 211 | 212 | 213 | 221 | 222 | 223 | 224 | 225 | Title! 226 | description! 227 | 228 | 229 | 230 | ); 231 | } 232 | } 233 | 234 | AppRegistry.registerComponent('Example', () => Example); 235 | -------------------------------------------------------------------------------- /Example/index.ios.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * @flow 5 | */ 6 | 7 | import React, { Component } from 'react'; 8 | import { AppRegistry, StyleSheet, Text, View, Alert, Image } from 'react-native'; 9 | import AppIntro from 'react-native-app-intro'; 10 | // import AppIntro from './AppIntro'; 11 | 12 | const styles = StyleSheet.create({ 13 | slide: { 14 | flex: 1, 15 | justifyContent: 'center', 16 | alignItems: 'center', 17 | backgroundColor: '#9DD6EB', 18 | padding: 15, 19 | }, 20 | header: { 21 | flex: 0.5, 22 | justifyContent: 'center', 23 | alignItems: 'center', 24 | }, 25 | pic: { 26 | width: 75 * 2, 27 | height: 63 * 2, 28 | }, 29 | text: { 30 | color: '#fff', 31 | fontSize: 30, 32 | fontWeight: 'bold', 33 | }, 34 | info: { 35 | flex: 0.5, 36 | alignItems: 'center', 37 | padding: 40 38 | }, 39 | title: { 40 | color: '#fff', 41 | fontSize: 30, 42 | paddingBottom: 20, 43 | }, 44 | description: { 45 | color: '#fff', 46 | fontSize: 20, 47 | }, 48 | }); 49 | 50 | class Example extends Component { 51 | 52 | 53 | onSkipBtnHandle = (index) => { 54 | Alert.alert('Skip'); 55 | console.log(index); 56 | } 57 | doneBtnHandle = () => { 58 | Alert.alert('Done'); 59 | } 60 | nextBtnHandle = (index) => { 61 | Alert.alert('Next'); 62 | console.log(index); 63 | } 64 | onSlideChangeHandle = (index, total) => { 65 | console.log(index, total); 66 | } 67 | 68 | render() { 69 | return ( 70 | 76 | 77 | 78 | 79 | 80 | 81 | 87 | 88 | 89 | 95 | 96 | 97 | 103 | 104 | 105 | 106 | 107 | AppIntro 108 | Pretty Simple Useful in your app tour! 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 122 | 123 | 124 | 130 | 131 | 132 | 133 | 134 | Title! 135 | description! 136 | 137 | 138 | 139 | 140 | 146 | 147 | 148 | 154 | 155 | 156 | 157 | 158 | 159 | 165 | 166 | 167 | 168 | 169 | Title! 170 | description! 171 | 172 | 173 | 174 | 175 | 181 | 182 | 183 | 184 | 185 | 186 | 192 | 193 | 194 | 195 | 196 | Title! 197 | description! 198 | 199 | 200 | 201 | ); 202 | } 203 | } 204 | 205 | AppRegistry.registerComponent('Example', () => Example); 206 | -------------------------------------------------------------------------------- /Example/ios/Example.xcodeproj/project.pbxproj: -------------------------------------------------------------------------------- 1 | // !$*UTF8*$! 2 | { 3 | archiveVersion = 1; 4 | classes = { 5 | }; 6 | objectVersion = 46; 7 | objects = { 8 | 9 | /* Begin PBXBuildFile section */ 10 | 00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; }; 11 | 00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; }; 12 | 00C302E81ABCBA2D00DB3ED1 /* libRCTImage.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302C01ABCB91800DB3ED1 /* libRCTImage.a */; }; 13 | 00C302E91ABCBA2D00DB3ED1 /* libRCTNetwork.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */; }; 14 | 00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */; }; 15 | 00E356F31AD99517003FC87E /* ExampleTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* ExampleTests.m */; }; 16 | 133E29F31AD74F7200F7D852 /* libRCTLinking.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 78C398B91ACF4ADC00677621 /* libRCTLinking.a */; }; 17 | 139105C61AF99C1200B5F7CC /* libRCTSettings.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 139105C11AF99BAD00B5F7CC /* libRCTSettings.a */; }; 18 | 139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 139FDEF41B06529B00C62182 /* libRCTWebSocket.a */; }; 19 | 13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; }; 20 | 13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB11A68108700A75B9A /* LaunchScreen.xib */; }; 21 | 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; }; 22 | 13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; }; 23 | 146834051AC3E58100842450 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; }; 24 | 832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; }; 25 | /* End PBXBuildFile section */ 26 | 27 | /* Begin PBXContainerItemProxy section */ 28 | 00C302AB1ABCB8CE00DB3ED1 /* PBXContainerItemProxy */ = { 29 | isa = PBXContainerItemProxy; 30 | containerPortal = 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */; 31 | proxyType = 2; 32 | remoteGlobalIDString = 134814201AA4EA6300B7C361; 33 | remoteInfo = RCTActionSheet; 34 | }; 35 | 00C302B91ABCB90400DB3ED1 /* PBXContainerItemProxy */ = { 36 | isa = PBXContainerItemProxy; 37 | containerPortal = 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */; 38 | proxyType = 2; 39 | remoteGlobalIDString = 134814201AA4EA6300B7C361; 40 | remoteInfo = RCTGeolocation; 41 | }; 42 | 00C302BF1ABCB91800DB3ED1 /* PBXContainerItemProxy */ = { 43 | isa = PBXContainerItemProxy; 44 | containerPortal = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */; 45 | proxyType = 2; 46 | remoteGlobalIDString = 58B5115D1A9E6B3D00147676; 47 | remoteInfo = RCTImage; 48 | }; 49 | 00C302DB1ABCB9D200DB3ED1 /* PBXContainerItemProxy */ = { 50 | isa = PBXContainerItemProxy; 51 | containerPortal = 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */; 52 | proxyType = 2; 53 | remoteGlobalIDString = 58B511DB1A9E6C8500147676; 54 | remoteInfo = RCTNetwork; 55 | }; 56 | 00C302E31ABCB9EE00DB3ED1 /* PBXContainerItemProxy */ = { 57 | isa = PBXContainerItemProxy; 58 | containerPortal = 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */; 59 | proxyType = 2; 60 | remoteGlobalIDString = 832C81801AAF6DEF007FA2F7; 61 | remoteInfo = RCTVibration; 62 | }; 63 | 00E356F41AD99517003FC87E /* PBXContainerItemProxy */ = { 64 | isa = PBXContainerItemProxy; 65 | containerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */; 66 | proxyType = 1; 67 | remoteGlobalIDString = 13B07F861A680F5B00A75B9A; 68 | remoteInfo = Example; 69 | }; 70 | 139105C01AF99BAD00B5F7CC /* PBXContainerItemProxy */ = { 71 | isa = PBXContainerItemProxy; 72 | containerPortal = 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */; 73 | proxyType = 2; 74 | remoteGlobalIDString = 134814201AA4EA6300B7C361; 75 | remoteInfo = RCTSettings; 76 | }; 77 | 139FDEF31B06529B00C62182 /* PBXContainerItemProxy */ = { 78 | isa = PBXContainerItemProxy; 79 | containerPortal = 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */; 80 | proxyType = 2; 81 | remoteGlobalIDString = 3C86DF461ADF2C930047B81A; 82 | remoteInfo = RCTWebSocket; 83 | }; 84 | 146834031AC3E56700842450 /* PBXContainerItemProxy */ = { 85 | isa = PBXContainerItemProxy; 86 | containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */; 87 | proxyType = 2; 88 | remoteGlobalIDString = 83CBBA2E1A601D0E00E9B192; 89 | remoteInfo = React; 90 | }; 91 | 78C398B81ACF4ADC00677621 /* PBXContainerItemProxy */ = { 92 | isa = PBXContainerItemProxy; 93 | containerPortal = 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */; 94 | proxyType = 2; 95 | remoteGlobalIDString = 134814201AA4EA6300B7C361; 96 | remoteInfo = RCTLinking; 97 | }; 98 | 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */ = { 99 | isa = PBXContainerItemProxy; 100 | containerPortal = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */; 101 | proxyType = 2; 102 | remoteGlobalIDString = 58B5119B1A9E6C1200147676; 103 | remoteInfo = RCTText; 104 | }; 105 | /* End PBXContainerItemProxy section */ 106 | 107 | /* Begin PBXFileReference section */ 108 | 008F07F21AC5B25A0029DE68 /* main.jsbundle */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = main.jsbundle; sourceTree = ""; }; 109 | 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = "../node_modules/react-native/Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj"; sourceTree = ""; }; 110 | 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTGeolocation.xcodeproj; path = "../node_modules/react-native/Libraries/Geolocation/RCTGeolocation.xcodeproj"; sourceTree = ""; }; 111 | 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = "../node_modules/react-native/Libraries/Image/RCTImage.xcodeproj"; sourceTree = ""; }; 112 | 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = "../node_modules/react-native/Libraries/Network/RCTNetwork.xcodeproj"; sourceTree = ""; }; 113 | 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTVibration.xcodeproj; path = "../node_modules/react-native/Libraries/Vibration/RCTVibration.xcodeproj"; sourceTree = ""; }; 114 | 00E356EE1AD99517003FC87E /* ExampleTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = ExampleTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; }; 115 | 00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = ""; }; 116 | 00E356F21AD99517003FC87E /* ExampleTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = ExampleTests.m; sourceTree = ""; }; 117 | 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = "../node_modules/react-native/Libraries/Settings/RCTSettings.xcodeproj"; sourceTree = ""; }; 118 | 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = "../node_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj"; sourceTree = ""; }; 119 | 13B07F961A680F5B00A75B9A /* Example.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = Example.app; sourceTree = BUILT_PRODUCTS_DIR; }; 120 | 13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = Example/AppDelegate.h; sourceTree = ""; }; 121 | 13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = Example/AppDelegate.m; sourceTree = ""; }; 122 | 13B07FB21A68108700A75B9A /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.xib; name = Base; path = Base.lproj/LaunchScreen.xib; sourceTree = ""; }; 123 | 13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = Example/Images.xcassets; sourceTree = ""; }; 124 | 13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = Example/Info.plist; sourceTree = ""; }; 125 | 13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = Example/main.m; sourceTree = ""; }; 126 | 146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = "../node_modules/react-native/React/React.xcodeproj"; sourceTree = ""; }; 127 | 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = ""; }; 128 | 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = ""; }; 129 | /* End PBXFileReference section */ 130 | 131 | /* Begin PBXFrameworksBuildPhase section */ 132 | 00E356EB1AD99517003FC87E /* Frameworks */ = { 133 | isa = PBXFrameworksBuildPhase; 134 | buildActionMask = 2147483647; 135 | files = ( 136 | ); 137 | runOnlyForDeploymentPostprocessing = 0; 138 | }; 139 | 13B07F8C1A680F5B00A75B9A /* Frameworks */ = { 140 | isa = PBXFrameworksBuildPhase; 141 | buildActionMask = 2147483647; 142 | files = ( 143 | 146834051AC3E58100842450 /* libReact.a in Frameworks */, 144 | 00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */, 145 | 00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */, 146 | 00C302E81ABCBA2D00DB3ED1 /* libRCTImage.a in Frameworks */, 147 | 133E29F31AD74F7200F7D852 /* libRCTLinking.a in Frameworks */, 148 | 00C302E91ABCBA2D00DB3ED1 /* libRCTNetwork.a in Frameworks */, 149 | 139105C61AF99C1200B5F7CC /* libRCTSettings.a in Frameworks */, 150 | 832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */, 151 | 00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */, 152 | 139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */, 153 | ); 154 | runOnlyForDeploymentPostprocessing = 0; 155 | }; 156 | /* End PBXFrameworksBuildPhase section */ 157 | 158 | /* Begin PBXGroup section */ 159 | 00C302A81ABCB8CE00DB3ED1 /* Products */ = { 160 | isa = PBXGroup; 161 | children = ( 162 | 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */, 163 | ); 164 | name = Products; 165 | sourceTree = ""; 166 | }; 167 | 00C302B61ABCB90400DB3ED1 /* Products */ = { 168 | isa = PBXGroup; 169 | children = ( 170 | 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */, 171 | ); 172 | name = Products; 173 | sourceTree = ""; 174 | }; 175 | 00C302BC1ABCB91800DB3ED1 /* Products */ = { 176 | isa = PBXGroup; 177 | children = ( 178 | 00C302C01ABCB91800DB3ED1 /* libRCTImage.a */, 179 | ); 180 | name = Products; 181 | sourceTree = ""; 182 | }; 183 | 00C302D41ABCB9D200DB3ED1 /* Products */ = { 184 | isa = PBXGroup; 185 | children = ( 186 | 00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */, 187 | ); 188 | name = Products; 189 | sourceTree = ""; 190 | }; 191 | 00C302E01ABCB9EE00DB3ED1 /* Products */ = { 192 | isa = PBXGroup; 193 | children = ( 194 | 00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */, 195 | ); 196 | name = Products; 197 | sourceTree = ""; 198 | }; 199 | 00E356EF1AD99517003FC87E /* ExampleTests */ = { 200 | isa = PBXGroup; 201 | children = ( 202 | 00E356F21AD99517003FC87E /* ExampleTests.m */, 203 | 00E356F01AD99517003FC87E /* Supporting Files */, 204 | ); 205 | path = ExampleTests; 206 | sourceTree = ""; 207 | }; 208 | 00E356F01AD99517003FC87E /* Supporting Files */ = { 209 | isa = PBXGroup; 210 | children = ( 211 | 00E356F11AD99517003FC87E /* Info.plist */, 212 | ); 213 | name = "Supporting Files"; 214 | sourceTree = ""; 215 | }; 216 | 139105B71AF99BAD00B5F7CC /* Products */ = { 217 | isa = PBXGroup; 218 | children = ( 219 | 139105C11AF99BAD00B5F7CC /* libRCTSettings.a */, 220 | ); 221 | name = Products; 222 | sourceTree = ""; 223 | }; 224 | 139FDEE71B06529A00C62182 /* Products */ = { 225 | isa = PBXGroup; 226 | children = ( 227 | 139FDEF41B06529B00C62182 /* libRCTWebSocket.a */, 228 | ); 229 | name = Products; 230 | sourceTree = ""; 231 | }; 232 | 13B07FAE1A68108700A75B9A /* Example */ = { 233 | isa = PBXGroup; 234 | children = ( 235 | 008F07F21AC5B25A0029DE68 /* main.jsbundle */, 236 | 13B07FAF1A68108700A75B9A /* AppDelegate.h */, 237 | 13B07FB01A68108700A75B9A /* AppDelegate.m */, 238 | 13B07FB51A68108700A75B9A /* Images.xcassets */, 239 | 13B07FB61A68108700A75B9A /* Info.plist */, 240 | 13B07FB11A68108700A75B9A /* LaunchScreen.xib */, 241 | 13B07FB71A68108700A75B9A /* main.m */, 242 | ); 243 | name = Example; 244 | sourceTree = ""; 245 | }; 246 | 146834001AC3E56700842450 /* Products */ = { 247 | isa = PBXGroup; 248 | children = ( 249 | 146834041AC3E56700842450 /* libReact.a */, 250 | ); 251 | name = Products; 252 | sourceTree = ""; 253 | }; 254 | 78C398B11ACF4ADC00677621 /* Products */ = { 255 | isa = PBXGroup; 256 | children = ( 257 | 78C398B91ACF4ADC00677621 /* libRCTLinking.a */, 258 | ); 259 | name = Products; 260 | sourceTree = ""; 261 | }; 262 | 832341AE1AAA6A7D00B99B32 /* Libraries */ = { 263 | isa = PBXGroup; 264 | children = ( 265 | 146833FF1AC3E56700842450 /* React.xcodeproj */, 266 | 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */, 267 | 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */, 268 | 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */, 269 | 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */, 270 | 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */, 271 | 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */, 272 | 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */, 273 | 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */, 274 | 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */, 275 | ); 276 | name = Libraries; 277 | sourceTree = ""; 278 | }; 279 | 832341B11AAA6A8300B99B32 /* Products */ = { 280 | isa = PBXGroup; 281 | children = ( 282 | 832341B51AAA6A8300B99B32 /* libRCTText.a */, 283 | ); 284 | name = Products; 285 | sourceTree = ""; 286 | }; 287 | 83CBB9F61A601CBA00E9B192 = { 288 | isa = PBXGroup; 289 | children = ( 290 | 13B07FAE1A68108700A75B9A /* Example */, 291 | 832341AE1AAA6A7D00B99B32 /* Libraries */, 292 | 00E356EF1AD99517003FC87E /* ExampleTests */, 293 | 83CBBA001A601CBA00E9B192 /* Products */, 294 | ); 295 | indentWidth = 2; 296 | sourceTree = ""; 297 | tabWidth = 2; 298 | }; 299 | 83CBBA001A601CBA00E9B192 /* Products */ = { 300 | isa = PBXGroup; 301 | children = ( 302 | 13B07F961A680F5B00A75B9A /* Example.app */, 303 | 00E356EE1AD99517003FC87E /* ExampleTests.xctest */, 304 | ); 305 | name = Products; 306 | sourceTree = ""; 307 | }; 308 | /* End PBXGroup section */ 309 | 310 | /* Begin PBXNativeTarget section */ 311 | 00E356ED1AD99517003FC87E /* ExampleTests */ = { 312 | isa = PBXNativeTarget; 313 | buildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "ExampleTests" */; 314 | buildPhases = ( 315 | 00E356EA1AD99517003FC87E /* Sources */, 316 | 00E356EB1AD99517003FC87E /* Frameworks */, 317 | 00E356EC1AD99517003FC87E /* Resources */, 318 | ); 319 | buildRules = ( 320 | ); 321 | dependencies = ( 322 | 00E356F51AD99517003FC87E /* PBXTargetDependency */, 323 | ); 324 | name = ExampleTests; 325 | productName = ExampleTests; 326 | productReference = 00E356EE1AD99517003FC87E /* ExampleTests.xctest */; 327 | productType = "com.apple.product-type.bundle.unit-test"; 328 | }; 329 | 13B07F861A680F5B00A75B9A /* Example */ = { 330 | isa = PBXNativeTarget; 331 | buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "Example" */; 332 | buildPhases = ( 333 | 13B07F871A680F5B00A75B9A /* Sources */, 334 | 13B07F8C1A680F5B00A75B9A /* Frameworks */, 335 | 13B07F8E1A680F5B00A75B9A /* Resources */, 336 | 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */, 337 | ); 338 | buildRules = ( 339 | ); 340 | dependencies = ( 341 | ); 342 | name = Example; 343 | productName = "Hello World"; 344 | productReference = 13B07F961A680F5B00A75B9A /* Example.app */; 345 | productType = "com.apple.product-type.application"; 346 | }; 347 | /* End PBXNativeTarget section */ 348 | 349 | /* Begin PBXProject section */ 350 | 83CBB9F71A601CBA00E9B192 /* Project object */ = { 351 | isa = PBXProject; 352 | attributes = { 353 | LastUpgradeCheck = 0610; 354 | ORGANIZATIONNAME = Facebook; 355 | TargetAttributes = { 356 | 00E356ED1AD99517003FC87E = { 357 | CreatedOnToolsVersion = 6.2; 358 | TestTargetID = 13B07F861A680F5B00A75B9A; 359 | }; 360 | 13B07F861A680F5B00A75B9A = { 361 | DevelopmentTeam = A3TNTGDEF2; 362 | }; 363 | }; 364 | }; 365 | buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "Example" */; 366 | compatibilityVersion = "Xcode 3.2"; 367 | developmentRegion = English; 368 | hasScannedForEncodings = 0; 369 | knownRegions = ( 370 | en, 371 | Base, 372 | ); 373 | mainGroup = 83CBB9F61A601CBA00E9B192; 374 | productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */; 375 | projectDirPath = ""; 376 | projectReferences = ( 377 | { 378 | ProductGroup = 00C302A81ABCB8CE00DB3ED1 /* Products */; 379 | ProjectRef = 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */; 380 | }, 381 | { 382 | ProductGroup = 00C302B61ABCB90400DB3ED1 /* Products */; 383 | ProjectRef = 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */; 384 | }, 385 | { 386 | ProductGroup = 00C302BC1ABCB91800DB3ED1 /* Products */; 387 | ProjectRef = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */; 388 | }, 389 | { 390 | ProductGroup = 78C398B11ACF4ADC00677621 /* Products */; 391 | ProjectRef = 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */; 392 | }, 393 | { 394 | ProductGroup = 00C302D41ABCB9D200DB3ED1 /* Products */; 395 | ProjectRef = 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */; 396 | }, 397 | { 398 | ProductGroup = 139105B71AF99BAD00B5F7CC /* Products */; 399 | ProjectRef = 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */; 400 | }, 401 | { 402 | ProductGroup = 832341B11AAA6A8300B99B32 /* Products */; 403 | ProjectRef = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */; 404 | }, 405 | { 406 | ProductGroup = 00C302E01ABCB9EE00DB3ED1 /* Products */; 407 | ProjectRef = 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */; 408 | }, 409 | { 410 | ProductGroup = 139FDEE71B06529A00C62182 /* Products */; 411 | ProjectRef = 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */; 412 | }, 413 | { 414 | ProductGroup = 146834001AC3E56700842450 /* Products */; 415 | ProjectRef = 146833FF1AC3E56700842450 /* React.xcodeproj */; 416 | }, 417 | ); 418 | projectRoot = ""; 419 | targets = ( 420 | 13B07F861A680F5B00A75B9A /* Example */, 421 | 00E356ED1AD99517003FC87E /* ExampleTests */, 422 | ); 423 | }; 424 | /* End PBXProject section */ 425 | 426 | /* Begin PBXReferenceProxy section */ 427 | 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */ = { 428 | isa = PBXReferenceProxy; 429 | fileType = archive.ar; 430 | path = libRCTActionSheet.a; 431 | remoteRef = 00C302AB1ABCB8CE00DB3ED1 /* PBXContainerItemProxy */; 432 | sourceTree = BUILT_PRODUCTS_DIR; 433 | }; 434 | 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */ = { 435 | isa = PBXReferenceProxy; 436 | fileType = archive.ar; 437 | path = libRCTGeolocation.a; 438 | remoteRef = 00C302B91ABCB90400DB3ED1 /* PBXContainerItemProxy */; 439 | sourceTree = BUILT_PRODUCTS_DIR; 440 | }; 441 | 00C302C01ABCB91800DB3ED1 /* libRCTImage.a */ = { 442 | isa = PBXReferenceProxy; 443 | fileType = archive.ar; 444 | path = libRCTImage.a; 445 | remoteRef = 00C302BF1ABCB91800DB3ED1 /* PBXContainerItemProxy */; 446 | sourceTree = BUILT_PRODUCTS_DIR; 447 | }; 448 | 00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */ = { 449 | isa = PBXReferenceProxy; 450 | fileType = archive.ar; 451 | path = libRCTNetwork.a; 452 | remoteRef = 00C302DB1ABCB9D200DB3ED1 /* PBXContainerItemProxy */; 453 | sourceTree = BUILT_PRODUCTS_DIR; 454 | }; 455 | 00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */ = { 456 | isa = PBXReferenceProxy; 457 | fileType = archive.ar; 458 | path = libRCTVibration.a; 459 | remoteRef = 00C302E31ABCB9EE00DB3ED1 /* PBXContainerItemProxy */; 460 | sourceTree = BUILT_PRODUCTS_DIR; 461 | }; 462 | 139105C11AF99BAD00B5F7CC /* libRCTSettings.a */ = { 463 | isa = PBXReferenceProxy; 464 | fileType = archive.ar; 465 | path = libRCTSettings.a; 466 | remoteRef = 139105C01AF99BAD00B5F7CC /* PBXContainerItemProxy */; 467 | sourceTree = BUILT_PRODUCTS_DIR; 468 | }; 469 | 139FDEF41B06529B00C62182 /* libRCTWebSocket.a */ = { 470 | isa = PBXReferenceProxy; 471 | fileType = archive.ar; 472 | path = libRCTWebSocket.a; 473 | remoteRef = 139FDEF31B06529B00C62182 /* PBXContainerItemProxy */; 474 | sourceTree = BUILT_PRODUCTS_DIR; 475 | }; 476 | 146834041AC3E56700842450 /* libReact.a */ = { 477 | isa = PBXReferenceProxy; 478 | fileType = archive.ar; 479 | path = libReact.a; 480 | remoteRef = 146834031AC3E56700842450 /* PBXContainerItemProxy */; 481 | sourceTree = BUILT_PRODUCTS_DIR; 482 | }; 483 | 78C398B91ACF4ADC00677621 /* libRCTLinking.a */ = { 484 | isa = PBXReferenceProxy; 485 | fileType = archive.ar; 486 | path = libRCTLinking.a; 487 | remoteRef = 78C398B81ACF4ADC00677621 /* PBXContainerItemProxy */; 488 | sourceTree = BUILT_PRODUCTS_DIR; 489 | }; 490 | 832341B51AAA6A8300B99B32 /* libRCTText.a */ = { 491 | isa = PBXReferenceProxy; 492 | fileType = archive.ar; 493 | path = libRCTText.a; 494 | remoteRef = 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */; 495 | sourceTree = BUILT_PRODUCTS_DIR; 496 | }; 497 | /* End PBXReferenceProxy section */ 498 | 499 | /* Begin PBXResourcesBuildPhase section */ 500 | 00E356EC1AD99517003FC87E /* Resources */ = { 501 | isa = PBXResourcesBuildPhase; 502 | buildActionMask = 2147483647; 503 | files = ( 504 | ); 505 | runOnlyForDeploymentPostprocessing = 0; 506 | }; 507 | 13B07F8E1A680F5B00A75B9A /* Resources */ = { 508 | isa = PBXResourcesBuildPhase; 509 | buildActionMask = 2147483647; 510 | files = ( 511 | 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */, 512 | 13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */, 513 | ); 514 | runOnlyForDeploymentPostprocessing = 0; 515 | }; 516 | /* End PBXResourcesBuildPhase section */ 517 | 518 | /* Begin PBXShellScriptBuildPhase section */ 519 | 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */ = { 520 | isa = PBXShellScriptBuildPhase; 521 | buildActionMask = 2147483647; 522 | files = ( 523 | ); 524 | inputPaths = ( 525 | ); 526 | name = "Bundle React Native code and images"; 527 | outputPaths = ( 528 | ); 529 | runOnlyForDeploymentPostprocessing = 0; 530 | shellPath = /bin/sh; 531 | shellScript = "export NODE_BINARY=node\n../node_modules/react-native/packager/react-native-xcode.sh"; 532 | }; 533 | /* End PBXShellScriptBuildPhase section */ 534 | 535 | /* Begin PBXSourcesBuildPhase section */ 536 | 00E356EA1AD99517003FC87E /* Sources */ = { 537 | isa = PBXSourcesBuildPhase; 538 | buildActionMask = 2147483647; 539 | files = ( 540 | 00E356F31AD99517003FC87E /* ExampleTests.m in Sources */, 541 | ); 542 | runOnlyForDeploymentPostprocessing = 0; 543 | }; 544 | 13B07F871A680F5B00A75B9A /* Sources */ = { 545 | isa = PBXSourcesBuildPhase; 546 | buildActionMask = 2147483647; 547 | files = ( 548 | 13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */, 549 | 13B07FC11A68108700A75B9A /* main.m in Sources */, 550 | ); 551 | runOnlyForDeploymentPostprocessing = 0; 552 | }; 553 | /* End PBXSourcesBuildPhase section */ 554 | 555 | /* Begin PBXTargetDependency section */ 556 | 00E356F51AD99517003FC87E /* PBXTargetDependency */ = { 557 | isa = PBXTargetDependency; 558 | target = 13B07F861A680F5B00A75B9A /* Example */; 559 | targetProxy = 00E356F41AD99517003FC87E /* PBXContainerItemProxy */; 560 | }; 561 | /* End PBXTargetDependency section */ 562 | 563 | /* Begin PBXVariantGroup section */ 564 | 13B07FB11A68108700A75B9A /* LaunchScreen.xib */ = { 565 | isa = PBXVariantGroup; 566 | children = ( 567 | 13B07FB21A68108700A75B9A /* Base */, 568 | ); 569 | name = LaunchScreen.xib; 570 | path = Example; 571 | sourceTree = ""; 572 | }; 573 | /* End PBXVariantGroup section */ 574 | 575 | /* Begin XCBuildConfiguration section */ 576 | 00E356F61AD99517003FC87E /* Debug */ = { 577 | isa = XCBuildConfiguration; 578 | buildSettings = { 579 | BUNDLE_LOADER = "$(TEST_HOST)"; 580 | FRAMEWORK_SEARCH_PATHS = ( 581 | "$(SDKROOT)/Developer/Library/Frameworks", 582 | "$(inherited)", 583 | ); 584 | GCC_PREPROCESSOR_DEFINITIONS = ( 585 | "DEBUG=1", 586 | "$(inherited)", 587 | ); 588 | INFOPLIST_FILE = ExampleTests/Info.plist; 589 | IPHONEOS_DEPLOYMENT_TARGET = 8.2; 590 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks"; 591 | PRODUCT_NAME = "$(TARGET_NAME)"; 592 | TEST_HOST = "$(BUILT_PRODUCTS_DIR)/Example.app/Example"; 593 | }; 594 | name = Debug; 595 | }; 596 | 00E356F71AD99517003FC87E /* Release */ = { 597 | isa = XCBuildConfiguration; 598 | buildSettings = { 599 | BUNDLE_LOADER = "$(TEST_HOST)"; 600 | COPY_PHASE_STRIP = NO; 601 | FRAMEWORK_SEARCH_PATHS = ( 602 | "$(SDKROOT)/Developer/Library/Frameworks", 603 | "$(inherited)", 604 | ); 605 | INFOPLIST_FILE = ExampleTests/Info.plist; 606 | IPHONEOS_DEPLOYMENT_TARGET = 8.2; 607 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks"; 608 | PRODUCT_NAME = "$(TARGET_NAME)"; 609 | TEST_HOST = "$(BUILT_PRODUCTS_DIR)/Example.app/Example"; 610 | }; 611 | name = Release; 612 | }; 613 | 13B07F941A680F5B00A75B9A /* Debug */ = { 614 | isa = XCBuildConfiguration; 615 | buildSettings = { 616 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 617 | CODE_SIGN_IDENTITY = "iPhone Developer"; 618 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 619 | DEAD_CODE_STRIPPING = NO; 620 | HEADER_SEARCH_PATHS = ( 621 | "$(inherited)", 622 | /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, 623 | "$(SRCROOT)/../node_modules/react-native/React/**", 624 | ); 625 | INFOPLIST_FILE = Example/Info.plist; 626 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; 627 | OTHER_LDFLAGS = "-ObjC"; 628 | PRODUCT_BUNDLE_IDENTIFIER = org.reactjs.native.appintro.Example; 629 | PRODUCT_NAME = Example; 630 | PROVISIONING_PROFILE = ""; 631 | }; 632 | name = Debug; 633 | }; 634 | 13B07F951A680F5B00A75B9A /* Release */ = { 635 | isa = XCBuildConfiguration; 636 | buildSettings = { 637 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 638 | CODE_SIGN_IDENTITY = "iPhone Developer"; 639 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 640 | HEADER_SEARCH_PATHS = ( 641 | "$(inherited)", 642 | /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, 643 | "$(SRCROOT)/../node_modules/react-native/React/**", 644 | ); 645 | INFOPLIST_FILE = Example/Info.plist; 646 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; 647 | OTHER_LDFLAGS = "-ObjC"; 648 | PRODUCT_BUNDLE_IDENTIFIER = org.reactjs.native.appintro.Example; 649 | PRODUCT_NAME = Example; 650 | PROVISIONING_PROFILE = ""; 651 | }; 652 | name = Release; 653 | }; 654 | 83CBBA201A601CBA00E9B192 /* Debug */ = { 655 | isa = XCBuildConfiguration; 656 | buildSettings = { 657 | ALWAYS_SEARCH_USER_PATHS = NO; 658 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 659 | CLANG_CXX_LIBRARY = "libc++"; 660 | CLANG_ENABLE_MODULES = YES; 661 | CLANG_ENABLE_OBJC_ARC = YES; 662 | CLANG_WARN_BOOL_CONVERSION = YES; 663 | CLANG_WARN_CONSTANT_CONVERSION = YES; 664 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 665 | CLANG_WARN_EMPTY_BODY = YES; 666 | CLANG_WARN_ENUM_CONVERSION = YES; 667 | CLANG_WARN_INT_CONVERSION = YES; 668 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 669 | CLANG_WARN_UNREACHABLE_CODE = YES; 670 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 671 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 672 | COPY_PHASE_STRIP = NO; 673 | ENABLE_STRICT_OBJC_MSGSEND = YES; 674 | GCC_C_LANGUAGE_STANDARD = gnu99; 675 | GCC_DYNAMIC_NO_PIC = NO; 676 | GCC_OPTIMIZATION_LEVEL = 0; 677 | GCC_PREPROCESSOR_DEFINITIONS = ( 678 | "DEBUG=1", 679 | "$(inherited)", 680 | ); 681 | GCC_SYMBOLS_PRIVATE_EXTERN = NO; 682 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 683 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 684 | GCC_WARN_UNDECLARED_SELECTOR = YES; 685 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 686 | GCC_WARN_UNUSED_FUNCTION = YES; 687 | GCC_WARN_UNUSED_VARIABLE = YES; 688 | HEADER_SEARCH_PATHS = ( 689 | "$(inherited)", 690 | /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, 691 | "$(SRCROOT)/../node_modules/react-native/React/**", 692 | ); 693 | IPHONEOS_DEPLOYMENT_TARGET = 7.0; 694 | MTL_ENABLE_DEBUG_INFO = YES; 695 | ONLY_ACTIVE_ARCH = YES; 696 | SDKROOT = iphoneos; 697 | }; 698 | name = Debug; 699 | }; 700 | 83CBBA211A601CBA00E9B192 /* Release */ = { 701 | isa = XCBuildConfiguration; 702 | buildSettings = { 703 | ALWAYS_SEARCH_USER_PATHS = NO; 704 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 705 | CLANG_CXX_LIBRARY = "libc++"; 706 | CLANG_ENABLE_MODULES = YES; 707 | CLANG_ENABLE_OBJC_ARC = YES; 708 | CLANG_WARN_BOOL_CONVERSION = YES; 709 | CLANG_WARN_CONSTANT_CONVERSION = YES; 710 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 711 | CLANG_WARN_EMPTY_BODY = YES; 712 | CLANG_WARN_ENUM_CONVERSION = YES; 713 | CLANG_WARN_INT_CONVERSION = YES; 714 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 715 | CLANG_WARN_UNREACHABLE_CODE = YES; 716 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 717 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 718 | COPY_PHASE_STRIP = YES; 719 | ENABLE_NS_ASSERTIONS = NO; 720 | ENABLE_STRICT_OBJC_MSGSEND = YES; 721 | GCC_C_LANGUAGE_STANDARD = gnu99; 722 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 723 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 724 | GCC_WARN_UNDECLARED_SELECTOR = YES; 725 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 726 | GCC_WARN_UNUSED_FUNCTION = YES; 727 | GCC_WARN_UNUSED_VARIABLE = YES; 728 | HEADER_SEARCH_PATHS = ( 729 | "$(inherited)", 730 | /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, 731 | "$(SRCROOT)/../node_modules/react-native/React/**", 732 | ); 733 | IPHONEOS_DEPLOYMENT_TARGET = 7.0; 734 | MTL_ENABLE_DEBUG_INFO = NO; 735 | SDKROOT = iphoneos; 736 | VALIDATE_PRODUCT = YES; 737 | }; 738 | name = Release; 739 | }; 740 | /* End XCBuildConfiguration section */ 741 | 742 | /* Begin XCConfigurationList section */ 743 | 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "ExampleTests" */ = { 744 | isa = XCConfigurationList; 745 | buildConfigurations = ( 746 | 00E356F61AD99517003FC87E /* Debug */, 747 | 00E356F71AD99517003FC87E /* Release */, 748 | ); 749 | defaultConfigurationIsVisible = 0; 750 | defaultConfigurationName = Release; 751 | }; 752 | 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "Example" */ = { 753 | isa = XCConfigurationList; 754 | buildConfigurations = ( 755 | 13B07F941A680F5B00A75B9A /* Debug */, 756 | 13B07F951A680F5B00A75B9A /* Release */, 757 | ); 758 | defaultConfigurationIsVisible = 0; 759 | defaultConfigurationName = Release; 760 | }; 761 | 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "Example" */ = { 762 | isa = XCConfigurationList; 763 | buildConfigurations = ( 764 | 83CBBA201A601CBA00E9B192 /* Debug */, 765 | 83CBBA211A601CBA00E9B192 /* Release */, 766 | ); 767 | defaultConfigurationIsVisible = 0; 768 | defaultConfigurationName = Release; 769 | }; 770 | /* End XCConfigurationList section */ 771 | }; 772 | rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */; 773 | } 774 | -------------------------------------------------------------------------------- /Example/ios/Example.xcodeproj/xcshareddata/xcschemes/Example.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 29 | 35 | 36 | 37 | 38 | 39 | 44 | 45 | 47 | 53 | 54 | 55 | 56 | 57 | 63 | 64 | 65 | 66 | 75 | 77 | 83 | 84 | 85 | 86 | 87 | 88 | 94 | 96 | 102 | 103 | 104 | 105 | 107 | 108 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /Example/ios/Example/AppDelegate.h: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | 12 | @interface AppDelegate : UIResponder 13 | 14 | @property (nonatomic, strong) UIWindow *window; 15 | 16 | @end 17 | -------------------------------------------------------------------------------- /Example/ios/Example/AppDelegate.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import "AppDelegate.h" 11 | 12 | #import "RCTRootView.h" 13 | 14 | @implementation AppDelegate 15 | 16 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 17 | { 18 | NSURL *jsCodeLocation; 19 | 20 | /** 21 | * Loading JavaScript code - uncomment the one you want. 22 | * 23 | * OPTION 1 24 | * Load from development server. Start the server from the repository root: 25 | * 26 | * $ npm start 27 | * 28 | * To run on device, change `localhost` to the IP address of your computer 29 | * (you can get this by typing `ifconfig` into the terminal and selecting the 30 | * `inet` value under `en0:`) and make sure your computer and iOS device are 31 | * on the same Wi-Fi network. 32 | */ 33 | 34 | jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"]; 35 | /** 36 | * OPTION 2 37 | * Load from pre-bundled file on disk. The static bundle is automatically 38 | * generated by the "Bundle React Native code and images" build step when 39 | * running the project on an actual device or running the project on the 40 | * simulator in the "Release" build configuration. 41 | */ 42 | 43 | // jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 44 | 45 | RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation 46 | moduleName:@"Example" 47 | initialProperties:nil 48 | launchOptions:launchOptions]; 49 | 50 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 51 | UIViewController *rootViewController = [UIViewController new]; 52 | rootViewController.view = rootView; 53 | self.window.rootViewController = rootViewController; 54 | [self.window makeKeyAndVisible]; 55 | return YES; 56 | } 57 | 58 | @end 59 | -------------------------------------------------------------------------------- /Example/ios/Example/Base.lproj/LaunchScreen.xib: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 21 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /Example/ios/Example/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } -------------------------------------------------------------------------------- /Example/ios/Example/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | APPL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | LSRequiresIPhoneOS 24 | 25 | NSAppTransportSecurity 26 | 27 | NSAllowsArbitraryLoads 28 | 29 | 30 | NSLocationWhenInUseUsageDescription 31 | 32 | UILaunchStoryboardName 33 | LaunchScreen 34 | UIRequiredDeviceCapabilities 35 | 36 | armv7 37 | 38 | UISupportedInterfaceOrientations 39 | 40 | UIInterfaceOrientationPortrait 41 | UIInterfaceOrientationLandscapeLeft 42 | UIInterfaceOrientationLandscapeRight 43 | 44 | UIViewControllerBasedStatusBarAppearance 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /Example/ios/Example/main.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | 12 | #import "AppDelegate.h" 13 | 14 | int main(int argc, char * argv[]) { 15 | @autoreleasepool { 16 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /Example/ios/ExampleTests/ExampleTests.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | #import 12 | 13 | #import "RCTLog.h" 14 | #import "RCTRootView.h" 15 | 16 | #define TIMEOUT_SECONDS 240 17 | #define TEXT_TO_LOOK_FOR @"Welcome to React Native!" 18 | 19 | @interface ExampleTests : XCTestCase 20 | 21 | @end 22 | 23 | @implementation ExampleTests 24 | 25 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test 26 | { 27 | if (test(view)) { 28 | return YES; 29 | } 30 | for (UIView *subview in [view subviews]) { 31 | if ([self findSubviewInView:subview matching:test]) { 32 | return YES; 33 | } 34 | } 35 | return NO; 36 | } 37 | 38 | - (void)testRendersWelcomeScreen 39 | { 40 | UIViewController *vc = [[[[UIApplication sharedApplication] delegate] window] rootViewController]; 41 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 42 | BOOL foundElement = NO; 43 | 44 | __block NSString *redboxError = nil; 45 | RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 46 | if (level >= RCTLogLevelError) { 47 | redboxError = message; 48 | } 49 | }); 50 | 51 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 52 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 53 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 54 | 55 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { 56 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 57 | return YES; 58 | } 59 | return NO; 60 | }]; 61 | } 62 | 63 | RCTSetLogFunction(RCTDefaultLogFunction); 64 | 65 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 66 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 67 | } 68 | 69 | 70 | @end 71 | -------------------------------------------------------------------------------- /Example/ios/ExampleTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /Example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Example", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node node_modules/react-native/local-cli/cli.js start", 7 | "ios": "node node_modules/react-native/local-cli/cli.js run-ios" 8 | }, 9 | "dependencies": { 10 | "react": "^0.14.8", 11 | "react-native": "^0.24.1", 12 | "react-native-app-intro": "file:.." 13 | }, 14 | "devDependencies": { 15 | "babel-eslint": "^6.0.3", 16 | "eslint": "^2.8.0", 17 | "eslint-config-airbnb": "^7.0.0", 18 | "eslint-plugin-jsx-a11y": "0.6.2", 19 | "eslint-plugin-react": "4.3.0" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 FuYaoDe 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-native-app-intro 2 | react-native-app-intro is a react native component implementing a parallax effect welcome page using base on [react-native-swiper](https://github.com/leecade/react-native-swiper) , similar to the one found in Google's app like Sheet, Drive, Docs... 3 | 4 | # react-native-app-intro Screen Capture 5 | 6 | [Example code](https://github.com/FuYaoDe/react-native-app-intro/tree/master/Example) 7 | 8 | ### Support ios、android 9 | 10 | 11 | 12 | Designed by Freepik 13 | 14 | ### Update from FuYaoDe/react-native-app-intro 15 | - Add autoplay & autoplayTimeout 16 | - Add npmignore 17 | - Add allowFontScaling & fontSize props for Skip, Next, and Done labels 18 | 19 | ### Installation 20 | 21 | ```bash 22 | $ npm i react-native-app-intro-v2 --save 23 | ``` 24 | 25 | ### Basic Usage 26 | 27 | You can use pageArray quick generation your app intro with parallax effect. With the basic usage, the Android status bar will be updated to match your slide background color. 28 | 29 | 30 | 31 | 32 | ```javascript 33 | import React, { Component } from 'react'; 34 | import { AppRegistry, Alert } from 'react-native'; 35 | import AppIntro from 'react-native-app-intro'; 36 | 37 | class Example extends Component { 38 | onSkipBtnHandle = (index) => { 39 | Alert.alert('Skip'); 40 | console.log(index); 41 | } 42 | doneBtnHandle = () => { 43 | Alert.alert('Done'); 44 | } 45 | nextBtnHandle = (index) => { 46 | Alert.alert('Next'); 47 | console.log(index); 48 | } 49 | onSlideChangeHandle = (index, total) => { 50 | console.log(index, total); 51 | } 52 | render() { 53 | const pageArray = [{ 54 | title: 'Page 1', 55 | description: 'Description 1', 56 | img: 'https://goo.gl/Bnc3XP', 57 | imgStyle: { 58 | height: 80 * 2.5, 59 | width: 109 * 2.5, 60 | }, 61 | backgroundColor: '#fa931d', 62 | statusBarColor: '#fa931d', // If you don't specify, a 30% darker color will be inferred from your background color. 63 | fontColor: '#fff', 64 | level: 10, 65 | }, { 66 | title: 'Page 2', 67 | description: 'Description 2', 68 | img: require('../assets/some_image.png'), 69 | imgStyle: { 70 | height: 93 * 2.5, 71 | width: 103 * 2.5, 72 | }, 73 | backgroundColor: '#a4b602', 74 | fontColor: '#fff', 75 | level: 10, 76 | }]; 77 | return ( 78 | 85 | ); 86 | } 87 | } 88 | 89 | AppRegistry.registerComponent('Example', () => Example); 90 | ``` 91 | 92 | ### Advanced Usage 93 | 94 | If you need customized page like my Example, you can pass in `View` component into AppIntro component and set level. Remember any need use parallax effect component, Need to be `` inside. 95 | 96 | 97 | 98 | ```javascript 99 | import React, { Component } from 'react'; 100 | import { 101 | AppRegistry, 102 | StyleSheet, 103 | Text, 104 | View, 105 | } from 'react-native'; 106 | import AppIntro from 'react-native-app-intro'; 107 | 108 | const styles = StyleSheet.create({ 109 | slide: { 110 | flex: 1, 111 | justifyContent: 'center', 112 | alignItems: 'center', 113 | backgroundColor: '#9DD6EB', 114 | padding: 15, 115 | }, 116 | text: { 117 | color: '#fff', 118 | fontSize: 30, 119 | fontWeight: 'bold', 120 | }, 121 | }); 122 | 123 | class Example extends Component { 124 | 125 | render() { 126 | return ( 127 | 128 | 129 | Page 1 130 | Page 1 131 | Page 1 132 | 133 | 134 | Page 2 135 | Page 2 136 | Page 2 137 | 138 | 139 | Page 3 140 | Page 3 141 | Page 3 142 | 143 | 144 | Page 4 145 | Page 4 146 | Page 4 147 | 148 | 149 | ); 150 | } 151 | } 152 | AppRegistry.registerComponent('Example', () => Example); 153 | ``` 154 | 155 | And in Android, image inside view component, view need width、height. 156 | ```javascript 157 | 165 | 166 | 167 | ``` 168 | 169 | ## **Properties** 170 | | Prop | PropType | Default Value | Description | 171 | |----------------|----------|-------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| 172 | | dotColor | string | 'rgba(255,255,255,0.3)' | Bottom of the page dot color | 173 | | activeDotColor | string | '#fff' | Active page index dot color | 174 | | rightTextColor | string | '#fff' | The bottom right Text `Done、>` color | 175 | | leftTextColor | string | '#fff' | The bottom left Text `Skip` color | 176 | | onSlideChange | (index, total) => {} | | function to call when the pages change | 177 | | onSkipBtnClick | (index) => {} | | function to call when the Skip button click | 178 | | onDoneBtnClick | func | | function to call when the Done button click | 179 | | onNextBtnClick | (index) => {} | | function to call when the Next '>' button click | 180 | | doneBtnLabel | string、Text element | Done | The bottom right custom Text label | 181 | | skipBtnLabel | string、Text element | Skip | The bottom left custom Text label | 182 | | nextBtnLabel | string、Text element | › | The bottom left custom Text label | 183 | | 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 | 184 | | defaultIndex | number | 0 | number of the index of the initial index | 185 | | showSkipButton | bool | true | a boolean defining if we should render the skip button | 186 | | showDoneButton | bool | true | a boolean that defines if we should render the done button | 187 | | showDots | bool | true | a boolean that defines if we should render the bottom dots | 188 | | allowFontScaling | bool | true | a boolean that defines if we should allow font scaling on devices with larger text sizes enabled | 189 | | fontSize | number | 22 | a number that specifies the size of the Skip, Done, and Next labels | 190 | | autoplay | bool | false | Set to `true` enable auto play mode. | 191 | | autoplayTimeout | number | 4 | Delay between auto play transitions (in second). | 192 | 193 | ##### **Children View Properties** 194 | | Prop | PropType | Default Value | Description | 195 | |-------|----------|---------------|-----------------------| 196 | | level | number | | parallax effect level | 197 | -------------------------------------------------------------------------------- /assets/sample-android.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sh1n1x/react-native-app-intro/82e89472e7b916fcb3ebaf136169f83b90c533a1/assets/sample-android.gif -------------------------------------------------------------------------------- /components/DoneButton.android.js: -------------------------------------------------------------------------------- 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 | allowFontScaling, fontSize 13 | }) => { 14 | return ( 15 | 16 | 19 | 20 | {isDoneBtnShow ? doneBtnLabel : nextBtnLabel} 21 | 22 | 23 | 24 | ) 25 | } 26 | 27 | export default DoneButton 28 | -------------------------------------------------------------------------------- /components/DoneButton.ios.js: -------------------------------------------------------------------------------- 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 | allowFontScaling, fontSize 15 | }) => { 16 | return ( 17 | 18 | 28 | 29 | 32 | {doneBtnLabel} 33 | 34 | 35 | 36 | 37 | 39 | 40 | {nextBtnLabel} 41 | 42 | 43 | 44 | 45 | ) 46 | } 47 | 48 | export default DoneButton 49 | -------------------------------------------------------------------------------- /components/Dots.js: -------------------------------------------------------------------------------- 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 | 17 | ); 18 | } else { 19 | return ( 20 | 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: -------------------------------------------------------------------------------- 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 | allowFontScaling, 15 | fontSize 16 | }) => { 17 | return ( 18 | 22 | onSkipBtnClick() : null}> 25 | 26 | {skipBtnLabel} 27 | 28 | 29 | 30 | ) 31 | } 32 | 33 | export default SkipButton 34 | -------------------------------------------------------------------------------- /components/SkipButton.ios.js: -------------------------------------------------------------------------------- 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 | allowFontScaling, fontSize 15 | }) => { 16 | return ( 17 | 27 | onSkipBtnClick() : null}> 30 | 31 | {skipBtnLabel} 32 | 33 | 34 | 35 | ) 36 | } 37 | 38 | export default SkipButton 39 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-app-intro-v2", 3 | "version": "2.1.2", 4 | "description": "react-native-app-intro is a react native plugin implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...", 5 | "main": "AppIntro.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/Sh1n1x/react-native-app-intro.git" 12 | }, 13 | "author": "Sh1n1x (https://www.shinix.me)", 14 | "license": "ISC", 15 | "bugs": { 16 | "url": "https://github.com/Sh1n1x/react-native-app-intro/issues" 17 | }, 18 | "homepage": "https://github.com/Sh1n1x/react-native-app-intro#readme", 19 | "dependencies": { 20 | "assign-deep": "^0.4.6", 21 | "prop-types": "^15.6.0", 22 | "react-native-swiper": "^1.5.13" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /package.json.old: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-app-intro", 3 | "version": "1.1.5", 4 | "description": "react-native-app-intro is a react native plugin implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...", 5 | "main": "AppIntro.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/fuyaode/react-native-app-intro.git" 12 | }, 13 | "keywords": [ 14 | "swiper", 15 | "ProductTour", 16 | "App", 17 | "Intro", 18 | "ios", 19 | "android", 20 | "react-component", 21 | "react-native" 22 | ], 23 | "author": "", 24 | "license": "ISC", 25 | "bugs": { 26 | "url": "https://github.com/fuyaode/react-native-app-intro/issues" 27 | }, 28 | "homepage": "https://github.com/fuyaode/react-native-app-intro#readme", 29 | "dependencies": { 30 | "assign-deep": "^0.4.5", 31 | "react-native-swiper": "git+https://github.com/FuYaoDe/react-native-swiper.git" 32 | } 33 | } 34 | --------------------------------------------------------------------------------