├── .gitignore ├── LICENSE ├── README.md ├── SUMMARY.md ├── app-icons-and-splash-screen.md ├── app-icons-and-splash-screen ├── automatic.md └── manual.md ├── app-starters.md ├── assets ├── Screenshot 2017-11-26 18.23.09.png ├── Screenshot 2017-11-26 21.04.41.png ├── Screenshot 2017-11-26 21.10.09.png ├── Screenshot 2017-11-28 19.28.46.png └── images │ ├── app_name-ss.png │ ├── cbfbundledisplayname-ss.png │ ├── rn-checklist-icon.png │ └── vscode-mobile-center-logo.png ├── cicd-tools.md ├── cicd-tools └── common-app-rejection.md ├── debugging-your-ui.md ├── development-strategy.md ├── development-strategy └── focus-on-one-check-both.md ├── keep-tabs-on-native-logs.md ├── renaming-your-app.md ├── renaming-your-app ├── rename-app-automatically.md └── rename-app-manually-manual.md ├── submission-d83d-de80.md ├── t.md ├── testing-your-app.md ├── testing-your-app ├── detox.md └── jest.md └── upgrade-react-native-with-caution.md /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Harris Robin Kalash 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

4 |
5 | Markdownify 7 |
8 | React Native Checklist 9 |
10 |

