UI Integration in React Native
What is React Native
React native is an Open Source Mobile application platform created by Facebook. It is used to create Android and IOS. React Native use java-script to build a mobile app.
Advantage of React Native:
With the growing popularity of React Native come with 11 Component Libraries. These are the following:
- React Native Elements
- UI Kitten
- React Native Material UI
- React Native Material Kit
- Nachos UI
- React Native UI Library
- React Native Paper
- React Native Vector Icons
In the above libraries, we have the authentication of UI customization Like in NativeBase, Shoutem, React Native Material UI, Nachos UI. By using one of the above Libraries, you can save time and make your app more quickly.
Install React Native Elements component library:
yarn add react-native-elements # or with npm npm install react-native-elements
Use Component in App
By using props we can modify the component style like if we want to change the color of the button we simply use the color=”red” props
Custom UI in react native
It all starts with understanding the basic structure of a React Native app. The primary concepts of React are JSX, components, and style.
JSX In React Native:
JSX In React JS:
Components: React Native work on the component. There are two types of components: Function and Class. It becomes very helpful to demonstrate the same layout but different content by using props.
Style: In React Native you can give style to your application by using style props. All of the core components accept a prop named style. In React Native style props are used in CamelCase like backgroundColor: ‘red’ not background-color: ‘red’.
I’m sure you found this article helpful. do share your views, suggestions and queries in the comment section below.