/react-native-sample

React Native & Redux sample app, with Maps and Camera integration

Primary LanguageJavaScript

Context and goal

I have done this application for a school project and wanted to try to do a mobile app in using web technologies I am familiar with. Having none mobile background, it was a leap in the dark but in the same time it was really exciting.

This app is made to be simple and may help people knowing React & Redux to get into creating mobile apps. It's made with React Native, coupled with some extra nice packages to handle routing, dataflow and UI elements.

Preview

gif preview

Note: 6MB size GIF, might take some time to load

Main technologies used

A framework for building native apps with React.

Redux is a predictable state container for JavaScript apps.

Cross Platform React Native UI Toolkit

React Native Router based on new React Native Navigation API

Running the project

  • Clone this project
git clone < project-url.git >

Yarn is a dependency manager built by facebook and google. It is a more efficient and reliable (thanks to yarn.lock) alternative of npm.

  • Launch yarn command in a terminal opened in the project folder.

This command will look into the package.json file and install all the dependencies listed here.

  • Install react-native-cli globally on your computer
yarn global add react-native-cli

Android steps

If you have never installed any android virtual device, follow those instructions

  • Then, run the project in executing on your project folder:
react-native run-android

Troubleshooting

Note: Each time you pull commits from others, run the yarn command to install dependencies that may have been introduced.

react-native is not recognized as an internal or external command

  • If your terminal is telling you react-native is not known, try to install it globally with npm: npm install -g react-native-cli and re-run the above command.

'adb' is not recognized as an internal or external command

If you have a build error with this message on Windows, it means that you must add the Android sdk platform tools to your environment PATH.

How to add an environment variable on your computer.

My value on windows: C:\Users\Manuel\AppData\Local\Android\sdk\platform-tools

failed to find target with hash string 'android-23'

React Native needs this to be installed in order to work, and the default target installed by Android Studio is the 24th. To solve this issue, open android studio and click on SDK Manager Icon:

SDK Manager

Then click on the line with API Level of value 23 and apply.

Install API 23 Instructions

failed to find Build Tools revision XX.X.X

It seems you are missing the build tools at specific revision XX.X.X, so you need to install them. Go to Android Studio SDK Settings (see images above) and click on the SDK Tools snippet.

Then, click on Show Package Details and look for Android SDK Build Tools XX.X.X. Then check if it is installed. If not, install it and this issue should be solved then.

SDK Manager Standalone

Execution failed for task ':app:dexDebug'

Go into the android project's folder in your terminal and run

Windows

gradlew clean

Linux & Mac

./gradlew clean

Then delete the build folder, go back to the project's root folder and try again, this error should be solved.

Note: If it doesn't work as expected, try checking you have not forgotten any of the steps above. If not, please open an issue and describe your problem.

Contributing to the project

Since the linting is done through eslint, you will need to configure your text editor to use the coding rules defined in the .eslint.js project file.

A code that contains unjustified errors won't be merged to the master branch.

Atom

install-section

  • Then look for the linter package and install it

linter-package

  • Then look for the linter-eslint package and install it

linter-eslint-package

  • Open a javascript file (ending with .js) and paste
console.log('raises two errors')

As you can guess, your editor should raise two errors because console.log is forbidden and there is a semi-column missing. Congrats !

Note: If it doesn't work as expected, try checking you have not forgotten any of the steps above. If not, please open an issue and describe your problem.

Testing

We will use Jest testing library because it allows us to test both components and functions in an easy and efficient way.

To run the tests, execute yarn test in a terminal opened in the project folder. If you want to re-test each time you modify a test file, run yarn run test:watch. Jest will watch for file changes and relaunch the tests for you.

Files location

All tests are written in a __tests__ folder, alongside to what you want to test. For instance, there is a __test__ folder in the components folder, one other in actions, reducers and so on.

Jest will look for tests into those __tests__ folders, so you can't name it another way.

Note: __snapshots__ folders are automatically generated, don't create them on your own.

Unit testing redux (actions, reducers)

Dan Abramov, one of the main creator of Redux, has written a very nice documentation that cover how to test actions and reducers with Jest.

Components testing

Jest has a nice feature called snapshots that allow developers to pass inputs (props) to components and to test what the rendered result is.

Here are resources for you to understand deeper how it works:

To sum snapshots tests up, it consist in this workflow:

  • Create your component until you are satisfied with it
  • Write snapshots tests in passing all kind of props to your component
  • If you are satisfied with the produced snapshot, keep it. If not, fix your component.
  • Next time you modify your component, your saved snapshot will be compared to the produced result and it is up to you to determine if you are satisfied or not. If you are, update your snapshot with -u.

In this project, we separate snapshot testing from the rest. Snapshot tests are written in files that follow this convention:

< ComponentName >Snap.js

Jest doesn't provide a proper way to test user interactions, nor a way to test methods inside components. To do so, you have to use something else among:

In this project, we have decided to use Enzyme to test the components methods. The naming convention for those tests is:

< ComponentName >.js