Category: app development

Parse is an excellent mBaaS developed by Parse Inc. (acquired by Facebook) then abandoned/Open Sourced. It has an active community and can help you build your mobile apps very fast. Parse has SDKs for native android, javascript/react native and is very straightforward to integrate into your app. If you would like to avoid the hassle…

Testing Redux with Jest Install redux-mock-store, this library will help us mock redux’s state in our tests. We are not going to use react-test-renderer, instead add Enzyme: We will use jest to implement tests for our redux state. In __tests__ folder, add spec files for each component we want to test. For example, test that…

Add connection status Banner We are going to use the AppStateRootSaga we setup previously to show a banner to the user to indicate when he is online or not. Use the following Banner Component (credits: https://pusher.com/tutorials/offline-react-native-part-2): First map the offline.isConnected property in the MainScreen : Now on each state update, check the connectivity value: Include…

Make the app work offline In order to make the app usable when no Internet connection is available we will use some neat libraries. One of these are redux-persist, which enables to save the state store of the app to local storage. Then we will need redux-offline-queue which makes it possible for the user to…

Adding localization I’ve tried multiple localization libraries for React Native but finally settled for i18next. Add the dependency: To keep things simple, all translations will be in the same folder. In a bigger app, it is recommended to keep component specific translations alongside the component, that way it is easier to clean up if you…

connect our containers to the Redux Store We will user Redux’s connect() in our containers (screens) in order to make them connected to the Redux Store. Example: show a loader when expenses are being fetched from the server, show an empty view if there none and show an error view if the API call fails….

Using Redux and Redux SAGAS Redux is a very important library to manage the app’s state. This state will be accessible across all our app’s components without the need to pass the state to each component through props In our App.js we create the app’s store, to which we pass the initial state The rootReducer…

Design and UI Through this succint tutorial, we will go through the design and development of a small expense manager in React Native. This app will help a user save and tag expenses on a remote server using a REST API. It will need to store data locally when no Internet connection is available and…