Build an Expense Manager App with React Native – Part 7

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…

Build an Expense Manager App with React Native – Part 6

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…

Build an Expense Manager App with React Native – Part 5

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…

Build an Expense Manager App with React Native – Part 4

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…

Build an Expense Manager App with React Native – Part 2

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…