├── .babelrc ├── .buckconfig ├── .eslintrc ├── .flowconfig ├── .gitattributes ├── .gitignore ├── .istanbul.yml ├── .travis.yml ├── .watchmanconfig ├── LICENSE ├── README.md ├── android ├── app │ ├── BUCK │ ├── build.gradle │ ├── proguard-rules.pro │ └── src │ │ └── main │ │ ├── AndroidManifest.xml │ │ ├── assets │ │ └── fonts │ │ │ ├── Entypo.ttf │ │ │ ├── EvilIcons.ttf │ │ │ ├── Feather.ttf │ │ │ ├── FontAwesome.ttf │ │ │ ├── Foundation.ttf │ │ │ ├── Ionicons.ttf │ │ │ ├── MaterialCommunityIcons.ttf │ │ │ ├── MaterialIcons.ttf │ │ │ ├── Octicons.ttf │ │ │ ├── SimpleLineIcons.ttf │ │ │ └── Zocial.ttf │ │ ├── java │ │ └── com │ │ │ └── pepperoniapptemplate │ │ │ ├── MainActivity.java │ │ │ └── MainApplication.java │ │ └── res │ │ ├── mipmap-hdpi │ │ ├── ic_launcher.png │ │ └── ic_pepperoni.png │ │ ├── mipmap-mdpi │ │ ├── ic_launcher.png │ │ └── ic_pepperoni.png │ │ ├── mipmap-xhdpi │ │ ├── ic_launcher.png │ │ └── ic_pepperoni.png │ │ ├── mipmap-xxhdpi │ │ ├── ic_launcher.png │ │ └── ic_pepperoni.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 ├── app.json ├── bitrise └── bitrise.ios.yml ├── docs ├── ARCHITECTURE.md ├── AUTH0.md ├── DEPLOYMENT.md ├── Extensions.md ├── SETUP.md ├── TESTING.md ├── pepperoni.png └── pepperoni.svg ├── env.example.js ├── generators └── module │ ├── ModuleState.js.hbs │ ├── ModuleView.js.hbs │ └── ModuleViewContainer.js.hbs ├── images ├── pepperoni.png ├── pepperoni@2x.png └── pepperoni@3x.png ├── index.js ├── ios ├── PepperoniAppTemplate-tvOS │ └── Info.plist ├── PepperoniAppTemplate-tvOSTests │ └── Info.plist ├── PepperoniAppTemplate.xcodeproj │ ├── project.pbxproj │ └── xcshareddata │ │ └── xcschemes │ │ ├── PepperoniAppTemplate-tvOS.xcscheme │ │ └── PepperoniAppTemplate.xcscheme ├── PepperoniAppTemplate │ ├── AppDelegate.h │ ├── AppDelegate.m │ ├── Base.lproj │ │ └── LaunchScreen.xib │ ├── Images.xcassets │ │ └── AppIcon.appiconset │ │ │ └── Contents.json │ ├── Info.plist │ └── main.m └── PepperoniAppTemplateTests │ ├── Info.plist │ └── PepperoniAppTemplateTests.m ├── package-lock.json ├── package.json ├── plopfile.js ├── src ├── components │ ├── DeveloperMenu.android.js │ ├── DeveloperMenu.ios.js │ └── DeveloperMenu.js ├── modules │ ├── AppView.android.js │ ├── AppView.ios.js │ ├── AppViewContainer.js │ ├── __specs__ │ │ └── AppView.spec.js │ ├── colors │ │ ├── ColorView.js │ │ └── ColorViewContainer.js │ ├── counter │ │ ├── CounterState.js │ │ ├── CounterView.js │ │ ├── CounterViewContainer.js │ │ └── __specs__ │ │ │ └── CounterState.spec.js │ ├── navigator │ │ ├── Navigator.js │ │ ├── NavigatorState.js │ │ ├── NavigatorView.js │ │ └── NavigatorViewContainer.js │ └── session │ │ └── SessionState.js ├── redux │ ├── __specs__ │ │ └── reducer.spec.js │ ├── middleware.js │ ├── middleware │ │ └── loggerMiddleware.js │ ├── reducer.js │ └── store.js ├── services │ └── randomNumberService.js └── utils │ ├── __specs__ │ └── api.spec.js │ ├── api.js │ ├── authentication.js │ ├── configuration.js │ └── snapshot.js ├── support ├── rename.sh └── version-ios.sh ├── test ├── assertions.js ├── setup.js └── state.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } 4 | -------------------------------------------------------------------------------- /.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "env": { 4 | "es6": true, 5 | "node": true, 6 | "jest": true 7 | }, 8 | "ecmaFeatures": { 9 | "jsx": true, 10 | "restParams": true, 11 | "spread": true, 12 | "experimentalObjectRestSpread": true 13 | }, 14 | "extends": "eslint:recommended", 15 | "plugins": [ 16 | "babel", 17 | "react" 18 | ], 19 | "globals": { 20 | "fetch": true, 21 | "__DEV__": true 22 | }, 23 | "rules": { 24 | "indent": [2, 2, {"SwitchCase": 1}], 25 | "quotes": [2,"single"], 26 | "linebreak-style": [2,"unix"], 27 | "semi": [2,"always"], 28 | "no-console": 0, 29 | "max-len": [1,110], 30 | "comma-dangle": [2,"never"], 31 | "no-cond-assign": [2, "always"], 32 | "no-ex-assign": 2, 33 | "curly": 2, 34 | "max-depth": [2, 5], 35 | "complexity": [1, 8], 36 | "prefer-const": 0, 37 | "no-trailing-spaces": [2, {"skipBlankLines": false}], 38 | "one-var": [2, "never"], 39 | "func-names": 2, 40 | "key-spacing": [2, { 41 | "beforeColon": false, 42 | "afterColon": true 43 | }], 44 | "max-nested-callbacks": [2, 2], 45 | "new-cap": 0, 46 | "new-parens": 2, 47 | "no-mixed-spaces-and-tabs": 2, 48 | "no-multiple-empty-lines": [1, {"max": 1}], 49 | "no-nested-ternary": 2, 50 | "no-new-object": 2, 51 | "no-spaced-func": 2, 52 | "arrow-spacing": [2, {"before": true, "after": true}], 53 | "operator-assignment": [2, "always"], 54 | "operator-linebreak": [2, "after", { 55 | "overrides": { 56 | "?": "before", 57 | ":": "before" 58 | } 59 | } 60 | ], 61 | "keyword-spacing": ["error", {before: true, after: true}], 62 | "space-before-blocks": [2, "always"], 63 | "space-before-function-paren": [2, "never"], 64 | "object-curly-spacing": [2, "never"], 65 | "array-bracket-spacing": [2, "never"], 66 | "computed-property-spacing": [2, "never"], 67 | "space-in-parens": [2, "never"], 68 | "space-infix-ops": [2, {"int32Hint": true}], 69 | "space-unary-ops": [2, { "words": true, "nonwords": false }], 70 | "no-delete-var": 2, 71 | "no-underscore-dangle": 0, 72 | "no-shadow": 2, 73 | "no-shadow-restricted-names": 2, 74 | "no-undef-init": 2, 75 | "no-undef": 2, 76 | "no-undefined": 2, 77 | "no-unused-vars": [2, { 78 | "vars": "all", 79 | "args": "after-used", 80 | "varsIgnorePattern": "hJSX" 81 | }], 82 | "yoda": [2, "never"], 83 | "consistent-return": 2, 84 | "spaced-line-comment": 0, 85 | "strict": [2, "global"], 86 | "eqeqeq": 2, 87 | "guard-for-in": 2, 88 | "no-alert": 2, 89 | "no-caller": 2, 90 | "no-labels": 2, 91 | "no-eval": 2, 92 | "no-fallthrough": 2, 93 | "default-case": 2, 94 | "no-iterator": 2, 95 | "no-loop-func": 2, 96 | "no-multi-spaces": 2, 97 | "no-multi-str": 2, 98 | "no-new": 2, 99 | "no-param-reassign": 2, 100 | "no-proto": 2, 101 | "no-redeclare": 2, 102 | "no-return-assign": 2, 103 | "no-self-compare": 2, 104 | "no-sequences": 2, 105 | "no-throw-literal": 2, 106 | "no-unused-expressions": 2, 107 | "no-with": 2, 108 | "vars-on-top": 0, 109 | "wrap-iife": [2, "outside"], 110 | "valid-typeof": 2, 111 | "max-statements": [1, 30], 112 | "max-params": [1, 6], 113 | "no-var": 0, 114 | "no-unexpected-multiline": 2, 115 | "dot-location": [2, "property"], 116 | "no-unreachable": 2, 117 | "no-negated-in-lhs": 2, 118 | "no-irregular-whitespace": 2, 119 | "no-invalid-regexp": 2, 120 | "no-func-assign": 2, 121 | "no-extra-semi": 2, 122 | "no-extra-boolean-cast": 2, 123 | "no-empty": 2, 124 | "no-duplicate-case": 2, 125 | "no-dupe-keys": 2, 126 | "no-dupe-args": 2, 127 | "no-constant-condition": 2, 128 | "comma-style": [2, "last"], 129 | "eol-last": 2, 130 | "no-lonely-if": 2, 131 | "jsx-quotes": ["error", "prefer-single"], 132 | "react/display-name": 1, 133 | "react/jsx-boolean-value": 0, 134 | "react/jsx-no-undef": 2, 135 | "react/jsx-sort-prop-types": 0, 136 | "react/jsx-sort-props": 0, 137 | "react/jsx-uses-react": 1, 138 | "react/jsx-uses-vars": 1, 139 | "react/no-did-mount-set-state": 1, 140 | "react/no-did-update-set-state": 1, 141 | "react/no-multi-comp": 1, 142 | "react/no-unknown-property": 1, 143 | "react/prop-types": 1, 144 | "react/react-in-jsx-scope": 1, 145 | "react/self-closing-comp": 1, 146 | "react/sort-comp": 1, 147 | "react/wrap-multilines": 1, 148 | "babel/generator-star-spacing": 1, 149 | "babel/new-cap": 0, 150 | "babel/object-curly-spacing": [2, "never"], 151 | "babel/object-shorthand": 1, 152 | "babel/arrow-parens": 0, 153 | "babel/no-await-in-loop": 1 154 | } 155 | } 156 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | ; We fork some components by platform 3 | .*/*[.]android.js 4 | 5 | ; Ignore "BUCK" generated dirs 6 | /\.buckd/ 7 | 8 | ; Ignore unexpected extra "@providesModule" 9 | .*/node_modules/.*/node_modules/fbjs/.* 10 | 11 | ; Ignore duplicate module providers 12 | ; For RN Apps installed via npm, "Libraries" folder is inside 13 | ; "node_modules/react-native" but in the source repo it is in the root 14 | .*/Libraries/react-native/React.js 15 | 16 | ; Ignore polyfills 17 | .*/Libraries/polyfills/.* 18 | 19 | [include] 20 | 21 | [libs] 22 | node_modules/react-native/Libraries/react-native/react-native-interface.js 23 | node_modules/react-native/flow/ 24 | 25 | [options] 26 | emoji=true 27 | 28 | module.system=haste 29 | 30 | munge_underscores=true 31 | 32 | 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\|pdf\)$' -> 'RelativeImageStub' 33 | 34 | suppress_type=$FlowIssue 35 | suppress_type=$FlowFixMe 36 | suppress_type=$FlowFixMeProps 37 | suppress_type=$FlowFixMeState 38 | suppress_type=$FixMe 39 | 40 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(5[0-3]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) 41 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(5[0-3]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ 42 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 43 | suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError 44 | 45 | unsafe.enable_getters_and_setters=true 46 | 47 | [version] 48 | ^0.51.0 49 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /.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/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | 33 | # node.js 34 | # 35 | node_modules/ 36 | npm-debug.log 37 | yarn-error.log 38 | 39 | # BUCK 40 | buck-out/ 41 | \.buckd/ 42 | *.keystore 43 | 44 | # fastlane 45 | # 46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 47 | # screenshots whenever they are needed. 48 | # For more information about the recommended setup visit: 49 | # https://docs.fastlane.tools/best-practices/source-control/ 50 | 51 | */fastlane/report.xml 52 | */fastlane/Preview.html 53 | */fastlane/screenshots 54 | -------------------------------------------------------------------------------- /.istanbul.yml: -------------------------------------------------------------------------------- 1 | verbose: false 2 | instrumentation: 3 | root: . 4 | extensions: 5 | - .js 6 | default-excludes: true 7 | excludes: 8 | - src/**/*.spec.js 9 | - node_modules 10 | include-all-sources: true 11 | es-modules: true 12 | reporting: 13 | print: summary 14 | reports: 15 | - text 16 | - html 17 | - json 18 | dir: ./coverage 19 | watermarks: 20 | statements: [50, 80] 21 | lines: [50, 80] 22 | functions: [50, 80] 23 | branches: [50, 80] 24 | report-config: 25 | clover: {file: clover.xml} 26 | cobertura: {file: cobertura-coverage.xml} 27 | json: {file: coverage.json} 28 | json-summary: {file: coverage-summary.json} 29 | lcovonly: {file: lcov.info} 30 | teamcity: {file: null, blockName: Code Coverage Summary} 31 | text: {file: null, maxCols: 0} 32 | text-lcov: {file: lcov.info} 33 | text-summary: {file: null} 34 | check: 35 | global: 36 | statements: 50 37 | lines: 50 38 | branches: 50 39 | functions: 50 40 | excludes: [] 41 | each: 42 | statements: 50 43 | lines: 50 44 | branches: 50 45 | functions: 50 46 | excludes: [] 47 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "6.9" 4 | - "7.1" 5 | sudo: false 6 | cache: 7 | directories: 8 | - $HOME/.yarn-cache 9 | - $HOME/.gradle/caches/ 10 | - $HOME/.gradle/wrapper/ 11 | env: 12 | - NODE_ENV='test' 13 | script: 14 | - cp env.example.js env.js 15 | - npm run lint 16 | - npm test 17 | - npm run bundle:ios 18 | matrix: 19 | include: 20 | - language: android 21 | os: linux 22 | jdk: oraclejdk8 23 | before_cache: 24 | - rm -f $HOME/.gradle/caches/modules-2/modules-2.lock 25 | - rm -fr $HOME/.gradle/caches/*/plugin-resolution/ 26 | sudo: required 27 | node_js: false 28 | before_install: 29 | - nvm install 7 30 | - node --version 31 | - travis_retry curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - 32 | - echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list 33 | - travis_retry sudo apt-get update -qq 34 | - travis_retry sudo apt-get install -y -qq yarn 35 | install: 36 | - yarn 37 | android: 38 | components: 39 | - tools 40 | - platform-tools 41 | - build-tools-23.0.1 42 | - android-23 43 | - build-tools-26.0.1 44 | - android-26 45 | - extra-android-m2repository 46 | - extra-google-google_play_services 47 | - extra-google-m2repository 48 | - addon-google_apis-google-16 49 | script: 50 | - cd android && ./gradlew assembleDebug && ./gradlew assembleRelease 51 | - language: objective-c 52 | os: osx 53 | osx_image: xcode8.2 54 | node_js: false 55 | before_install: 56 | - nvm install 7 57 | - node --version 58 | - travis_retry npm install -g yarn 59 | - yarn -version 60 | install: 61 | - travis_retry gem install xcpretty 62 | - travis_retry yarn 63 | xcode_project: ios/PepperoniAppTemplate.xcodeproj 64 | xcode_scheme: ios/PepperoniAppTemplateTests 65 | script: 66 | - cd ios 67 | - xcodebuild -scheme PepperoniAppTemplate -sdk iphonesimulator ONLY_ACTIVE_ARCH=NO | xcpretty 68 | - travis_retry xctool run-tests -scheme PepperoniAppTemplate -sdk iphonesimulator -launch-timeout 90 ONLY_ACTIVE_ARCH=NO 69 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Futurice 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 13 | all 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 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Pepperoni - Empowered by Futurice](/docs/pepperoni.png?v=2) 2 | Futurice React Native Starter Kit 3 | === 4 | 5 | [![Join the chat at https://gitter.im/futurice/pepperoni-app-kit](https://badges.gitter.im/futurice/pepperoni-app-kit.svg)](https://gitter.im/futurice/pepperoni-app-kit?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 6 | [![Build Status](https://travis-ci.org/futurice/pepperoni-app-kit.svg?branch=master)](https://travis-ci.org/futurice/pepperoni-app-kit) 7 | [![React Native](https://img.shields.io/badge/react%20native-0.49.3-brightgreen.svg)](https://github.com/facebook/react-native) 8 | [![Sponsored](https://img.shields.io/badge/chilicorn-sponsored-brightgreen.svg)](http://spiceprogram.org/oss-sponsorship/) 9 | [![License](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/futurice/pepperoni-app-kit/blob/master/LICENSE) 10 | 11 | ## ⚠️ Deprecation Warning 12 | 13 | Dear community, as time moved on so did React Native and we've not been able to provide continous support for pepperoni in the past. We are happy that so many of you found it useful and are looking forward to build new tools in the future. 14 | 15 | If you are new to React Native and are looking for ways how to start, [Expo](https://expo.io/) is a great choice or head straight to the [React Native docs](https://facebook.github.io/react-native/docs/getting-started) as it's never been easier to get started with the official setup. 16 | 17 | ## Intro 18 | 19 | We :green_heart: building apps with React Native, because it helps us create high quality products for both major mobile platforms quickly and cost-effectively. 20 | 21 | Getting started on a new app just takes too damn long, though. Most apps need the same basic building blocks and developer infrastructure, and we are bored of reinventing the wheel time and time again. 22 | 23 | This Starter Kit reflects the best practices of React Native development we have discovered while building real-world applications for our customers. It is opinionated about tooling, patterns and development practices. It might not be a one-size-fits-all solution for everyone, but feel free to customize it for your needs, or just take inspiration from it. 24 | 25 | React Native Starter Kit is a part of [Pepperoni](http://getpepperoni.com), a framework for kickstarting digital product development. 26 | 27 | ## tltr; 28 | 29 | Sounds good and you just want to see how it works? Here is a quick start guide: 30 | 31 | ``` 32 | git clone https://github.com/futurice/pepperoni-app-kit.git 33 | cd pepperoni-app-kit 34 | yarn install 35 | react-native run-ios 36 | ``` 37 | 38 | For further setup instructions please see our [Getting Started](#getting-started) section. 39 | 40 | ## Contents 41 | 42 | :warning: **WORK IN PROGRESS** | 43 | :star: **COMING SOON** 44 | 45 | Not all of the below is yet fully implemented 46 | 47 | ### Application Blueprint 48 | 49 | * Always up-to-date [React Native](https://facebook.github.io/react-native/) scaffolding 50 | * Modular and well-documented structure for application code 51 | * [Redux](http://redux.js.org/) and [ImmutableJS](https://facebook.github.io/immutable-js/) for safe and **Reasonaboutable**:tm: state management 52 | * [Redux Loop](https://github.com/raisemarketplace/redux-loop) for Elm-style controlled side effects 53 | * [React Navigation](https://reactnavigation.org/) for awesome navigation with 60fps transitions 54 | * Disk-persisted application state caching for offline support and snappy startup performance 55 | * Clean and testable service layer for interacting with RESTful APIs 56 | * :warning: Sample app to show how to wire it all together 57 | * :star: JSON Web Token authentication 58 | * :star: Multi-environment configuration (dev, staging, production) for iOS and Android 59 | * :star: Built-in error handling and customizable error screens 60 | 61 | ### Testing Setup 62 | 63 | * [Jest](https://facebook.github.io/jest/) for unit testing application code and providing coverage information. 64 | * [Enzyme](https://github.com/airbnb/enzyme) and fully mocked React Native for unit testing UI components 65 | * Utilities for end-to-end integration testing Redux state, including side effects and asynchronous actions 66 | 67 | ### Development & Deployment Infrastructure 68 | 69 | * [Bitrise.io](https://www.bitrise.io) configurations for Continuous Integration and beta app distribution 70 | * :warning: [Google Tag Manager](https://www.google.com/analytics/tag-manager/) analytics 71 | * [Travis CI](https://travis-ci.org/futurice/pepperoni-app-kit) example [configuration](https://github.com/futurice/pepperoni-app-kit/blob/master/.travis.yml) for Android, iOS and Javascript tests. 72 | 73 | 74 | ### Roadmap 75 | 76 | * **TODO** :star: [Microsoft Code Push](http://microsoft.github.io/code-push) for instant JavaScript and images update 77 | * **TODO** Crash reporting 78 | * **TODO** Android and iOS UI Testing with Calaba.sh? 79 | * **TODO** Feature flags? 80 | 81 | ## Getting started 82 | 83 | To build your own app on top of the Starter Kit, fork or mirror this repository. For serious use we recommend [mirroring using these instructions](https://help.github.com/articles/duplicating-a-repository/), since you can't make a fork of a public repository private on GitHub. To contribute to Starter Kit development or just playing around, forking is the way to go. 84 | 85 | First, give your application a name by running `./support/rename.sh YourAppName`. 86 | 87 | Once you have the code downloaded, follow the **[Setup guide](docs/SETUP.md)** to get started. 88 | 89 | ## Development workflow 90 | 91 | After you have set up the project using above instructions, you can use your favorite IDE or text editor to write code, and run the application from the command line. Turn on React Native hot module reloading in the app developer menu to update your application as you code. 92 | 93 | To learn how to structure your application and use the Redux application architecture, read the **[Architecture guide](docs/ARCHITECTURE.md)** for more details. 94 | 95 | ##### Start the application in iOS simulator 96 | ``` 97 | $ react-native run-ios 98 | ``` 99 | 100 | ##### Start the application in Android simulator 101 | (If using the stock emulator, the emulator must be running) 102 | ``` 103 | $ react-native run-android 104 | ``` 105 | 106 | ##### Run unit tests 107 | ``` 108 | $ npm test 109 | ``` 110 | 111 | ##### Run tests every time code changes 112 | ``` 113 | $ npm run test:watch 114 | ``` 115 | 116 | ##### Generate code coverage report 117 | ``` 118 | $ npm run coverage 119 | ``` 120 | 121 | Read the **[Testing guide](docs/TESTING.md)** for more information about writing tests. 122 | 123 | ## Debugging 124 | 125 | For standard debugging select *Debug JS Remotely* from the React Native Development context menu (To open the context menu, press *CMD+D* in iOS or *D+D* in Android). This will open a new Chrome tab under [http://localhost:8081/debugger-ui](http://localhost:8081/debugger-ui) and prints all actions to the console. 126 | 127 | For advanced debugging under **macOS** we suggest using the standalone [React Native Debugger](https://github.com/jhen0409/react-native-debugger), which is based on the official debugger of React Native. 128 | It includes the React Inspector and Redux DevTools so you can inspect React views and get a detailed history of the Redux state. 129 | 130 | You can install it via [brew](https://brew.sh/) and run it as a standalone app: 131 | ``` 132 | $ brew update && brew cask install react-native-debugger 133 | ``` 134 | > Note: Make sure you close all active chrome debugger tabs and then restart the debugger from the React Native Development context menu. 135 | 136 | ## Deployment 137 | 138 | Read the **[Deployment guide](docs/DEPLOYMENT.md)** to learn how to deploy the application to test devices, app stores, and how to use Code Push to push updates to your users immediately. 139 | 140 | ## Contributing 141 | 142 | If you find any problems, please [open an issue](https://github.com/futurice/pepperoni-app-kit/issues/new) or submit a fix as a pull request. 143 | 144 | We welcome new features, but for large changes let's discuss first to make sure the changes can be accepted and integrated smoothly. 145 | 146 | ## License 147 | 148 | [MIT License](LICENSE) 149 | 150 | ## Credits 151 | 152 | This project was initially motivated by [Snowflake](https://github.com/bartonhammond/snowflake), a React Native boilerplate by Barton Hammond. It shares some features and design principles for Pepperoni, but it wasn't the right fit for our needs. At this time Snowflake is more mature, so if you like Pepperoni but didn't agree with something we are doing, you should check it out to see if it's a good fit for your app. 153 | -------------------------------------------------------------------------------- /android/app/BUCK: -------------------------------------------------------------------------------- 1 | # To learn about Buck see [Docs](https://buckbuild.com/). 2 | # To run your application with Buck: 3 | # - install Buck 4 | # - `npm start` - to start the packager 5 | # - `cd android` 6 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"` 7 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 8 | # - `buck install -r android/app` - compile, install and run application 9 | # 10 | 11 | lib_deps = [] 12 | 13 | for jarfile in glob(['libs/*.jar']): 14 | name = 'jars__' + jarfile[jarfile.rindex('/') + 1: jarfile.rindex('.jar')] 15 | lib_deps.append(':' + name) 16 | prebuilt_jar( 17 | name = name, 18 | binary_jar = jarfile, 19 | ) 20 | 21 | for aarfile in glob(['libs/*.aar']): 22 | name = 'aars__' + aarfile[aarfile.rindex('/') + 1: aarfile.rindex('.aar')] 23 | lib_deps.append(':' + name) 24 | android_prebuilt_aar( 25 | name = name, 26 | aar = aarfile, 27 | ) 28 | 29 | android_library( 30 | name = "all-libs", 31 | exported_deps = lib_deps, 32 | ) 33 | 34 | android_library( 35 | name = "app-code", 36 | srcs = glob([ 37 | "src/main/java/**/*.java", 38 | ]), 39 | deps = [ 40 | ":all-libs", 41 | ":build_config", 42 | ":res", 43 | ], 44 | ) 45 | 46 | android_build_config( 47 | name = "build_config", 48 | package = "com.pepperoniapptemplate", 49 | ) 50 | 51 | android_resource( 52 | name = "res", 53 | package = "com.pepperoniapptemplate", 54 | res = "src/main/res", 55 | ) 56 | 57 | android_binary( 58 | name = "app", 59 | keystore = "//android/keystores:debug", 60 | manifest = "src/main/AndroidManifest.xml", 61 | package_type = "debug", 62 | deps = [ 63 | ":app-code", 64 | ], 65 | ) 66 | -------------------------------------------------------------------------------- /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 | * // whether to disable dev mode in custom build variants (by default only disabled in release) 37 | * // for example: to disable dev mode in the staging build type (if configured) 38 | * devDisabledInStaging: true, 39 | * // The configuration property can be in the following formats 40 | * // 'devDisabledIn${productFlavor}${buildType}' 41 | * // 'devDisabledIn${buildType}' 42 | * 43 | * // the root of your project, i.e. where "package.json" lives 44 | * root: "../../", 45 | * 46 | * // where to put the JS bundle asset in debug mode 47 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug", 48 | * 49 | * // where to put the JS bundle asset in release mode 50 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release", 51 | * 52 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 53 | * // require('./image.png')), in debug mode 54 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", 55 | * 56 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 57 | * // require('./image.png')), in release mode 58 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release", 59 | * 60 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means 61 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to 62 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle 63 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/ 64 | * // for example, you might want to remove it from here. 65 | * inputExcludes: ["android/**", "ios/**"], 66 | * 67 | * // override which node gets called and with what additional arguments 68 | * nodeExecutableAndArgs: ["node"], 69 | * 70 | * // supply additional arguments to the packager 71 | * extraPackagerArgs: [] 72 | * ] 73 | */ 74 | 75 | project.ext.react = [ 76 | entryFile: "index.js" 77 | ] 78 | 79 | apply from: "../../node_modules/react-native/react.gradle" 80 | 81 | /** 82 | * Set this to true to create two separate APKs instead of one: 83 | * - An APK that only works on ARM devices 84 | * - An APK that only works on x86 devices 85 | * The advantage is the size of the APK is reduced by about 4MB. 86 | * Upload all the APKs to the Play Store and people will download 87 | * the correct one based on the CPU architecture of their device. 88 | */ 89 | def enableSeparateBuildPerCPUArchitecture = false 90 | 91 | /** 92 | * Run Proguard to shrink the Java bytecode in release builds. 93 | */ 94 | def enableProguardInReleaseBuilds = false 95 | 96 | android { 97 | compileSdkVersion 23 98 | buildToolsVersion "23.0.1" 99 | 100 | defaultConfig { 101 | applicationId "com.pepperoniapptemplate" 102 | minSdkVersion 16 103 | targetSdkVersion 22 104 | versionCode 1 105 | versionName "1.0" 106 | ndk { 107 | abiFilters "armeabi-v7a", "x86" 108 | } 109 | } 110 | splits { 111 | abi { 112 | reset() 113 | enable enableSeparateBuildPerCPUArchitecture 114 | universalApk false // If true, also generate a universal APK 115 | include "armeabi-v7a", "x86" 116 | } 117 | } 118 | buildTypes { 119 | release { 120 | minifyEnabled enableProguardInReleaseBuilds 121 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 122 | } 123 | } 124 | // applicationVariants are e.g. debug, release 125 | applicationVariants.all { variant -> 126 | variant.outputs.each { output -> 127 | // For each separate APK per architecture, set a unique version code as described here: 128 | // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits 129 | def versionCodes = ["armeabi-v7a":1, "x86":2] 130 | def abi = output.getFilter(OutputFile.ABI) 131 | if (abi != null) { // null for the universal-debug, universal-release variants 132 | output.versionCodeOverride = 133 | versionCodes.get(abi) * 1048576 + defaultConfig.versionCode 134 | } 135 | } 136 | } 137 | } 138 | 139 | dependencies { 140 | compile project(':react-native-vector-icons') 141 | compile fileTree(dir: "libs", include: ["*.jar"]) 142 | compile "com.android.support:appcompat-v7:23.0.1" 143 | compile "com.facebook.react:react-native:+" // From node_modules 144 | } 145 | 146 | // Run this once to be able to run the application with BUCK 147 | // puts all compile dependencies into folder libs for BUCK to use 148 | task copyDownloadableDepsToLibs(type: Copy) { 149 | from configurations.compile 150 | into 'libs' 151 | } 152 | -------------------------------------------------------------------------------- /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 | -keep,allowobfuscation @interface com.facebook.common.internal.DoNotStrip 30 | 31 | # Do not strip any method/class that is annotated with @DoNotStrip 32 | -keep @com.facebook.proguard.annotations.DoNotStrip class * 33 | -keep @com.facebook.common.internal.DoNotStrip class * 34 | -keepclassmembers class * { 35 | @com.facebook.proguard.annotations.DoNotStrip *; 36 | @com.facebook.common.internal.DoNotStrip *; 37 | } 38 | 39 | -keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * { 40 | void set*(***); 41 | *** get*(); 42 | } 43 | 44 | -keep class * extends com.facebook.react.bridge.JavaScriptModule { *; } 45 | -keep class * extends com.facebook.react.bridge.NativeModule { *; } 46 | -keepclassmembers,includedescriptorclasses class * { native ; } 47 | -keepclassmembers class * { @com.facebook.react.uimanager.UIProp ; } 48 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactProp ; } 49 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactPropGroup ; } 50 | 51 | -dontwarn com.facebook.react.** 52 | 53 | # TextLayoutBuilder uses a non-public Android constructor within StaticLayout. 54 | # See libs/proxy/src/main/java/com/facebook/fbui/textlayoutbuilder/proxy for details. 55 | -dontwarn android.text.StaticLayout 56 | 57 | # okhttp 58 | 59 | -keepattributes Signature 60 | -keepattributes *Annotation* 61 | -keep class okhttp3.** { *; } 62 | -keep interface okhttp3.** { *; } 63 | -dontwarn okhttp3.** 64 | 65 | # okio 66 | 67 | -keep class sun.misc.Unsafe { *; } 68 | -dontwarn java.nio.file.* 69 | -dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement 70 | -dontwarn okio.** 71 | -------------------------------------------------------------------------------- /android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 12 | 13 | 19 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Entypo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/futurice/pepperoni-app-kit/f58c1410d5b2e84175fb9d6507242696c78ab08b/android/app/src/main/assets/fonts/Entypo.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/EvilIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/futurice/pepperoni-app-kit/f58c1410d5b2e84175fb9d6507242696c78ab08b/android/app/src/main/assets/fonts/EvilIcons.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Feather.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/futurice/pepperoni-app-kit/f58c1410d5b2e84175fb9d6507242696c78ab08b/android/app/src/main/assets/fonts/Feather.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/FontAwesome.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/futurice/pepperoni-app-kit/f58c1410d5b2e84175fb9d6507242696c78ab08b/android/app/src/main/assets/fonts/FontAwesome.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Foundation.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/futurice/pepperoni-app-kit/f58c1410d5b2e84175fb9d6507242696c78ab08b/android/app/src/main/assets/fonts/Foundation.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Ionicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/futurice/pepperoni-app-kit/f58c1410d5b2e84175fb9d6507242696c78ab08b/android/app/src/main/assets/fonts/Ionicons.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/futurice/pepperoni-app-kit/f58c1410d5b2e84175fb9d6507242696c78ab08b/android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/MaterialIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/futurice/pepperoni-app-kit/f58c1410d5b2e84175fb9d6507242696c78ab08b/android/app/src/main/assets/fonts/MaterialIcons.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Octicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/futurice/pepperoni-app-kit/f58c1410d5b2e84175fb9d6507242696c78ab08b/android/app/src/main/assets/fonts/Octicons.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/SimpleLineIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/futurice/pepperoni-app-kit/f58c1410d5b2e84175fb9d6507242696c78ab08b/android/app/src/main/assets/fonts/SimpleLineIcons.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Zocial.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/futurice/pepperoni-app-kit/f58c1410d5b2e84175fb9d6507242696c78ab08b/android/app/src/main/assets/fonts/Zocial.ttf -------------------------------------------------------------------------------- /android/app/src/main/java/com/pepperoniapptemplate/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.pepperoniapptemplate; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. 9 | * This is used to schedule rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "PepperoniAppTemplate"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/pepperoniapptemplate/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.pepperoniapptemplate; 2 | 3 | import android.app.Application; 4 | 5 | import com.facebook.react.ReactApplication; 6 | import com.oblador.vectoricons.VectorIconsPackage; 7 | import com.facebook.react.ReactNativeHost; 8 | import com.facebook.react.ReactPackage; 9 | import com.facebook.react.shell.MainReactPackage; 10 | import com.facebook.soloader.SoLoader; 11 | 12 | import java.util.Arrays; 13 | import java.util.List; 14 | 15 | public class MainApplication extends Application implements ReactApplication { 16 | 17 | private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 18 | @Override 19 | public boolean getUseDeveloperSupport() { 20 | return BuildConfig.DEBUG; 21 | } 22 | 23 | @Override 24 | protected List getPackages() { 25 | return Arrays.asList( 26 | new MainReactPackage(), 27 | new VectorIconsPackage() 28 | ); 29 | } 30 | 31 | @Override 32 | protected String getJSMainModuleName() { 33 | return "index"; 34 | } 35 | }; 36 | 37 | @Override 38 | public ReactNativeHost getReactNativeHost() { 39 | return mReactNativeHost; 40 | } 41 | 42 | @Override 43 | public void onCreate() { 44 | super.onCreate(); 45 | SoLoader.init(this, /* native exopackage */ false); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/futurice/pepperoni-app-kit/f58c1410d5b2e84175fb9d6507242696c78ab08b/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_pepperoni.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/futurice/pepperoni-app-kit/f58c1410d5b2e84175fb9d6507242696c78ab08b/android/app/src/main/res/mipmap-hdpi/ic_pepperoni.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/futurice/pepperoni-app-kit/f58c1410d5b2e84175fb9d6507242696c78ab08b/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-mdpi/ic_pepperoni.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/futurice/pepperoni-app-kit/f58c1410d5b2e84175fb9d6507242696c78ab08b/android/app/src/main/res/mipmap-mdpi/ic_pepperoni.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/futurice/pepperoni-app-kit/f58c1410d5b2e84175fb9d6507242696c78ab08b/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xhdpi/ic_pepperoni.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/futurice/pepperoni-app-kit/f58c1410d5b2e84175fb9d6507242696c78ab08b/android/app/src/main/res/mipmap-xhdpi/ic_pepperoni.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/futurice/pepperoni-app-kit/f58c1410d5b2e84175fb9d6507242696c78ab08b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxhdpi/ic_pepperoni.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/futurice/pepperoni-app-kit/f58c1410d5b2e84175fb9d6507242696c78ab08b/android/app/src/main/res/mipmap-xxhdpi/ic_pepperoni.png -------------------------------------------------------------------------------- /android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | PepperoniAppTemplate 3 | 4 | -------------------------------------------------------------------------------- /android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /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:2.2.3' 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 "$rootDir/../node_modules/react-native/android" 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/futurice/pepperoni-app-kit/f58c1410d5b2e84175fb9d6507242696c78ab08b/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /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.14.1-all.zip 6 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /android/keystores/BUCK: -------------------------------------------------------------------------------- 1 | keystore( 2 | name = "debug", 3 | properties = "debug.keystore.properties", 4 | store = "debug.keystore", 5 | visibility = [ 6 | "PUBLIC", 7 | ], 8 | ) 9 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'PepperoniAppTemplate' 2 | include ':react-native-vector-icons' 3 | project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android') 4 | 5 | include ':app' 6 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "PepperoniAppTemplate", 3 | "displayName": "PepperoniAppTemplate" 4 | } -------------------------------------------------------------------------------- /bitrise/bitrise.ios.yml: -------------------------------------------------------------------------------- 1 | --- 2 | format_version: 1.1.0 3 | default_step_lib_source: https://github.com/bitrise-io/bitrise-steplib.git 4 | app: 5 | envs: 6 | - BITRISE_PROJECT_PATH: ios/PepperoniAppTemplate.xcworkspace 7 | opts: 8 | is_expand: false 9 | - BITRISE_SCHEME: PepperoniAppTemplate 10 | opts: 11 | is_expand: false 12 | trigger_map: 13 | - pattern: "*" 14 | is_pull_request_allowed: true 15 | workflow: primary 16 | workflows: 17 | primary: 18 | steps: 19 | - activate-ssh-key@3.1.0: 20 | title: Activate App SSH key 21 | inputs: 22 | - ssh_key_save_path: "$HOME/.ssh/steplib_ssh_step_id_rsa" 23 | - git-clone@3.2.0: {} 24 | - script@1.1.0: 25 | inputs: 26 | - content: |- 27 | #!/bin/bash 28 | 29 | echo "Copying sample .env file..." 30 | cp env.example.js env.js 31 | - npm: 32 | inputs: 33 | - command: install 34 | - npm@0.1.0: 35 | inputs: 36 | - command: test 37 | - certificate-and-profile-installer@1.4.2: {} 38 | - xcode-test@1.13.7: 39 | title: 'Xcode: Unit Test' 40 | - xcode-archive@1.7.1: 41 | title: 'Xcode: Create Archive' 42 | inputs: 43 | - output_dir: "${BITRISE_DEPLOY_DIR}" 44 | - deploy-to-bitrise-io@1.2.3: {} 45 | -------------------------------------------------------------------------------- /docs/ARCHITECTURE.md: -------------------------------------------------------------------------------- 1 | # Architecture 2 | 3 | :warning: **WORK IN PROGRESS** 4 | 5 | The Starter Kit architecture is designed to support scalable, modularised applications. Built around [Redux](http://redux.js.org/), it makes it simple to reason about your application's state, and as a result to write maintainable, error-free programs. 6 | 7 | The downside of the Starter Kit architecture is that it involves a number of novel concepts, which might take a while to grok for the uninitiated. This document aims to explain the what, why and how of building apps the Starter Kit way. 8 | 9 | ## Pieces of the puzzle 10 | 11 | * [Redux](http://redux.js.org/) 12 | * [redux-loop](https://github.com/raisemarketplace/redux-loop) 13 | * [ImmutableJS](https://facebook.github.io/immutable-js) 14 | 15 | The application state and state changes are managed by **Redux**, a library that implements a pure, side-effect-free variant of the Facebook [Flux](https://facebook.github.io/flux/) architecture. Redux and Flux prescribe a unidirectional dataflow through your application. To understand Redux, check out this [Cartoon guide by Lin Clark](https://code-cartoons.com/a-cartoon-guide-to-flux-6157355ab207#.4dpmozm9v) (it's great, not a joke!) and [Dan Abramov's Redux course on egghead.io](https://egghead.io/series/getting-started-with-redux). 16 | 17 | Redux helps us with synchronous updating of our state, but it doesn't provide an out-of-the-box solution for handling asynchronous actions. The Redux ecosystem has many possible solutions for this problem. In our application, we use the vanilla redux-thunk middleware for simple asynchronous actions, and **redux-loop** to handle more complex asynchronicity. 18 | 19 | The state in Redux applications should never be mutated, but always cloned. To make this more natural for the programmer, and more fault-tolerant against accidental mutation, we use **ImmutableJS** data structures to hold our app's state. 20 | 21 | ## Organising code 22 | 23 | Let's take a look of how we organise our application. 24 | 25 | ### Components 26 | 27 | The `components` directory should contain React Native JSX components, which take their inputs in as `props`. In Flux/Redux parlance the components should be dumb/presentation components, meaning that components should not be `connect()`ed to the redux store directly, but instead used by smart/container components. 28 | 29 | The components may be stateful if it makes sense, but do consider externalising state to the Redux store instead. If the state needs to be persisted, shared by other components, or inspected by a developer in order to understand the program state, it should go in the Redux store. 30 | 31 | A component may be either written as an ES6 `class Foo extends Component` class or as a plain JavaScript function component. Usage of `React.createClass` should be avoided, as it [will be deprecated in 15.5](https://github.com/facebook/react/issues/8854) 32 | 33 | If a component implementation differs between iOS and Android versions of the application, [create separate `.android.js` and `.ios.js` files](https://facebook.github.io/react-native/docs/platform-specific-code.html) for the component. In minor cases the `React.Platform.OS` property can be used to branch between platforms. 34 | 35 | ### Modules 36 | 37 | The `modules` directory contains most of the interesting bits of the application. As a rule of thumb, this is where all code that modifies that application state or reads it from the store should go. 38 | 39 | Each module is its own directory and represents a "discrete domain" within the application. There is no hard and fast rule on how to split your application into modules (in fact, this is one of the most difficult decisions in designing a Redux application), but here are some qualities of a good module: 40 | 41 | * Represents a screen in the application, or a collection of screens that form a feature. 42 | * Represents some technical feature that needs its own state (e.g. `navigator`). 43 | * Rarely needs to use data from other modules' states. 44 | * Doesn't contain data that is often needed by other modules. 45 | 46 | #### Anatomy of a Module 47 | 48 | At its simplest, a module contains three logical part: **State**, **View(s)** and **Container(s)**. All of these are optional, i.e. a component may or may not a have a View. If a module consists only of a View, though, do consider making it a component instead. 49 | 50 | ##### State 51 | 52 | The **State** encapsulates... err... well, the state of the application, and any actions that can modify that state. State can be data, for example fetched from a server or created by the user in-app, or it may be something transient, such as whether the user is logged into the application, or whether a particular UI element should be displayed or not. 53 | 54 | The State part of the module is a [Redux Duck](https://github.com/erikras/ducks-modular-redux) - a file that contains a Reducer, Action Creators and the initial state of the application. 55 | 56 | Let's take a simple example of an application that displays a number, which the user can increment by pressing a *plus* button, and decrement using a *minus* button. 57 | 58 | ```js 59 | // CounterState.js 60 | import {Map} from 'immutable'; 61 | 62 | // INITIAL STATE 63 | // 64 | // We start by defining the initial state for this module. In most cases your 65 | // module state will be an Immutable.Map. Even if your data is represented as a 66 | // list, set or a primitive value, it's usually best to wrap it in a Map for 67 | // maximum flexibility when refactoring your state 68 | 69 | const initialState = Map({ 70 | value: 0 71 | }); 72 | 73 | // ACTION TYPES (Naming: SCREAMING_CASE) 74 | // 75 | // Let's define constants for the action types. The action types must be globally unique, 76 | // so we namespace them with a prefix to avoid accidental collisions. It also helps to make 77 | // the action name descriptive, as it helps with debugging. In most cases the action constants 78 | // will be private to the State file, but in some advanced scenarios may be exported 79 | 80 | const UPDATE_NUMBER = 'CounterState/UPDATE_NUMBER'; 81 | 82 | // ACTION CREATORS (Naming: camelCase) 83 | // 84 | // Action creators are functions whose responsibility is to encapsulate the creation of the 85 | // messages passed to the reducer. Their API should be consumer-friendly and hide as much of 86 | // the internal implementation of the state update as possible. 87 | // 88 | // At their simplest Action creators just construct a Flux Standard Action -compliant action. 89 | // Other times they may call asynchronous services and rely on a Redux middleware. 90 | // 91 | // Action creators are always named exports, `export function name() {...}`, or `export const name = ...` 92 | 93 | export function increment() { 94 | return {type: UPDATE_NUMBER, payload: +1}; 95 | } 96 | 97 | export function decrement() { 98 | return {type: UPDATE_NUMBER, payload: -1}; 99 | } 100 | 101 | // REDUCER (Naming: PascalCase) 102 | // 103 | // Reducer is responsible for handling all the actions defined in this module. The first 104 | // parameter is the previous state of this module, and should default to the initial state. 105 | // 106 | // The reducer then examines the `action` object and decides whether any state should change in 107 | // response to that action. The reducer must return the updated state, or if no changes are made, 108 | // the previous state without modifications. 109 | // 110 | // The reducer is always an ES6 default export. 111 | 112 | export default function CounterStateReducer(state = initialState, action) { 113 | switch (action.type) { 114 | case UPDATE_NUMBER: 115 | return state.update('value', value => value + action.payload); 116 | default: 117 | return state; 118 | } 119 | } 120 | ``` 121 | 122 | The Redux Ducks pattern aims to keep the code portable, contained and easy to refactor by co-locating the reducer with action creators. For complex modules, the Duck can get quite long and make it difficult to maintain, in which case it should be split into smaller chunks, either by separating the reducer into its own file or by splitting the state into smaller Ducks and combining the reducers using standard Redux split/combine strategies. 123 | 124 | ##### View 125 | 126 | Typically the **View** represents the screen in the application. A module may have multiple views, if the part of the application consists of multiple screens, or if the single view is too complex to write in a single file. 127 | 128 | Technically speaking the View is identical to a component we define in the `components` directory. The difference is the way we use them. Ideally, the View's role is to orchestrate reusable components. The view can be aware of what the application state looks like and which actions update it, whereas a component should not `dispatch` things directly, and have their `props` API designed around the purpose of the component, not the state of the application. 129 | 130 | The View usually has some presentational components and styling, but usually the leaner the view the better. If a view implementation needs to be very different on iOS and Android, separate `.android.js` and `ios.js` files may be written. However, for maintainability purposes, it is better if the platform-specific implementation can be done on `component` level, and the View can remain platform-agnostic. 131 | 132 | A View should take all inputs as `props`, and should very, very rarely, if ever, be stateful. Instead, the state should be managed in Redux, and injected to the component props by the container. 133 | 134 | To continue the Counter example, a view might look something like this: 135 | 136 | ```js 137 | import React, {StyleSheet, Text, View} from 'react-native'; 138 | import PropTypes from 'prop-types'; 139 | import ActionButton from '../../components/ActionButton'; 140 | import * as CounterState from './CounterState'; 141 | 142 | class CounterView extends Component { 143 | // state (value) and action dispatcher are provided as props 144 | static propTypes: { 145 | value: PropTypes.number.isRequired, 146 | dispatch: PropTypes.func.isRequired 147 | }, 148 | 149 | render() { 150 | const {value, dispatch} = this.props; 151 | // use reusable components (ActionButton) to dispatch actions created by CounterState action creators 152 | return ( 153 | 154 | {value} 155 | dispatch(CounterState.increment())} text='+' /> 156 | dispatch(CounterState.decrement())} text='-' /> 157 | 158 | ); 159 | } 160 | }); 161 | 162 | // styles are defined inline 163 | const styles = StyleSheet.create({ 164 | container: { 165 | flex: 1, 166 | justifyContent: 'center', 167 | alignItems: 'center', 168 | backgroundColor: 'white' 169 | }, 170 | counter: { 171 | textAlign: 'center', 172 | fontSize: 40 173 | } 174 | }); 175 | 176 | export default CounterView; 177 | ``` 178 | 179 | ##### Container 180 | 181 | The **Container** (or **View Container**) is responsible for `connect()`ing the View component to the Redux store. 182 | 183 | 184 | Redux `connect()` takes in two arguments, first `mapStateToProps` which selects relevant parts of the application state to pass to the view, and second `mapActionsToProps`, which binds Action Creators to the store's dispatcher so the actions are executed in the right context. These functions are often called *selectors*. 185 | 186 | We think using `mapStateToProps` is a good practice, but avoid using `mapActionsToProps` in favour of calling `dispatch` ourselves in the view. In our experience this leads to simpler, easier to reason about code (and a little less verbose PropTypes on the View). 187 | 188 | Every time the app state changes, the Container is automatically called with the latest state. If the props returned by the container differ from the previous props, the connected View is re-rendered. If the props are identical, the view is not re-rendered. For this reason it's a good idea to define your props as ImmutableJS data structures or JavaScript primitives, because if you `toJS()` your immutable `Map`s and `Lists` to objects and arrays in the Container, the results of each pass are not referentially equal, and we lose the benefit of this performance optimisation. 189 | 190 | Using the Counter example, the container would be very simple: 191 | 192 | ```js 193 | import {connect} from 'react-redux'; 194 | import CounterView from './CounterView'; 195 | 196 | // pass the counter's value to the component as a prop called `value`. 197 | // Because we omit the second parameter, the `dispatch` function is 198 | // automatically passed as a prop. 199 | export default connect( 200 | state => ({ 201 | value: state.getIn(['counter', 'value']) 202 | }) 203 | )(CounterView); 204 | ``` 205 | 206 | Often this file doesn't contain a lot of code, but it's important to define the Container in its own file anyway to be able to support platform-specific view implementations, as well as test the Views and their data bindings separately. 207 | 208 | If a View needs data from other modules (i.e. other parts of the application state than the subtree managed by that module), the Container is the correct place to access. In database-speak, this way you can keep your data "normalized" (to a degree), and "join" them when required. 209 | -------------------------------------------------------------------------------- /docs/AUTH0.md: -------------------------------------------------------------------------------- 1 | # Auth0 2 | 3 | Pepperoni used to be bundled with [Auth0](https://auth0.com/) but it has been removed by popular request. 4 | 5 | You can follow this guide to get it back. 6 | 7 | ## Installation 8 | 9 | First, get the `react-native-lock` npm package. 10 | 11 | ```bash 12 | $ npm i -S react-native-lock@futurice/react-native-lock#feature/customizedTheme 13 | ``` 14 | 15 | Then link the package to IOS and Android builds with the `link` command: 16 | 17 | ```bash 18 | $ react-native link react-native-lock 19 | ``` 20 | 21 | ## Usage 22 | 23 | ### Configuration 24 | 25 | If you don't want to use Auth0, or you want to take it into use later, you can skip this step for now. 26 | 27 | 1. Before you start you need to create a new application in [Auth0](https://manage.auth0.com/#/applications/) 28 | 2. Set `AUTH0_CLIENT_ID` and `AUTH0_DOMAIN` in `env.js` according to your application you created in Auth 29 | 30 | AUTH0_CLIENT_ID: '', 31 | AUTH0_DOMAIN: '.eu.auth0.com' 32 | 33 | 3. Follow the steps for your platform below. Check the [official instructions](https://github.com/auth0/react-native-lock) for more information. 34 | 35 | ### Customization 36 | 37 | **iOS** 38 | * Change default values in the customiseTheme method in [`src/services/auth0.js`](https://github.com/futurice/pepperoni-app-kit/blob/e57bdac1cab657b25fb636cd31e4f630056dc95b/src/services/auth0.js) 39 | * If you want to add images, copy them in the root `images` folder and add them via Xcode > file > add files to the project in 3 different resolutions (needs to be original and x2 and x3 versions) 40 | * All changeable values can be retrieved [here]( https://auth0.com/docs/libraries/lock-ios/customization) 41 | 42 | **Android** 43 | 44 | * Change default values for the AppTheme.Lock in `android/app/src/main/res/values/styles.xml` 45 | * Add images in `android/app/src/main/res/mipmap-` in 4 different resolutions 46 | * All changeable values can be retrieved [here]( https://github.com/auth0/Lock.Android/blob/master/lock/src/main/res/values/styles.xml) 47 | 48 | ## Example 49 | 50 | You can see example of code used in Pepperoni when Auth0 was still bundled [here](https://github.com/futurice/pepperoni-app-kit/tree/e57bdac1cab657b25fb636cd31e4f630056dc95b). 51 | 52 | The files you'll be interested in are: 53 | 54 | * [`src/modules/auth/AuthState.js`](https://github.com/futurice/pepperoni-app-kit/blob/e57bdac1cab657b25fb636cd31e4f630056dc95b/src/modules/auth/AuthState.js) (and [`src/modules/auth/__specs__/AuthState.spec.js`](https://github.com/futurice/pepperoni-app-kit/blob/e57bdac1cab657b25fb636cd31e4f630056dc95b/src/modules/auth/__specs__/AuthState.spec.js)) 55 | * [`src/services/auth0.js`](https://github.com/futurice/pepperoni-app-kit/blob/e57bdac1cab657b25fb636cd31e4f630056dc95b/src/services/auth0.js) 56 | * [`src/redux/reducer.js`](https://github.com/futurice/pepperoni-app-kit/blob/e57bdac1cab657b25fb636cd31e4f630056dc95b/src/redux/reducer.js#L10) 57 | * [`src/components/DeveloperMenu.android.js`](https://github.com/futurice/pepperoni-app-kit/blob/e57bdac1cab657b25fb636cd31e4f630056dc95b/src/components/DeveloperMenu.android.js#L33) 58 | * [`src/components/DeveloperMenu.ios.js`](https://github.com/futurice/pepperoni-app-kit/blob/e57bdac1cab657b25fb636cd31e4f630056dc95b/src/components/DeveloperMenu.ios.js#L31) 59 | * [`src/modules/AppView.js`](https://github.com/futurice/pepperoni-app-kit/blob/e57bdac1cab657b25fb636cd31e4f630056dc95b/src/modules/AppView.js#L33) 60 | * [`src/modules/AppViewContainer.js`](https://github.com/futurice/pepperoni-app-kit/blob/e57bdac1cab657b25fb636cd31e4f630056dc95b/src/modules/AppViewContainer.js#L6-L7) 61 | * [`src/modules/counter/CounterViewContainer.js`](https://github.com/futurice/pepperoni-app-kit/blob/e57bdac1cab657b25fb636cd31e4f630056dc95b/src/modules/counter/CounterViewContainer.js#L8-L9) 62 | -------------------------------------------------------------------------------- /docs/DEPLOYMENT.md: -------------------------------------------------------------------------------- 1 | # Deployment Guide 2 | 3 | :warning: **COMING SOON** 4 | -------------------------------------------------------------------------------- /docs/Extensions.md: -------------------------------------------------------------------------------- 1 | # Extensions 2 | 3 | This section is for different variations you can do on the Pepperoni Framework. 4 | If you have something cool to contribute please feel free to submit a PR! 5 | -------------------------------------------------------------------------------- /docs/SETUP.md: -------------------------------------------------------------------------------- 1 | # Setting up the Starter Kit 2 | 3 | ## Requirements 4 | 5 | Firstly, you need a Mac computer for iOS development. If you want to build an Android app only, you can try [experimental Linux and Windows support](https://facebook.github.io/react-native/docs/linux-windows-support.html). These instructions presume an OS X installation. 6 | 7 | Before you get started, make sure you have the following dependencies installed on your machine: 8 | 9 | - [NodeJS](https://nodejs.org) `>=5` with `yarn` or `npm 3`. **npm 2 is not supported.** 10 | - [Homebrew](http://brew.sh/) (or an alternative way to install OSX packages) 11 | - Latest React Native CLI 12 | 13 | $ npm install -g react-native-cli 14 | 15 | ## Installation 16 | 17 | Install dependencies from NPM 18 | 19 | $ npm install 20 | 21 | Create a blank configuration file 22 | 23 | $ cp env.example.js env.js 24 | 25 | ### Running the iOS application 26 | 27 | 1. Install Xcode for iOS development (download from Mac App Store) 28 | 29 | 2. Build the app and run the simulator: 30 | 31 | $ react-native run-ios 32 | 33 | **Note: When you want to run the app with Xcode, open the `.xcodeproj` file** 34 | 35 | ### Running the Android application 36 | 37 | More details here: [React Native Android Setup](https://facebook.github.io/react-native/docs/android-setup.html) 38 | 39 | 1. Install latest JDK 40 | 2. Install the Android SDK 41 | 42 | $ brew install android-sdk 43 | 44 | 3. Set ANDROID_HOME environment variable in .bashrc, .zshrc or similar: 45 | 46 | $ export ANDROID_HOME=/usr/local/opt/android-sdk 47 | 48 | 4. Start Android SDK Manager 49 | 50 | $ android 51 | 52 | 5. Add SDK tools via Android sdk manager 53 | 54 | - Android SDK tools 55 | - Android SDK Platform-tools 56 | - Android SDK Build-tools (**Important**: Rev. 23.0.1) 57 | - SDK Platform 58 | - Intel x86 Atom_64 System Image 59 | - Intel x86 Atom System Image 60 | - Android Support Repository 61 | - Android Support Library 62 | - Intel x86 Emulator Accelerator (HAXM installer) 63 | 64 | 6. Configure and install hardware acceleration 65 | 66 | $ open /usr/local/opt/android-sdk/extras/intel/Hardware_Accelerated_Execution_Manager/IntelHAXM_.dmg 67 | 68 | 7. Open Android Virtual Device manager 69 | 70 | $ android avd 71 | 72 | 8. Add new virtual device 73 | 74 | - name: reactnative 75 | - Device: Nexus 5 76 | - Target: Android 6 - API Level 23 77 | - CBU: Intel Atom x86 78 | - check Use Host GPU 79 | 80 | 9. Build app and run emulator: 81 | 82 | $ react-native run-android 83 | 84 | ### Auth0 85 | 86 | Pepperoni used to be bundled with [Auth0](https://auth0.com/) but it has been removed by popular request. 87 | 88 | However instructions on how to set it up are available [here](AUTH0.md). 89 | 90 | ### Windows UWP 91 | 92 | Windows not yet supported. 93 | -------------------------------------------------------------------------------- /docs/TESTING.md: -------------------------------------------------------------------------------- 1 | # Testing Guide 2 | 3 | :warning: **COMING SOON** 4 | -------------------------------------------------------------------------------- /docs/pepperoni.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/futurice/pepperoni-app-kit/f58c1410d5b2e84175fb9d6507242696c78ab08b/docs/pepperoni.png -------------------------------------------------------------------------------- /docs/pepperoni.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 17 | 18 | 20 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 96 | 97 | 98 | 99 | 100 | 101 | 103 | 106 | 109 | 112 | 115 | 117 | 119 | 121 | 122 | 123 | 124 | 125 | 128 | 131 | 133 | 134 | 137 | 138 | 141 | 144 | 147 | 148 | 149 | 151 | 153 | 155 | 157 | 158 | 161 | 164 | 165 | 166 | -------------------------------------------------------------------------------- /env.example.js: -------------------------------------------------------------------------------- 1 | // Secrets for the applications. Do NOT commit any secrets to version control. 2 | // 1. cp env.example.js env.js 3 | // 2. Fill in the blanks 4 | 5 | module.exports = { 6 | }; 7 | -------------------------------------------------------------------------------- /generators/module/ModuleState.js.hbs: -------------------------------------------------------------------------------- 1 | import { Map } from 'immutable'; 2 | 3 | // Initial state 4 | const initialState = Map({ 5 | 6 | }); 7 | 8 | // Actions 9 | const ACTION = '{{properCase name }}State/ACTION'; 10 | 11 | // Action creators 12 | export function act() { 13 | return { type: ACTION }; 14 | } 15 | 16 | // Reducer 17 | export default function {{properCase name }}StateReducer(state = initialState, action = {}) { 18 | switch (action.type) { 19 | case ACTION: 20 | return state; 21 | default: 22 | return state; 23 | } 24 | } -------------------------------------------------------------------------------- /generators/module/ModuleView.js.hbs: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { 4 | StyleSheet, 5 | View 6 | } from 'react-native'; 7 | 8 | class {{properCase name }}View extends Component { 9 | static displayName = '{{properCase name }}View'; 10 | 11 | static propTypes = { 12 | dispatch: PropTypes.func.isRequired, 13 | }; 14 | 15 | render() { 16 | return ( 17 | 18 | 19 | 20 | ); 21 | } 22 | } 23 | 24 | const styles = StyleSheet.create({ 25 | container: { 26 | flex: 1, 27 | justifyContent: 'center', 28 | alignItems: 'center', 29 | backgroundColor: 'white' 30 | } 31 | }); 32 | 33 | export default {{properCase name }}View; -------------------------------------------------------------------------------- /generators/module/ModuleViewContainer.js.hbs: -------------------------------------------------------------------------------- 1 | import { connect } from 'react-redux'; 2 | import {{properCase name }}View from './{{properCase name }}View'; 3 | 4 | export default connect( 5 | state => ({ 6 | 7 | }), 8 | dispatch => ({ 9 | 10 | }) 11 | )({{properCase name }}View); -------------------------------------------------------------------------------- /images/pepperoni.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/futurice/pepperoni-app-kit/f58c1410d5b2e84175fb9d6507242696c78ab08b/images/pepperoni.png -------------------------------------------------------------------------------- /images/pepperoni@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/futurice/pepperoni-app-kit/f58c1410d5b2e84175fb9d6507242696c78ab08b/images/pepperoni@2x.png -------------------------------------------------------------------------------- /images/pepperoni@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/futurice/pepperoni-app-kit/f58c1410d5b2e84175fb9d6507242696c78ab08b/images/pepperoni@3x.png -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import {Provider} from 'react-redux'; 2 | import store from './src/redux/store'; 3 | import AppViewContainer from './src/modules/AppViewContainer'; 4 | 5 | import React, {Component} from 'react'; 6 | import {AppRegistry} from 'react-native'; 7 | 8 | class PepperoniAppTemplate extends Component { 9 | render() { 10 | return ( 11 | 12 | 13 | 14 | ); 15 | } 16 | } 17 | 18 | AppRegistry.registerComponent('PepperoniAppTemplate', () => PepperoniAppTemplate); 19 | -------------------------------------------------------------------------------- /ios/PepperoniAppTemplate-tvOS/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 | APPL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | LSRequiresIPhoneOS 24 | 25 | UILaunchStoryboardName 26 | LaunchScreen 27 | UIRequiredDeviceCapabilities 28 | 29 | armv7 30 | 31 | UISupportedInterfaceOrientations 32 | 33 | UIInterfaceOrientationPortrait 34 | UIInterfaceOrientationLandscapeLeft 35 | UIInterfaceOrientationLandscapeRight 36 | 37 | UIViewControllerBasedStatusBarAppearance 38 | 39 | NSLocationWhenInUseUsageDescription 40 | 41 | NSAppTransportSecurity 42 | 43 | 44 | NSExceptionDomains 45 | 46 | localhost 47 | 48 | NSExceptionAllowsInsecureHTTPLoads 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /ios/PepperoniAppTemplate-tvOSTests/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 | -------------------------------------------------------------------------------- /ios/PepperoniAppTemplate.xcodeproj/xcshareddata/xcschemes/PepperoniAppTemplate-tvOS.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 29 | 35 | 36 | 37 | 43 | 49 | 50 | 51 | 52 | 53 | 58 | 59 | 61 | 67 | 68 | 69 | 70 | 71 | 77 | 78 | 79 | 80 | 81 | 82 | 92 | 94 | 100 | 101 | 102 | 103 | 104 | 105 | 111 | 113 | 119 | 120 | 121 | 122 | 124 | 125 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /ios/PepperoniAppTemplate.xcodeproj/xcshareddata/xcschemes/PepperoniAppTemplate.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 29 | 35 | 36 | 37 | 43 | 49 | 50 | 51 | 52 | 53 | 59 | 60 | 62 | 68 | 69 | 70 | 71 | 72 | 78 | 79 | 80 | 81 | 82 | 83 | 95 | 97 | 103 | 104 | 105 | 106 | 107 | 108 | 114 | 116 | 122 | 123 | 124 | 125 | 127 | 128 | 131 | 132 | 133 | -------------------------------------------------------------------------------- /ios/PepperoniAppTemplate/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 | -------------------------------------------------------------------------------- /ios/PepperoniAppTemplate/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 13 | #import 14 | 15 | @implementation AppDelegate 16 | 17 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 18 | { 19 | NSURL *jsCodeLocation; 20 | 21 | jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; 22 | 23 | RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation 24 | moduleName:@"PepperoniAppTemplate" 25 | initialProperties:nil 26 | launchOptions:launchOptions]; 27 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; 28 | 29 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 30 | UIViewController *rootViewController = [UIViewController new]; 31 | rootViewController.view = rootView; 32 | self.window.rootViewController = rootViewController; 33 | [self.window makeKeyAndVisible]; 34 | return YES; 35 | } 36 | 37 | @end 38 | -------------------------------------------------------------------------------- /ios/PepperoniAppTemplate/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 | -------------------------------------------------------------------------------- /ios/PepperoniAppTemplate/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "20x20", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "20x20", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "29x29", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "29x29", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "40x40", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "40x40", 31 | "scale" : "3x" 32 | }, 33 | { 34 | "idiom" : "iphone", 35 | "size" : "60x60", 36 | "scale" : "2x" 37 | }, 38 | { 39 | "idiom" : "iphone", 40 | "size" : "60x60", 41 | "scale" : "3x" 42 | }, 43 | { 44 | "idiom" : "ios-marketing", 45 | "size" : "1024x1024", 46 | "scale" : "1x" 47 | } 48 | ], 49 | "info" : { 50 | "version" : 1, 51 | "author" : "xcode" 52 | } 53 | } -------------------------------------------------------------------------------- /ios/PepperoniAppTemplate/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | PepperoniAppTemplate 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIdentifier 12 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 13 | CFBundleInfoDictionaryVersion 14 | 6.0 15 | CFBundleName 16 | $(PRODUCT_NAME) 17 | CFBundlePackageType 18 | APPL 19 | CFBundleShortVersionString 20 | 1.0 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | 1 25 | LSRequiresIPhoneOS 26 | 27 | UILaunchStoryboardName 28 | LaunchScreen 29 | UIRequiredDeviceCapabilities 30 | 31 | armv7 32 | 33 | UISupportedInterfaceOrientations 34 | 35 | UIInterfaceOrientationPortrait 36 | UIInterfaceOrientationLandscapeLeft 37 | UIInterfaceOrientationLandscapeRight 38 | 39 | UIViewControllerBasedStatusBarAppearance 40 | 41 | NSLocationWhenInUseUsageDescription 42 | 43 | NSAppTransportSecurity 44 | 45 | NSExceptionDomains 46 | 47 | localhost 48 | 49 | NSExceptionAllowsInsecureHTTPLoads 50 | 51 | 52 | 53 | 54 | UIAppFonts 55 | 56 | Entypo.ttf 57 | EvilIcons.ttf 58 | Feather.ttf 59 | FontAwesome.ttf 60 | Foundation.ttf 61 | Ionicons.ttf 62 | MaterialCommunityIcons.ttf 63 | MaterialIcons.ttf 64 | Octicons.ttf 65 | SimpleLineIcons.ttf 66 | Zocial.ttf 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /ios/PepperoniAppTemplate/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 | -------------------------------------------------------------------------------- /ios/PepperoniAppTemplateTests/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 | -------------------------------------------------------------------------------- /ios/PepperoniAppTemplateTests/PepperoniAppTemplateTests.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 14 | #import 15 | 16 | #define TIMEOUT_SECONDS 180 17 | #define TEXT_TO_LOOK_FOR @"Increment counter" 18 | 19 | @interface PepperoniAppTemplateTests : XCTestCase 20 | 21 | @end 22 | 23 | @implementation PepperoniAppTemplateTests 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)testRendersMainScreen 39 | { 40 | UIViewController *vc = [[[RCTSharedApplication() 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 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "PepperoniAppTemplate", 3 | "author": "Futurice", 4 | "description": "React Native App Starter Kit for Android and iOS", 5 | "license": "MIT", 6 | "homepage": "http://getpepperoni.com", 7 | "bugs": "https://github.com/futurice/pepperoni-app-kit/issues", 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/futurice/pepperoni-app-kit" 11 | }, 12 | "keywords": [ 13 | "React Native", 14 | "Starter Kit", 15 | "Bitrise", 16 | "Redux", 17 | "Auth0" 18 | ], 19 | "version": "1.0.0", 20 | "private": false, 21 | "scripts": { 22 | "start": "node node_modules/react-native/local-cli/cli.js start", 23 | "bundle:ios": "node ./node_modules/react-native/local-cli/cli.js bundle --platform ios --entry-file index.js --bundle-output ios/PepperoniAppTemplate/main.jsbundle --dev=false --verbose", 24 | "test": "jest", 25 | "test:watch": "jest --watch", 26 | "lint": "eslint src test", 27 | "coverage": "rimraf coverage && jest --coverage", 28 | "version": "support/version-ios.sh" 29 | }, 30 | "jest": { 31 | "preset": "react-native", 32 | "setupFiles": [ 33 | "/test/setup.js" 34 | ], 35 | "transformIgnorePatterns": [ 36 | "node_modules/(?!(jest-)?react-native|react-navigation)" 37 | ] 38 | }, 39 | "dependencies": { 40 | "bluebird": "^3.3.5", 41 | "event-emitter": "^0.3.4", 42 | "immutable": "^3.7.6", 43 | "lodash": "^4.17.13", 44 | "moment": "^2.12.0", 45 | "prop-types": "^15.6.0", 46 | "react": "^16.0.0-beta.5", 47 | "react-native": "^0.49.3", 48 | "react-native-vector-icons": "^4.4.2", 49 | "react-navigation": "1.0.0-beta.11", 50 | "react-redux": "^5.0.6", 51 | "redux": "^3.4.0", 52 | "redux-logger": "^2.6.1", 53 | "redux-loop-symbol-ponyfill": "^2.2.0", 54 | "redux-promise": "^0.5.3", 55 | "redux-thunk": "^2.0.1", 56 | "standard-http-error": "^2.0.0" 57 | }, 58 | "devDependencies": { 59 | "babel-core": "^6.9.0", 60 | "babel-eslint": "^7.1.0", 61 | "babel-jest": "^17.0.2", 62 | "babel-polyfill": "^6.9.0", 63 | "babel-preset-react-native": "^1.9.0", 64 | "babel-preset-stage-0": "^6.5.0", 65 | "babel-register": "^6.9.0", 66 | "enzyme": "^3.0.0", 67 | "enzyme-adapter-react-16": "^1.0.2", 68 | "eslint": "^3.10.1", 69 | "eslint-plugin-babel": "^3.2.0", 70 | "eslint-plugin-react": "^6.7.1", 71 | "fetch-mock": "^5.5.0", 72 | "istanbul": "1.0.0-alpha.2", 73 | "jest": "^17.0.2", 74 | "plop": "^1.7.4", 75 | "react-addons-test-utils": "^15.4.2", 76 | "react-dom": "^16.0.0", 77 | "react-native-mock": "~0.2.5", 78 | "react-test-renderer": "~15.4.2", 79 | "remote-redux-devtools": "^0.5.7", 80 | "rimraf": "^2.5.2" 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /plopfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function (plop) { 2 | 3 | /* TODO 4 | ----------- 5 | ** __specs__ for module generator 6 | ** Additional prompt for stateless module generator 7 | ** Better way to append reducers ? If dev deletes the commented lines it won't work. 8 | ** Component generator 9 | ** Any way to get name inline ? Like ` plop module name ` 10 | **/ 11 | 12 | plop.setGenerator('module', { 13 | description: 'Generates new module with redux connection', 14 | prompts: [{ 15 | type: 'input', 16 | name: 'name', 17 | message: 'Module name (Casing will be modified)' 18 | }], 19 | actions: [ 20 | { 21 | type: 'add', 22 | path: 'src/modules/{{camelCase name}}/{{properCase name}}State.js', 23 | templateFile: 'generators/module/ModuleState.js.hbs' 24 | }, 25 | { 26 | type: 'add', 27 | path: 'src/modules/{{camelCase name}}/{{properCase name}}View.js', 28 | templateFile: 'generators/module/ModuleView.js.hbs' 29 | }, 30 | { 31 | type: 'add', 32 | path: 'src/modules/{{camelCase name}}/{{properCase name}}ViewContainer.js', 33 | templateFile: 'generators/module/ModuleViewContainer.js.hbs' 34 | }, 35 | { 36 | type: 'modify', 37 | path: 'src/redux/reducer.js', 38 | pattern: /\/\/ ## Generator Reducer Imports/gi, 39 | template: '// ## Generator Reducer Imports\r\nimport {{properCase name}}Reducer from \'../modules/{{camelCase name}}/{{properCase name}}State\';' 40 | }, 41 | { 42 | type: 'modify', 43 | path: 'src/redux/reducer.js', 44 | pattern: /\/\/ ## Generator Reducers/gi, 45 | template: '// ## Generator Reducers\r\n {{camelCase name}}: {{properCase name}}Reducer,' 46 | } 47 | ] 48 | }); 49 | } 50 | -------------------------------------------------------------------------------- /src/components/DeveloperMenu.android.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import * as snapshot from '../utils/snapshot'; 3 | 4 | import { 5 | View, 6 | Text, 7 | TouchableOpacity, 8 | StyleSheet 9 | } from 'react-native'; 10 | 11 | /** 12 | * Simple developer menu, which allows e.g. to clear the app state. 13 | * It can be accessed through a tiny button in the bottom right corner of the screen. 14 | * ONLY FOR DEVELOPMENT MODE! 15 | */ 16 | class DeveloperMenu extends Component { 17 | static displayName = 'DeveloperMenu'; 18 | 19 | constructor(props) { 20 | super(props); 21 | this.state = {visible: false}; 22 | } 23 | 24 | showDeveloperMenu = () => { 25 | this.setState({isVisible: true}); 26 | }; 27 | 28 | clearState = async () => { 29 | await snapshot.clearSnapshot(); 30 | console.warn('(╯°□°）╯︵ ┻━┻ \nState cleared, Cmd+R to reload the application now'); 31 | this.closeMenu(); 32 | }; 33 | 34 | closeMenu = () => { 35 | this.setState({isVisible: false}); 36 | }; 37 | 38 | renderMenuItem(text, onPress) { 39 | return ( 40 | 45 | {text} 46 | 47 | ); 48 | } 49 | 50 | render() { 51 | if (!__DEV__) { 52 | return null; 53 | } 54 | 55 | if (!this.state.isVisible) { 56 | return ( 57 | 61 | ); 62 | } 63 | 64 | const buttons = [ 65 | this.renderMenuItem('Clear state', this.clearState), 66 | this.renderMenuItem('Cancel', this.closeMenu) 67 | ]; 68 | 69 | return ( 70 | 71 | {buttons} 72 | 73 | ); 74 | } 75 | } 76 | 77 | const styles = StyleSheet.create({ 78 | circle: { 79 | position: 'absolute', 80 | bottom: 5, 81 | right: 5, 82 | width: 10, 83 | height: 10, 84 | borderRadius: 5, 85 | backgroundColor: '#fff' 86 | }, 87 | menu: { 88 | backgroundColor: 'white', 89 | position: 'absolute', 90 | left: 0, 91 | right: 0, 92 | bottom: 0 93 | }, 94 | menuItem: { 95 | flex: 1, 96 | flexDirection: 'row', 97 | alignItems: 'center', 98 | borderTopWidth: 1, 99 | borderTopColor: '#eee', 100 | padding: 10, 101 | height: 60 102 | }, 103 | menuItemText: { 104 | fontSize: 20 105 | } 106 | }); 107 | 108 | export default DeveloperMenu; 109 | -------------------------------------------------------------------------------- /src/components/DeveloperMenu.ios.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import * as snapshot from '../utils/snapshot'; 3 | 4 | import { 5 | TouchableOpacity, 6 | ActionSheetIOS, 7 | StyleSheet 8 | } from 'react-native'; 9 | 10 | /** 11 | * Simple developer menu, which allows e.g. to clear the app state. 12 | * It can be accessed through a tiny button in the bottom right corner of the screen. 13 | * ONLY FOR DEVELOPMENT MODE! 14 | */ 15 | class DeveloperMenu extends Component { 16 | static displayName = 'DeveloperMenu'; 17 | 18 | showDeveloperMenu() { 19 | const options = { 20 | clearState: 0, 21 | showLogin: 1, 22 | cancel: 2 23 | }; 24 | 25 | const callback = async index => { 26 | if (index === options.clearState) { 27 | await snapshot.clearSnapshot(); 28 | console.warn('(╯°□°）╯︵ ┻━┻ \nState cleared, Cmd+R to reload the application now'); 29 | } 30 | }; 31 | 32 | ActionSheetIOS.showActionSheetWithOptions({ 33 | options: [ 34 | 'Clear state', 35 | 'Cancel' 36 | ], 37 | cancelButtonIndex: options.cancel 38 | }, callback); 39 | } 40 | 41 | render() { 42 | if (!__DEV__) { 43 | return null; 44 | } 45 | 46 | return ( 47 | 51 | ); 52 | } 53 | } 54 | 55 | const styles = StyleSheet.create({ 56 | circle: { 57 | position: 'absolute', 58 | bottom: 5, 59 | right: 5, 60 | width: 10, 61 | height: 10, 62 | borderRadius: 5, 63 | backgroundColor: '#fff' 64 | } 65 | }); 66 | 67 | export default DeveloperMenu; 68 | -------------------------------------------------------------------------------- /src/components/DeveloperMenu.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {View} from 'react-native'; 3 | 4 | // For tests 5 | const DeveloperMenu = () => ; 6 | export default DeveloperMenu; 7 | -------------------------------------------------------------------------------- /src/modules/AppView.android.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import {View, StyleSheet, StatusBar, ActivityIndicator, BackHandler} from 'react-native'; 4 | import NavigatorViewContainer from './navigator/NavigatorViewContainer'; 5 | import * as snapshotUtil from '../utils/snapshot'; 6 | import * as SessionStateActions from '../modules/session/SessionState'; 7 | import store from '../redux/store'; 8 | import DeveloperMenu from '../components/DeveloperMenu'; 9 | 10 | import {NavigationActions} from 'react-navigation'; 11 | 12 | class AppView extends Component { 13 | static displayName = 'AppView'; 14 | 15 | static propTypes = { 16 | isReady: PropTypes.bool.isRequired, 17 | dispatch: PropTypes.func.isRequired 18 | }; 19 | 20 | navigateBack() { 21 | const navigatorState = store.getState().get('navigatorState'); 22 | 23 | const currentStackScreen = navigatorState.get('index'); 24 | const currentTab = navigatorState.getIn(['routes', 0, 'index']); 25 | 26 | if (currentTab !== 0 || currentStackScreen !== 0) { 27 | store.dispatch(NavigationActions.back()); 28 | return true; 29 | } 30 | 31 | // otherwise let OS handle the back button action 32 | return false; 33 | } 34 | 35 | componentWillMount() { 36 | BackHandler.addEventListener('hardwareBackPress', this.navigateBack); 37 | } 38 | 39 | componentDidMount() { 40 | snapshotUtil.resetSnapshot() 41 | .then(snapshot => { 42 | const {dispatch} = this.props; 43 | 44 | if (snapshot) { 45 | dispatch(SessionStateActions.resetSessionStateFromSnapshot(snapshot)); 46 | } else { 47 | dispatch(SessionStateActions.initializeSessionState()); 48 | } 49 | 50 | store.subscribe(() => { 51 | snapshotUtil.saveSnapshot(store.getState()); 52 | }); 53 | }); 54 | } 55 | 56 | render() { 57 | if (!this.props.isReady) { 58 | return ( 59 | 60 | 61 | 62 | ); 63 | } 64 | 65 | return ( 66 | 67 | 68 | 69 | {__DEV__ && } 70 | 71 | ); 72 | } 73 | } 74 | 75 | const styles = StyleSheet.create({ 76 | centered: { 77 | flex: 1, 78 | alignSelf: 'center' 79 | } 80 | }); 81 | 82 | export default AppView; 83 | -------------------------------------------------------------------------------- /src/modules/AppView.ios.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import {View, StyleSheet, StatusBar, ActivityIndicator} from 'react-native'; 4 | import NavigatorViewContainer from './navigator/NavigatorViewContainer'; 5 | import * as snapshotUtil from '../utils/snapshot'; 6 | import * as SessionStateActions from '../modules/session/SessionState'; 7 | import store from '../redux/store'; 8 | import DeveloperMenu from '../components/DeveloperMenu'; 9 | 10 | class AppView extends Component { 11 | static displayName = 'AppView'; 12 | 13 | static propTypes = { 14 | isReady: PropTypes.bool.isRequired, 15 | dispatch: PropTypes.func.isRequired 16 | }; 17 | 18 | componentDidMount() { 19 | snapshotUtil.resetSnapshot() 20 | .then(snapshot => { 21 | const {dispatch} = this.props; 22 | 23 | if (snapshot) { 24 | dispatch(SessionStateActions.resetSessionStateFromSnapshot(snapshot)); 25 | } else { 26 | dispatch(SessionStateActions.initializeSessionState()); 27 | } 28 | 29 | store.subscribe(() => { 30 | snapshotUtil.saveSnapshot(store.getState()); 31 | }); 32 | }); 33 | } 34 | 35 | render() { 36 | if (!this.props.isReady) { 37 | return ( 38 | 39 | 40 | 41 | ); 42 | } 43 | 44 | return ( 45 | 46 | 47 | 48 | {__DEV__ && } 49 | 50 | ); 51 | } 52 | } 53 | 54 | const styles = StyleSheet.create({ 55 | centered: { 56 | flex: 1, 57 | alignSelf: 'center' 58 | } 59 | }); 60 | 61 | export default AppView; 62 | -------------------------------------------------------------------------------- /src/modules/AppViewContainer.js: -------------------------------------------------------------------------------- 1 | import {connect} from 'react-redux'; 2 | import AppView from './AppView'; 3 | 4 | export default connect( 5 | state => ({ 6 | isReady: state.getIn(['session', 'isReady']) 7 | }) 8 | )(AppView); 9 | -------------------------------------------------------------------------------- /src/modules/__specs__/AppView.spec.js: -------------------------------------------------------------------------------- 1 | /*eslint-disable max-nested-callbacks*/ 2 | 3 | import React from 'react'; 4 | 5 | import {shallow, configure} from 'enzyme'; 6 | 7 | // fix Enzyme to work with React 16 as per https://github.com/airbnb/enzyme#installation 8 | import Adapter from 'enzyme-adapter-react-16'; 9 | 10 | configure({adapter: new Adapter()}); 11 | 12 | import {ActivityIndicator} from 'react-native'; 13 | import AppView from '../AppView'; 14 | 15 | describe('', () => { 16 | describe('isReady', () => { 17 | it('should render a if not ready', () => { 18 | const fn = () => {}; 19 | const wrapper = shallow( 20 | 25 | ); 26 | 27 | expect(wrapper.find(ActivityIndicator).length).toBe(1); 28 | }); 29 | 30 | it('should not render a if ready', () => { 31 | const fn = () => {}; 32 | const wrapper = shallow( 33 | 38 | ); 39 | 40 | expect(wrapper.find(ActivityIndicator).length).toBe(0); 41 | }); 42 | }); 43 | }); 44 | -------------------------------------------------------------------------------- /src/modules/colors/ColorView.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { 4 | Button, 5 | View, 6 | StyleSheet 7 | } from 'react-native'; 8 | 9 | import Icon from 'react-native-vector-icons/MaterialIcons'; 10 | 11 | const color = () => Math.floor(255 * Math.random()); 12 | 13 | /** 14 | * Sample view to demonstrate StackNavigator 15 | * @TODO remove this module in a live application. 16 | */ 17 | class ColorView extends Component { 18 | static displayName = 'ColorView'; 19 | 20 | static navigationOptions = { 21 | title: 'Colors!', 22 | tabBarIcon: (props) => ( 23 | 24 | ), 25 | // TODO: move this into global config? 26 | headerTintColor: 'white', 27 | headerStyle: { 28 | backgroundColor: '#39babd' 29 | } 30 | } 31 | 32 | static propTypes = { 33 | navigate: PropTypes.func.isRequired 34 | }; 35 | 36 | constructor(props) { 37 | super(props); 38 | this.state = { 39 | background: `rgba(${color()},${color()},${color()}, 1)` 40 | }; 41 | } 42 | 43 | open = () => { 44 | this.props.navigate({routeName: 'InfiniteColorStack'}); 45 | }; 46 | 47 | render() { 48 | const buttonText = 'Open in Stack Navigator'; 49 | return ( 50 | 51 |