onboarding stateless

App.js

@@ -12,7 +12,7 @@ import getTheme from './native-base-theme/components';
 import material from './native-base-theme/variables/material';
 
 // XXX change false -> true if you want sb
-const AppToLoad = false ? StoryBook : App;  //eslint-disable-line
+const AppToLoad = true ? StoryBook : App;  //eslint-disable-line
 
 class App1 extends React.Component {
   constructor() {

js/onboarding/index.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import AppIntro from 'react-native-app-intro';
+
+const Onboarding = ({onDone}) => {
+  const pageArray = [{
+    title: 'Yup',
+    description: 'Swipe to the right when you like a product and want to know more. You will find it later in your list',
+    img: require('../../img/swipe_right.png'),
+    imgStyle: {
+      height: 200,
+      width: 200,
+    },
+    backgroundColor: '#fa931d',
+    fontColor: '#fff',
+    level: 10,
+  }, {
+    title: 'Nope',
+    description: 'Swipe to the left to ignore a product.',
+    img: require('../../img/swipe_left.png'),
+    imgStyle: {
+      height: 200,
+      width: 200,
+    },
+    backgroundColor: '#e17a04',
+    fontColor: '#fff',
+    level: 10,
+  },
+  {
+    title: 'View on PH',
+    description: 'Remember to upvote your favorite project on product hunt from your like list.',
+    img: require('../../img/upvote.png'),
+    imgStyle: {
+      height: 200,
+      width: 200,
+    },
+    backgroundColor: '#c76000',
+    fontColor: '#fff',
+    level: 10,
+  }];
+  return (
+    <AppIntro
+      customStyles={{
+        nextButtonText: {
+          fontSize: 25,
+          fontFamily: 'Roboto'
+        }
+      }}
+      onDoneBtnClick={onDone}
+      onSkipBtnClick={onDone}
+      pageArray={pageArray}
+    />
+  );
+}
+
+export default Onboarding;

package.json

@@ -3,14 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
+    "@storybook/react-native": "^3.1.9",
     "babel-eslint": "^7.2.3",
     "eslint": "^4.2.0",
     "eslint-plugin-react": "^7.1.0",
     "jest-expo": "~18.0.0",
+    "react-dom": "16.0.0-alpha.12",
     "react-native-scripts": "0.0.50",
-    "react-test-renderer": "16.0.0-alpha.12",
-    "@storybook/react-native": "^3.1.9",
-    "react-dom": "16.0.0-alpha.12"
+    "react-test-renderer": "16.0.0-alpha.12"
   },
   "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
   "scripts": {
@@ -30,6 +30,7 @@
     "native-base": "2.2.0",
     "react": "16.0.0-alpha.12",
     "react-native": "^0.45.1",
+    "react-native-app-intro": "^1.1.5",
     "react-navigation": "^1.0.0-beta.11"
   }
 }

storybook/stories/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
+import AppIntro from 'react-native-app-intro';
 
 import {storiesOf} from '@storybook/react-native';
 import {action} from '@storybook/addon-actions';
@@ -22,6 +23,8 @@ import ListItem from '../../js/list/item';
 import List from '../../js/list/list';
 import Sidebar from '../../js/sidebar';
 
+import Onboarding from '../../js/onboarding';
+
 const card = {
   name: 'Awesome Product',
   tagline: 'This is a awesome project',
@@ -103,3 +106,6 @@ storiesOf('List', module)
 
 storiesOf('Sidebar', module)
   .add('Index', () => <Sidebar />)
+
+storiesOf('Onboarding', module)
+  .add('Index', () => <Onboarding onDone={action('done')} />)

yarn.lock

@@ -442,6 +442,18 @@ assert@^1.1.1:
   dependencies:
     util "0.10.3"
 
+assign-deep@^0.4.5:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/assign-deep/-/assign-deep-0.4.5.tgz#d7c76caa123020114f550c66f0823c559f39af13"
+  dependencies:
+    assign-symbols "^0.1.1"
+    is-primitive "^2.0.0"
+    kind-of "^3.0.2"
+
+assign-symbols@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-0.1.1.tgz#cb025944ef4ec8a3693f086e9e112c74e3a0fed9"
+
 async-each@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
@@ -5929,6 +5941,13 @@ react-modal@^1.7.6:
     prop-types "^15.5.7"
     react-dom-factories "^1.0.0"
 
+react-native-app-intro@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/react-native-app-intro/-/react-native-app-intro-1.1.5.tgz#34a2d2265b2d654d31bae743c404856c37448692"
+  dependencies:
+    assign-deep "^0.4.5"
+    react-native-swiper "git+https://github.com/FuYaoDe/react-native-swiper.git"
+
 [email protected]:
   version "2.0.0-beta.3"
   resolved "https://registry.yarnpkg.com/react-native-branch/-/react-native-branch-2.0.0-beta.3.tgz#2167af86bbc9f964bd45bd5f37684e5b54965e32"
@@ -6008,6 +6027,12 @@ [email protected]:
     color "^0.11.1"
     lodash "^4.16.6"
 
+"react-native-swiper@git+https://github.com/FuYaoDe/react-native-swiper.git":
+  version "1.4.4"
+  resolved "git+https://github.com/FuYaoDe/react-native-swiper.git#a6417ff41a8b2d490bdcc4541015ab35736d4595"
+  dependencies:
+    react-timer-mixin "^0.13.3"
+
 react-native-tab-view@^0.0.65:
   version "0.0.65"
   resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-0.0.65.tgz#b685ea3081ff7c96486cd997361026c407302c59"