Login
React Native Class Based Component Creation
Hello,
Let's start with our first application. Actually, in a previous post, we created our first application and named it "denemeproje".
In this post, we will create a list Component. When we create components, we can retrieve them on any page and display the desired button, list, or title where needed.
First, let's create the List Component.
- We open our project files in an editor like Notepad++ or Atom. I prefer PHP Storm.
- For now, we'll open it with Atom.
- As seen in the left list, we create a source folder named "src". Inside, we create another folder named "components".
- We then create our list.js component file inside the src>components folders.
Insert the following code below. Next, we'll examine the codes inside the List Component one by one.
import React, { Component } from 'react';
import { View, Text } from 'react-native';
These two lines indicate that this file is a React Native file, that we will create a Component, and we use Basic Components like View and Text.
class Listem extends Component
We give the name "Listem" to create a Class-based Custom Component and extend this Component.
The code inside the Class indicates that the code inside this Component is rendered and returns a value, and this is done with the Basic Components View and Text on the second line.
export default Listem;
Finally, we export the Listem Component to be used externally.
So far, what we've done is this;
When we use this Listem Component (when we call it on any page), it will execute the codes inside the Class-based Class, meaning it will display "List Component" on the screen as Text.
Using Custom Component
After creating the Component, we open the App.js file and call the Listem Component to this homepage file using the following usage and display it. We use the following code for this.
If you look at the above code, first we import and then call the Listem Component in App.js, and use it with "<Listem/>" (line 15)
Full App.js
When we open and build our application with XCode, our sample application will appear as follows.
This concludes the tutorial on creating a list component in React Native. The tutorial walks through the process of creating the component file, writing the code for the component, and then integrating it into the main app file. It also provides visual aids to help understand the steps better.