Carsharing application using react-native and redux.

About Taxi App

Latest work as of now (Part 10), video is available at: Youtube

Test binary can be downloaded from TaxiApp android

Libraries Stack

Production

Beside react and react-native libraries as default, below are additional ones & their purposes

• Redux: Typical state container (storages) for your react application.
  • Redux Thunk Async execution for redux (as middleware).
    • Redux Saga maybe the better alternatives to avoid callback chains.
  • Redux Binding to provide global states, actions (dispatch) to react component state.
• Native Base Component Provide cross platform UI components.
• react-native-router-flux Provide the navigation platform between screen & history.
  • reactnavigation Maybe the other alternative good candidates from react native community.
• SVG Icons Beside icons from native-base, react-native-vector-icons provide much more options.
• Map Provide map component for react native, both Android + iOS platform.
• Google Places API library to use google place API in react-native.
• Spinkit For the cool spin components.
• Redux state update Helper to provide mutability of states (predictable)

Development

• redux-logger Redux middleware to log all state changes.
• flow-bin Static typechecker for JavaScript
• Story Book Component style preview.

References

Steps guideline from eman1000/TaxiApp

What's differences from original guideline?

General

• Prettier integrated for code formatter.
• Flow integrated for static type checker.
• Android implementation instead of iOS, so I could use react-native link without any problems which have been highlighted in original guideline.
• Upgrade all libraries to latest version, including the drop of deprecated library e.g. react-addons-update and replace by immutability-helper
• Apply props type validation from reactjs best practices.

Structure

• No AppContainer: App container are merged together with AppRoot component
• Modules folder: It will contain 3 files: module file, actions file, handlers file, there is no constants files. Refer Home module.
• App Bar: Instead of hide the navigation bar (using hiddenNavBar) and create new custom Header component in Home, react-native-router-flux navigation bar itself is customized by using navBar. Refer Scenes
• Header: Use of Subtitle in Header along with Title
• I got problems when using redux store with hot reload feature because store will be created everytimes application is hot-reloaded. Store is now created in constructor instead of render, refer AppRoot
• Fares are calculated and displayed at Footer.
• Welcome screen and display loading indicator when load user current information.

Logic

• Place picker: openPlacePickerModal is being used as built-in picker instead of our own UI + getAutocompletePredictions. This lead to huge differences in actions & handlers of home component, refer HomeActions.js
  • RNGooglePlaces API is called from react native component instead of module layer, refer SearchBox
• Taxi types e.g. Premium, Share, Car, Bike can be selectable, refer Footer
• Use native-base layout e.g. Header, Content, Footer combination.
• Initial, current location will be used as pickup location.
• Fare calculation formula & display for all Taxi.
• No server or socket.io implementation.

TODO list

• Place picker will be shown when When pickup (or dropoff) text box are firing focus event. Hence, dropoff picker will not display again when text box is in focus state and you want to change the place. Workaround is un-focus the text box first.
• Customize the place picker of react-native-google-places to align with themes.
• Server implementation for booking request & drivers tracking.
• Driver application.
• iOS test.

Known issues

• Book button have to touch twice to trigger onPress, why?

Common problems

Element type is invalid. Expected a string (For a built-in component) or a class/function

I got it resolved by change the import statement. import { Name } from "module" to import Name from "module"

---

Command `run-android` unrecognized. Make sure that you have run `npm install` and that you are inside a react-native project.

When execute react-native run-android, you got above error. I got it resolved by execute yarn on root project folder.

---

After add spinkit dependencies and react-native link, Still compilation error related to react-native-spinkit class not found. Resolve it by adding into app/build.gradle

dependencies {
  compile project(':react-native-spinkit')
  ...
}

---

Problem related to redux stores when using hot reload, refer to Structure difference

---

Unable to resolve module <module name> from <path>...

If module is from our application then check your import statement if the path to module is correct. But if module is from library then npm install will resolve problem.

---

Close your package bundler server when got following message, if it does not work then manual delete build folder.

* What went wrong:
Execution failed for task ':app:processDebugResources'.
> java.io.IOException: Could not delete path 

---

Because we added debug, release buildTypes which are differenciate by applicationIdSuffix so application will not be launched automatically when running react-native run-android. Following error will occured at the end of build.

BUILD SUCCESSFUL
...
Error type 3
Error: Activity class {com.fireevacuation/com.fireevacuation.MainActivity} does not exist.

Run with --appIdSuffix parameter will fix the issue.

react-native run-android --appIdSuffix debug