In react native, we can create components using function or class. Before the introduction of the React Hook API in react native, the class component was the only way to use the props and state in any react native app but now we can also add state and other functionality to the function component.
And right now the default component used in react native is the function component.
What is a component in React Native?
In react-native, a component is a place where we add our running code that executes in real-time, just like we add all our code into the body tag on a web page. In react native we add all the running code and other components in our base (class/function) component.
Let's understand both class and function-based components with examples.
React Native - Class Component
Here is a simple example of a class-based component that just prints the Hello, React Native on the screen.
import React, { Component } from 'react';
import { Text } from 'react-native';
class New extends Component {
render() {
return (
<Text>Hello, React Native</Text>
);
}
}
export default New;
Output:
Explanation:
In the code above, we first imported React and Component from the react library. These are used to create a component. Then, we import a Text component that's a core component of react-native.
Then we create a class with the name New which extends the Component class. And then we render a Text component as a react element in the New Class, which's returned by the return method. Remember, in react, a class must have a render method and return method to execute.
And then we export the New class as the default element. Hence, whenever, any other component calls this file then it will automatically return the class component as the default component.
| Also Read: Image Component in React Native |
React Native - Function component
Here is a simple example of a function-based component that just returns the Hello, React Native Text.
import React from 'react';
import { Text } from 'react-native';
const New = () => {
return (
<Text>Hello, React Native</Text>
);
}
export default New;
Output:
Explanation:
In the code above, we declared a function New that returns a Text element. Remember, whatever a function component returns, is rendered as a react element. So, we don't need to use the render() method inside it.
Conclusion:
In this tutorial we learned how to create a component in React Native, both using class component and function component.
