This is the last in a series of blog posts about creating an app with React Native. To get started with React Native, read the Basics of React Native: Part 1. If you want to include content from a Drupal website in the app, read Integrating Content with React Native: Part 2.
It’s almost impossible to build a professional app without including third party or custom libraries. Using libraries where and when they’re needed upholds the tenant of reusability that React Native sets forth. It saves time and money by reusing code that already exists. There are only three steps to include a library in a React Native project:
- Install the library with npm (node package manager)
- Use ES6 (ECMAScript 6) import statements to import whatever components are needed from the library.
- Implement the components within your component or screen.
Here is an example of how to include a library like GooglePlacesAutocomplete in a React Native app. Install the library using:
$ npm install react-native-google-places-autocomplete
Import components from the library wherever they are needed using:
$ import {GooglePlacesAutocomplete} react-native-google-places-autocomplete
Finally, implement the component within the file by calling on it like any other component:
<GooglePlacesAutocomplete placeholder='Enter Location' minLength={2} autoFocus={false} returnKeyType={'default'} fetchDetails={true} currentLocation={false} />
Leveraging your own components is even easier than leveraging components from libraries. In order to include a custom component, use ES6 import statements to import your components, and implement your components within your component or screen. A common place to store these custom-built components is within a project’s components directory. To use a custom component like CustomComponent.js inside a screen include: import CustomComponent from '../components/CustomComponent' at the top of the file, and <CustomComponent /> when you want to use the component.
Libraries enforce code reusability standards because they encourage writing a piece of code only once and implementing it anywhere else it is needed. Your project will be more organized and easier to expand upon later because this method enforces proper library use. It also saves you from wasted time and headaches down the line because your libraries won’t look like spaghetti when you come back to them months later.
We hope you enjoyed this series about creating an app with React Native. Comment below to share what you found useful or more tips that we missed. For updates on new blog posts, our work, and more, like and follow us on Twitter, Facebook, LinkedIn, and Instagram.