11 | 12 | 13 | A check list to refer to before starting a react-native project. All credit goes to Chris Ball as this is heavily based on his [Chain React 2017](https://www.youtube.com/watch?v=W8X7t1qlT_w) talk. 14 | 15 | ***Disclaimer: This is still a work in progress. If you notice any mistakes, PRs are very appreciated.*** 16 | 17 | ## Table of content 18 | - [Prerequisites](#installation) 19 | - [App Store](#app-store-and-google-play) 20 | - [Init App](#init-app) 21 | - [Starters](#starters) 22 | - [Development Strategy Tips](#development-strategy-tips) 23 | - [Focus on one, check both](#focus-on-one-check-both) 24 | - [App Icons & Splash-screen](#app-icons-and-splash-screen) 25 | - [Automatic](#generate-app-icons-&-splash-screen-automatically) 26 | - [Manual](#generate-app-icons-&-splash-screen-manually) 27 | - [Rename App](#rename) 28 | - [Automatic](#rename-app-automatically) 29 | - [Manual](#rename-app-manually) 30 | - [CI](#ci) 31 | - [Comparison Table](#ci-comparison-table) 32 | - [Handle Offline](#handle-offline) 33 | - @TODO 34 | - [Certificates](#Certificates) 35 | - @TODO 36 | - [Use Fastlane Precheck](#use-fastlane-precheck) 37 | - [Review Apple's Common App Rejections](#common-app-rejection) 38 | 39 | ## Prerequisites 40 | ### App Store and Google Play 41 | 42 | #### iOS 43 | If you are a company, you will need a [D-U-N-S number](https://developer.apple.com/support/D-U-N-S/). 44 | 45 | Check whether you have a D-U-N-S number [here](https://developer.apple.com/enroll/duns-lookup/#/search) . If you don't have one, you will be given the option to apply. 46 | 47 | Otherwise, you can sign up as an individual. 48 | 49 | #### Android 50 | Google is simpler, however you should still know if you are enrolling as a company or individual. 51 | 52 | Sign up 👉 [Google Play](https://play.google.com/apps/publish/signup/). 53 | 54 | ## Init App 55 | ### Starters 56 | There are many boilerplates/starter kits for react-native out there. I highly recommend using [create-react-native-app](https://github.com/react-community/create-react-native-app) as a starting point, however if you do not mind learning the boilerplates, you will find a list of good starters below. 57 | 58 | #### [ignite 🔗](https://github.com/infinitered/ignite) 59 | #### [pepperoni-app-kit 🔗](https://github.com/futurice/pepperoni-app-kit) 60 | 61 | ## Development Strategy Tips 62 | 63 | ### Focus on one, check both. 64 | Even if you choose to focus on one platform at first, it is recommended that you always check both, especially if you are installing a lot of third-party libraries. React Native is constantly changing and the libraries you are using probably cannot keep up with all the breaking changes being introduced. If you want to avoid making bad decisions and identifying potential road blocks early, make sure you always check both platforms. 65 | 66 | Even better, focus on Android and check iOS. This is because Android is the platform most likely to make you run into issues. 67 | 68 | ## App Icons and Splash-screen 69 | ### Generate App Icon & Splash-screen Automatically 70 | ***💻📲 (Recommended)*** 71 | 72 | Generating app icons and a splash-screen doesn't have to be hard. Simply install [generator-rn-toolbox](https://github.com/bamlab/generator-rn-toolbox/blob/master/generators/assets/README.md) and follow the instructions to get them for both iOS and Android. 73 | 74 | ### Generate App Icon & Splash-screen Manually 75 | If you do not go with the automatic way, you will need to generate your app icons in the following sizes for each respective format: 76 | 77 | [Original answer](https://stackoverflow.com/a/34333915/6401805) 78 | 79 | #### iOS 80 | * In iOS, set `AppIcon` in `Images.xcassets` 81 | * Add 9 different size icons: 82 | * 29pt 83 | * 29pt*2 84 | * 29pt*3 85 | * 40pt*2 86 | * 40pt*3 87 | * 57pt 88 | * 57pt*2 89 | * 60pt*2 90 | * 60pt*3. 91 | 92 | #### Android 93 | * Put ic_launcher.png to folder ``[PrjDir]/android/app/src/main/res/minmap-*`. 94 | * 72*72 `ic_launcher.png` to `mipmap-hdpi`. 95 | * 48*48 `ic_launcher.png` to `mipmap-mdpi`. 96 | * 96*96 `ic_launcher.png` to `mipmap-xhdpi` 97 | * 144*144 `ic_launcher.png` to `mipmap-xxhdpi` 98 | 99 | ## Rename 100 | ### Rename App Automatically 101 | Use [react-native-rename](https://github.com/junedomingo/react-native-rename) to automatically rename your react-native app fro iOS and Android 102 | 103 | ### Rename App Manually Manual 104 | Renaming a react-native app manually is simple. 105 | #### iOS 106 | The ***app name*** displayed on the iPhone home screen comes from the CFBundleDisplayName (or "Bundle display ***name***") as the human-readable string in Xcode) entry of your iOS app's info.plist. 107 | ![display name](assets/images/cbfbundledisplayname-ss.png) 108 | 109 | #### Android 110 | The app name on android comes from AndroidManifest.xml. Check the label attribute of `` 111 | 112 | This value is typically referenced as a named variable, defined in strings.xml 113 | ![app name](assets/images/app_name-ss.png) 114 | 115 | 116 | ## CI 117 | 118 | ### CI Comparison Table 119 | #### Legend 120 | 121 | ✅ : Officially supported. 122 | 123 | ❌ : Not supported. 124 | 125 | 🔌 : Community supported or left to developer to integrate 126 | 127 |
128 | 129 | BB logo 132 | 133 | 134 | 135 | VS code mobile center 138 | 139 |
140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 |
FeatureBuddy BuildVS Mobile Center
Crash Reports✅✅
Bug Reports✅❌
Instant Replay✅❌
Analytics❌✅
Deploy to store✅✅
177 | 178 | 179 | ## Certificates 180 | // @TODO 181 | 182 | ## Use Fastlane Precheck 183 | 184 | Make sure to run fastlane's precheck before submitting your app to Apple's app store. From their repo: 185 | >Apple rejects builds for many avoidable metadata issues like including swear words 😮, other companies’ trademarks, or even mentioning an iOS bug 🐛. _fastlane precheck_ takes a lot of the guess work out by scanning your app’s details in iTunes Connect for avoidable problems. fastlane precheck helps you get your app through app review without rejections so you can ship faster 🚀 186 | 187 | [👉 👉Precheck👈 👈](https://github.com/fastlane/fastlane/tree/master/precheck) 188 | 189 | ## Common App Rejection 190 | 191 | Make sure to read over Apple's common app rejection before submitting to the app store. These are the most common issues that apple rejects apps for, so save yourself the trouble and make sure your app won't be rejected for obvious reasons. 192 | 193 | 👉 👉 [Apple Common Rejection 👈 👈](https://developer.apple.com/app-store/review/rejections/) 194 | -------------------------------------------------------------------------------- /SUMMARY.md: -------------------------------------------------------------------------------- 1 | # Summary 2 | 3 | * [Introduction](README.md) 4 | * [App Starters](app-starters.md) 5 | * [Development Strategy](development-strategy.md) 6 | * [Focus on one, check both](development-strategy/focus-on-one-check-both.md) 7 | * [App Icons and Splash Screen](app-icons-and-splash-screen.md) 8 | * [Generate App Icon & Splash-screen Automatically](app-icons-and-splash-screen/automatic.md) 9 | * [Generate App Icon & Splash-screen Manually](app-icons-and-splash-screen/manual.md) 10 | * [Renaming Your App](renaming-your-app.md) 11 | * [Rename App Automatically](renaming-your-app/rename-app-automatically.md) 12 | * [Rename App Manually Manual](renaming-your-app/rename-app-manually-manual.md) 13 | * [Debugging your UI](debugging-your-ui.md) 14 | * React Devtools 15 | * [Testing Your App](testing-your-app.md) 16 | * [Jest](testing-your-app/jest.md) 17 | * [Detox](testing-your-app/detox.md) 18 | * [Keep Tabs On Native Logs](keep-tabs-on-native-logs.md) 19 | * [Upgrade React Native with Caution!](upgrade-react-native-with-caution.md) 20 | * [CI/CD Tools](cicd-tools.md) 21 | * [Submission 🚀](submission-d83d-de80.md) 22 | * Fastlane 23 | * Common App Rejection Reasons 24 | 25 | -------------------------------------------------------------------------------- /app-icons-and-splash-screen.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harrisrobin/react-native-checklist/4954dac201a1af89dd7c6b731c019d905c15187f/app-icons-and-splash-screen.md -------------------------------------------------------------------------------- /app-icons-and-splash-screen/automatic.md: -------------------------------------------------------------------------------- 1 | ### Generate App Icon & Splash-screen Automatically {#generate-app-icon--splash-screen-automatically} 2 | 3 | _**💻📲 \(Recommended\)**_ 4 | 5 | If you would like to make your life easier and generate & automatically set your app icons and splash screen for iOS and Android, I recommend using [generator-rn-toolbox](https://github.com/bamlab/generator-rn-toolbox/blob/master/generators/assets/README.md) . The toolbox also offers other cool features like generating store assets and notification icons. 6 | 7 | Here's what that looks like: 8 | [![](https://asciinema.org/a/S8LzQtBuVOFkhREIn2OoiDRaC.png)](https://asciinema.org/a/S8LzQtBuVOFkhREIn2OoiDRaC) 9 | 10 | -------------------------------------------------------------------------------- /app-icons-and-splash-screen/manual.md: -------------------------------------------------------------------------------- 1 | ### Generate App Icon & Splash-screen Manually {#generate-app-icon--splash-screen-manually} 2 | 3 | Of course, you can still do all of this manually. 4 | 5 | There are several easy to use packages that do it for you, however I recommend the [makeicon](https://github.com/beplus/makeicon) and [makesplash](https://github.com/beplus/makesplash) generator to get both icons and splash screens for both iOS and Android. 6 | 7 | # iOS 8 | 9 | 1. Set `AppIcon` in `Images.xcassets` 10 | 2. Add 9 different size icons: 11 | 12 | 3. 29pt 13 | 14 | 4. 29pt\*2 15 | 16 | 5. 29pt\*3 17 | 18 | 6. 40pt\*2 19 | 20 | 7. 40pt\*3 21 | 8. 57pt 22 | 9. 57pt\*2 23 | 10. 60pt\*2 24 | 11. 60pt\*3. 25 | 26 | Accessing Images.xcassets on iOS will look like this: 27 | ![](/assets/Screenshot 2017-11-28 19.28.46.png) 28 | 29 | # Android 30 | 31 | Put`ic_launcher.png`to folder`[$PrjDir]/android/app/src/main/res/mipmap-*` 32 | 33 | * 72\*72 34 | `ic_launcher.png`to `mipmap-hdpi` 35 | . 36 | * 48\*48`ic_launcher.png`to`mipmap-mdpi` 37 | . 38 | * 96\*96`ic_launcher.png`to`mipmap-xhdpi` 39 | . 40 | * 144\*144`ic_launcher.png`to`mipmap-xxhdpi` 41 | . 42 | * 192\*192`ic_launcher.png`to`mipmap-xxxhdpi` 43 | . 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /app-starters.md: -------------------------------------------------------------------------------- 1 | # **React Native Starters** 2 | 3 | There are many starter kits for react-native out there. I highly recommend you go through them and pick the one that fits you best, however if you don't know where to start, the recommended place to start is with [create-react-native-app.](https://github.com/react-community/create-react-native-app) 4 | 5 | > Create a React Native app on any OS with no build config.![](/assets/Screenshot 2017-11-26 18.23.09.png) 6 | 7 | 8 | 9 | If you do not mind learning and getting a lot of boilerplate, here are some interesting alternatives: 10 | 11 | ### [Ignite-ir-boilerplate](https://github.com/infinitered/ignite-ir-boilerplate) 12 | 13 | This boilerplate can be the ideal choice for people who already know that Expo is not a great fit for them \(e.g: they need modules that are not compatible with Expo\) and/or for people that want to use technologies such as redux, redux-sagas and react-navigation since it comes with all of that pre-configured with best practices. 14 | 15 | -------------------------------------------------------------------------------- /assets/Screenshot 2017-11-26 18.23.09.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harrisrobin/react-native-checklist/4954dac201a1af89dd7c6b731c019d905c15187f/assets/Screenshot 2017-11-26 18.23.09.png -------------------------------------------------------------------------------- /assets/Screenshot 2017-11-26 21.04.41.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harrisrobin/react-native-checklist/4954dac201a1af89dd7c6b731c019d905c15187f/assets/Screenshot 2017-11-26 21.04.41.png -------------------------------------------------------------------------------- /assets/Screenshot 2017-11-26 21.10.09.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harrisrobin/react-native-checklist/4954dac201a1af89dd7c6b731c019d905c15187f/assets/Screenshot 2017-11-26 21.10.09.png -------------------------------------------------------------------------------- /assets/Screenshot 2017-11-28 19.28.46.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harrisrobin/react-native-checklist/4954dac201a1af89dd7c6b731c019d905c15187f/assets/Screenshot 2017-11-28 19.28.46.png -------------------------------------------------------------------------------- /assets/images/app_name-ss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harrisrobin/react-native-checklist/4954dac201a1af89dd7c6b731c019d905c15187f/assets/images/app_name-ss.png -------------------------------------------------------------------------------- /assets/images/cbfbundledisplayname-ss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harrisrobin/react-native-checklist/4954dac201a1af89dd7c6b731c019d905c15187f/assets/images/cbfbundledisplayname-ss.png -------------------------------------------------------------------------------- /assets/images/rn-checklist-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harrisrobin/react-native-checklist/4954dac201a1af89dd7c6b731c019d905c15187f/assets/images/rn-checklist-icon.png -------------------------------------------------------------------------------- /assets/images/vscode-mobile-center-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harrisrobin/react-native-checklist/4954dac201a1af89dd7c6b731c019d905c15187f/assets/images/vscode-mobile-center-logo.png -------------------------------------------------------------------------------- /cicd-tools.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harrisrobin/react-native-checklist/4954dac201a1af89dd7c6b731c019d905c15187f/cicd-tools.md -------------------------------------------------------------------------------- /cicd-tools/common-app-rejection.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harrisrobin/react-native-checklist/4954dac201a1af89dd7c6b731c019d905c15187f/cicd-tools/common-app-rejection.md -------------------------------------------------------------------------------- /debugging-your-ui.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harrisrobin/react-native-checklist/4954dac201a1af89dd7c6b731c019d905c15187f/debugging-your-ui.md -------------------------------------------------------------------------------- /development-strategy.md: -------------------------------------------------------------------------------- 1 | # 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /development-strategy/focus-on-one-check-both.md: -------------------------------------------------------------------------------- 1 | # Focus on one, check both. 2 | 3 | This one is a common mistake and one that I have made myself when I started working in React Native. I use to focus most of my development time on iOS without testing them on Android. While React Native is a cross platform tool, there are a lot of features that behave differently or are completely lacking on Android in comparison to iOS. 4 | 5 | Even if you choose to focus on one platform at first, it is recommended that you always check both, especially if you are installing a lot of third-party libraries. React Native is constantly changing and the libraries you are using probably cannot keep up with all the breaking changes being introduced. If you want to avoid making bad decisions and identifying potential road blocks early, make sure you always check both platforms. 6 | 7 | Even better, focus on Android and check iOS. This is because Android is the platform most likely to make you run into issues. 8 | 9 | ![](/assets/Screenshot 2017-11-26 21.10.09.png)![](/assets/Screenshot 2017-11-26 21.04.41.png) 10 | 11 | -------------------------------------------------------------------------------- /keep-tabs-on-native-logs.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harrisrobin/react-native-checklist/4954dac201a1af89dd7c6b731c019d905c15187f/keep-tabs-on-native-logs.md -------------------------------------------------------------------------------- /renaming-your-app.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harrisrobin/react-native-checklist/4954dac201a1af89dd7c6b731c019d905c15187f/renaming-your-app.md -------------------------------------------------------------------------------- /renaming-your-app/rename-app-automatically.md: -------------------------------------------------------------------------------- 1 | ### Rename App Automatically 2 | 3 | 4 | 5 | 6 | Use [react-native-rename](https://github.com/junedomingo/react-native-rename) to automatically rename your react-native app fro iOS and Android. 7 | 8 | -------------------------------------------------------------------------------- /renaming-your-app/rename-app-manually-manual.md: -------------------------------------------------------------------------------- 1 | ### Rename App Manually Manual 2 | 3 | Renaming a react-native app manually is simple. 4 | 5 | #### iOS 6 | 7 | The _**app name**_ displayed on the iPhone home screen comes from the CFBundleDisplayName \(or "Bundle display_**name**\_"\) as the human-readable string in Xcode\) entry of your iOS app's info.plist.![](https://harrisrobin.gitbooks.io/react-native-checklist/content/assets/images/cbfbundledisplayname-ss.png) 8 | 9 | #### Android 10 | 11 | The app name on android comes from AndroidManifest.xml. Check the label attribute of`` 12 | 13 | This value is typically referenced as a named variable, defined in strings.xml![](https://harrisrobin.gitbooks.io/react-native-checklist/content/assets/images/app_name-ss.png) 14 | 15 | -------------------------------------------------------------------------------- /submission-d83d-de80.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harrisrobin/react-native-checklist/4954dac201a1af89dd7c6b731c019d905c15187f/submission-d83d-de80.md -------------------------------------------------------------------------------- /t.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harrisrobin/react-native-checklist/4954dac201a1af89dd7c6b731c019d905c15187f/t.md -------------------------------------------------------------------------------- /testing-your-app.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harrisrobin/react-native-checklist/4954dac201a1af89dd7c6b731c019d905c15187f/testing-your-app.md -------------------------------------------------------------------------------- /testing-your-app/detox.md: -------------------------------------------------------------------------------- 1 | Detox is another great tool I wish I had earlier. What Detox does is best described in their documentation: 2 | 3 | > High velocity native mobile development requires us to adopt continuous integration workflows, which means our reliance on manual QA has to drop significantly. Detox tests your mobile app while it's running in a real device/simulator, interacting with it just like a real user. 4 | 5 | Getting started with Detox in React Native is fairly straight forward. You can find their Introduction [here](https://github.com/wix/detox/blob/master/docs/Introduction.GettingStarted.md). 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /testing-your-app/jest.md: -------------------------------------------------------------------------------- 1 | # Jest 2 | 3 | Testing react-native apps for regression is incredibly daunting as your app grows. It can quickly become a nightmare to test things manually. 4 | 5 | Luckily, React Native ships with Jest, one of my favourite testing frameworks. 6 | 7 | The basic setup you need to start testing your React Native app with Jest includes: 8 | 9 | **Install the appropriate packages:** 10 | 11 | `yarn add jest babel-jest react-test-renderer --dev` 12 | 13 | **Modifying your package.json to include the following:** 14 | 15 | ``` 16 | "scripts": { 17 | "test": "jest" 18 | }, 19 | "jest": { 20 | "preset": "react- 21 | } 22 | 23 | ``` 24 | 25 | **Add the following to your .babelrc:** 26 | 27 | ``` 28 | { 29 | "presets": ["react-native"] 30 | } 31 | ``` 32 | 33 | now if you run `yarn test` you should see your tests running. 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /upgrade-react-native-with-caution.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harrisrobin/react-native-checklist/4954dac201a1af89dd7c6b731c019d905c15187f/upgrade-react-native-with-caution.md --------------------------------------------------------------------------------