├── .babelrc ├── .buckconfig ├── .codeclimate.yml ├── .eslintignore ├── .eslintrc ├── .flowconfig ├── .gitignore ├── .watchmanconfig ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── android ├── app │ ├── BUCK │ ├── build.gradle │ ├── proguard-rules.pro │ ├── react.gradle │ └── src │ │ └── main │ │ ├── AndroidManifest.xml │ │ ├── java │ │ └── com │ │ │ └── reactnativeboilerplate │ │ │ └── MainActivity.java │ │ └── res │ │ ├── mipmap-hdpi │ │ └── ic_launcher.png │ │ ├── mipmap-mdpi │ │ └── ic_launcher.png │ │ ├── mipmap-xhdpi │ │ └── ic_launcher.png │ │ ├── mipmap-xxhdpi │ │ └── ic_launcher.png │ │ └── values │ │ ├── strings.xml │ │ └── styles.xml ├── build.gradle ├── gradle.properties ├── gradle │ └── wrapper │ │ ├── gradle-wrapper.jar │ │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat └── settings.gradle ├── code_of_conduct.md ├── index.android.js ├── index.ios.js ├── ios ├── RNConfig.h ├── RNConfig.m ├── ReactNativeBoilerplate.xcodeproj │ ├── project.pbxproj │ └── xcshareddata │ │ └── xcschemes │ │ ├── Development.xcscheme │ │ ├── Production.xcscheme │ │ └── Staging.xcscheme ├── ReactNativeBoilerplate │ ├── AppDelegate.h │ ├── AppDelegate.m │ ├── Base.lproj │ │ └── LaunchScreen.xib │ ├── Images.xcassets │ │ └── AppIcon.appiconset │ │ │ └── Contents.json │ ├── Info.plist │ └── main.m └── ReactNativeBoilerplateTests │ ├── Info.plist │ └── ReactNativeBoilerplateTests.m ├── package.json ├── src ├── __specs__ │ ├── app.spec.js │ └── sanityCheck.spec.js ├── app.js ├── components │ ├── Comment.js │ ├── CommentBox.js │ ├── CommentForm.js │ ├── CommentList.js │ ├── __specs__ │ │ ├── Comment.spec.js │ │ ├── CommentBox.spec.js │ │ ├── CommentForm.spec.js │ │ └── CommentList.spec.js │ └── app.js ├── modules │ ├── auth │ │ ├── __specs__ │ │ │ ├── authAction.spec.js │ │ │ ├── authReducer.spec.js │ │ │ └── authSaga.spec.js │ │ ├── actions.js │ │ ├── constants.js │ │ ├── reducer.js │ │ └── saga.js │ ├── reducers.js │ └── sagas.js ├── screens │ ├── auth │ │ ├── components │ │ │ ├── registerComponent.android.js │ │ │ ├── registerComponent.ios.js │ │ │ └── registerComponentStyles.js │ │ └── containers │ │ │ └── authContainer.js │ └── root.js ├── services │ └── api │ │ ├── __specs__ │ │ └── api.spec.js │ │ └── api.js └── store │ └── store.js └── test └── setup-tests.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "retainLines": true, 3 | "compact": true, 4 | "comments": false, 5 | "presets": ["react-native"], 6 | "sourceMaps": false 7 | } 8 | -------------------------------------------------------------------------------- /.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /.codeclimate.yml: -------------------------------------------------------------------------------- 1 | --- 2 | engines: 3 | duplication: 4 | enabled: true 5 | config: 6 | languages: 7 | - ruby 8 | - javascript 9 | - python 10 | - php 11 | eslint: 12 | enabled: true 13 | fixme: 14 | enabled: true 15 | ratings: 16 | paths: 17 | - "**.inc" 18 | - "**.js" 19 | - "**.jsx" 20 | - "**.module" 21 | - "**.php" 22 | - "**.py" 23 | - "**.rb" 24 | exclude_paths: 25 | - "src/**/__specs__/*.spec.js" 26 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | android/** 2 | node_modules/** 3 | coverage/** 4 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "env": { 4 | "es6": true 5 | }, 6 | "plugins": [ 7 | "react", 8 | "react-native" 9 | ], 10 | "ecmaFeatures": { 11 | "jsx": true, 12 | "arrowFunctions": true, 13 | "blockBindings": true, 14 | "classes": true, 15 | "defaultParams": true, 16 | "destructuring": true, 17 | "forOf": true, 18 | "generators": false, 19 | "modules": true, 20 | "objectLiteralComputedProperties": true, 21 | "objectLiteralDuplicateProperties": false, 22 | "objectLiteralShorthandProperties": true, 23 | "objectLiteralShorthandMethods": true, 24 | "spread": true, 25 | "superInFunctions": true, 26 | "templateStrings": true 27 | }, 28 | "rules": { 29 | "indent": [2, 2], 30 | "quotes": [2, "single"], 31 | "linebreak-style": [2, "unix"], 32 | "semi": [2, "always"], 33 | "comma-dangle": [1, "always-multiline"], 34 | "comma-spacing": [2, {"before": false, "after": true}], 35 | "constructor-super": 2, 36 | "no-confusing-arrow": 2, 37 | "no-constant-condition": 2, 38 | "no-class-assign": 2, 39 | "no-const-assign": 2, 40 | "no-dupe-class-members": 2, 41 | "no-var": 1, 42 | "no-this-before-super": 2, 43 | "object-shorthand": [2, "always"], 44 | "prefer-spread": 1, 45 | "prefer-template": 1, 46 | "require-yield": 2, 47 | "jsx-quotes": 1, 48 | "space-before-blocks": [ 2, "always" ], 49 | "space-before-function-paren": [ 2, { "anonymous": "always", "named": "never" } ], 50 | "object-curly-spacing": [ 2, "always" ], 51 | "react/jsx-boolean-value": 1, 52 | "react/jsx-closing-bracket-location": 1, 53 | "react/jsx-curly-spacing": 1, 54 | "react/jsx-indent-props": [2, 2], 55 | "react/jsx-max-props-per-line": 1, 56 | "react/jsx-no-bind": 1, 57 | "react/jsx-no-duplicate-props": 1, 58 | "react/jsx-no-undef": 1, 59 | "react/jsx-sort-prop-types": 1, 60 | "react/jsx-sort-props": 1, 61 | "react/jsx-uses-react": 1, 62 | "react/jsx-uses-vars": 1, 63 | "react/no-danger": 1, 64 | "react/no-did-mount-set-state": 1, 65 | "react/no-did-update-set-state": 1, 66 | "react/no-direct-mutation-state": 1, 67 | "react/no-multi-comp": 1, 68 | "react/no-set-state": 1, 69 | "react/no-unknown-property": 1, 70 | "react/prefer-es6-class": 1, 71 | "react/prop-types": 2, 72 | "react/react-in-jsx-scope": 1, 73 | "react/require-extension": 1, 74 | "react/self-closing-comp": 1, 75 | "react/sort-comp": 1, 76 | "react/wrap-multilines": 1 77 | }, 78 | "globals": { 79 | "after": false, 80 | "afterEach": false, 81 | "before": false, 82 | "beforeEach": false, 83 | "describe": false, 84 | "context": false, 85 | "it": false, 86 | "fetch": false, 87 | "process": false, 88 | "expect": false, 89 | "global": false, 90 | "require": false 91 | }, 92 | "extends": "eslint:recommended" 93 | } 94 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | 3 | # We fork some components by platform. 4 | .*/*.web.js 5 | .*/*.android.js 6 | 7 | # Some modules have their own node_modules with overlap 8 | .*/node_modules/node-haste/.* 9 | 10 | # Ugh 11 | .*/node_modules/babel.* 12 | .*/node_modules/babylon.* 13 | .*/node_modules/invariant.* 14 | 15 | # Ignore react and fbjs where there are overlaps, but don't ignore 16 | # anything that react-native relies on 17 | .*/node_modules/fbjs/lib/Map.js 18 | .*/node_modules/fbjs/lib/fetch.js 19 | .*/node_modules/fbjs/lib/ExecutionEnvironment.js 20 | .*/node_modules/fbjs/lib/ErrorUtils.js 21 | 22 | # Flow has a built-in definition for the 'react' module which we prefer to use 23 | # over the currently-untyped source 24 | .*/node_modules/react/react.js 25 | .*/node_modules/react/lib/React.js 26 | .*/node_modules/react/lib/ReactDOM.js 27 | 28 | .*/__mocks__/.* 29 | .*/__tests__/.* 30 | 31 | .*/commoner/test/source/widget/share.js 32 | 33 | # Ignore commoner tests 34 | .*/node_modules/commoner/test/.* 35 | 36 | # See https://github.com/facebook/flow/issues/442 37 | .*/react-tools/node_modules/commoner/lib/reader.js 38 | 39 | # Ignore jest 40 | .*/node_modules/jest-cli/.* 41 | 42 | # Ignore Website 43 | .*/website/.* 44 | 45 | # Ignore generators 46 | .*/local-cli/generator.* 47 | 48 | # Ignore BUCK generated folders 49 | .*\.buckd/ 50 | 51 | .*/node_modules/is-my-json-valid/test/.*\.json 52 | .*/node_modules/iconv-lite/encodings/tables/.*\.json 53 | .*/node_modules/y18n/test/.*\.json 54 | .*/node_modules/spdx-license-ids/spdx-license-ids.json 55 | .*/node_modules/spdx-exceptions/index.json 56 | .*/node_modules/resolve/test/subdirs/node_modules/a/b/c/x.json 57 | .*/node_modules/resolve/lib/core.json 58 | .*/node_modules/jsonparse/samplejson/.*\.json 59 | .*/node_modules/json5/test/.*\.json 60 | .*/node_modules/ua-parser-js/test/.*\.json 61 | .*/node_modules/builtin-modules/builtin-modules.json 62 | .*/node_modules/binary-extensions/binary-extensions.json 63 | .*/node_modules/url-regex/tlds.json 64 | .*/node_modules/joi/.*\.json 65 | .*/node_modules/isemail/.*\.json 66 | .*/node_modules/tr46/.*\.json 67 | 68 | 69 | [include] 70 | 71 | [libs] 72 | node_modules/react-native/Libraries/react-native/react-native-interface.js 73 | node_modules/react-native/flow 74 | flow/ 75 | 76 | [options] 77 | module.system=haste 78 | 79 | esproposal.class_static_fields=enable 80 | esproposal.class_instance_fields=enable 81 | 82 | munge_underscores=true 83 | 84 | module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub' 85 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\)$' -> 'RelativeImageStub' 86 | 87 | suppress_type=$FlowIssue 88 | suppress_type=$FlowFixMe 89 | suppress_type=$FixMe 90 | 91 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-3]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) 92 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-3]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ 93 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 94 | 95 | [version] 96 | 0.23.0 97 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IJ 26 | # 27 | .idea 28 | .gradle 29 | local.properties 30 | 31 | # node.js 32 | # 33 | node_modules/ 34 | npm-debug.log 35 | 36 | # coverage 37 | # 38 | coverage/ 39 | .nyc_output 40 | 41 | # config 42 | # 43 | config.json 44 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | We love contributions from everyone. 4 | By participating in this project, 5 | you agree to abide by our [code_of_conduct]. 6 | 7 | [code_of_conduct]: code_of_conduct.md 8 | 9 | We expect everyone to follow the code of conduct 10 | anywhere in Multunus' project codebases, 11 | issue trackers, chatrooms, and mailing lists. 12 | 13 | ## Contributing Code 14 | 15 | Checkout the latest master to make sure the feature hasn't been implemented or 16 | the bug hasn't been fixed yet. 17 | 18 | Check the issue tracker to make sure someone already hasn't requested it and/or 19 | contributed to it. 20 | 21 | Fork the repo. 22 | 23 | $(INSTALL_DEPENDENCIES) 24 | 25 | Make sure the tests pass: 26 | 27 | $(TEST_RUNNER) 28 | 29 | Make your change, with new passing tests. Follow this [style guide][style]. 30 | 31 | [style]: https://github.com/thoughtbot/guides/tree/master/style 32 | 33 | Push to your fork. Write a [good commit message][commit]. Submit a pull request. 34 | 35 | [commit]: http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html 36 | 37 | Others will give constructive feedback. 38 | This is a time for discussion and improvements, 39 | and making the necessary changes will be required before we can 40 | merge the contribution. 41 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2016 Multunus Software Pvt. Ltd. 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Multunus | Test driving react native applications 2 | 3 | React Native is a game changing mobile app development framework that concentrates on fast development. Based on the philosophy "Learn once, write anywhere", it makes it possible to build IOS, Android and Windows mobile apps just using Javascript. 4 | 5 | So React Native helps you to build awesome applications across multiple platforms. Now you have one question lingering in your head and that is the reason you are reading this post. How am I going to test these ? We also had the same question while working on React Native and couldn't find a hands-on tutorial that helps a beginner get started on writing tests for React Native applications. Read on this post and once you finish it, you will feel much more confident in testing React Native applications. 6 | 7 | This tutorial assumes you are comfortable working with React Native, basic concepts of React, and testing of Javascript code. If not, feel free to checkout the following links. 8 | 9 | 10 | 11 | After completing this tutorial you will be able to 12 | 13 | * Write unit tests for your component logic. 14 | * Test behaviour of components on various user interactions like press and scroll. 15 | * Easily test defaultProps, propTypes, state transitions and similar aspects of React components. 16 | * Appreciate how TDD encourages you to follow idioms in react. 17 | 18 | 19 | 20 | Before we actually jump into the code, let us take a brief walkthrough over our test setup. We will be using the following libraries for testing. 21 | 22 | * [Babel][1]: A Javascript compiler to transpile our javascript code so that it is compatible everywhere. 23 | * [Mocha][2]: A Javascript testing framework running on [node.js][3] to run our tests. 24 | * [Chai][4] : A library that provides us with interfaces to write assertions in our test. 25 | * [Sinon][5]: A library that provides us with spies, stubs and mocks which are used extensively while testing. 26 | * [React Native Mock][6] : Library that provides a completely mocked version of react-native that is easily testable. 27 | * [Enzyme][7]: A React test utility that helps us to write painless tests for react components.JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components. 28 | 29 | Setting all these up is a pain, but we have done that for you. Checkout our [react native boiler plate][8] that helps you kickstart your application development with all the setup done for state model, testing, continuous integration etc. Go to your console and type the following commands. 30 | 31 | git clone https://github.com/multunus/react-native-boilerplate ReactNativeBoilerplate 32 | cd ReactNativeBoilerplate 33 | npm install 34 | 35 | Rename `config.example.json` to `config.json` and modify it as required. 36 | 37 | The app is setup to use the [NodeJS JWT Authentication sample server][9], follow the instructions and update the baseURL in`config.json` to a valid url say `http://localhost`. 38 | 39 | That's it. Time for coding! 40 | 41 | It's time to rewind back a little bit and refresh the first tutorial you ever did on [React][10]. The simple Comment Box. If you haven't gone through it, you can take a look at it [here][11]. We will build the same application in React Native using [TDD][12]. We will be replacing the react components used in the tutorial by native components for android and using [Async Storage][13] provided by react native to store our data instead of a server with a database. If you are not comfortable with Test Driven Development, you may choose to write your code and then write tests for it. But we feel TDD improves the quality of your code and especially while working on React, this is more evident as the components you build will be simple, testable and you will refrain yourselves from writing too much of logic into your components. 42 | 43 | We are going to build the app in Android platform. But don't worry if you are using react native for IOS or Windows mobile app development, the testing techniques you learn here is independent of the platform and can be applied across platforms. 44 | We shall use the same component structure as in the react tutorial for our app. 45 | 46 | * A view of all of the comments 47 | * A form to submit a comment 48 | 49 | We will have the following component hierarchy 50 | 51 | -`CommentBox`: The root component 52 | -`CommentList` : To display a list of all components 53 | -`Comment` : To display a single comment 54 | -`CommentForm` : A form for user to write a comment 55 | 56 | **Our first test** 57 | 58 | Okay, now it's time for coding. Let us write our first test. The components for the app are written in `src/components` directory and the corresponding tests for components are written in `src/components/__specs__` directory. Open a new file `src/components/__specs__/Comment.spec.js` and write the following code. 59 | 60 | ```js 61 | import React, { View } from 'react-native'; 62 | import { shallow } from 'enzyme'; 63 | import { expect } from 'chai'; 64 | 65 | import Comment from '../Comment.js'; 66 | 67 | describe('', () => { 68 | it('should be a view component', () => { 69 | const wrapper = shallow(); 70 | 71 | expect(wrapper.type()).to.equal(View); 72 | }); 73 | }); 74 | ``` 75 | 76 | That is a simple test to begin with. Let's checkout what is going on here. We are using [shallow rendering API][14] of enzyme here. It is useful to constrain yourself to testing a component as a unit, and to ensure that your tests aren't indirectly asserting on behaviour of child components. `shallow()` method returns a shallow wrapper object around the component that is to be tested. Enzyme provides a rich set of methods that can be called on the wrapper instance, for testing various aspects of a component. Check out the [docs][14] . In this spec we are just checking the type of the component. 77 | 78 | We must appreciate the work of Leland Richardson for building [Enzyme][15] ( JS testing utility which helps us write tests for react "web" components) and [React Native Mock][6] ( fully mocked and test-friendly version of react native, which makes enzyme compatible with react native). The result of this effort is painless testing of react native components. 79 | 80 | Now save the file and run `npm test` from console and watch your tests fail. Now we build the `Comment` component. Open `src/components/Comment.js` and write the following code. 81 | 82 | ```js 83 | import React, {Component, View } from 'react-native'; 84 | 85 | export default class Comment extends React.Component { 86 | render() { 87 | return( 88 | 89 | 90 | ); 91 | } 92 | } 93 | ``` 94 | 95 | Now run `npm test` from console and see your tests pass. Bingo! Now we will be progressively writing tests and code to build the complete app. We'll be following the same procedure for the rest of our tutorial. Write tests, watch it fail, write code, see it passing, refactor if necessary. You can read more about [Red Green Refactor here][16] . 96 | Now that we're all good to go, let's start with the topmost component in the component structure. 97 | 98 | `src/components/__specs__/CommentBox.spec.js` 99 | 100 | ```js 101 | import React, { View, Text } from 'react-native'; 102 | import { shallow } from 'enzyme'; 103 | import { expect } from 'chai'; 104 | 105 | import CommentBox from '../CommentBox.js'; 106 | 107 | describe('', () => { 108 | beforeEach(function() { 109 | wrapper = shallow(); 110 | }); 111 | 112 | it('should be a view component', () => { 113 | expect(wrapper.type()).to.equal(View); 114 | }); 115 | 116 | it('should have a title Comment It', () => { 117 | expect(wrapper.contains(Comment It)).to.equal(true); 118 | }); 119 | }); 120 | ``` 121 | 122 | These tests describe CommentBox to be a View component and have a Text component inside it. We'll write minimal amount of code to make this test pass. and a Text component with the text "Comment It" in it. Now the actual code. 123 | 124 | `src/components/CommentBox.js` 125 | 126 | ```js 127 | import React, {Component, Text, View } from 'react-native'; 128 | 129 | export default class CommentBox extends React.Component { 130 | render() { 131 | return( 132 | 133 | Comment It 134 | 135 | ); 136 | } 137 | } 138 | ``` 139 | 140 | We need a CommentList and CommentForm component inside our CommentBox. 141 | We'll just define these components without working logic just for now, and come back to these components and complete them later. 142 | 143 | `src/components/__specs__/CommentForm.spec.js` 144 | 145 | ```js 146 | import React, { View } from 'react-native'; 147 | import { shallow } from 'enzyme'; 148 | import { expect } from 'chai'; 149 | 150 | import CommentForm from '../CommentForm.js'; 151 | 152 | describe('', () => { 153 | it('should be a view component', () => { 154 | wrapper = shallow(); 155 | 156 | expect(wrapper.type()).to.equal(View); 157 | }); 158 | }); 159 | ``` 160 | 161 | `src/components/CommentForm.js` 162 | 163 | ```js 164 | import React, {Component, View } from 'react-native'; 165 | 166 | export default class CommentForm extends React.Component { 167 | render() { 168 | return( 169 | 170 | 171 | ); 172 | } 173 | } 174 | ``` 175 | 176 | `src/components/__specs__/CommentList.spec.js` 177 | ```js 178 | import React, { ListView } from 'react-native'; 179 | 180 | import { shallow } from 'enzyme'; 181 | import { expect } from 'chai'; 182 | 183 | import CommentList from '../CommentList.js'; 184 | 185 | describe('', () => { 186 | it('should be a ListView component', () => { 187 | const wrapper = shallow(); 188 | 189 | expect(wrapper.type()).to.equal(ListView); 190 | }); 191 | }); 192 | ``` 193 | 194 | `src/components/CommentList.js` 195 | ```js 196 | import React, {Component, ListView} from 'react-native'; 197 | 198 | export default class CommentList extends React.Component { 199 | render() { 200 | return( 201 | 202 | ); 203 | } 204 | } 205 | ``` 206 | 207 | Let's add them to CommentBox component. Add a couple of specs to CommentBox.spec.js as follows 208 | 209 | `src/components/__specs__/CommentBox.spec.js` 210 | ```js 211 | import React, { View, Text } from 'react-native'; 212 | import { shallow } from 'enzyme'; 213 | import { expect } from 'chai'; 214 | 215 | import CommentBox from '../CommentBox.js'; 216 | import CommentList from '../CommentList.js'; 217 | import CommentForm from '../CommentForm.js'; 218 | 219 | describe('', () => { 220 | beforeEach(function() { 221 | wrapper = shallow(); 222 | }); 223 | 224 | it('should be a view component', () => { 225 | expect(wrapper.type()).to.equal(View); 226 | }); 227 | 228 | it('should have a title Comment It', () => { 229 | expect(wrapper.contains(Comment It)).to.equal(true); 230 | }); 231 | 232 | it('should render CommentList component', () => { 233 | expect(wrapper.find(CommentList)).to.have.length(1); 234 | }); 235 | 236 | it('should render CommentForm component', () => { 237 | expect(wrapper.find(CommentForm)).to.have.length(1); 238 | }); 239 | }); 240 | ``` 241 | 242 | `src/components/CommentBox.js` 243 | ```js 244 | import React, {Component,Text, View} from 'react-native'; 245 | 246 | import CommentList from './CommentList.js'; 247 | import CommentForm from './CommentForm.js'; 248 | 249 | export default class CommentBox extends React.Component { 250 | render() { 251 | return( 252 | 253 | Comment It 254 | 255 | 256 | 257 | ); 258 | } 259 | } 260 | ``` 261 | Now that we have the whole structure in place, we'll implement with the functionality starting with Comment component. 262 | 263 | For each comment we'll pass author name of the comment and the actual comment as props. Comment component should take these props and render both the author name and actual comment. 264 | 265 | `src/components/__specs__/Comment.spec.js` 266 | ```js 267 | import React, { View, Text } from 'react-native'; 268 | import { shallow } from 'enzyme'; 269 | import { expect } from 'chai'; 270 | 271 | import Comment from '../Comment.js'; 272 | 273 | describe('', () => { 274 | it('should be a view component', () => { 275 | const wrapper = shallow(); 276 | 277 | expect(wrapper.type()).to.equal(View); 278 | }); 279 | 280 | it('should render 2 text components', () => { 281 | const wrapper = shallow(); 282 | 283 | expect(wrapper.find(Text)).to.have.length(2); 284 | }); 285 | 286 | it('should render the given comment', () => { 287 | const wrapper = shallow( This is a comment ); 288 | 289 | expect(wrapper.contains( This is a comment )).to.equal(true); 290 | }); 291 | 292 | it('should render the given author name', () => { 293 | const wrapper = shallow(); 294 | 295 | expect(wrapper.contains(Author)).to.equal(true); 296 | }); 297 | }); 298 | ``` 299 | 300 | `src/components/Comment.js` 301 | ```js 302 | import React, {Component, View, Text} from 'react-native'; 303 | 304 | export default class Comment extends React.Component { 305 | render() { 306 | return( 307 | 308 | 309 | {this.props.author} 310 | 311 | 312 | {this.props.children} 313 | 314 | 315 | ); 316 | } 317 | } 318 | ``` 319 | Aha! We have successfully test-driven our first React Native component. 320 | 321 | 322 | 323 | Since we have comments now, let's list them out in our CommentList component. The CommentList component takes all the comment data as an array of JSONs and render each comment. 324 | Feel free to refer docsif you have any questions on usage of [ListView][17]. 325 | 326 | `src/components/__specs__/CommentList.spec.js` 327 | ```js 328 | import React, { View, ListView } from 'react-native'; 329 | import { shallow } from 'enzyme'; 330 | import { expect } from 'chai'; 331 | 332 | import CommentList from '../CommentList.js'; 333 | import Comment from '../Comment.js'; 334 | 335 | describe('', () => { 336 | beforeEach(function() { 337 | data = [ 338 | { author: "Pete Hunt", text: "This is one comment"}, 339 | { author: "Jordan Walke", text: "This is a super comment"}, 340 | { author: "Jordan Walkerr", text: "This is an ordinary comment"} 341 | ]; 342 | }); 343 | 344 | it('should define its propTypes', () => { 345 | expect(CommentList.propTypes.data).to.be.an('function'); 346 | }); 347 | 348 | it('should be a ListView component', () => { 349 | const wrapper = shallow(); 350 | 351 | expect(wrapper.type()).to.equal(ListView); 352 | }); 353 | 354 | it('should have correct datasource in state', () => { 355 | const wrapper = shallow(); 356 | 357 | expect(wrapper.state('dataSource')._dataBlob).to.equal(data); 358 | }); 359 | }); 360 | ``` 361 | 362 | `src/components/CommentList.js` 363 | ```js 364 | import React, {Component, View, ListView} from 'react-native'; 365 | import Comment from './Comment.js'; 366 | 367 | export default class CommentList extends React.Component { 368 | static propTypes = { 369 | data: React.PropTypes.array 370 | }; 371 | 372 | constructor(props) { 373 | super(props); 374 | this.state = { 375 | dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}).cloneWithRows(this.props.data) 376 | }; 377 | } 378 | 379 | componentWillReceiveProps(){ 380 | this.setState({ 381 | dataSource: this.state.dataSource.cloneWithRows(this.props.data) 382 | }); 383 | } 384 | 385 | render() { 386 | return ( 387 | 388 | ); 389 | } 390 | renderComment(row) { 391 | return ( 392 | {row.text} 393 | ); 394 | } 395 | } 396 | ``` 397 | 398 | Every time the CommentList component gets re-rendered, we need to update the dataSource state of the component to display newly added comment to the CommentList. We are just doing that in `componentWillReceiveProps` method. 399 | 400 | Note that we wrote a spec to ensure that the propTypes of the component is defined. Read more about propTypes [here][18] . 401 | 402 | We can list comments but cannot add a new one. For that let us build the CommentForm component. It has two text input fields to input author name and actual comment and a submit button to submit the comment. Let's build the basic UI of this component and then build the functionality. 403 | 404 | `src/components/__specs__/CommentForm.spec.js` 405 | ```js 406 | import React, { View, TouchableNativeFeedback, TextInput, Text } from 'react-native'; 407 | import { shallow } from 'enzyme'; 408 | import { expect } from 'chai'; 409 | 410 | import CommentForm from '../CommentForm.js'; 411 | 412 | describe('', () => { 413 | beforeEach(function() { 414 | wrapper = shallow(); 415 | }); 416 | 417 | it('should be a view component', () => { 418 | expect(wrapper.type()).to.equal(View); 419 | }); 420 | 421 | it('should have 2 TextInput components', () => { 422 | expect(wrapper.find(TextInput)).to.have.length(2); 423 | }); 424 | 425 | it('should have a submit button', () => { 426 | expect(wrapper.find(TouchableNativeFeedback)).to.have.length(1); 427 | expect(wrapper.find(TouchableNativeFeedback).containsMatchingElement(Submit)).to.equal(true); 428 | }); 429 | }); 430 | ``` 431 | 432 | `src/components/CommentForm.js` 433 | ```js 434 | import React, {Component, View, TouchableNativeFeedback, Text, TextInput} from 'react-native'; 435 | 436 | export default class CommentForm extends React.Component { 437 | render() { 438 | return( 439 | 440 | 441 | 442 | 443 | 444 | Submit 445 | 446 | 447 | 448 | ); 449 | } 450 | } 451 | ``` 452 | The functionality of the CommentForm component is as follows. 453 | 454 | * The input value of two TextInput components for entering author and comment should depend on state of the CommentForm component. 455 | * When user enters text and the text in the input field changes, update the state to corresponding value 456 | * On clicking the submit button, it should invoke `handleCommentSubmit` method of CommentBox component, which is passed as props to the CommentForm component and it should also set the author and comment state to initial blank string. 457 | 458 | For time- being let us define an empty method in CommentBox component. 459 | 460 | `src/components/CommentBox.js` 461 | ```js 462 | import React, {Component,Text, View} from 'react-native'; 463 | 464 | import CommentList from './CommentList.js'; 465 | import CommentForm from './CommentForm.js'; 466 | 467 | export default class CommentBox extends React.Component { 468 | 469 | handleCommentSubmit(comment_data) { 470 | } 471 | 472 | render() { 473 | return( 474 | 475 | Comment It 476 | 477 | 478 | 479 | ); 480 | } 481 | } 482 | ``` 483 | 484 | Now lets make sure that state of the CommentForm component changes with data in the input fields and the value of the input components are dependent on state. 485 | 486 | `src/components/__specs__/CommentForm.spec.js` 487 | ```js 488 | import React, { View, TouchableNativeFeedback, TextInput, Text} from 'react-native'; 489 | 490 | import { shallow } from 'enzyme'; 491 | import { expect } from 'chai'; 492 | 493 | import CommentForm from '../CommentForm.js'; 494 | 495 | describe('', () => { 496 | beforeEach(function() { 497 | wrapper = shallow(); 498 | }); 499 | 500 | it('should be a view component', () => { 501 | expect(wrapper.type()).to.equal(View); 502 | }); 503 | 504 | it('should have an initial state', () => { 505 | expect(wrapper.state('name')).to.equal(""); 506 | expect(wrapper.state('comment')).to.equal(""); 507 | }); 508 | 509 | it('should have 2 TextInput components', () => { 510 | expect(wrapper.find(TextInput)).to.have.length(2); 511 | }); 512 | 513 | it('should have a submit button', () => { 514 | expect(wrapper.find(TouchableNativeFeedback)).to.have.length(1); 515 | expect(wrapper.find(TouchableNativeFeedback).containsMatchingElement(Submit)).to.equal(true); 516 | }); 517 | 518 | it('should have author input component with value dependent on state', () => { 519 | wrapper.setState({name: 'JK'}); 520 | 521 | expect(wrapper.find(TextInput).first().props().value).to.equal('JK'); 522 | }); 523 | 524 | it('should have the comment input component with value dependent on state', () => { 525 | wrapper.setState({comment: 'An awesome comment'}); 526 | 527 | expect(wrapper.find(TextInput).at(1).props().value).to.equal('An awesome comment'); 528 | }); 529 | 530 | it('should change state when the text of author input component changes', () => { 531 | const authorInputComponent = wrapper.find('TextInput').first(); 532 | 533 | authorInputComponent.simulate('ChangeText','wenger'); 534 | expect(wrapper.state('name')).to.equal('wenger'); 535 | }); 536 | 537 | it('should change state when the text of comment input component changes', () => { 538 | const commentInputComponent = wrapper.find('TextInput').at(1); 539 | 540 | commentInputComponent.simulate('ChangeText','arsenal'); 541 | 542 | expect(wrapper.state('comment')).to.equal('arsenal'); 543 | }); 544 | }); 545 | ``` 546 | 547 | ` ``src/components/CommentForm.js` 548 | ```js 549 | import React, {Component, View, TouchableNativeFeedback, Text, TextInput} from 'react-native'; 550 | 551 | export default class CommentForm extends React.Component { 552 | 553 | constructor(props) { 554 | super(props); 555 | this.state = {name: '', comment: ''}; 556 | } 557 | 558 | render() { 559 | return( 560 | 561 | this.setState({name: text})} 562 | value={this.state.name} 563 | /> 564 | this.setState({comment: content})} 565 | value={this.state.comment} 566 | /> 567 | 568 | 569 | Submit 570 | 571 | 572 | 573 | ); 574 | } 575 | } 576 | ``` 577 | 578 | Now that that's done we'll wire up submission of form on clicking submit button. We must ensure that the submit button click should restore the state of two input components to initial state. 579 | 580 | `src/components/__specs__/CommentForm.spec.js` 581 | ```js 582 | import React, { View, TouchableNativeFeedback, TextInput, Text} from 'react-native'; 583 | 584 | import { shallow } from 'enzyme'; 585 | import { expect } from 'chai'; 586 | import sinon from 'sinon'; 587 | 588 | import CommentForm from '../CommentForm.js'; 589 | import CommentBox from '../CommentBox.js'; 590 | 591 | describe('', () => { 592 | beforeEach(function() { 593 | wrapper = shallow(); 594 | }); 595 | 596 | it('should be a view component', () => { 597 | expect(wrapper.type()).to.equal(View); 598 | }); 599 | 600 | it('should have an initial state', () => { 601 | expect(wrapper.state('name')).to.equal(""); 602 | expect(wrapper.state('comment')).to.equal(""); 603 | }); 604 | 605 | it('should have 2 TextInput components', () => { 606 | expect(wrapper.find(TextInput)).to.have.length(2); 607 | }); 608 | 609 | it('should have a submit button', () => { 610 | expect(wrapper.find(TouchableNativeFeedback)).to.have.length(1); 611 | expect(wrapper.find(TouchableNativeFeedback).containsMatchingElement(Submit)).to.equal(true); 612 | }); 613 | 614 | it('should have author input component with value dependent on state', () => { 615 | wrapper.setState({name: 'JK'}); 616 | expect(wrapper.find(TextInput).first().props().value).to.equal('JK'); 617 | }); 618 | 619 | it('should have the comment input component with value dependent on state', () => { 620 | wrapper.setState({comment: 'An awesome comment'}); 621 | expect(wrapper.find(TextInput).at(1).props().value).to.equal('An awesome comment'); 622 | }); 623 | 624 | it('should change state when the text of author input component changes', () => { 625 | const authorInputComponent = wrapper.find('TextInput').first(); 626 | 627 | authorInputComponent.simulate('ChangeText','wenger'); 628 | 629 | expect(wrapper.state('name')).to.equal('wenger'); 630 | }); 631 | 632 | it('should change state when the text of comment input component changes', () => { 633 | const commentInputComponent = wrapper.find('TextInput').at(1); 634 | 635 | commentInputComponent.simulate('ChangeText','arsenal'); 636 | 637 | expect(wrapper.state('comment')).to.equal('arsenal'); 638 | }); 639 | 640 | it('invokes handleCommitSubmit method of CommentBox with author and comment', () => { 641 | sinon.stub(CommentBox.prototype, "handleCommentSubmit"); 642 | 643 | const wrapper = shallow(); 644 | const submitButton = wrapper.find('TouchableNativeFeedback').first(); 645 | wrapper.setState({name: 'JK '}); 646 | wrapper.setState({comment: ' Arsenal is the best'}); 647 | 648 | submitButton.simulate('press'); 649 | 650 | expect(CommentBox.prototype.handleCommentSubmit.calledWith({author: 'JK', text: 'Arsenal is the best'})).to.be.true; 651 | CommentBox.prototype.handleCommentSubmit.restore(); 652 | }); 653 | 654 | it('sets the state of two input fields to the initial state on press', () => { 655 | sinon.stub(CommentBox.prototype, "handleCommentSubmit"); 656 | 657 | const wrapper = shallow(); 658 | const submitButton = wrapper.find('TouchableNativeFeedback').first(); 659 | wrapper.setState({name: 'JK'}); 660 | wrapper.setState({comment: 'Arsenal is the best'}); 661 | 662 | submitButton.simulate('press'); 663 | 664 | expect(wrapper.state('name')).to.equal(""); 665 | expect(wrapper.state('comment')).to.equal(""); 666 | 667 | CommentBox.prototype.handleCommentSubmit.restore(); 668 | }); 669 | }); 670 | ``` 671 | 672 | `src/components/CommentForm.js` 673 | ```js 674 | import React, {Component, View, TouchableNativeFeedback, Text, TextInput} from 'react-native'; 675 | 676 | export default class CommentForm extends React.Component { 677 | 678 | constructor(props) { 679 | super(props); 680 | this.state = {name: '', comment: ''}; 681 | } 682 | static propTypes = { 683 | onCommentSubmit: React.PropTypes.func 684 | }; 685 | 686 | render() { 687 | return( 688 | 689 | this.setState({name: text})} 690 | value={this.state.name} 691 | /> 692 | this.setState({comment: content})} 693 | value={this.state.comment} 694 | /> 695 | this.onPressButton()}> 696 | 697 | Submit 698 | 699 | 700 | 701 | ); 702 | } 703 | 704 | onPressButton() { 705 | var author = this.state.name.trim(); 706 | var comment = this.state.comment.trim(); 707 | this.state = {name: '', comment: ''}; 708 | this.props.onCommentSubmit({author: author, text: comment}); 709 | } 710 | } 711 | ``` 712 | Observe how we test the behaviour of components on user interaction. We use [simulate()][19] method provided by shallow rendering API of enzyme to simulate the `press` event here. This method can be used to test other types of user interactions as well. 713 | 714 | CommentBox component is where everything is wired up together. It should pass a list of comment data to CommentList as props and also handle storing the comments when submitted from CommentForm. 715 | We'll use [Asyncstorage][13] of React-Native to store and retrieve comments. We'll start with getting the comments and passing them to CommentList. The key for AsyncStorage data collection will be passed as props to CommentBox from app's root component. Let us take care of submitting of a comment first . 716 | 717 | `src/components/__specs__/CommentBox.spec.js` 718 | ```js 719 | import React, { View, Text, AsyncStorage } from 'react-native'; 720 | import { shallow } from 'enzyme'; 721 | import { expect } from 'chai'; 722 | import sinon from 'sinon'; 723 | 724 | import CommentBox from '../CommentBox.js'; 725 | import CommentList from '../CommentList.js'; 726 | import CommentForm from '../CommentForm.js'; 727 | 728 | describe('', () => { 729 | 730 | beforeEach(function() { 731 | wrapper = shallow(); 732 | }); 733 | 734 | it('should be a view component', () => { 735 | expect(wrapper.type()).to.equal(View); 736 | }); 737 | 738 | it('should have a title Comment It', () => { 739 | expect(wrapper.contains(Comment It)).to.equal(true); 740 | }); 741 | 742 | it('should render comment list component', () => { 743 | expect(wrapper.find(CommentList)).to.have.length(1); 744 | }); 745 | 746 | it('should render comment form component', () => { 747 | expect(wrapper.find(CommentForm)).to.have.length(1); 748 | }); 749 | 750 | it('should have an initial state', () => { 751 | expect(wrapper.state('data').length).to.equal(0); 752 | }); 753 | 754 | it('should pass its state data as props to commentlist component', () => { 755 | expect(wrapper.find(CommentList).props().data).to.eql(wrapper.state('data')); 756 | }); 757 | 758 | it('should pass its handleCommentSubmit method as props to CommentForm component', () => { 759 | commentBox = new CommentBox(); 760 | 761 | var definedMethod = commentBox.handleCommentSubmit; 762 | 763 | var passedMethod = wrapper.find(CommentForm).props().onCommentSubmit; 764 | expect(definedMethod.toString()).to.equal(passedMethod.toString()); 765 | }); 766 | 767 | describe('handleCommentSubmit', () => { 768 | it('stores comment data using asyncstorage on comment submit', () => { 769 | var data = [ 770 | { author: "Pete Hunt", text: "This is one comment"}, 771 | { author: "Jordan Walke", text: "This is a super comment"}, 772 | { author: "Jordan Walkerr", text: "This is an ordinary comment"} 773 | ]; 774 | 775 | commentBox = new CommentBox({asyncStorageKey: 'comments'}); 776 | commentBox.state.data = data; 777 | var commentData = {author: 'JK', text: 'Arsenal is the best'}; 778 | data.push(commentData); 779 | var spy = sinon.spy(AsyncStorage, "setItem"); 780 | 781 | commentBox.handleCommentSubmit(commentData); 782 | 783 | expect(spy.calledOnce).to.be.true; 784 | expect(spy.calledWith('comments', JSON.stringify(data))).to.be.true; 785 | }); 786 | }); 787 | }); 788 | ``` 789 | `src/components/CommentBox.js` 790 | ```js 791 | import React, {Component, Text, View, AsyncStorage } from 'react-native'; 792 | import CommentList from './CommentList.js'; 793 | import CommentForm from './CommentForm.js'; 794 | 795 | export default class CommentBox extends React.Component { 796 | constructor(props) { 797 | super(props); 798 | this.state = {data: []}; 799 | this.handleCommentSubmit = this.handleCommentSubmit.bind(this); 800 | } 801 | 802 | static propTypes = { 803 | asyncStorageKey: React.PropTypes.string 804 | }; 805 | 806 | handleCommentSubmit(comment_data) { 807 | var comments = this.state.data; 808 | comments.push(comment_data); 809 | AsyncStorage.setItem(this.props.asyncStorageKey, JSON.stringify(comments)); 810 | } 811 | 812 | render() { 813 | return( 814 | 815 | Comment It 816 | 817 | 818 | 819 | ); 820 | } 821 | } 822 | ``` 823 | That takes care of submitting comment part. Now lets do the comment loading part 824 | 825 | `src/components/__specs__/CommentBox.spec.js` 826 | ```js 827 | import React, { View, Text, AsyncStorage } from 'react-native'; 828 | import { shallow } from 'enzyme'; 829 | import { expect } from 'chai'; 830 | import sinon from 'sinon'; 831 | 832 | import CommentBox from '../CommentBox.js'; 833 | import CommentList from '../CommentList.js'; 834 | import CommentForm from '../CommentForm.js'; 835 | 836 | describe('', () => { 837 | describe('handleCommentSubmit', () => { 838 | it('stores comment data using asyncstorage on comment submit', () => { 839 | var data = [ 840 | { author: "Pete Hunt", text: "This is one comment"}, 841 | { author: "Jordan Walke", text: "This is a super comment"}, 842 | { author: "Jordan Walkerr", text: "This is an ordinary comment"} 843 | ]; 844 | 845 | commentBox = new CommentBox({asyncStorageKey: 'comments'}); 846 | commentBox.state.data = data; 847 | var commentData = {author: 'JK', text: 'Arsenal is the best'}; 848 | data.push(commentData); 849 | var spy = sinon.spy(AsyncStorage, "setItem"); 850 | 851 | commentBox.handleCommentSubmit(commentData); 852 | 853 | expect(spy.calledOnce).to.be.true; 854 | expect(spy.calledWith('comments', JSON.stringify(data))).to.be.true; 855 | }); 856 | 857 | it('invokes the getComments method', () => { 858 | var data = [ 859 | { author: "Pete Hunt", text: "This is one comment"}, 860 | { author: "Jordan Walke", text: "This is a super comment"}, 861 | { author: "Jordan Walkerr", text: "This is an ordinary comment"} 862 | ]; 863 | 864 | commentBox = new CommentBox({asyncStorageKey: 'comments'}); 865 | sinon.stub(commentBox, "getComments"); 866 | var commentData = {author: 'JK', text: 'Arsenal is the best'}; 867 | 868 | commentBox.handleCommentSubmit(commentData); 869 | 870 | expect(commentBox.getComments.calledOnce).to.be.true; 871 | }); 872 | }); 873 | }); 874 | ``` 875 | 876 | `src/components/CommentBox.js` 877 | ```js 878 | import React, {Component,Text, View, AsyncStorage } from 'react-native'; 879 | import CommentList from './CommentList.js'; 880 | import CommentForm from './CommentForm.js'; 881 | 882 | export default class CommentBox extends React.Component { 883 | constructor(props) { 884 | super(props); 885 | this.state = {data: []}; 886 | this.handleCommentSubmit = this.handleCommentSubmit.bind(this); 887 | this.getComments = this.getComments.bind(this); 888 | } 889 | 890 | static propTypes = { 891 | asyncStorageKey: React.PropTypes.string 892 | }; 893 | 894 | getComments() { 895 | AsyncStorage.getItem(this.props.asyncStorageKey) 896 | .then((comments) => { 897 | comments = JSON.parse(comments); 898 | this.setState({ data: comments }); 899 | }) 900 | .catch(() => { 901 | }); 902 | } 903 | 904 | handleCommentSubmit(comment_data) { 905 | var comments = this.state.data; 906 | comments.push(comment_data); 907 | AsyncStorage.setItem(this.props.asyncStorageKey, JSON.stringify(comments)); 908 | this.getComments(); 909 | } 910 | 911 | render() { 912 | return( 913 | 914 | Comment It 915 | 916 | 917 | 918 | ); 919 | } 920 | } 921 | ``` 922 | To get the app up and running we need to have a root component and register it in the App registry 923 | Let us create a component called App and render CommentBox component inside it. While rendering the CommentBox component, we pass in the AsyncStorage key as props. 924 | 925 | `src/__specs__/app.spec.js` 926 | ```js 927 | import React from 'react-native'; 928 | import { shallow } from 'enzyme'; 929 | import { expect } from 'chai'; 930 | 931 | import CommentBox from '../components/CommentBox.js'; 932 | import App from '../app.js'; 933 | describe('', () => { 934 | it('should render a commentBox component', () => { 935 | const wrapper = shallow(); 936 | 937 | expect(wrapper.find(CommentBox)).to.have.length(1); 938 | }); 939 | 940 | it('should pass data as props on rendering CommentBox component', () => { 941 | const wrapper = shallow(); 942 | 943 | expect(wrapper.find(CommentBox).props().asyncStorageKey).to.eql('comments'); 944 | }); 945 | }); 946 | ``` 947 | 948 | `src/components/app.js` 949 | ```js 950 | import React, { Component } from 'react-native'; 951 | import CommentBox from './components/CommentBox.js'; 952 | 953 | export default class App extends Component { 954 | render() { 955 | 956 | return ( 957 | 958 | ); 959 | } 960 | } 961 | ``` 962 | Now register the component in the app registry and that's it. 963 | 964 | `index.android.js` 965 | ```js 966 | import { AppRegistry } from 'react-native'; 967 | import App from './src/app'; 968 | AppRegistry.registerComponent('ReactNativeBoilerplate', () => App); 969 | ``` 970 | You can view the entire codebase [here][20] . 971 | 972 | * * * 973 | 974 | **Finally** 975 | 976 | Phew! That was a long exercise. We're proud that you completed it and happy for your learnings. That was mostly about UI testing. We also have sample tests for asynchronous JS code, redux, authentication etc. in our boilerplate. Do check them out. 977 | 978 | TDD provides a tight feedback loop that cranks up our development workflow and improves quality and maintainability of code. TDD is one among many engineering practises that we follow here at Multunus. There are other practises that we follow, like [Continous Integration][21] and guess what. We've started integrating these concepts into our boilerplate too. Do checkout our blogpost about [Automated environment management in React Native – iOS][22]. 979 | 980 | ## Contributing 981 | 982 | See the [CONTRIBUTING] document. 983 | Thank you, [contributors]! 984 | 985 | [CONTRIBUTING]: CONTRIBUTING.md 986 | [contributors]: https://github.com/multunus/$(REPO_NAME)/graphs/contributors 987 | 988 | ## License 989 | 990 | React Native Boilerplate is Copyright (c) 2016 Multunus Software Pvt. Ltd. 991 | It is free software, and may be redistributed 992 | under the terms specified in the [LICENSE] file. 993 | 994 | [LICENSE]: /LICENSE 995 | 996 | ## About 997 | 998 | ![multunus](https://s3.amazonaws.com/multunus-images/Multunus_Logo_Vector_resized.png) 999 | 1000 | React Native Boilerplate is maintained and funded by Multunus Software Pvt. Ltd. 1001 | The names and logos for Multunus are trademarks of Multunus Software Pvt. Ltd. 1002 | 1003 | We love open source software! 1004 | See [our other projects][community] 1005 | or [hire us][hire] to help build your product. 1006 | 1007 | [community]: http://www.multunus.com/community?utm_source=github 1008 | [hire]: http://www.multunus.com/contact?utm_source=github 1009 | 1010 | 1011 | [1]: https://babeljs.io/ 1012 | [2]: https://mochajs.org/ 1013 | [3]: https://nodejs.org/en/ 1014 | [4]: http://chaijs.com/ 1015 | [5]: http://sinonjs.org/ 1016 | [6]: https://github.com/lelandrichardson/react-native-mock 1017 | [7]: http://airbnb.io/enzyme/ 1018 | [8]: https://github.com/multunus/react-native-boilerplate 1019 | [9]: https://github.com/auth0/nodejs-jwt-authentication-sample 1020 | [10]: https://facebook.github.io/react/ 1021 | [11]: https://facebook.github.io/react/docs/tutorial.html 1022 | [12]: https://en.wikipedia.org/wiki/Test-driven_development 1023 | [13]: https://facebook.github.io/react-native/docs/asyncstorage.html 1024 | [14]: http://airbnb.io/enzyme/docs/api/shallow.html 1025 | [15]: https://github.com/airbnb/enzyme 1026 | [16]: http://www.jamesshore.com/Blog/Red-Green-Refactor.html 1027 | [17]: https://facebook.github.io/react-native/docs/listview.html 1028 | [18]: https://facebook.github.io/react/docs/reusable-components.html 1029 | [19]: http://airbnb.io/enzyme/docs/api/ShallowWrapper/simulate.html 1030 | [20]: https://github.com/multunus/React-Native-TDD-Tutorial 1031 | [21]: https://www.thoughtworks.com/continuous-integration 1032 | [22]: http://www.multunus.com/blog/2016/06/automated-environment-management-react-native-ios/ 1033 | -------------------------------------------------------------------------------- /android/app/BUCK: -------------------------------------------------------------------------------- 1 | import re 2 | 3 | # To learn about Buck see [Docs](https://buckbuild.com/). 4 | # To run your application with Buck: 5 | # - install Buck 6 | # - `npm start` - to start the packager 7 | # - `cd android` 8 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US` 9 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 10 | # - `buck install -r android/app` - compile, install and run application 11 | # 12 | 13 | lib_deps = [] 14 | for jarfile in glob(['libs/*.jar']): 15 | name = 'jars__' + re.sub(r'^.*/([^/]+)\.jar$', r'\1', jarfile) 16 | lib_deps.append(':' + name) 17 | prebuilt_jar( 18 | name = name, 19 | binary_jar = jarfile, 20 | ) 21 | 22 | for aarfile in glob(['libs/*.aar']): 23 | name = 'aars__' + re.sub(r'^.*/([^/]+)\.aar$', r'\1', aarfile) 24 | lib_deps.append(':' + name) 25 | android_prebuilt_aar( 26 | name = name, 27 | aar = aarfile, 28 | ) 29 | 30 | android_library( 31 | name = 'all-libs', 32 | exported_deps = lib_deps 33 | ) 34 | 35 | android_library( 36 | name = 'app-code', 37 | srcs = glob([ 38 | 'src/main/java/**/*.java', 39 | ]), 40 | deps = [ 41 | ':all-libs', 42 | ':build_config', 43 | ':res', 44 | ], 45 | ) 46 | 47 | android_build_config( 48 | name = 'build_config', 49 | package = 'com.reactnativeboilerplate', 50 | ) 51 | 52 | android_resource( 53 | name = 'res', 54 | res = 'src/main/res', 55 | package = 'com.reactnativeboilerplate', 56 | ) 57 | 58 | android_binary( 59 | name = 'app', 60 | package_type = 'debug', 61 | manifest = 'src/main/AndroidManifest.xml', 62 | keystore = '//android/keystores:debug', 63 | deps = [ 64 | ':app-code', 65 | ], 66 | ) 67 | -------------------------------------------------------------------------------- /android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | 3 | import com.android.build.OutputFile 4 | 5 | /** 6 | * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets 7 | * and bundleReleaseJsAndAssets). 8 | * These basically call `react-native bundle` with the correct arguments during the Android build 9 | * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the 10 | * bundle directly from the development server. Below you can see all the possible configurations 11 | * and their defaults. If you decide to add a configuration block, make sure to add it before the 12 | * `apply from: "../../node_modules/react-native/react.gradle"` line. 13 | * 14 | * project.ext.react = [ 15 | * // the name of the generated asset file containing your JS bundle 16 | * bundleAssetName: "index.android.bundle", 17 | * 18 | * // the entry file for bundle generation 19 | * entryFile: "index.android.js", 20 | * 21 | * // whether to bundle JS and assets in debug mode 22 | * bundleInDebug: false, 23 | * 24 | * // whether to bundle JS and assets in release mode 25 | * bundleInRelease: true, 26 | * 27 | * // whether to bundle JS and assets in another build variant (if configured). 28 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants 29 | * // The configuration property can be in the following formats 30 | * // 'bundleIn${productFlavor}${buildType}' 31 | * // 'bundleIn${buildType}' 32 | * // bundleInFreeDebug: true, 33 | * // bundleInPaidRelease: true, 34 | * // bundleInBeta: true, 35 | * 36 | * // the root of your project, i.e. where "package.json" lives 37 | * root: "../../", 38 | * 39 | * // where to put the JS bundle asset in debug mode 40 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug", 41 | * 42 | * // where to put the JS bundle asset in release mode 43 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release", 44 | * 45 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 46 | * // require('./image.png')), in debug mode 47 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", 48 | * 49 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 50 | * // require('./image.png')), in release mode 51 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release", 52 | * 53 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means 54 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to 55 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle 56 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/ 57 | * // for example, you might want to remove it from here. 58 | * inputExcludes: ["android/**", "ios/**"] 59 | * ] 60 | */ 61 | 62 | apply from: "../../node_modules/react-native/react.gradle" 63 | 64 | /** 65 | * Set this to true to create two separate APKs instead of one: 66 | * - An APK that only works on ARM devices 67 | * - An APK that only works on x86 devices 68 | * The advantage is the size of the APK is reduced by about 4MB. 69 | * Upload all the APKs to the Play Store and people will download 70 | * the correct one based on the CPU architecture of their device. 71 | */ 72 | def enableSeparateBuildPerCPUArchitecture = false 73 | 74 | /** 75 | * Run Proguard to shrink the Java bytecode in release builds. 76 | */ 77 | def enableProguardInReleaseBuilds = false 78 | 79 | android { 80 | compileSdkVersion 23 81 | buildToolsVersion "23.0.1" 82 | 83 | defaultConfig { 84 | applicationId "com.reactnativeboilerplate" 85 | minSdkVersion 16 86 | targetSdkVersion 22 87 | versionCode 1 88 | versionName "1.0" 89 | ndk { 90 | abiFilters "armeabi-v7a", "x86" 91 | } 92 | } 93 | splits { 94 | abi { 95 | reset() 96 | enable enableSeparateBuildPerCPUArchitecture 97 | universalApk false // If true, also generate a universal APK 98 | include "armeabi-v7a", "x86" 99 | } 100 | } 101 | buildTypes { 102 | release { 103 | minifyEnabled enableProguardInReleaseBuilds 104 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 105 | } 106 | } 107 | // applicationVariants are e.g. debug, release 108 | applicationVariants.all { variant -> 109 | variant.outputs.each { output -> 110 | // For each separate APK per architecture, set a unique version code as described here: 111 | // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits 112 | def versionCodes = ["armeabi-v7a":1, "x86":2] 113 | def abi = output.getFilter(OutputFile.ABI) 114 | if (abi != null) { // null for the universal-debug, universal-release variants 115 | output.versionCodeOverride = 116 | versionCodes.get(abi) * 1048576 + defaultConfig.versionCode 117 | } 118 | } 119 | } 120 | } 121 | 122 | dependencies { 123 | compile fileTree(dir: "libs", include: ["*.jar"]) 124 | compile "com.android.support:appcompat-v7:23.0.1" 125 | compile "com.facebook.react:react-native:+" // From node_modules 126 | } 127 | 128 | // Run this once to be able to run the application with BUCK 129 | // puts all compile dependencies into folder libs for BUCK to use 130 | task copyDownloadableDepsToLibs(type: Copy) { 131 | from configurations.compile 132 | into 'libs' 133 | } 134 | -------------------------------------------------------------------------------- /android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | 19 | # Disabling obfuscation is useful if you collect stack traces from production crashes 20 | # (unless you are using a system that supports de-obfuscate the stack traces). 21 | -dontobfuscate 22 | 23 | # React Native 24 | 25 | # Keep our interfaces so they can be used by other ProGuard rules. 26 | # See http://sourceforge.net/p/proguard/bugs/466/ 27 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip 28 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters 29 | 30 | # Do not strip any method/class that is annotated with @DoNotStrip 31 | -keep @com.facebook.proguard.annotations.DoNotStrip class * 32 | -keepclassmembers class * { 33 | @com.facebook.proguard.annotations.DoNotStrip *; 34 | } 35 | 36 | -keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * { 37 | void set*(***); 38 | *** get*(); 39 | } 40 | 41 | -keep class * extends com.facebook.react.bridge.JavaScriptModule { *; } 42 | -keep class * extends com.facebook.react.bridge.NativeModule { *; } 43 | -keepclassmembers,includedescriptorclasses class * { native ; } 44 | -keepclassmembers class * { @com.facebook.react.uimanager.UIProp ; } 45 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactProp ; } 46 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactPropGroup ; } 47 | 48 | -dontwarn com.facebook.react.** 49 | 50 | # okhttp 51 | 52 | -keepattributes Signature 53 | -keepattributes *Annotation* 54 | -keep class com.squareup.okhttp.** { *; } 55 | -keep interface com.squareup.okhttp.** { *; } 56 | -dontwarn com.squareup.okhttp.** 57 | 58 | # okio 59 | 60 | -keep class sun.misc.Unsafe { *; } 61 | -dontwarn java.nio.file.* 62 | -dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement 63 | -dontwarn okio.** 64 | -------------------------------------------------------------------------------- /android/app/react.gradle: -------------------------------------------------------------------------------- 1 | import org.apache.tools.ant.taskdefs.condition.Os 2 | 3 | def config = project.hasProperty("react") ? project.react : []; 4 | 5 | def bundleAssetName = config.bundleAssetName ?: "index.android.bundle" 6 | def entryFile = config.entryFile ?: "index.android.js" 7 | 8 | // because elvis operator 9 | def elvisFile(thing) { 10 | return thing ? file(thing) : null; 11 | } 12 | 13 | def reactRoot = elvisFile(config.root) ?: file("../../") 14 | def inputExcludes = config.inputExcludes ?: ["android/**", "ios/**"] 15 | 16 | void runBefore(String dependentTaskName, Task task) { 17 | Task dependentTask = tasks.findByPath(dependentTaskName); 18 | if (dependentTask != null) { 19 | dependentTask.dependsOn task 20 | } 21 | } 22 | 23 | gradle.projectsEvaluated { 24 | // Grab all build types and product flavors 25 | def buildTypes = android.buildTypes.collect { type -> type.name } 26 | def productFlavors = android.productFlavors.collect { flavor -> flavor.name } 27 | 28 | // When no product flavors defined, use empty 29 | if (!productFlavors) productFlavors.add('') 30 | 31 | productFlavors.each { productFlavorName -> 32 | buildTypes.each { buildTypeName -> 33 | // Create variant and target names 34 | def targetName = "${productFlavorName.capitalize()}${buildTypeName.capitalize()}" 35 | def targetPath = productFlavorName ? 36 | "${productFlavorName}/${buildTypeName}" : 37 | "${buildTypeName}" 38 | 39 | // React js bundle directories 40 | def jsBundleDirConfigName = "jsBundleDir${targetName}" 41 | def jsBundleDir = elvisFile(config."$jsBundleDirConfigName") ?: 42 | file("$buildDir/intermediates/assets/${targetPath}") 43 | 44 | def resourcesDirConfigName = "jsBundleDir${targetName}" 45 | def resourcesDir = elvisFile(config."${resourcesDirConfigName}") ?: 46 | file("$buildDir/intermediates/res/merged/${targetPath}") 47 | def jsBundleFile = file("$jsBundleDir/$bundleAssetName") 48 | 49 | // Bundle task name for variant 50 | def bundleJsAndAssetsTaskName = "bundle${targetName}JsAndAssets" 51 | 52 | def currentBundleTask = tasks.create( 53 | name: bundleJsAndAssetsTaskName, 54 | type: Exec) { 55 | group = "react" 56 | description = "bundle JS and assets for ${targetName}." 57 | 58 | // Create dirs if they are not there (e.g. the "clean" task just ran) 59 | doFirst { 60 | jsBundleDir.mkdirs() 61 | resourcesDir.mkdirs() 62 | } 63 | 64 | // Set up inputs and outputs so gradle can cache the result 65 | inputs.files fileTree(dir: reactRoot, excludes: inputExcludes) 66 | outputs.dir jsBundleDir 67 | outputs.dir resourcesDir 68 | 69 | // Set up the call to the react-native cli 70 | workingDir reactRoot 71 | 72 | // Set up dev mode 73 | def devEnabled = !targetName.toLowerCase().contains("release") 74 | if (Os.isFamily(Os.FAMILY_WINDOWS)) { 75 | commandLine "cmd", "/c", "react-native", "bundle", "--platform", "android", "--dev", "${devEnabled}", 76 | "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir 77 | } else { 78 | commandLine "react-native", "bundle", "--platform", "android", "--dev", "${devEnabled}", 79 | "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir 80 | } 81 | 82 | enabled config."bundleIn${targetName}" || 83 | config."bundleIn${buildTypeName.capitalize()}" ?: 84 | targetName.toLowerCase().contains("release") 85 | } 86 | 87 | // Hook bundle${productFlavor}${buildType}JsAndAssets into the android build process 88 | currentBundleTask.dependsOn("merge${targetName}Resources") 89 | currentBundleTask.dependsOn("merge${targetName}Assets") 90 | 91 | runBefore("processArmeabi-v7a${targetName}Resources", currentBundleTask) 92 | runBefore("processX86${targetName}Resources", currentBundleTask) 93 | runBefore("processUniversal${targetName}Resources", currentBundleTask) 94 | runBefore("process${targetName}Resources", currentBundleTask) 95 | } 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 11 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/reactnativeboilerplate/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.reactnativeboilerplate; 2 | 3 | import com.facebook.react.ReactActivity; 4 | import com.facebook.react.ReactPackage; 5 | import com.facebook.react.shell.MainReactPackage; 6 | 7 | import java.util.Arrays; 8 | import java.util.List; 9 | 10 | public class MainActivity extends ReactActivity { 11 | 12 | /** 13 | * Returns the name of the main component registered from JavaScript. 14 | * This is used to schedule rendering of the component. 15 | */ 16 | @Override 17 | protected String getMainComponentName() { 18 | return "ReactNativeBoilerplate"; 19 | } 20 | 21 | /** 22 | * Returns whether dev mode should be enabled. 23 | * This enables e.g. the dev menu. 24 | */ 25 | @Override 26 | protected boolean getUseDeveloperSupport() { 27 | return BuildConfig.DEBUG; 28 | } 29 | 30 | /** 31 | * A list of packages used by the app. If the app uses additional views 32 | * or modules besides the default ones, add more packages here. 33 | */ 34 | @Override 35 | protected List getPackages() { 36 | return Arrays.asList( 37 | new MainReactPackage() 38 | ); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/multunus/React-Native-TDD-Tutorial/e85729d2ff9118930f8813d860095dd0dc94a149/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/multunus/React-Native-TDD-Tutorial/e85729d2ff9118930f8813d860095dd0dc94a149/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/multunus/React-Native-TDD-Tutorial/e85729d2ff9118930f8813d860095dd0dc94a149/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/multunus/React-Native-TDD-Tutorial/e85729d2ff9118930f8813d860095dd0dc94a149/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | ReactNativeBoilerplate 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:1.3.1' 9 | 10 | // NOTE: Do not place your application dependencies here; they belong 11 | // in the individual module build.gradle files 12 | } 13 | } 14 | 15 | allprojects { 16 | repositories { 17 | mavenLocal() 18 | jcenter() 19 | maven { 20 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 21 | url "$projectDir/../../node_modules/react-native/android" 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /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/multunus/React-Native-TDD-Tutorial/e85729d2ff9118930f8813d860095dd0dc94a149/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.4-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/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'ReactNativeBoilerplate' 2 | 3 | include ':app' 4 | -------------------------------------------------------------------------------- /code_of_conduct.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, gender identity and expression, level of experience, 9 | nationality, personal appearance, race, religion, or sexual identity and 10 | orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at [info@multunus.com](mailto:info@multunus.com?subject=Code of Conduct Issue). All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at [http://contributor-covenant.org/version/1/4][version] 72 | 73 | [homepage]: http://contributor-covenant.org 74 | [version]: http://contributor-covenant.org/version/1/4/ 75 | -------------------------------------------------------------------------------- /index.android.js: -------------------------------------------------------------------------------- 1 | import { AppRegistry } from 'react-native'; 2 | import App from './src/app'; 3 | AppRegistry.registerComponent('ReactNativeBoilerplate', () => App); 4 | -------------------------------------------------------------------------------- /index.ios.js: -------------------------------------------------------------------------------- 1 | import { AppRegistry } from 'react-native'; 2 | import App from './src/app'; 3 | 4 | AppRegistry.registerComponent('ReactNativeBoilerplate', () => App); 5 | -------------------------------------------------------------------------------- /ios/RNConfig.h: -------------------------------------------------------------------------------- 1 | #import "RCTBridgeModule.h" 2 | 3 | @interface RNConfig : NSObject 4 | @end -------------------------------------------------------------------------------- /ios/RNConfig.m: -------------------------------------------------------------------------------- 1 | #import "RNConfig.h" 2 | 3 | @implementation RNConfig 4 | 5 | RCT_EXPORT_MODULE(); 6 | 7 | - (NSDictionary *)constantsToExport 8 | { 9 | NSString* buildEnvironment = [[[NSBundle mainBundle] infoDictionary] valueForKey:@"BuildEnvironment"]; 10 | return @{ @"buildEnvironment": buildEnvironment }; 11 | } 12 | 13 | @end -------------------------------------------------------------------------------- /ios/ReactNativeBoilerplate.xcodeproj/project.pbxproj: -------------------------------------------------------------------------------- 1 | // !$*UTF8*$! 2 | { 3 | archiveVersion = 1; 4 | classes = { 5 | }; 6 | objectVersion = 46; 7 | objects = { 8 | 9 | /* Begin PBXBuildFile section */ 10 | 00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; }; 11 | 00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; }; 12 | 00C302E81ABCBA2D00DB3ED1 /* libRCTImage.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302C01ABCB91800DB3ED1 /* libRCTImage.a */; }; 13 | 00C302E91ABCBA2D00DB3ED1 /* libRCTNetwork.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */; }; 14 | 00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */; }; 15 | 00E356F31AD99517003FC87E /* ReactNativeBoilerplateTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* ReactNativeBoilerplateTests.m */; }; 16 | 133E29F31AD74F7200F7D852 /* libRCTLinking.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 78C398B91ACF4ADC00677621 /* libRCTLinking.a */; }; 17 | 139105C61AF99C1200B5F7CC /* libRCTSettings.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 139105C11AF99BAD00B5F7CC /* libRCTSettings.a */; }; 18 | 139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 139FDEF41B06529B00C62182 /* libRCTWebSocket.a */; }; 19 | 13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; }; 20 | 13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB11A68108700A75B9A /* LaunchScreen.xib */; }; 21 | 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; }; 22 | 13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; }; 23 | 146834051AC3E58100842450 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; }; 24 | 832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; }; 25 | BA2C3EB81CE99E3B00482925 /* RNConfig.m in Sources */ = {isa = PBXBuildFile; fileRef = BA2C3EB71CE99E3B00482925 /* RNConfig.m */; }; 26 | /* End PBXBuildFile section */ 27 | 28 | /* Begin PBXContainerItemProxy section */ 29 | 00C302AB1ABCB8CE00DB3ED1 /* PBXContainerItemProxy */ = { 30 | isa = PBXContainerItemProxy; 31 | containerPortal = 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */; 32 | proxyType = 2; 33 | remoteGlobalIDString = 134814201AA4EA6300B7C361; 34 | remoteInfo = RCTActionSheet; 35 | }; 36 | 00C302B91ABCB90400DB3ED1 /* PBXContainerItemProxy */ = { 37 | isa = PBXContainerItemProxy; 38 | containerPortal = 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */; 39 | proxyType = 2; 40 | remoteGlobalIDString = 134814201AA4EA6300B7C361; 41 | remoteInfo = RCTGeolocation; 42 | }; 43 | 00C302BF1ABCB91800DB3ED1 /* PBXContainerItemProxy */ = { 44 | isa = PBXContainerItemProxy; 45 | containerPortal = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */; 46 | proxyType = 2; 47 | remoteGlobalIDString = 58B5115D1A9E6B3D00147676; 48 | remoteInfo = RCTImage; 49 | }; 50 | 00C302DB1ABCB9D200DB3ED1 /* PBXContainerItemProxy */ = { 51 | isa = PBXContainerItemProxy; 52 | containerPortal = 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */; 53 | proxyType = 2; 54 | remoteGlobalIDString = 58B511DB1A9E6C8500147676; 55 | remoteInfo = RCTNetwork; 56 | }; 57 | 00C302E31ABCB9EE00DB3ED1 /* PBXContainerItemProxy */ = { 58 | isa = PBXContainerItemProxy; 59 | containerPortal = 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */; 60 | proxyType = 2; 61 | remoteGlobalIDString = 832C81801AAF6DEF007FA2F7; 62 | remoteInfo = RCTVibration; 63 | }; 64 | 00E356F41AD99517003FC87E /* PBXContainerItemProxy */ = { 65 | isa = PBXContainerItemProxy; 66 | containerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */; 67 | proxyType = 1; 68 | remoteGlobalIDString = 13B07F861A680F5B00A75B9A; 69 | remoteInfo = ReactNativeBoilerplate; 70 | }; 71 | 139105C01AF99BAD00B5F7CC /* PBXContainerItemProxy */ = { 72 | isa = PBXContainerItemProxy; 73 | containerPortal = 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */; 74 | proxyType = 2; 75 | remoteGlobalIDString = 134814201AA4EA6300B7C361; 76 | remoteInfo = RCTSettings; 77 | }; 78 | 139FDEF31B06529B00C62182 /* PBXContainerItemProxy */ = { 79 | isa = PBXContainerItemProxy; 80 | containerPortal = 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */; 81 | proxyType = 2; 82 | remoteGlobalIDString = 3C86DF461ADF2C930047B81A; 83 | remoteInfo = RCTWebSocket; 84 | }; 85 | 146834031AC3E56700842450 /* PBXContainerItemProxy */ = { 86 | isa = PBXContainerItemProxy; 87 | containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */; 88 | proxyType = 2; 89 | remoteGlobalIDString = 83CBBA2E1A601D0E00E9B192; 90 | remoteInfo = React; 91 | }; 92 | 78C398B81ACF4ADC00677621 /* PBXContainerItemProxy */ = { 93 | isa = PBXContainerItemProxy; 94 | containerPortal = 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */; 95 | proxyType = 2; 96 | remoteGlobalIDString = 134814201AA4EA6300B7C361; 97 | remoteInfo = RCTLinking; 98 | }; 99 | 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */ = { 100 | isa = PBXContainerItemProxy; 101 | containerPortal = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */; 102 | proxyType = 2; 103 | remoteGlobalIDString = 58B5119B1A9E6C1200147676; 104 | remoteInfo = RCTText; 105 | }; 106 | /* End PBXContainerItemProxy section */ 107 | 108 | /* Begin PBXFileReference section */ 109 | 008F07F21AC5B25A0029DE68 /* main.jsbundle */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = main.jsbundle; sourceTree = ""; }; 110 | 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = "../node_modules/react-native/Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj"; sourceTree = ""; }; 111 | 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTGeolocation.xcodeproj; path = "../node_modules/react-native/Libraries/Geolocation/RCTGeolocation.xcodeproj"; sourceTree = ""; }; 112 | 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = "../node_modules/react-native/Libraries/Image/RCTImage.xcodeproj"; sourceTree = ""; }; 113 | 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = "../node_modules/react-native/Libraries/Network/RCTNetwork.xcodeproj"; sourceTree = ""; }; 114 | 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTVibration.xcodeproj; path = "../node_modules/react-native/Libraries/Vibration/RCTVibration.xcodeproj"; sourceTree = ""; }; 115 | 00E356EE1AD99517003FC87E /* ReactNativeBoilerplateTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = ReactNativeBoilerplateTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; }; 116 | 00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = ""; }; 117 | 00E356F21AD99517003FC87E /* ReactNativeBoilerplateTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = ReactNativeBoilerplateTests.m; sourceTree = ""; }; 118 | 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = "../node_modules/react-native/Libraries/Settings/RCTSettings.xcodeproj"; sourceTree = ""; }; 119 | 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = "../node_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj"; sourceTree = ""; }; 120 | 13B07F961A680F5B00A75B9A /* RN Boilerplate Dev.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "RN Boilerplate Dev.app"; sourceTree = BUILT_PRODUCTS_DIR; }; 121 | 13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = ReactNativeBoilerplate/AppDelegate.h; sourceTree = ""; }; 122 | 13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = ReactNativeBoilerplate/AppDelegate.m; sourceTree = ""; }; 123 | 13B07FB21A68108700A75B9A /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.xib; name = Base; path = Base.lproj/LaunchScreen.xib; sourceTree = ""; }; 124 | 13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = ReactNativeBoilerplate/Images.xcassets; sourceTree = ""; }; 125 | 13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = ReactNativeBoilerplate/Info.plist; sourceTree = ""; }; 126 | 13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = ReactNativeBoilerplate/main.m; sourceTree = ""; }; 127 | 146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = "../node_modules/react-native/React/React.xcodeproj"; sourceTree = ""; }; 128 | 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = ""; }; 129 | 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = ""; }; 130 | BA2C3EB51CE99E1A00482925 /* RNConfig.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNConfig.h; sourceTree = ""; }; 131 | BA2C3EB71CE99E3B00482925 /* RNConfig.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNConfig.m; sourceTree = ""; }; 132 | /* End PBXFileReference section */ 133 | 134 | /* Begin PBXFrameworksBuildPhase section */ 135 | 00E356EB1AD99517003FC87E /* Frameworks */ = { 136 | isa = PBXFrameworksBuildPhase; 137 | buildActionMask = 2147483647; 138 | files = ( 139 | ); 140 | runOnlyForDeploymentPostprocessing = 0; 141 | }; 142 | 13B07F8C1A680F5B00A75B9A /* Frameworks */ = { 143 | isa = PBXFrameworksBuildPhase; 144 | buildActionMask = 2147483647; 145 | files = ( 146 | 146834051AC3E58100842450 /* libReact.a in Frameworks */, 147 | 00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */, 148 | 00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */, 149 | 00C302E81ABCBA2D00DB3ED1 /* libRCTImage.a in Frameworks */, 150 | 133E29F31AD74F7200F7D852 /* libRCTLinking.a in Frameworks */, 151 | 00C302E91ABCBA2D00DB3ED1 /* libRCTNetwork.a in Frameworks */, 152 | 139105C61AF99C1200B5F7CC /* libRCTSettings.a in Frameworks */, 153 | 832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */, 154 | 00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */, 155 | 139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */, 156 | ); 157 | runOnlyForDeploymentPostprocessing = 0; 158 | }; 159 | /* End PBXFrameworksBuildPhase section */ 160 | 161 | /* Begin PBXGroup section */ 162 | 00C302A81ABCB8CE00DB3ED1 /* Products */ = { 163 | isa = PBXGroup; 164 | children = ( 165 | 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */, 166 | ); 167 | name = Products; 168 | sourceTree = ""; 169 | }; 170 | 00C302B61ABCB90400DB3ED1 /* Products */ = { 171 | isa = PBXGroup; 172 | children = ( 173 | 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */, 174 | ); 175 | name = Products; 176 | sourceTree = ""; 177 | }; 178 | 00C302BC1ABCB91800DB3ED1 /* Products */ = { 179 | isa = PBXGroup; 180 | children = ( 181 | 00C302C01ABCB91800DB3ED1 /* libRCTImage.a */, 182 | ); 183 | name = Products; 184 | sourceTree = ""; 185 | }; 186 | 00C302D41ABCB9D200DB3ED1 /* Products */ = { 187 | isa = PBXGroup; 188 | children = ( 189 | 00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */, 190 | ); 191 | name = Products; 192 | sourceTree = ""; 193 | }; 194 | 00C302E01ABCB9EE00DB3ED1 /* Products */ = { 195 | isa = PBXGroup; 196 | children = ( 197 | 00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */, 198 | ); 199 | name = Products; 200 | sourceTree = ""; 201 | }; 202 | 00E356EF1AD99517003FC87E /* ReactNativeBoilerplateTests */ = { 203 | isa = PBXGroup; 204 | children = ( 205 | 00E356F21AD99517003FC87E /* ReactNativeBoilerplateTests.m */, 206 | 00E356F01AD99517003FC87E /* Supporting Files */, 207 | ); 208 | path = ReactNativeBoilerplateTests; 209 | sourceTree = ""; 210 | }; 211 | 00E356F01AD99517003FC87E /* Supporting Files */ = { 212 | isa = PBXGroup; 213 | children = ( 214 | 00E356F11AD99517003FC87E /* Info.plist */, 215 | ); 216 | name = "Supporting Files"; 217 | sourceTree = ""; 218 | }; 219 | 139105B71AF99BAD00B5F7CC /* Products */ = { 220 | isa = PBXGroup; 221 | children = ( 222 | 139105C11AF99BAD00B5F7CC /* libRCTSettings.a */, 223 | ); 224 | name = Products; 225 | sourceTree = ""; 226 | }; 227 | 139FDEE71B06529A00C62182 /* Products */ = { 228 | isa = PBXGroup; 229 | children = ( 230 | 139FDEF41B06529B00C62182 /* libRCTWebSocket.a */, 231 | ); 232 | name = Products; 233 | sourceTree = ""; 234 | }; 235 | 13B07FAE1A68108700A75B9A /* ReactNativeBoilerplate */ = { 236 | isa = PBXGroup; 237 | children = ( 238 | 008F07F21AC5B25A0029DE68 /* main.jsbundle */, 239 | 13B07FAF1A68108700A75B9A /* AppDelegate.h */, 240 | 13B07FB01A68108700A75B9A /* AppDelegate.m */, 241 | 13B07FB51A68108700A75B9A /* Images.xcassets */, 242 | 13B07FB61A68108700A75B9A /* Info.plist */, 243 | 13B07FB11A68108700A75B9A /* LaunchScreen.xib */, 244 | 13B07FB71A68108700A75B9A /* main.m */, 245 | BA2C3EB51CE99E1A00482925 /* RNConfig.h */, 246 | BA2C3EB71CE99E3B00482925 /* RNConfig.m */, 247 | ); 248 | name = ReactNativeBoilerplate; 249 | sourceTree = ""; 250 | }; 251 | 146834001AC3E56700842450 /* Products */ = { 252 | isa = PBXGroup; 253 | children = ( 254 | 146834041AC3E56700842450 /* libReact.a */, 255 | ); 256 | name = Products; 257 | sourceTree = ""; 258 | }; 259 | 78C398B11ACF4ADC00677621 /* Products */ = { 260 | isa = PBXGroup; 261 | children = ( 262 | 78C398B91ACF4ADC00677621 /* libRCTLinking.a */, 263 | ); 264 | name = Products; 265 | sourceTree = ""; 266 | }; 267 | 832341AE1AAA6A7D00B99B32 /* Libraries */ = { 268 | isa = PBXGroup; 269 | children = ( 270 | 146833FF1AC3E56700842450 /* React.xcodeproj */, 271 | 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */, 272 | 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */, 273 | 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */, 274 | 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */, 275 | 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */, 276 | 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */, 277 | 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */, 278 | 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */, 279 | 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */, 280 | ); 281 | name = Libraries; 282 | sourceTree = ""; 283 | }; 284 | 832341B11AAA6A8300B99B32 /* Products */ = { 285 | isa = PBXGroup; 286 | children = ( 287 | 832341B51AAA6A8300B99B32 /* libRCTText.a */, 288 | ); 289 | name = Products; 290 | sourceTree = ""; 291 | }; 292 | 83CBB9F61A601CBA00E9B192 = { 293 | isa = PBXGroup; 294 | children = ( 295 | 13B07FAE1A68108700A75B9A /* ReactNativeBoilerplate */, 296 | 832341AE1AAA6A7D00B99B32 /* Libraries */, 297 | 00E356EF1AD99517003FC87E /* ReactNativeBoilerplateTests */, 298 | 83CBBA001A601CBA00E9B192 /* Products */, 299 | ); 300 | indentWidth = 2; 301 | sourceTree = ""; 302 | tabWidth = 2; 303 | }; 304 | 83CBBA001A601CBA00E9B192 /* Products */ = { 305 | isa = PBXGroup; 306 | children = ( 307 | 13B07F961A680F5B00A75B9A /* RN Boilerplate Dev.app */, 308 | 00E356EE1AD99517003FC87E /* ReactNativeBoilerplateTests.xctest */, 309 | ); 310 | name = Products; 311 | sourceTree = ""; 312 | }; 313 | /* End PBXGroup section */ 314 | 315 | /* Begin PBXNativeTarget section */ 316 | 00E356ED1AD99517003FC87E /* ReactNativeBoilerplateTests */ = { 317 | isa = PBXNativeTarget; 318 | buildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "ReactNativeBoilerplateTests" */; 319 | buildPhases = ( 320 | 00E356EA1AD99517003FC87E /* Sources */, 321 | 00E356EB1AD99517003FC87E /* Frameworks */, 322 | 00E356EC1AD99517003FC87E /* Resources */, 323 | ); 324 | buildRules = ( 325 | ); 326 | dependencies = ( 327 | 00E356F51AD99517003FC87E /* PBXTargetDependency */, 328 | ); 329 | name = ReactNativeBoilerplateTests; 330 | productName = ReactNativeBoilerplateTests; 331 | productReference = 00E356EE1AD99517003FC87E /* ReactNativeBoilerplateTests.xctest */; 332 | productType = "com.apple.product-type.bundle.unit-test"; 333 | }; 334 | 13B07F861A680F5B00A75B9A /* ReactNativeBoilerplate */ = { 335 | isa = PBXNativeTarget; 336 | buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "ReactNativeBoilerplate" */; 337 | buildPhases = ( 338 | 13B07F871A680F5B00A75B9A /* Sources */, 339 | 13B07F8C1A680F5B00A75B9A /* Frameworks */, 340 | 13B07F8E1A680F5B00A75B9A /* Resources */, 341 | 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */, 342 | ); 343 | buildRules = ( 344 | ); 345 | dependencies = ( 346 | ); 347 | name = ReactNativeBoilerplate; 348 | productName = "Hello World"; 349 | productReference = 13B07F961A680F5B00A75B9A /* RN Boilerplate Dev.app */; 350 | productType = "com.apple.product-type.application"; 351 | }; 352 | /* End PBXNativeTarget section */ 353 | 354 | /* Begin PBXProject section */ 355 | 83CBB9F71A601CBA00E9B192 /* Project object */ = { 356 | isa = PBXProject; 357 | attributes = { 358 | LastUpgradeCheck = 0610; 359 | ORGANIZATIONNAME = Facebook; 360 | TargetAttributes = { 361 | 00E356ED1AD99517003FC87E = { 362 | CreatedOnToolsVersion = 6.2; 363 | TestTargetID = 13B07F861A680F5B00A75B9A; 364 | }; 365 | }; 366 | }; 367 | buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "ReactNativeBoilerplate" */; 368 | compatibilityVersion = "Xcode 3.2"; 369 | developmentRegion = English; 370 | hasScannedForEncodings = 0; 371 | knownRegions = ( 372 | en, 373 | Base, 374 | ); 375 | mainGroup = 83CBB9F61A601CBA00E9B192; 376 | productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */; 377 | projectDirPath = ""; 378 | projectReferences = ( 379 | { 380 | ProductGroup = 00C302A81ABCB8CE00DB3ED1 /* Products */; 381 | ProjectRef = 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */; 382 | }, 383 | { 384 | ProductGroup = 00C302B61ABCB90400DB3ED1 /* Products */; 385 | ProjectRef = 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */; 386 | }, 387 | { 388 | ProductGroup = 00C302BC1ABCB91800DB3ED1 /* Products */; 389 | ProjectRef = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */; 390 | }, 391 | { 392 | ProductGroup = 78C398B11ACF4ADC00677621 /* Products */; 393 | ProjectRef = 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */; 394 | }, 395 | { 396 | ProductGroup = 00C302D41ABCB9D200DB3ED1 /* Products */; 397 | ProjectRef = 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */; 398 | }, 399 | { 400 | ProductGroup = 139105B71AF99BAD00B5F7CC /* Products */; 401 | ProjectRef = 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */; 402 | }, 403 | { 404 | ProductGroup = 832341B11AAA6A8300B99B32 /* Products */; 405 | ProjectRef = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */; 406 | }, 407 | { 408 | ProductGroup = 00C302E01ABCB9EE00DB3ED1 /* Products */; 409 | ProjectRef = 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */; 410 | }, 411 | { 412 | ProductGroup = 139FDEE71B06529A00C62182 /* Products */; 413 | ProjectRef = 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */; 414 | }, 415 | { 416 | ProductGroup = 146834001AC3E56700842450 /* Products */; 417 | ProjectRef = 146833FF1AC3E56700842450 /* React.xcodeproj */; 418 | }, 419 | ); 420 | projectRoot = ""; 421 | targets = ( 422 | 13B07F861A680F5B00A75B9A /* ReactNativeBoilerplate */, 423 | 00E356ED1AD99517003FC87E /* ReactNativeBoilerplateTests */, 424 | ); 425 | }; 426 | /* End PBXProject section */ 427 | 428 | /* Begin PBXReferenceProxy section */ 429 | 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */ = { 430 | isa = PBXReferenceProxy; 431 | fileType = archive.ar; 432 | path = libRCTActionSheet.a; 433 | remoteRef = 00C302AB1ABCB8CE00DB3ED1 /* PBXContainerItemProxy */; 434 | sourceTree = BUILT_PRODUCTS_DIR; 435 | }; 436 | 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */ = { 437 | isa = PBXReferenceProxy; 438 | fileType = archive.ar; 439 | path = libRCTGeolocation.a; 440 | remoteRef = 00C302B91ABCB90400DB3ED1 /* PBXContainerItemProxy */; 441 | sourceTree = BUILT_PRODUCTS_DIR; 442 | }; 443 | 00C302C01ABCB91800DB3ED1 /* libRCTImage.a */ = { 444 | isa = PBXReferenceProxy; 445 | fileType = archive.ar; 446 | path = libRCTImage.a; 447 | remoteRef = 00C302BF1ABCB91800DB3ED1 /* PBXContainerItemProxy */; 448 | sourceTree = BUILT_PRODUCTS_DIR; 449 | }; 450 | 00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */ = { 451 | isa = PBXReferenceProxy; 452 | fileType = archive.ar; 453 | path = libRCTNetwork.a; 454 | remoteRef = 00C302DB1ABCB9D200DB3ED1 /* PBXContainerItemProxy */; 455 | sourceTree = BUILT_PRODUCTS_DIR; 456 | }; 457 | 00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */ = { 458 | isa = PBXReferenceProxy; 459 | fileType = archive.ar; 460 | path = libRCTVibration.a; 461 | remoteRef = 00C302E31ABCB9EE00DB3ED1 /* PBXContainerItemProxy */; 462 | sourceTree = BUILT_PRODUCTS_DIR; 463 | }; 464 | 139105C11AF99BAD00B5F7CC /* libRCTSettings.a */ = { 465 | isa = PBXReferenceProxy; 466 | fileType = archive.ar; 467 | path = libRCTSettings.a; 468 | remoteRef = 139105C01AF99BAD00B5F7CC /* PBXContainerItemProxy */; 469 | sourceTree = BUILT_PRODUCTS_DIR; 470 | }; 471 | 139FDEF41B06529B00C62182 /* libRCTWebSocket.a */ = { 472 | isa = PBXReferenceProxy; 473 | fileType = archive.ar; 474 | path = libRCTWebSocket.a; 475 | remoteRef = 139FDEF31B06529B00C62182 /* PBXContainerItemProxy */; 476 | sourceTree = BUILT_PRODUCTS_DIR; 477 | }; 478 | 146834041AC3E56700842450 /* libReact.a */ = { 479 | isa = PBXReferenceProxy; 480 | fileType = archive.ar; 481 | path = libReact.a; 482 | remoteRef = 146834031AC3E56700842450 /* PBXContainerItemProxy */; 483 | sourceTree = BUILT_PRODUCTS_DIR; 484 | }; 485 | 78C398B91ACF4ADC00677621 /* libRCTLinking.a */ = { 486 | isa = PBXReferenceProxy; 487 | fileType = archive.ar; 488 | path = libRCTLinking.a; 489 | remoteRef = 78C398B81ACF4ADC00677621 /* PBXContainerItemProxy */; 490 | sourceTree = BUILT_PRODUCTS_DIR; 491 | }; 492 | 832341B51AAA6A8300B99B32 /* libRCTText.a */ = { 493 | isa = PBXReferenceProxy; 494 | fileType = archive.ar; 495 | path = libRCTText.a; 496 | remoteRef = 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */; 497 | sourceTree = BUILT_PRODUCTS_DIR; 498 | }; 499 | /* End PBXReferenceProxy section */ 500 | 501 | /* Begin PBXResourcesBuildPhase section */ 502 | 00E356EC1AD99517003FC87E /* Resources */ = { 503 | isa = PBXResourcesBuildPhase; 504 | buildActionMask = 2147483647; 505 | files = ( 506 | ); 507 | runOnlyForDeploymentPostprocessing = 0; 508 | }; 509 | 13B07F8E1A680F5B00A75B9A /* Resources */ = { 510 | isa = PBXResourcesBuildPhase; 511 | buildActionMask = 2147483647; 512 | files = ( 513 | 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */, 514 | 13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */, 515 | ); 516 | runOnlyForDeploymentPostprocessing = 0; 517 | }; 518 | /* End PBXResourcesBuildPhase section */ 519 | 520 | /* Begin PBXShellScriptBuildPhase section */ 521 | 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */ = { 522 | isa = PBXShellScriptBuildPhase; 523 | buildActionMask = 2147483647; 524 | files = ( 525 | ); 526 | inputPaths = ( 527 | ); 528 | name = "Bundle React Native code and images"; 529 | outputPaths = ( 530 | ); 531 | runOnlyForDeploymentPostprocessing = 0; 532 | shellPath = /bin/sh; 533 | shellScript = "export NODE_BINARY=node\n../node_modules/react-native/packager/react-native-xcode.sh"; 534 | }; 535 | /* End PBXShellScriptBuildPhase section */ 536 | 537 | /* Begin PBXSourcesBuildPhase section */ 538 | 00E356EA1AD99517003FC87E /* Sources */ = { 539 | isa = PBXSourcesBuildPhase; 540 | buildActionMask = 2147483647; 541 | files = ( 542 | 00E356F31AD99517003FC87E /* ReactNativeBoilerplateTests.m in Sources */, 543 | ); 544 | runOnlyForDeploymentPostprocessing = 0; 545 | }; 546 | 13B07F871A680F5B00A75B9A /* Sources */ = { 547 | isa = PBXSourcesBuildPhase; 548 | buildActionMask = 2147483647; 549 | files = ( 550 | BA2C3EB81CE99E3B00482925 /* RNConfig.m in Sources */, 551 | 13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */, 552 | 13B07FC11A68108700A75B9A /* main.m in Sources */, 553 | ); 554 | runOnlyForDeploymentPostprocessing = 0; 555 | }; 556 | /* End PBXSourcesBuildPhase section */ 557 | 558 | /* Begin PBXTargetDependency section */ 559 | 00E356F51AD99517003FC87E /* PBXTargetDependency */ = { 560 | isa = PBXTargetDependency; 561 | target = 13B07F861A680F5B00A75B9A /* ReactNativeBoilerplate */; 562 | targetProxy = 00E356F41AD99517003FC87E /* PBXContainerItemProxy */; 563 | }; 564 | /* End PBXTargetDependency section */ 565 | 566 | /* Begin PBXVariantGroup section */ 567 | 13B07FB11A68108700A75B9A /* LaunchScreen.xib */ = { 568 | isa = PBXVariantGroup; 569 | children = ( 570 | 13B07FB21A68108700A75B9A /* Base */, 571 | ); 572 | name = LaunchScreen.xib; 573 | path = ReactNativeBoilerplate; 574 | sourceTree = ""; 575 | }; 576 | /* End PBXVariantGroup section */ 577 | 578 | /* Begin XCBuildConfiguration section */ 579 | 00E356F61AD99517003FC87E /* Debug */ = { 580 | isa = XCBuildConfiguration; 581 | buildSettings = { 582 | BUNDLE_LOADER = "$(TEST_HOST)"; 583 | FRAMEWORK_SEARCH_PATHS = ( 584 | "$(SDKROOT)/Developer/Library/Frameworks", 585 | "$(inherited)", 586 | ); 587 | GCC_PREPROCESSOR_DEFINITIONS = ( 588 | "DEBUG=1", 589 | "$(inherited)", 590 | ); 591 | INFOPLIST_FILE = ReactNativeBoilerplateTests/Info.plist; 592 | IPHONEOS_DEPLOYMENT_TARGET = 8.2; 593 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks"; 594 | PRODUCT_NAME = "$(TARGET_NAME)"; 595 | TEST_HOST = "$(BUILT_PRODUCTS_DIR)/ReactNativeBoilerplate.app/ReactNativeBoilerplate"; 596 | }; 597 | name = Debug; 598 | }; 599 | 00E356F71AD99517003FC87E /* Release */ = { 600 | isa = XCBuildConfiguration; 601 | buildSettings = { 602 | BUNDLE_LOADER = "$(TEST_HOST)"; 603 | COPY_PHASE_STRIP = NO; 604 | FRAMEWORK_SEARCH_PATHS = ( 605 | "$(SDKROOT)/Developer/Library/Frameworks", 606 | "$(inherited)", 607 | ); 608 | INFOPLIST_FILE = ReactNativeBoilerplateTests/Info.plist; 609 | IPHONEOS_DEPLOYMENT_TARGET = 8.2; 610 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks"; 611 | PRODUCT_NAME = "$(TARGET_NAME)"; 612 | TEST_HOST = "$(BUILT_PRODUCTS_DIR)/ReactNativeBoilerplate.app/ReactNativeBoilerplate"; 613 | }; 614 | name = Release; 615 | }; 616 | 13B07F941A680F5B00A75B9A /* Debug */ = { 617 | isa = XCBuildConfiguration; 618 | buildSettings = { 619 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 620 | DEAD_CODE_STRIPPING = NO; 621 | HEADER_SEARCH_PATHS = ( 622 | "$(inherited)", 623 | /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, 624 | "$(SRCROOT)/../node_modules/react-native/React/**", 625 | ); 626 | INFOPLIST_FILE = ReactNativeBoilerplate/Info.plist; 627 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; 628 | OTHER_LDFLAGS = "-ObjC"; 629 | }; 630 | name = Debug; 631 | }; 632 | 13B07F951A680F5B00A75B9A /* Release */ = { 633 | isa = XCBuildConfiguration; 634 | buildSettings = { 635 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 636 | HEADER_SEARCH_PATHS = ( 637 | "$(inherited)", 638 | /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, 639 | "$(SRCROOT)/../node_modules/react-native/React/**", 640 | ); 641 | INFOPLIST_FILE = ReactNativeBoilerplate/Info.plist; 642 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; 643 | OTHER_LDFLAGS = "-ObjC"; 644 | }; 645 | name = Release; 646 | }; 647 | 83CBBA201A601CBA00E9B192 /* Debug */ = { 648 | isa = XCBuildConfiguration; 649 | buildSettings = { 650 | ALWAYS_SEARCH_USER_PATHS = NO; 651 | BUILD_ENV = development; 652 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 653 | CLANG_CXX_LIBRARY = "libc++"; 654 | CLANG_ENABLE_MODULES = YES; 655 | CLANG_ENABLE_OBJC_ARC = YES; 656 | CLANG_WARN_BOOL_CONVERSION = YES; 657 | CLANG_WARN_CONSTANT_CONVERSION = YES; 658 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 659 | CLANG_WARN_EMPTY_BODY = YES; 660 | CLANG_WARN_ENUM_CONVERSION = YES; 661 | CLANG_WARN_INT_CONVERSION = YES; 662 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 663 | CLANG_WARN_UNREACHABLE_CODE = YES; 664 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 665 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 666 | COPY_PHASE_STRIP = NO; 667 | ENABLE_STRICT_OBJC_MSGSEND = YES; 668 | GCC_C_LANGUAGE_STANDARD = gnu99; 669 | GCC_DYNAMIC_NO_PIC = NO; 670 | GCC_OPTIMIZATION_LEVEL = 0; 671 | GCC_PREPROCESSOR_DEFINITIONS = ( 672 | "DEBUG=1", 673 | "$(inherited)", 674 | ); 675 | GCC_SYMBOLS_PRIVATE_EXTERN = NO; 676 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 677 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 678 | GCC_WARN_UNDECLARED_SELECTOR = YES; 679 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 680 | GCC_WARN_UNUSED_FUNCTION = YES; 681 | GCC_WARN_UNUSED_VARIABLE = YES; 682 | HEADER_SEARCH_PATHS = ( 683 | "$(inherited)", 684 | /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, 685 | "$(SRCROOT)/../node_modules/react-native/React/**", 686 | ); 687 | IPHONEOS_DEPLOYMENT_TARGET = 7.0; 688 | MTL_ENABLE_DEBUG_INFO = YES; 689 | ONLY_ACTIVE_ARCH = YES; 690 | PRODUCT_BUNDLE_IDENTIFIER = org.multunus.rnboilerplate.dev; 691 | PRODUCT_NAME = "RN Boilerplate Dev"; 692 | SDKROOT = iphoneos; 693 | }; 694 | name = Debug; 695 | }; 696 | 83CBBA211A601CBA00E9B192 /* Release */ = { 697 | isa = XCBuildConfiguration; 698 | buildSettings = { 699 | ALWAYS_SEARCH_USER_PATHS = NO; 700 | BUILD_ENV = production; 701 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 702 | CLANG_CXX_LIBRARY = "libc++"; 703 | CLANG_ENABLE_MODULES = YES; 704 | CLANG_ENABLE_OBJC_ARC = YES; 705 | CLANG_WARN_BOOL_CONVERSION = YES; 706 | CLANG_WARN_CONSTANT_CONVERSION = YES; 707 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 708 | CLANG_WARN_EMPTY_BODY = YES; 709 | CLANG_WARN_ENUM_CONVERSION = YES; 710 | CLANG_WARN_INT_CONVERSION = YES; 711 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 712 | CLANG_WARN_UNREACHABLE_CODE = YES; 713 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 714 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 715 | COPY_PHASE_STRIP = YES; 716 | ENABLE_NS_ASSERTIONS = NO; 717 | ENABLE_STRICT_OBJC_MSGSEND = YES; 718 | GCC_C_LANGUAGE_STANDARD = gnu99; 719 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 720 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 721 | GCC_WARN_UNDECLARED_SELECTOR = YES; 722 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 723 | GCC_WARN_UNUSED_FUNCTION = YES; 724 | GCC_WARN_UNUSED_VARIABLE = YES; 725 | HEADER_SEARCH_PATHS = ( 726 | "$(inherited)", 727 | /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, 728 | "$(SRCROOT)/../node_modules/react-native/React/**", 729 | ); 730 | IPHONEOS_DEPLOYMENT_TARGET = 7.0; 731 | MTL_ENABLE_DEBUG_INFO = NO; 732 | PRODUCT_BUNDLE_IDENTIFIER = org.multunus.rnboilerplate; 733 | PRODUCT_NAME = "RN Boilerplate"; 734 | SDKROOT = iphoneos; 735 | VALIDATE_PRODUCT = YES; 736 | }; 737 | name = Release; 738 | }; 739 | BA648F8A1CFC51510066767D /* Staging */ = { 740 | isa = XCBuildConfiguration; 741 | buildSettings = { 742 | ALWAYS_SEARCH_USER_PATHS = NO; 743 | BUILD_ENV = production; 744 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 745 | CLANG_CXX_LIBRARY = "libc++"; 746 | CLANG_ENABLE_MODULES = YES; 747 | CLANG_ENABLE_OBJC_ARC = YES; 748 | CLANG_WARN_BOOL_CONVERSION = YES; 749 | CLANG_WARN_CONSTANT_CONVERSION = YES; 750 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 751 | CLANG_WARN_EMPTY_BODY = YES; 752 | CLANG_WARN_ENUM_CONVERSION = YES; 753 | CLANG_WARN_INT_CONVERSION = YES; 754 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 755 | CLANG_WARN_UNREACHABLE_CODE = YES; 756 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 757 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 758 | COPY_PHASE_STRIP = YES; 759 | ENABLE_NS_ASSERTIONS = NO; 760 | ENABLE_STRICT_OBJC_MSGSEND = YES; 761 | GCC_C_LANGUAGE_STANDARD = gnu99; 762 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 763 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 764 | GCC_WARN_UNDECLARED_SELECTOR = YES; 765 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 766 | GCC_WARN_UNUSED_FUNCTION = YES; 767 | GCC_WARN_UNUSED_VARIABLE = YES; 768 | HEADER_SEARCH_PATHS = ( 769 | "$(inherited)", 770 | /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, 771 | "$(SRCROOT)/../node_modules/react-native/React/**", 772 | ); 773 | IPHONEOS_DEPLOYMENT_TARGET = 7.0; 774 | MTL_ENABLE_DEBUG_INFO = NO; 775 | PRODUCT_BUNDLE_IDENTIFIER = org.multunus.rnboilerplate.staging; 776 | PRODUCT_NAME = "RN Boilerplate Staging"; 777 | SDKROOT = iphoneos; 778 | VALIDATE_PRODUCT = YES; 779 | }; 780 | name = Staging; 781 | }; 782 | BA648F8B1CFC51510066767D /* Staging */ = { 783 | isa = XCBuildConfiguration; 784 | buildSettings = { 785 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 786 | HEADER_SEARCH_PATHS = ( 787 | "$(inherited)", 788 | /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, 789 | "$(SRCROOT)/../node_modules/react-native/React/**", 790 | ); 791 | INFOPLIST_FILE = ReactNativeBoilerplate/Info.plist; 792 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; 793 | OTHER_LDFLAGS = "-ObjC"; 794 | }; 795 | name = Staging; 796 | }; 797 | BA648F8C1CFC51510066767D /* Staging */ = { 798 | isa = XCBuildConfiguration; 799 | buildSettings = { 800 | BUNDLE_LOADER = "$(TEST_HOST)"; 801 | COPY_PHASE_STRIP = NO; 802 | FRAMEWORK_SEARCH_PATHS = ( 803 | "$(SDKROOT)/Developer/Library/Frameworks", 804 | "$(inherited)", 805 | ); 806 | INFOPLIST_FILE = ReactNativeBoilerplateTests/Info.plist; 807 | IPHONEOS_DEPLOYMENT_TARGET = 8.2; 808 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks"; 809 | PRODUCT_NAME = "$(TARGET_NAME)"; 810 | TEST_HOST = "$(BUILT_PRODUCTS_DIR)/ReactNativeBoilerplate.app/ReactNativeBoilerplate"; 811 | }; 812 | name = Staging; 813 | }; 814 | /* End XCBuildConfiguration section */ 815 | 816 | /* Begin XCConfigurationList section */ 817 | 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "ReactNativeBoilerplateTests" */ = { 818 | isa = XCConfigurationList; 819 | buildConfigurations = ( 820 | 00E356F61AD99517003FC87E /* Debug */, 821 | 00E356F71AD99517003FC87E /* Release */, 822 | BA648F8C1CFC51510066767D /* Staging */, 823 | ); 824 | defaultConfigurationIsVisible = 0; 825 | defaultConfigurationName = Release; 826 | }; 827 | 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "ReactNativeBoilerplate" */ = { 828 | isa = XCConfigurationList; 829 | buildConfigurations = ( 830 | 13B07F941A680F5B00A75B9A /* Debug */, 831 | 13B07F951A680F5B00A75B9A /* Release */, 832 | BA648F8B1CFC51510066767D /* Staging */, 833 | ); 834 | defaultConfigurationIsVisible = 0; 835 | defaultConfigurationName = Release; 836 | }; 837 | 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "ReactNativeBoilerplate" */ = { 838 | isa = XCConfigurationList; 839 | buildConfigurations = ( 840 | 83CBBA201A601CBA00E9B192 /* Debug */, 841 | 83CBBA211A601CBA00E9B192 /* Release */, 842 | BA648F8A1CFC51510066767D /* Staging */, 843 | ); 844 | defaultConfigurationIsVisible = 0; 845 | defaultConfigurationName = Release; 846 | }; 847 | /* End XCConfigurationList section */ 848 | }; 849 | rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */; 850 | } 851 | -------------------------------------------------------------------------------- /ios/ReactNativeBoilerplate.xcodeproj/xcshareddata/xcschemes/Development.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 29 | 35 | 36 | 37 | 38 | 39 | 44 | 45 | 47 | 53 | 54 | 55 | 56 | 57 | 63 | 64 | 65 | 66 | 67 | 68 | 78 | 80 | 86 | 87 | 88 | 89 | 90 | 91 | 97 | 99 | 105 | 106 | 107 | 108 | 110 | 111 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /ios/ReactNativeBoilerplate.xcodeproj/xcshareddata/xcschemes/Production.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 29 | 35 | 36 | 37 | 38 | 39 | 44 | 45 | 47 | 53 | 54 | 55 | 56 | 57 | 63 | 64 | 65 | 66 | 67 | 68 | 78 | 80 | 86 | 87 | 88 | 89 | 90 | 91 | 97 | 99 | 105 | 106 | 107 | 108 | 110 | 111 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /ios/ReactNativeBoilerplate.xcodeproj/xcshareddata/xcschemes/Staging.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 29 | 35 | 36 | 37 | 38 | 39 | 44 | 45 | 47 | 53 | 54 | 55 | 56 | 57 | 63 | 64 | 65 | 66 | 67 | 68 | 78 | 80 | 86 | 87 | 88 | 89 | 90 | 91 | 97 | 99 | 105 | 106 | 107 | 108 | 110 | 111 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /ios/ReactNativeBoilerplate/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/ReactNativeBoilerplate/AppDelegate.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import "AppDelegate.h" 11 | 12 | #import "RCTRootView.h" 13 | 14 | @implementation AppDelegate 15 | 16 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 17 | { 18 | NSString* buildEnvironment = [[[NSBundle mainBundle] infoDictionary] valueForKey:@"BuildEnvironment"]; 19 | NSURL *jsCodeLocation; 20 | 21 | if([buildEnvironment isEqualToString:@"development"]) { 22 | jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"]; 23 | } else { 24 | jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 25 | } 26 | 27 | RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation 28 | moduleName:@"ReactNativeBoilerplate" 29 | initialProperties:nil 30 | launchOptions:launchOptions]; 31 | 32 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 33 | UIViewController *rootViewController = [UIViewController new]; 34 | rootViewController.view = rootView; 35 | self.window.rootViewController = rootViewController; 36 | [self.window makeKeyAndVisible]; 37 | return YES; 38 | } 39 | 40 | @end 41 | -------------------------------------------------------------------------------- /ios/ReactNativeBoilerplate/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/ReactNativeBoilerplate/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } -------------------------------------------------------------------------------- /ios/ReactNativeBoilerplate/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | BuildEnvironment 6 | $(BUILD_ENV) 7 | CFBundleDevelopmentRegion 8 | en 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIdentifier 12 | $(PRODUCT_BUNDLE_IDENTIFIER) 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 | NSAllowsArbitraryLoads 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /ios/ReactNativeBoilerplate/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/ReactNativeBoilerplateTests/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/ReactNativeBoilerplateTests/ReactNativeBoilerplateTests.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | #import 12 | 13 | #import "RCTLog.h" 14 | #import "RCTRootView.h" 15 | 16 | #define TIMEOUT_SECONDS 600 17 | #define TEXT_TO_LOOK_FOR @"Welcome to React Native!" 18 | 19 | @interface ReactNativeBoilerplateTests : XCTestCase 20 | 21 | @end 22 | 23 | @implementation ReactNativeBoilerplateTests 24 | 25 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test 26 | { 27 | if (test(view)) { 28 | return YES; 29 | } 30 | for (UIView *subview in [view subviews]) { 31 | if ([self findSubviewInView:subview matching:test]) { 32 | return YES; 33 | } 34 | } 35 | return NO; 36 | } 37 | 38 | - (void)testRendersWelcomeScreen 39 | { 40 | UIViewController *vc = [[[[UIApplication sharedApplication] delegate] window] rootViewController]; 41 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 42 | BOOL foundElement = NO; 43 | 44 | __block NSString *redboxError = nil; 45 | RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 46 | if (level >= RCTLogLevelError) { 47 | redboxError = message; 48 | } 49 | }); 50 | 51 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 52 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 53 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 54 | 55 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { 56 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 57 | return YES; 58 | } 59 | return NO; 60 | }]; 61 | } 62 | 63 | RCTSetLogFunction(RCTDefaultLogFunction); 64 | 65 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 66 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 67 | } 68 | 69 | 70 | @end 71 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ReactNativeBoilerplate", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "lint": "eslint .", 7 | "test": "mocha --require test/setup-tests.js --recursive src/**/__specs__/*.spec.js", 8 | "watch:test": "mocha --require test/setup-tests.js --recursive src/**/__specs__/*.spec.js --watch", 9 | "cover": "nyc --reporter=lcov --reporter=text --reporter=html npm run test", 10 | "remotedev": "remotedev --hostname=localhost --port=8000", 11 | "start": "node node_modules/react-native/local-cli/cli.js start" 12 | }, 13 | "nyc": { 14 | "exclude": [ 15 | "**/*.spec.js", 16 | "test" 17 | ] 18 | }, 19 | "dependencies": { 20 | "axios": "^0.9.1", 21 | "es6-symbol": "^3.0.2", 22 | "immutable": "^3.7.6", 23 | "react": "^0.14.8", 24 | "react-native": "^0.25.1", 25 | "react-redux": "^4.4.0", 26 | "redux": "^3.3.1", 27 | "redux-logger": "^2.5.2", 28 | "redux-persist": "^2.0.1", 29 | "redux-persist-immutable": "^1.0.5", 30 | "redux-saga": "^0.8.2" 31 | }, 32 | "devDependencies": { 33 | "babel-eslint": "^5.0.0", 34 | "babel-preset-react-native": "^1.4.0", 35 | "chai": "^3.5.0", 36 | "chai-as-promised": "^5.2.0", 37 | "chai-immutable": "^1.5.3", 38 | "enzyme": "^2.0.0", 39 | "eslint": "^2.1.0", 40 | "eslint-plugin-react": "^3.16.1", 41 | "eslint-plugin-react-native": "^1.0.0", 42 | "mocha": "^2.4.5", 43 | "nock": "^7.2.2", 44 | "nyc": "^5.6.0", 45 | "react-addons-test-utils": "^0.14.8", 46 | "react-dom": "^0.14.8", 47 | "react-native-mock": "0.2.0", 48 | "remote-redux-devtools": "^0.1.2", 49 | "remotedev-server": "0.0.3", 50 | "sinon": "^1.17.3" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/__specs__/app.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react-native'; 2 | import { shallow } from 'enzyme'; 3 | import { expect } from 'chai'; 4 | 5 | import CommentBox from '../components/CommentBox.js'; 6 | import App from '../app.js'; 7 | describe('', () => { 8 | it('should render a commentBox component', () => { 9 | const wrapper = shallow(); 10 | 11 | expect(wrapper.find(CommentBox)).to.have.length(1); 12 | }); 13 | 14 | it('should pass data as props on rendering CommentBox component', () => { 15 | const wrapper = shallow(); 16 | 17 | expect(wrapper.find(CommentBox).props().asyncStorageKey).to.eql('comments'); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /src/__specs__/sanityCheck.spec.js: -------------------------------------------------------------------------------- 1 | import { expect } from 'chai'; 2 | 3 | describe('sanity check', () => { 4 | it('should pass', () => { 5 | const test = true; 6 | expect(test).to.equal(true); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /src/app.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react-native'; 2 | import { Provider } from 'react-redux'; 3 | import Root from './screens/root'; 4 | import store from './store/store'; 5 | 6 | 7 | export default class App extends Component { 8 | render() { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/components/Comment.js: -------------------------------------------------------------------------------- 1 | import React, {Component, View, Text } from 'react-native'; 2 | 3 | export default class Comment extends React.Component { 4 | render() { 5 | return( 6 | 7 | 8 | {this.props.author} 9 | 10 | 11 | {this.props.children} 12 | 13 | 14 | ); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/components/CommentBox.js: -------------------------------------------------------------------------------- 1 | import React, {Component,Text, View, AsyncStorage } from 'react-native'; 2 | import CommentList from './CommentList.js'; 3 | import CommentForm from './CommentForm.js'; 4 | 5 | export default class CommentBox extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | this.state = {data: []}; 9 | this.handleCommentSubmit = this.handleCommentSubmit.bind(this); 10 | this.getComments = this.getComments.bind(this); 11 | } 12 | 13 | static propTypes = { 14 | asyncStorageKey: React.PropTypes.string 15 | }; 16 | 17 | getComments() { 18 | AsyncStorage.getItem(this.props.asyncStorageKey) 19 | .then((comments) => { 20 | comments = JSON.parse(comments); 21 | this.setState({ data: comments }); 22 | }) 23 | .catch(() => { 24 | }); 25 | } 26 | 27 | handleCommentSubmit(comment_data) { 28 | var comments = this.state.data; 29 | comments.push(comment_data); 30 | AsyncStorage.setItem(this.props.asyncStorageKey, JSON.stringify(comments)); 31 | this.getComments(); 32 | } 33 | 34 | render() { 35 | return( 36 | 37 | Comment It 38 | 39 | 40 | 41 | ); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/components/CommentForm.js: -------------------------------------------------------------------------------- 1 | import React, {Component, View, TouchableNativeFeedback, Text, TextInput} from 'react-native'; 2 | 3 | export default class CommentForm extends React.Component { 4 | 5 | constructor(props) { 6 | super(props); 7 | this.state = {name: '', comment: ''}; 8 | } 9 | static propTypes = { 10 | onCommentSubmit: React.PropTypes.func 11 | }; 12 | 13 | render() { 14 | return( 15 | 16 | this.setState({name: text})} 20 | value={this.state.name} 21 | /> 22 | this.setState({comment: content})} 26 | value={this.state.comment} 27 | /> 28 | this.onPressButton()}> 30 | 31 | Submit 32 | 33 | 34 | 35 | ); 36 | } 37 | onPressButton() { 38 | var author = this.state.name.trim(); 39 | var comment = this.state.comment.trim(); 40 | this.state = {name: '', comment: ''}; 41 | this.props.onCommentSubmit({author: author, text: comment}); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/components/CommentList.js: -------------------------------------------------------------------------------- 1 | import React, {Component, View, ListView} from 'react-native'; 2 | import Comment from './Comment.js'; 3 | 4 | export default class CommentList extends React.Component { 5 | static propTypes = { 6 | data: React.PropTypes.array 7 | }; 8 | 9 | constructor(props) { 10 | super(props); 11 | this.state = { 12 | dataSource: new ListView.DataSource({rowHasChanged: 13 | (r1, r2) => r1 !== r2}).cloneWithRows(this.props.data) 14 | }; 15 | } 16 | 17 | componentWillReceiveProps(){ 18 | this.setState({ 19 | dataSource: this.state.dataSource.cloneWithRows(this.props.data) 20 | }); 21 | } 22 | 23 | render() { 24 | return ( 25 | 29 | ); 30 | } 31 | renderComment(row) { 32 | return ( 33 | {row.text} 34 | ); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/components/__specs__/Comment.spec.js: -------------------------------------------------------------------------------- 1 | import React, {Component, View, Text} from 'react-native'; 2 | import { shallow } from 'enzyme'; 3 | import { expect } from 'chai'; 4 | 5 | import Comment from '../Comment.js'; 6 | 7 | describe('', () => { 8 | it('should be a view component', () => { 9 | const wrapper = shallow(); 10 | 11 | expect(wrapper.type()).to.equal(View); 12 | }); 13 | 14 | it('should render the given comment', () => { 15 | const wrapper = shallow( This is a comment ); 16 | 17 | expect(wrapper.contains( This is a comment )).to.equal(true); 18 | }); 19 | 20 | it('should render the given author name', () => { 21 | const wrapper = shallow(); 22 | 23 | expect(wrapper.contains(Author)).to.equal(true); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/components/__specs__/CommentBox.spec.js: -------------------------------------------------------------------------------- 1 | import React, { View, Text, AsyncStorage } from 'react-native'; 2 | import { shallow } from 'enzyme'; 3 | import { expect } from 'chai'; 4 | import sinon from 'sinon'; 5 | 6 | import CommentBox from '../CommentBox.js'; 7 | import CommentList from '../CommentList.js'; 8 | import CommentForm from '../CommentForm.js'; 9 | 10 | describe('', () => { 11 | beforeEach(function() { 12 | wrapper = shallow(); 13 | }); 14 | 15 | it('should be a view component', () => { 16 | expect(wrapper.type()).to.equal(View); 17 | }); 18 | 19 | it('should have a title Comment It', () => { 20 | expect(wrapper.contains(Comment It)).to.equal(true); 21 | }); 22 | 23 | it('should render CommentList component', () => { 24 | expect(wrapper.find(CommentList)).to.have.length(1); 25 | }); 26 | 27 | it('should render CommentForm component', () => { 28 | expect(wrapper.find(CommentForm)).to.have.length(1); 29 | }); 30 | 31 | it('should have an initial state', () => { 32 | expect(wrapper.state('data').length).to.equal(0); 33 | }); 34 | 35 | it('should pass its state data as props to commentlist component', () => { 36 | expect(wrapper.find(CommentList).props().data).to.eql(wrapper.state('data')); 37 | }); 38 | 39 | it('should pass its handleCommentSubmit method as props to CommentForm component', () => { 40 | commentBox = new CommentBox(); 41 | 42 | var definedMethod = commentBox.handleCommentSubmit; 43 | 44 | var passedMethod = wrapper.find(CommentForm).props().onCommentSubmit; 45 | expect(definedMethod.toString()).to.equal(passedMethod.toString()); 46 | }); 47 | 48 | describe('handleCommentSubmit', () => { 49 | it('stores comment data using asyncstorage on comment submit', () => { 50 | var data = [ 51 | { author: "Pete Hunt", text: "This is one comment"}, 52 | { author: "Jordan Walke", text: "This is a super comment"}, 53 | { author: "Jordan Walkerr", text: "This is an ordinary comment"} 54 | ]; 55 | 56 | commentBox = new CommentBox({asyncStorageKey: 'comments'}); 57 | commentBox.state.data = data; 58 | var commentData = {author: 'JK', text: 'Arsenal is the best'}; 59 | data.push(commentData); 60 | var spy = sinon.spy(AsyncStorage, "setItem"); 61 | 62 | commentBox.handleCommentSubmit(commentData); 63 | 64 | expect(spy.calledOnce).to.be.true; 65 | expect(spy.calledWith('comments', JSON.stringify(data))).to.be.true; 66 | }); 67 | it('invokes the getComments method', () => { 68 | var data = [ 69 | { author: "Pete Hunt", text: "This is one comment"}, 70 | { author: "Jordan Walke", text: "This is a super comment"}, 71 | { author: "Jordan Walkerr", text: "This is an ordinary comment"} 72 | ]; 73 | 74 | commentBox = new CommentBox({asyncStorageKey: 'comments'}); 75 | sinon.stub(commentBox, "getComments"); 76 | var commentData = {author: 'JK', text: 'Arsenal is the best'}; 77 | 78 | commentBox.handleCommentSubmit(commentData); 79 | 80 | expect(commentBox.getComments.calledOnce).to.be.true; 81 | }); 82 | }); 83 | }); 84 | -------------------------------------------------------------------------------- /src/components/__specs__/CommentForm.spec.js: -------------------------------------------------------------------------------- 1 | import React, { View, TouchableNativeFeedback, TextInput, Text } from 'react-native'; 2 | 3 | import { shallow } from 'enzyme'; 4 | import { expect } from 'chai'; 5 | import sinon from 'sinon'; 6 | 7 | import CommentForm from '../CommentForm.js'; 8 | import CommentBox from '../CommentBox.js'; 9 | 10 | describe('', () => { 11 | beforeEach(function() { 12 | wrapper = shallow(); 13 | }); 14 | 15 | it('should be a view component', () => { 16 | expect(wrapper.type()).to.equal(View); 17 | }); 18 | 19 | it('should have 2 TextInput components', () => { 20 | expect(wrapper.find(TextInput)).to.have.length(2); 21 | }); 22 | 23 | it('should have a submit button', () => { 24 | expect(wrapper.find(TouchableNativeFeedback)).to.have.length(1); 25 | expect(wrapper.find(TouchableNativeFeedback).containsMatchingElement(Submit)).to.equal(true); 26 | }); 27 | 28 | it('should have author input component with value dependent on state', () => { 29 | wrapper.setState({name: 'JK'}); 30 | 31 | expect(wrapper.find(TextInput).first().props().value).to.equal('JK'); 32 | }); 33 | 34 | it('should have the comment input component with value dependent on state', () => { 35 | wrapper.setState({comment: 'An awesome comment'}); 36 | 37 | expect(wrapper.find(TextInput).at(1).props().value).to.equal('An awesome comment'); 38 | }); 39 | 40 | it('should change state when the text of author input component changes', () => { 41 | const authorInputComponent = wrapper.find('TextInput').first(); 42 | 43 | authorInputComponent.simulate('ChangeText','wenger'); 44 | expect(wrapper.state('name')).to.equal('wenger'); 45 | }); 46 | 47 | it('should change state when the text of comment input component changes', () => { 48 | const commentInputComponent = wrapper.find('TextInput').at(1); 49 | 50 | commentInputComponent.simulate('ChangeText','arsenal'); 51 | 52 | expect(wrapper.state('comment')).to.equal('arsenal'); 53 | }); 54 | 55 | it('invokes handleCommitSubmit method of CommentBox with author and comment', () => { 56 | sinon.stub(CommentBox.prototype, "handleCommentSubmit"); 57 | 58 | const wrapper = shallow(); 59 | const submitButton = wrapper.find('TouchableNativeFeedback').first(); 60 | wrapper.setState({name: 'JK '}); 61 | wrapper.setState({comment: ' Arsenal is the best'}); 62 | 63 | submitButton.simulate('press'); 64 | 65 | expect(CommentBox.prototype.handleCommentSubmit.calledWith({author: 'JK', text: 'Arsenal is the best'})).to.be.true; 66 | CommentBox.prototype.handleCommentSubmit.restore(); 67 | }); 68 | 69 | it('sets the state of two input fields to the initial state on press', () => { 70 | sinon.stub(CommentBox.prototype, "handleCommentSubmit"); 71 | 72 | const wrapper = shallow(); 73 | const submitButton = wrapper.find('TouchableNativeFeedback').first(); 74 | wrapper.setState({name: 'JK'}); 75 | wrapper.setState({comment: 'Arsenal is the best'}); 76 | 77 | submitButton.simulate('press'); 78 | 79 | expect(wrapper.state('name')).to.equal(""); 80 | expect(wrapper.state('comment')).to.equal(""); 81 | 82 | CommentBox.prototype.handleCommentSubmit.restore(); 83 | }); 84 | }); 85 | -------------------------------------------------------------------------------- /src/components/__specs__/CommentList.spec.js: -------------------------------------------------------------------------------- 1 | import React, { View, ListView } from 'react-native'; 2 | 3 | import { shallow } from 'enzyme'; 4 | import { expect } from 'chai'; 5 | 6 | import CommentList from '../CommentList.js'; 7 | import Comment from '../Comment.js'; 8 | 9 | describe('', () => { 10 | beforeEach(function() { 11 | data = [ 12 | { author: "Pete Hunt", text: "This is one comment"}, 13 | { author: "Jordan Walke", text: "This is a super comment"}, 14 | { author: "Jordan Walkerr", text: "This is an ordinary comment"} 15 | ]; 16 | }); 17 | 18 | it('should define its propTypes', () => { 19 | expect(CommentList.propTypes.data).to.be.an('function'); 20 | }); 21 | 22 | it('should be a ListView component', () => { 23 | const wrapper = shallow(); 24 | 25 | expect(wrapper.type()).to.equal(ListView); 26 | }); 27 | 28 | it('should have correct datasource in state', () => { 29 | const wrapper = shallow(); 30 | 31 | expect(wrapper.state('dataSource')._dataBlob).to.equal(data); 32 | }); 33 | 34 | }); 35 | -------------------------------------------------------------------------------- /src/components/app.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react-native'; 2 | import CommentBox from './components/CommentBox.js'; 3 | 4 | export default class App extends Component { 5 | render() { 6 | 7 | return ( 8 | 9 | ); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/modules/auth/__specs__/authAction.spec.js: -------------------------------------------------------------------------------- 1 | import { types } from './../constants'; 2 | import { registerUserRequest, registerUserSuccess, registerUserFail, setRegistering } from './../actions'; 3 | 4 | describe('registerUser actions', () => { 5 | describe('#registerUserRequest', () => { 6 | it('should create an action of type REGISTER_USER_REQUEST', () => { 7 | const expectedAction = { 8 | type: types.REGISTER_USER_REQUEST, 9 | credentials: { username: 'username', password: 'password' }, 10 | }; 11 | expect(registerUserRequest({ username: 'username', password: 'password' })).to.deep.eql(expectedAction); 12 | }); 13 | }); 14 | describe('#registerUserSuccess', () => { 15 | it('should create an action of type REGISTER_USER_SUCCESS', () => { 16 | const expectedAction = { 17 | type: types.REGISTER_USER_SUCCESS, 18 | token: 'token', 19 | }; 20 | expect(registerUserSuccess('token')).to.deep.equal(expectedAction); 21 | }); 22 | }); 23 | describe('#registerUserFail', () => { 24 | it('shoud create an action of type REGISTER_USER_FAIL', () => { 25 | const expectedAction = { 26 | type: types.REGISTER_USER_FAIL, 27 | error: 'error', 28 | }; 29 | expect(registerUserFail('error')).to.deep.equal(expectedAction); 30 | }); 31 | }); 32 | describe('#setRegistering', () => { 33 | it('shoud create ana action of type SET_REGISTERING', () => { 34 | const expectedAction = { 35 | type: types.SET_REGISTERING, 36 | value: true, 37 | }; 38 | expect(setRegistering(true)).to.deep.equal(expectedAction); 39 | }); 40 | }); 41 | }); 42 | -------------------------------------------------------------------------------- /src/modules/auth/__specs__/authReducer.spec.js: -------------------------------------------------------------------------------- 1 | import { Map } from 'immutable'; 2 | import reducer from './../reducer'; 3 | import { registerUserSuccess, registerUserFail, setRegistering } from './../actions'; 4 | 5 | describe('auth reducer', () => { 6 | it('should set the initial state', () => { 7 | const initialState = Map({ 8 | isRegistering: false, 9 | userToken: undefined, 10 | error: undefined, 11 | }); 12 | expect(reducer(undefined, {})).to.deep.equal(initialState); 13 | }); 14 | it('should handle SET_REGISTERING', () => { 15 | expect(reducer(Map(), setRegistering(true))).to.equal(Map({ isRegistering: true })); 16 | }); 17 | it('should handle REGISTER_USER_SUCCESS', () => { 18 | expect(reducer(Map(), registerUserSuccess('token'))).to.equal(Map({ userToken: 'token' })); 19 | }); 20 | it('should handle REGISTER_USER_FAIL', () => { 21 | expect(reducer(Map(), registerUserFail('error'))).to.equal(Map({ error: 'error' })); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /src/modules/auth/__specs__/authSaga.spec.js: -------------------------------------------------------------------------------- 1 | import { call, put, take } from 'redux-saga/effects'; 2 | import authWatcher, { registerUser } from './../saga'; 3 | import { registerUserRequest, registerUserSuccess, registerUserFail, setRegistering } from './../actions'; 4 | import { Api } from './../../../services/api/api'; 5 | 6 | describe('auth saga', () => { 7 | const credentials = { 8 | username: 'username', 9 | password: 'password', 10 | }; 11 | describe('#registerUser', () => { 12 | let generator; 13 | beforeEach(() => { 14 | generator = registerUser(credentials); 15 | }); 16 | it('must dispatch SET_REGISTERING with true value', () => { 17 | let next = generator.next(); 18 | expect(next.value).to.deep.equal(put(setRegistering(true))); 19 | }); 20 | it('must yield Api.registerUser', () => { 21 | generator.next(); 22 | let next = generator.next(); 23 | expect(next.value).to.deep.equal(call(Api.registerUser, credentials)); 24 | }); 25 | it('must dispatch SET_REGISTERING with false value', () => { 26 | generator.next(); 27 | generator.next(); 28 | let next = generator.next({}); 29 | expect(next.value).to.deep.equal(put(setRegistering(false))); 30 | }); 31 | context('on success', () => { 32 | it('must dispatch REGISTER_USER_SUCCESS with token value', () => { 33 | generator.next(); 34 | generator.next(); 35 | generator.next({ data: { id_token: 'token' }, status: 'SUCCESS' }); 36 | let next = generator.next(); 37 | expect(next.value).to.deep.equal(put(registerUserSuccess('token'))); 38 | }); 39 | }); 40 | context('on failure', () => { 41 | it('must dispatch REGISTER_USER_FAIL with error value', () => { 42 | generator.next(); 43 | generator.next(); 44 | generator.next({ data: 'error', status: 'FAIL' }); 45 | let next = generator.next(); 46 | expect(next.value).to.deep.equal(put(registerUserFail('error'))); 47 | }); 48 | }); 49 | }); 50 | describe('#authWatcher', () => { 51 | let generator; 52 | beforeEach(() => { 53 | generator = authWatcher(); 54 | }); 55 | it('must take REGISTER_USER_REQUEST', () => { 56 | let next = generator.next(); 57 | expect(next.value).to.deep.equal(take(registerUserRequest().type)); 58 | }); 59 | it('must yield registerUser', () => { 60 | generator.next(); 61 | let next = generator.next({ credentials }); 62 | expect(next.value).to.deep.equal(call(registerUser, credentials)); 63 | }); 64 | }); 65 | }); 66 | -------------------------------------------------------------------------------- /src/modules/auth/actions.js: -------------------------------------------------------------------------------- 1 | import { types } from './constants'; 2 | 3 | export function registerUserRequest(credentials) { 4 | return { 5 | type: types.REGISTER_USER_REQUEST, 6 | credentials, 7 | }; 8 | } 9 | 10 | export function registerUserSuccess(token) { 11 | return { 12 | type: types.REGISTER_USER_SUCCESS, 13 | token, 14 | }; 15 | } 16 | 17 | export function registerUserFail(error) { 18 | return { 19 | type: types.REGISTER_USER_FAIL, 20 | error, 21 | }; 22 | } 23 | 24 | export function setRegistering(value) { 25 | return { 26 | type: types.SET_REGISTERING, 27 | value, 28 | }; 29 | } 30 | -------------------------------------------------------------------------------- /src/modules/auth/constants.js: -------------------------------------------------------------------------------- 1 | export const types = { 2 | REGISTER_USER_REQUEST: 'REGISTER_USER_REQUEST', 3 | REGISTER_USER_SUCCESS: 'REGISTER_USER_SUCCESS', 4 | REGISTER_USER_FAIL: 'REGISTER_USER_FAIL', 5 | SET_REGISTERING: 'SET_REGISTERING', 6 | }; 7 | -------------------------------------------------------------------------------- /src/modules/auth/reducer.js: -------------------------------------------------------------------------------- 1 | import { Map } from 'immutable'; 2 | import { types } from './constants'; 3 | 4 | const initialState = Map({ 5 | isRegistering: false, 6 | userToken: undefined, 7 | error: undefined, 8 | }); 9 | 10 | export default function auth(state = initialState, action) { 11 | switch (action.type) { 12 | case types.SET_REGISTERING: 13 | return state.set('isRegistering', action.value); 14 | case types.REGISTER_USER_SUCCESS: 15 | return state.set('userToken', action.token); 16 | case types.REGISTER_USER_FAIL: 17 | return state.set('error', action.error); 18 | default: 19 | return state; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/modules/auth/saga.js: -------------------------------------------------------------------------------- 1 | /*eslint no-constant-condition: 0*/ 2 | import { call, put, take } from 'redux-saga/effects'; 3 | import { registerUserRequest, registerUserSuccess, registerUserFail, setRegistering } from './actions'; 4 | import { Api } from './../../services/api/api'; 5 | 6 | export function* registerUser(credentials) { 7 | yield put(setRegistering(true)); 8 | const response = yield call(Api.registerUser, credentials); 9 | yield put(setRegistering(false)); 10 | if(response.status === 'SUCCESS') 11 | yield put(registerUserSuccess(response.data.id_token)); 12 | else 13 | yield put(registerUserFail(response.data)); 14 | } 15 | 16 | export default function* authWatcher() { 17 | while(true) { 18 | const { credentials } = yield take(registerUserRequest().type); 19 | yield call(registerUser, credentials); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/modules/reducers.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux'; 2 | import auth from './auth/reducer.js'; 3 | 4 | export default combineReducers({ 5 | auth, 6 | }); 7 | -------------------------------------------------------------------------------- /src/modules/sagas.js: -------------------------------------------------------------------------------- 1 | import createSagaMiddleware from 'redux-saga'; 2 | import authWatcher from './auth/saga'; 3 | 4 | const sagaMiddleware = createSagaMiddleware(authWatcher); 5 | export default sagaMiddleware; 6 | -------------------------------------------------------------------------------- /src/screens/auth/components/registerComponent.android.js: -------------------------------------------------------------------------------- 1 | import React, { ProgressBarAndroid, StyleSheet, Text, TouchableNativeFeedback, View } from 'react-native'; 2 | import commonStyles from './registerComponentStyles'; 3 | 4 | const styles = StyleSheet.create(commonStyles); 5 | 6 | const RegisterComponent = ({ onRegister, isRegistering, buttonText }) => { 7 | 8 | const onPressRegister = () => onRegister({ username: 'username', password: 'password' }); 9 | 10 | if(isRegistering) { 11 | return ( 12 | 13 | 14 | 15 | ); 16 | } else { 17 | return ( 18 | 19 | 22 | 23 | 24 | {buttonText} 25 | 26 | 27 | 28 | 29 | ); 30 | } 31 | }; 32 | 33 | export default RegisterComponent; 34 | -------------------------------------------------------------------------------- /src/screens/auth/components/registerComponent.ios.js: -------------------------------------------------------------------------------- 1 | import React, { ActivityIndicatorIOS, StyleSheet, Text, TouchableHighlight, View } from 'react-native'; 2 | import commonStyles from './registerComponentStyles'; 3 | 4 | const styles = StyleSheet.create(commonStyles); 5 | 6 | const RegisterComponent = ({ onRegister, isRegistering, buttonText }) => { 7 | 8 | const onPressRegister = () => onRegister({ username: 'username', password: 'password' }); 9 | 10 | if(isRegistering) { 11 | return ( 12 | 13 | 14 | 15 | ); 16 | } else { 17 | return ( 18 | 19 | 20 | 21 | 22 | {buttonText} 23 | 24 | 25 | 26 | 27 | ); 28 | } 29 | }; 30 | 31 | export default RegisterComponent; 32 | -------------------------------------------------------------------------------- /src/screens/auth/components/registerComponentStyles.js: -------------------------------------------------------------------------------- 1 | const styles = { 2 | container: { 3 | flex: 1, 4 | justifyContent: 'center', 5 | alignItems: 'center', 6 | backgroundColor: 'transparent', 7 | }, 8 | progressBar: { 9 | flex: 1, 10 | justifyContent: 'space-around', 11 | alignItems: 'center', 12 | }, 13 | button: { 14 | width: 80, 15 | height: 30, 16 | justifyContent: 'center', 17 | alignItems: 'center', 18 | backgroundColor: 'blue', 19 | }, 20 | text: { 21 | color: 'white', 22 | }, 23 | }; 24 | 25 | export default styles; 26 | -------------------------------------------------------------------------------- /src/screens/auth/containers/authContainer.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from 'react-native'; 2 | import RegisterComponent from './../components/registerComponent'; 3 | import { connect } from 'react-redux'; 4 | import { registerUserRequest } from './../../../modules/auth/actions'; 5 | 6 | const mapStateToProps = (state) => { 7 | return { 8 | isRegistering: state.auth.get('isRegistering'), 9 | }; 10 | }; 11 | 12 | const mapDispatchToProps = (dispatch) => { 13 | return { 14 | onRegister: (credentials) => { 15 | dispatch(registerUserRequest(credentials)); 16 | }, 17 | }; 18 | }; 19 | 20 | class Auth extends Component { 21 | render() { 22 | return ( 23 | 27 | ); 28 | } 29 | } 30 | 31 | Auth.propTypes = { 32 | isRegistering: PropTypes.bool, 33 | onRegister: PropTypes.func, 34 | }; 35 | 36 | 37 | export default connect(mapStateToProps, mapDispatchToProps)(Auth); 38 | -------------------------------------------------------------------------------- /src/screens/root.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react-native'; 2 | import Auth from './auth/containers/authContainer'; 3 | 4 | export default class Root extends Component { 5 | render() { 6 | return ( 7 | 8 | ); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/services/api/__specs__/api.spec.js: -------------------------------------------------------------------------------- 1 | import { Api } from './../api'; 2 | import nock from 'nock'; 3 | import config from './../../../../config.json'; 4 | 5 | describe('Api', () => { 6 | describe('#registerUser', () => { 7 | afterEach(() => { 8 | nock.cleanAll(); 9 | }); 10 | context('on success', () => { 11 | const credentials = { 12 | username: 'username', 13 | password: 'password', 14 | }; 15 | it('gives a response object with status SUCCESS', () => { 16 | nock(config.apiURL) 17 | .post('/users', credentials) 18 | .reply(200, { id_token: 'token' }); 19 | const response = Api.registerUser(credentials); 20 | return expect(response).to.eventually.deep.equal({ data: { id_token: 'token' }, status: 'SUCCESS' }); 21 | }); 22 | }); 23 | context('on failure', () => { 24 | const credentials = { 25 | username: 'username', 26 | password: 'password', 27 | }; 28 | it('gives a response object with status FAIL', () => { 29 | nock(config.apiURL) 30 | .post('/users', credentials) 31 | .reply(404, { error: 'error' }); 32 | const response = Api.registerUser(credentials); 33 | return expect(response).to.eventually.deep.equal({ data: { error: 'error' }, status: 'FAIL' }); 34 | }); 35 | }); 36 | }); 37 | }); 38 | -------------------------------------------------------------------------------- /src/services/api/api.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | import config from './../../../config.json'; 3 | 4 | let axiosClient = axios.create({ 5 | baseURL: config.apiURL, 6 | timeout: 4000, 7 | }); 8 | 9 | export const Api = { 10 | registerUser(credentials) { 11 | return axiosClient.post('/users', credentials) 12 | .then(response => { return { data: response.data, status: 'SUCCESS' }; }) 13 | .catch(error => { return { data: error.data, status: 'FAIL' }; }); 14 | }, 15 | }; 16 | -------------------------------------------------------------------------------- /src/store/store.js: -------------------------------------------------------------------------------- 1 | import 'es6-symbol/implement'; // Polyfill for ES6 symbol 2 | import { AsyncStorage } from 'react-native'; 3 | import { applyMiddleware, createStore } from 'redux'; 4 | import { persistStore, autoRehydrate } from 'redux-persist'; 5 | import reducers from './../modules/reducers'; 6 | import sagaMiddleware from './../modules/sagas'; 7 | import { Iterable } from 'immutable'; 8 | import reduxPersistImmutable from 'redux-persist-immutable'; 9 | 10 | const middlewares = [sagaMiddleware]; 11 | 12 | if (process.env.NODE_ENV === 'development') { 13 | const stateTransformer = (state) => { 14 | const logState = {}; 15 | for (let key in state) { 16 | if (state.hasOwnProperty(key) && Iterable.isIterable(state[key])) { 17 | logState[key] = state[key].toJS(); 18 | } 19 | } 20 | return logState; 21 | }; 22 | const actionTransformer = (action) => { 23 | if (Iterable.isIterable(action.payload)) return { type: action.type, payload: action.payload.toJS() }; 24 | else return action; 25 | }; 26 | const createLogger = require('redux-logger'); 27 | const logger = createLogger({ collapsed: true, stateTransformer, actionTransformer }); 28 | middlewares.push(logger); 29 | } 30 | 31 | const store = autoRehydrate()(createStore)(reducers, applyMiddleware(...middlewares)); 32 | persistStore(store, { storage: AsyncStorage, transforms: [reduxPersistImmutable] }); 33 | 34 | export default store; 35 | -------------------------------------------------------------------------------- /test/setup-tests.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | require('babel-register'); 4 | require('babel-polyfill'); 5 | require('react-native-mock/mock'); 6 | 7 | let chai = require('chai'); 8 | let chaiAsPromised = require('chai-as-promised'); 9 | let chaiImmutable = require('chai-immutable'); 10 | 11 | chai.expect; 12 | chai.use(chaiImmutable); 13 | chai.use(chaiAsPromised); 14 | 15 | global.expect = chai.expect; 16 | --------------------------------------------------------------------------------