End to End Technology Solutions
In this article we talk about one of the most important topics is flat list and scroll view which comes, under-react native. Firstly we discuss is flat lists all we know is that a flat list is used for rendering so much data in our component. With the help of a flat list, similar data can easily show our mobile application. In flat list have different props but there are two required props in the flat list are- data and render items. And if we use a flat list so we import at the top of our react component then we can use it easily. If you have a large array of data so flat list can be easily deal with large data and only render items that can be visible on the screen.
FlatList Syntax:-
<FlatList
data={}
renderItem={}
/>
Data props can be starting from an array of numbers they can fill with JSON objects and they are fetched through our rest API.
Render props basically is a function that accepts every item & object from the source array(data props)and renders the data into our component.
How to implement a flat list in our code:-
import React from
'react';
import{Text,View,FlatList,StyleSheet} from 'react-native';
const cityData = [
{
id:"1",
city:"Gwalior"
},
{
id:"2",
city:"Bhopal"
},
{
id:"3",
city:"Agra"
},
{
id:"4",
city:"Noida"
},
{
id:"5",
city:"Delhi"
},
];
const Item = ({city}) => {
return(
<View>
<Text>{city}</Text>
</View>
);
}
export default function App() {
const renderItem = ({item})=>(
<Item title={item.city}/>
);
return (
<View>
<FlatList
data={cityData}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</View>
);
}
Scrollview:-Scrollview component is worked as a flat list component also. But some features are different from the flat list. In scroll, the view has limited props which can be used in our component. In scroll, the view provides the functionality for scrolling our component in both directions- vertical and horizontal but they generally work vertically by default. They also provide the refresh functionality for rendering our component.
Props of scrollview are horizontal, refreshControl,horizontal,onScroll,scrollEnabled,contentContainerStyle,snapToStart etc so many props have.
Example of scroll view:-
import React, { Component } from 'react';
import {ScrollView, Image, Text, Button,View} from 'react-native';
export default class ScrolledViewExample extends Component {
render() {
return (
<ScrollView >
<View>
<Text>City Name</Text>
</View>
<Text>Bhopal</Text>
<Text>Gwalior</Text>
<Text>Delhi</Text>
<Text>Noida</Text>
<Text>Guna</Text>
<Text>Balaghat</Text>
<Text>Damoh</Text>
<Text>Indore</Text>
<Text>Jabalpur</Text>
<Text>Mandla</Text>
<Text>Rajgarh</Text>
<Text>Dewas</Text>
<Text>Shivpuri</Text>
<Text>Ujjain</Text>
<Text>Sagar</Text>
<Text>Satna</Text>
<Text>Vidhisa</Text>
<Text>Rewa</Text>
<Text>Narwar</Text>
</ScrollView>
);
}
}