Useful Modules for Any React-Native Application (iOS/Android)

Mobile app is growing at rapid pace so as it's development frameworks. React native one of the such mobile app development frameworks which is growing at rapid pace because of it's simplicity in development and having same syntax as in React. 

React native is also a better option for mobile development because it supports npm modules natively and once you use react native, you will find most of modules from npm registry.

We as a solution provider have used react native extensively in many of our projects and during the time we found following modules useful to develop any mobile app.

1. Redux

Redux is used to manage application state. In react, reactivity is purely dependent on state changes and it's better to use container library like redux. Initially you will find it difficult but once you get used to it, you will find it easy and your life as mobile app development will become easier.

Install redux using

npm install redux

 2. React-redux

Official React binding for redux.

npm install react-redux

 3. Redux-thunk

Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters.

npm install redux-thunk

4. Router Flux

React-native-router-flux is a routing package that allows you to

- Define scene transitions in one central location.
- Without having to pass navigator objects around, and allow you to Call transitions anywhere in your code with a simple syntax (e.g. Actions.login({username, password}) or Actions.profile({profile}) or even Actions.profile(123) - all params will be part of this.props for given Scene component).

npm install react-native-router-flux

React Navigation is also getting popular so you can also use that as well. I have not explored it much but whenever I will use it in any of projects I will surely update this post or will write new post if required.

5. Redux localstorage

Store enhancer that syncs (a subset) of your Redux store state to localstorage. Persist your application state when someone close an app.

npm install --save redux-localstorage

6. NativeBase

If you want cool looking UI components library then nothing is better than NativeBase. NativeBase is a free and open source UI component library for React Native to build native mobile apps for iOS and Android platforms.

For their documentation refer this link.

npm install native-base --save

7. Scrollable tab view

Tabbed navigation that you can swipe between, each tab can have its own ScrollView and maintain its own scroll position between swipes. Pleasantly animated. Customizable tab bar. It has lot of configuration which you can tweak based on your app needs.

npm install react-native-scrollable-tab-view --save

8. React native drawer

React native drawer, configurable to achieve material design style, slack style, parallax, and more. Works in both iOS and Android. Side menu is most common need in most of the applications and drawer does this task efficiently.

npm install --save react-native-drawer

8. React native login animated

Login is most common component in mobile application and usually you don't want to spend NO time implementing login prototype. Marc has done wonderful job for app developer and you can implement login in minimal time with animation. Just checkout his git repo and you will surely like it.

9. React native svg

react-native-svg is built to provide a SVG interface to react native on both iOS and Android. In mobile app instead of using images it's better to use vector icons or graphics. It will look much cleaner and sharper than images in different screen resolutions. To use SVG in any react native app we use this package and we normally use this package in each and every project. Quit useful package. Make sure you install proper svg module version looking at your react native version.

npm install react-native-svg --save

10. React native svg

react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs. You can educate your app and features.

npm i react-native-app-intro --save

All of the modules listed above we have used in production. If you need any help or for any development opportunity in react native you can contact us. Or call us. Or email us.

Reach us at hello@3braintechnologies.com or call us on +91 8866 133 870.

Hire React Native App Developers