React Native Playground

Playground used to learn and experiment with React Native using TypeScript. This repository contains a bunch of pull requests documenting and implementing the process of how to create a React Native application with different features.

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

List of pull requests:

• How to create a React Native application.
• How to configure Travis CI.
• How to add Typescript and Jest support.
• Configure a crash reporter tool (Sentry).
• Configure a splash screen.
• Configure a Native Base library and create our own components.
• App localization.
• Remote debugging.
• Using static assets.
• Navigation between screens.
• List component.
• Scroll component.
• Grid component.
• Camera and camera permission component.
• Image picker.
• Location.
• Lottie.
• Custom components for Android/iOS.
• Custom navigation transitions.
• Layouts and styles.
• Redux integration.
• Redux thunk integration.

How to run this app

Move into the app folder and execute the command yarn start. This will open a site in your default browser asking you for deploying the app on an Android or iOS device just like this:

The terminal UI will also show a similar interface. You can use the QR code, directly deploy the app into your connected device or send an email to any user. As soon as the target device is in the same network expo will be able to run the app.

Once you get the app up and running, you'll be able to change anything in your app an the change will be automatically refreshed in your emulator or device 😃

Expo has a menu you can open from the iOS/Android emulator by pressing CMD + D or shaking your device. It looks like this:

Running tests

We've added some tests to our playground so you can use the following commands to run our test cases:

yarn test # Runs every test
yarn testWatching # Starts a jest watcher running the tests just for the code you've changed.
yarn updateSnapshots # Updates all the snapshots recorded using jest.

Debugging

Our react-native application code can be inspected during the code execution using the Chrome DevTools app you've installed in your chrome browser. To start debugging the app you only need to open the expo debug menu by pressing CMD + D when the device up and running. Then you can press the button Start remote debugging and this will start a Chrome tab you can use to inspect your code, add breakpoints, evaluate js code and perform many many other debugging tasks:

The debugger UI will always be available for you from this link.

If for any reason, the expo debug menu does not work when using CMD + D shorcut, you can try to change the device from the Simulator > Hardware > Device menu.

If you need to inspect the nodes in your react UI you can run yarn react-devtools and this will open an electorn app you can use to inspect your view hierarchy.

When talking about the app state. You can always open the Redux tab in your Chrome inspector and this will let you review all the actions thrown and review the app state as you can do with a recular react web application.

You can always add some console.log or console.error traces and this will be shown to the developer as part of the expo UI and the Chrome inspector console.

If for some reason your app deploy fails on the real device you are using to test your app because of a timeout exception, check if your laptop and the device you are using are in the same network twice. This error is shown just when the expo IP is not reachable.

When debugging something related to the redux store usage, you can always use a tool named remote-redux-devtools. Once you configure this tool you can install the redux tool for your Chrome browser, press on the right button in your Chrome Browser window and select the option Open remote dev tools. After that you should see a window like this:

Useful resources:

Finding information about how to create your own react native app is not easy at all. There are a lot of resources and we've just curated a list of awesome sites you can review when you have any doubt any topic.

• Comprehensive React Native guide.
• Flex box layout.
• Esential components implemented by the React Native team.
• Esential components for react-native implemented by the community..
• Components lifecycle and state.
• Typescript cheat sheet.
• React native components with typescript.
• React redux integration.

License

Copyright 2018 Karumi

Licensed under the GNU General Public License, Version 3 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.gnu.org/licenses/gpl-3.0.en.html

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.