React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows, and UWP by enabling developers to use the React framework along with native platform capabilities.
In this article, we will be learning how to create tables in React Native
Creating React Native App:
Step 1: We’ll be using expo to create the react native app. Install expo-cli using the below command in the terminal.
npm install -g expo-cli
Step 2: Create a react native project using expo.
expo init "gfg"
Step 3: Now go to the created project using the below command.
cd "gfg"
Project Structure: The project will look like this:
Adding the Toast: We can easily add tables in our react native app. For this, we are going to use the react-native-table-component module of react-native.
Step 4: Install the module using the below code.
npm install react-native-table-component
Step 5: Add the below code in the App.js file.
Javascript
import React, { useState } from "react"; import { View, Text } from "react-native"; import { Table, Row, Rows } from 'react-native-table-component'; const GfGApp = () => { const header = ['heading 1', 'heading 2', 'heading 3'] const data = [ ['gfg1', 'gfg2', 'gfg3'], ['gfg4', 'gfg5', 'gfg6'], ['gfg7', 'gfg8', 'gfg9'] ] return ( <View style={{ marginTop: 200 }}> <Text style={{ fontSize: 18 }}> neveropen React Native Table</Text> <Table borderStyle={{ borderWidth: 2, borderColor: '#c8e1ff' }}> <Row data={header} /> <Rows data={data} /> </Table> </View> ); }; export default GfGApp; |
Here first we are creating different constant variables to store the value of the header and the data. Then we are using the Table and Row components to display the data.
Run the application: Now run the application using the below command in the terminal.
npm run web
Output:
