1. FlatList
2. Json
3. Refresh/ auto refresh
4.
ItemSeparatorComponent
5.
ItemSeparatorComponent with ActivityIndicator
6. RefreshControl
7. Data fetch()
8. scrollview
.......................................................................................................................................................................................................
How to render lists in React Native
A performant interface for rendering basic,
flat lists, supporting the most handy features like pull to Refesh
scroll loading, etc...
Add the FlatList Component
The data is a plain array and keyExtractor is used
to extract a unique key for a given item the specified index
Render each item in the list
renderItem takes an item from data and rendes it into the list
React Native Fetch Data from API and render FlatList
Example : #1
Product.js
import
React, { Component } from 'react'
import {
Text, View, FlatList } from
'react-native'
class
Product extends Component {
state = {
data: []
}
componentWillMount() {
this.fetchData();
}
fetchData =async() => {
const response = await
fetch('https://randomuser.me/api/?results=50');
const json = await response.json();
this.setState({ data: json.results })
}
render() {
return (
<View style={{ flex:1}}>
<FlatList
data={this.state.data}
renderItem= {({ item }) =>
<Text>{`${item.name.first} ${item.name.last}`}</Text>}
keyExtractor={(item, index)
=> index}
>
</FlatList>
</View>
);
}
}
export
default Product
App.js
import
React, { Component } from 'react';
import
Product from './components/Product';
export
default class App extends Component {
render() {
return (
<Product/>
);
}}
Happy Coding :)
...........................................................................................................................................................................................................................................
FlatList with Json
Example : #2
App.js
import React, { Component } from 'react';
import { View, Text, FlatList } from 'react-native';
const Data =[{
name:'Sapan',
city:'Mumbai',
state: 'Maharashtra'
}]
class Home extends Component {
render() {
return (
<View>
<FlatList
data={Data}
renderItem={({item})=><Text>{item.name}</Text>}
keyExtractor ={(item, index)=> index.toString()}
/>
</View>
);
}
}
export default class App extends Component {
render() {
return (
<View>
<Home/>
</View>
);
}
}
Happy Coding :)
...........................................................................................................................................................................................................................................
FlatList with Refeshing
Example : #3
App.js
import React, { Component } from 'react'
import { View, Text, FlatList } from 'react-native'
class App extends Component{
constructor(props){
super(props)
this.state={
isLoading:false,
user:[]
}
}
componentDidMount(){
this.getData()
}
getData=()=>{
let API_URL = 'https://jsonplaceholder.typicode.com/posts';
this.setState({isLoading:true})
fetch(API_URL)
.then(res=>res.json())
.then(resJson=>{
this.setState({
user:resJson,
isLoading:false
})
})
}
renderItem=({item})=>{
return(
<View>
<Text>{item.title}</Text>
</View>
)
}
render(){
return(
<View>
<FlatList
data={this.state.user}
refreshing={this.state.isLoading}
onRefresh={this.getData}
renderItem={this.renderItem}
keyExtractor={(item, index)=>index.toString()}
/>
</View>
)
}
}
export default App
Happy Coding :)
...........................................................................................................................................................................................................................................
FlatList with ItemSeparatorComponent
Example : #4
App.js
import React, { Component } from 'react'
import { View, Text, FlatList, Image } from 'react-native'
class App extends Component{
constructor(props){
super(props)
this.state={
isLoading:false,
user:[]
}
}
componentDidMount(){
this.getData()
}
getData=()=>{
let API_URL = 'https://jsonplaceholder.typicode.com/posts';
this.setState({isLoading:true})
fetch(API_URL)
.then(res=>res.json())
.then(resJson=>{
this.setState({
user:resJson,
isLoading:false
})
})
}
renderItem=({item})=>{
return(
<View style={{flex:1, flexDirection:'row'}}>
<Image style={{width:100, height:60}} source={{uri:item.thumbnailUrl}} />
<View style={{}}>
<Text>{item.id}</Text>
<Text>{item.title}</Text>
</View>
</View>
)
}
_itemSeparatorComponent=()=>{
return(
<View style={{height:2, width:'100%', backgroundColor:"blue"}}>
</View>
)
}
render(){
return(
<View style={{flex:1}}>
<FlatList
data={this.state.user}
refreshing={this.state.isLoading}
onRefresh={this.getData}
renderItem={this.renderItem}
keyExtractor={(item, index)=>index.toString()}
ItemSeparatorComponent={this._itemSeparatorComponent}
/>
</View>
)
}
}
export default App
Happy Coding :)
...........................................................................................................................................................................................................................................
FlatList with ItemSeparatorComponent and ActivityIndicator
Example : #5
import React, { Component } from 'react'
import { View, Text, FlatList, Image, ActivityIndicator } from 'react-native'
class App extends Component{
constructor(props){
super(props)
this.state={
isLoading:false,
user:[]
}
}
componentDidMount(){
this.getData()
}
getData=()=>{
let API_URL = 'https://jsonplaceholder.typicode.com/posts';
this.setState({isLoading:true})
fetch(API_URL)
.then(res=>res.json())
.then(resJson=>{
this.setState({
user:resJson,
isLoading:false
})
})
}
renderItem=({item})=>{
return(
<View style={{flex:1, flexDirection:'row'}}>
<Image style={{width:100, height:60}} source={{uri:item.thumbnailUrl}} />
<View style={{}}>
<Text>{item.id}</Text>
<Text>{item.title}</Text>
</View>
</View>
)
}
_itemSeparatorComponent=()=>{
return(
<View style={{height:2, width:'100%', backgroundColor:"blue"}}>
</View>
)
}
render(){
return(
// this.state.isLoading? ():()
this.state.isLoading ?
(<View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
<ActivityIndicator size='large' animating color='red'></ActivityIndicator>
</View>):
(
<View style={{flex:1}}>
<FlatList
data={this.state.user}
refreshing={this.state.isLoading}
onRefresh={this.getData}
renderItem={this.renderItem}
keyExtractor={(item, index)=>index.toString()}
ItemSeparatorComponent={this._itemSeparatorComponent}
/>
</View>
)
)
}
}
export default App
Happy Coding :)
...........................................................................................................................................................................................................................................
FlatList with RefreshControl
Example : #6
App.js
import React, { Component } from 'react'
import { View, Text, FlatList ,
RefreshControl} from 'react-native'
class App extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: false,
users: []
}
}
componentDidMount() {
this.getData()
}
getData = () => {
const API_URL = 'https://jsonplaceholder.typicode.com/photos'
this.setState({ isLoading: true })
fetch(API_URL)
.then(res => res.json())
.then(resJson => {
this.setState({
users: resJson,
isLoading: false
})
}).catch(error=>{
console.log(error)
})
}
_renderItem = ({ item }) => {
return <Text> {item.title}</Text>
}
_onRefresh=()=>{
this.setState({
isLoading:true
}), this.getData()
}
render() {
return (
<View>
<FlatList
data={this.state.users}
renderItem={this._renderItem}
keyExtractor={(item, index)=>index.toString()}
refreshControl={
<RefreshControl
refreshing={this.state.isLoading}
onRefresh={this._onRefresh}
/>
}
/>
</View>
)
}
}
export default App
Happy Coding :)
...........................................................................................................................................................................................................................................
SCROLL VIEW
Example : #7
import React, { Component } from 'react';
import { Text, Image, View, StyleSheet, ScrollView } from 'react-native';
class App extends Component {
state = {
names: [
{ 'name': 'Ben', 'id': 1 },
{ 'name': 'Susan', 'id': 2 },
{ 'name': 'Robert', 'id': 3 },
{ 'name': 'Mary', 'id': 4 },
{ 'name': 'Daniel', 'id': 5 },
{ 'name': 'Laura', 'id': 6 },
{ 'name': 'John', 'id': 7 },
{ 'name': 'Debra', 'id': 8 },
{ 'name': 'Aron', 'id': 9 },
{ 'name': 'Ann', 'id': 10 },
{ 'name': 'Steve', 'id': 11 },
{ 'name': 'Olivia', 'id': 12 }
]
}
render() {
return (
<View>
<ScrollView>
{
this.state.names.map((item, index) => (
<View key={item.id} style={styles.item}>
<Text>{`${item.id} ${item.name}`}</Text>
</View>
))
}
</ScrollView>
</View>
)
}
}
export default App
const styles = StyleSheet.create({
item: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
padding: 30,
margin: 2,
borderColor: '#2a4944',
borderWidth: 1,
backgroundColor: '#d2f7f1'
}
})
Happy Coding :)
...........................................................................................................................................................................................................................................
import React, { Component } from 'react'
import { Text, View, TouchableOpacity, StyleSheet } from 'react-native'
class List extends Component {
state = {
names: [
{
id: 0,
name: 'Ben',
},
{
id: 1,
name: 'Susan',
},
{
id: 2,
name: 'Robert',
},
{
id: 3,
name: 'Mary',
}
]
}
alertItemName = (item) => {
alert(item.name)
}
render() {
return (
<View>
{
this.state.names.map((item, index) => (
<TouchableOpacity
key = {item.id}
style = {styles.container}
onPress = {() => this.alertItemName(item)}>
<Text style = {styles.text}>
{item.name}
</Text>
</TouchableOpacity>
))
}
</View>
)
}
}
export default List
const styles = StyleSheet.create ({
container: {
padding: 10,
marginTop: 3,
backgroundColor: '#d9f9b1',
alignItems: 'center',
},
text: {
color: '#4f603c'
}
})
Happy Coding :)
...........................................................................................................................................................................................................................................
import React, { Component } from 'react';
import { Modal, Text, TouchableHighlight, View, StyleSheet}
from 'react-native'
class ModalExample extends Component {
state = {
modalVisible: false,
}
toggleModal(visible) {
this.setState({ modalVisible: visible });
}
render() {
return (
<View style = {styles.container}>
<Modal animationType = {"slide"} transparent = {false}
visible = {this.state.modalVisible}
onRequestClose = {() => { console.log("Modal has been closed.") } }>
<View style = {styles.modal}>
<Text style = {styles.text}>Modal is open!</Text>
<TouchableHighlight onPress = {() => {
this.toggleModal(!this.state.modalVisible)}}>
<Text style = {styles.text}>Close Modal</Text>
</TouchableHighlight>
</View>
</Modal>
<TouchableHighlight onPress = {() => {this.toggleModal(true)}}>
<Text style = {styles.text}>Open Modal</Text>
</TouchableHighlight>
</View>
)
}
}
export default ModalExample
const styles = StyleSheet.create ({
container: {
alignItems: 'center',
backgroundColor: '#ede3f2',
padding: 100
},
modal: {
flex: 1,
alignItems: 'center',
backgroundColor: '#f7021a',
padding: 100
},
text: {
color: '#3f2949',
marginTop: 10
}
})
Happy Coding :)
...........................................................................................................................................................................................................................................
FlatList with ItemSeparatorComponent
Example : #10
Happy Coding :)
............................................................................................................................................................................................................
Normal Example without FlatList
import React, { Component } from 'react'
import { View, Text } from 'react-native'
class App extends Component {
constructor(props) {
super(props)
this.state = {
persons: [
{ name: 'Johan Doe' },
{ name: 'Mika Singh' },
{ name: 'Prem Nath' },
]
}
}
render() {
const Myname = this.state.persons.map((item) => {
return (
<Text>{item.name}</Text>
)
})
return (
<View>
<Text>{Myname}</Text>
</View>
)
}
}
export default App
Happy Coding :)
........................................................................................................................................................................................................................
import React, { Component } from 'react'
import { View, Text, FlatList } from 'react-native'
class App extends Component {
constructor(props) {
super(props)
this.state = {
persons: [
{ name: "Johan Doe" },
{ name: "Mika Singh" },
{ name: "Prem Nath" },
{ name: "Prem Nath" },
{ name: "Prem Nath" },
{ name: "Prem Nath" },
{ name: "Prem Nath" },
{ name: "Prem Nath" },
{ name: "Prem Nath" },
],
refreshing: false
}
}
refresh=()=>{
this.setState({
refreshing:true
},()=>{
this.setState({
persons:[...this.state.persons, {name:'Sapan'}],
refreshing: false
})
})
}
render() {
return (
<View>
<FlatList
data={this.state.persons}
refreshing={this.state.refreshing}
onRefresh={this.refresh}
keyExtractor={(index, item) => item.toString()}
renderItem={({ item }) => {
return <Text>{item.name}</Text>
}}
>
</FlatList>
</View>
// <View>
// <FlatList
// horizontal
// showsHorizontalScrollIndicator={false}
// data={this.state.persons}
// renderItem={({item})=>{
// return <Text>{item.name}</Text>
// }}
// >
// </FlatList>
// </View>
// <View>
// <FlatList
// data={this.state.persons}
// renderItem={({item})=>{
// return(
// <View>
// <Text> {item.name}</Text>
// </View>
// )
// }}
// >
// </FlatList>
// </View>
)
}
}
export default App
Happy Coding :)
..............................................................................................................................................................................................................................
App.js
import React, { Component } from 'react'
import { View, Text, FlatList, Image } from 'react-native'
class App extends Component {
constructor(props) {
super(props)
this.state = {
users: [],
isLoading: false
}
}
componentDidMount() {
this.getData()
}
getData = () => {
const API_URL = 'https://jsonplaceholder.typicode.com/photos/'
this.setState({ isLoading: true })
fetch(API_URL)
.then(res=>res.json())
.then((resJson) => {
this.setState({
users: resJson,
isLoading: false
})
}).catch(error => {
console.log(error)
})
}
renderItems = ({ item }) => {
return (
<View>
<Text>{item.title}</Text>
<Image style={{width:100, height:60}} source={{uri:item.thumbnailUrl}}/>
</View>
)
}
render() {
return (
<View>
<Text>Hello</Text>
<FlatList
horizontal
data={this.state.users}
refreshing={this.state.isLoading}
onRefresh={this.getData}
keyExtractor={(item, index) => index.toString()}
renderItem={this.renderItems}
>
</FlatList>
<FlatList
data={this.state.users}
refreshing={this.state.isLoading}
onRefresh={this.getData}
keyExtractor={(item, index) => index.toString()}
renderItem={this.renderItems}
>
</FlatList>
</View>
)
}
}
export default App
Happy Coding :)
................................................................................................................................................................................................................................
App.js
import React, { Component } from 'react'
import { View, Text, FlatList} from 'react-native'
const
db=[
{
"albumId": 1,
"id": 1,
"title": "accusamus beatae ad facilis cum similique qui sunt",
"url": "https://via.placeholder.com/600/92c952",
"thumbnailUrl": "https://via.placeholder.com/150/92c952"
},
{
"albumId": 1,
"id": 2,
"title": "reprehenderit est deserunt velit ipsam",
"url": "https://via.placeholder.com/600/771796",
"thumbnailUrl": "https://via.placeholder.com/150/771796"
},
{
"albumId": 1,
"id": 3,
"title": "officia porro iure quia iusto qui ipsa ut modi",
"url": "https://via.placeholder.com/600/24f355",
"thumbnailUrl": "https://via.placeholder.com/150/24f355"
},
{
"albumId": 1,
"id": 4,
"title": "culpa odio esse rerum omnis laboriosam voluptate repudiandae",
"url": "https://via.placeholder.com/600/d32776",
"thumbnailUrl": "https://via.placeholder.com/150/d32776"
},
{
"albumId": 1,
"id": 5,
"title": "natus nisi omnis corporis facere molestiae rerum in",
"url": "https://via.placeholder.com/600/f66b97",
"thumbnailUrl": "https://via.placeholder.com/150/f66b97"
},
{
"albumId": 1,
"id": 6,
"title": "accusamus ea aliquid et amet sequi nemo",
"url": "https://via.placeholder.com/600/56a8c2",
"thumbnailUrl": "https://via.placeholder.com/150/56a8c2"
},
{
"albumId": 1,
"id": 7,
"title": "officia delectus consequatur vero aut veniam explicabo molestias",
"url": "https://via.placeholder.com/600/b0f7cc",
"thumbnailUrl": "https://via.placeholder.com/150/b0f7cc"
},
{
"albumId": 1,
"id": 8,
"title": "aut porro officiis laborum odit ea laudantium corporis",
"url": "https://via.placeholder.com/600/54176f",
"thumbnailUrl": "https://via.placeholder.com/150/54176f"
},
{
"albumId": 1,
"id": 9,
"title": "qui eius qui autem sed",
"url": "https://via.placeholder.com/600/51aa97",
"thumbnailUrl": "https://via.placeholder.com/150/51aa97"
},
{
"albumId": 1,
"id": 10,
"title": "beatae et provident et ut vel",
"url": "https://via.placeholder.com/600/810b14",
"thumbnailUrl": "https://via.placeholder.com/150/810b14"
}
]
class App extends Component{
constructor(props){
super(props)
this.state={
isLoading:false,
dataSource:[]
}
}
componentDidMount(){
this.setState({isLoading:true}), this.getData()
}
getData=()=>{
setTimeout(()=>{
this.setState({
dataSource:db,
isLoading:false
})
},3000)
}
_renderItem=({item})=>{
return<Text>{item.title}</Text>
}
render(){
return(
<View>
<FlatList
data={this.state.dataSource}
renderItem={this._renderItem}
keyExtractor={(item, index)=>index.toString()}
/>
</View>
)
}
}
export default App
..........................................................................................................................................................................................................................
JSON
import React, { Component } from 'react'
import { View, Text } from 'react-native'
class App extends Component {
constructor(props) {
super(props)
this.state = {
dataSource: [],
users: 'Sapan'
}
}
componentDidMount() {
this.setState({ users: 'Sapan Kumar Das' })
return fetch('https://jsonplaceholder.typicode.com/photos?_limit=10')
.then(res => res.json())
.then(resJson => {
this.setState({
dataSource: resJson
})
}).catch((error)=>{
console.log(error)
})
}
render() {
return (
<View>
<Text>{this.state.users}</Text>
<Text>{JSON.stringify(this.state.dataSource)}</Text>
</View>
)
}
}
export default App
..........................................................................................................................................................................................................................
JSON + Elevation
import React, { Component } from 'react'
import { View, Text, FlatList, Image , Dimensions, StyleSheet} from 'react-native'
const { width, height} =Dimensions.get('window')
class App extends Component {
constructor(props) {
super(props)
this.state = {
dataSource: [],
users: 'Sapan'
}
}
componentDidMount() {
this.setState({ users: 'Sapan Kumar Das' })
return fetch('https://jsonplaceholder.typicode.com/photos?_limit=10')
.then(res => res.json())
.then(resJson => {
this.setState({
dataSource: resJson
})
}).catch((error) => {
console.log(error)
})
}
_renderItem=({item})=>{
return(
<View style={[styles.container, styles.shadow]}>
<Image style={styles.image} source={{uri:item.thumbnailUrl}}/>
<View>
<Text>{item.albumId}</Text>
<Text>{item.id}</Text>
<Text style={styles.title}>{item.title}</Text>
</View>
</View>
)
}
render() {
return (
<View style={{ flex: 1, backgroundColor: '#f8f8f8' }}>
<View style={{width:width, height:60,backgroundColor:'red',
alignItems:'center', justifyContent:'center'}} >
<Text >News Paper</Text>
</View>
<FlatList
data={this.state.dataSource}
renderItem={this._renderItem}
/>
</View>
)
}
}
export default App
const styles = StyleSheet.create({
container:{
flexDirection:'row',
backgroundColor:'#f8f8f8',
margin:5,
borderRadius:10,
width:width - 10
},
shadow:{
elevation:10,
shadowColor:'gray',
shadowOpacity:0.3,
shadowRadius:50,
shadowOffset: { width:0, height:0}
}
,
image:{
width: width/3,
height: width/3,
resizeMode:'cover',
borderRadius:5
},
title:{
width: ((width/3)*2)-20,
fontSize:22
}
})
..........................................................................................................................................................................................................................
import React, { Component } from 'react'
import { View, Text, ScrollView } from 'react-native'
import { users } from './app/configs/data'
class App extends Component {
constructor(props) {
super(props)
this.state = {
data: users
}
}
render() {
const items = this.state.data.map((item) => {
return (
<View>
<Text>{`${item.name.first} ${item.gender}`}</Text>
</View>
)
})
return (
<ScrollView>
<View>
{items}
</View>
</ScrollView>
)
}
}
export default App
..........................................................................................................................................................................................................................
..........................................................................................................................................................................................................................
import React, { useState } from 'react';
import { StyleSheet, Text, View, FlatList } from 'react-native';
export default function App() {
const [people, setPeople] = useState([
{ name: 'shaun', id: '1' },
{ name: 'yoshi', id: '2' },
{ name: 'mario', id: '3' },
{ name: 'luigi', id: '4' },
{ name: 'peach', id: '5' },
{ name: 'toad', id: '6' },
{ name: 'bowser', id: '7' },
]);
return (
<View style={styles.container}>
<FlatList
numColumns={2}
keyExtractor={(item) => item.id}
data={people}
renderItem={({ item }) => (
<Text style={styles.item}>{item.name}</Text>
)}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 40,
paddingHorizontal: 20,
backgroundColor: '#fff',
},
item: {
flex: 1,
marginHorizontal: 10,
marginTop: 24,
padding: 30,
backgroundColor: 'pink',
fontSize: 24,
},
});
..........................................................................................................................................................................................................................
HEADER
import React from 'react'
import { View, Text, FlatList } from 'react-native'
const data = [
{
id: 1,
title: 'Hari om',
name: 'Sapan Kumar Das'
},
{
id: 2,
title: 'pandey',
name: 'Johan Doe'
},
{
id: 3,
title: 'Ram',
name: 'Smith joy'
}
]
const Header =()=>{
return(
<View style={{flex:1, justifyContent:'center', alignItems:'center', backgroundColor:'pink'}}>
<Text style={{color:'red', fontSize:25, padding:10}}> Follo Me</Text>
</View>
)
}
const Person = ({ title, name }) => {
return (
<View>
<Text>{title}</Text>
<Text>{name}</Text>
</View>
)
}
const App = () => {
return (
<FlatList
data={data}
renderItem={({ item }) => <Person title={item.title} name={item.name} />}
keyExtractor={item => item.id}
ListHeaderComponent={Header}
/>
)
}
export default App
..........................................................................................................................................................................................................................
import React, { Component } from 'react';
import { View, Text, StyleSheet, FlatList, Image } from 'react-native';
import Constants from 'expo-constants'
const Home = () => {
const data = [
{ id: 1, name: 'Johan Doe' },
{ id: 2, name: 'Smith Jain' },
{ id: 3, name: 'Michel Doe' },
{ id: 4, name: 'Albert' },
{ id: 5, name: 'Johan Smith' },
{ id: 6, name: 'Johan Smith' },
{ id: 7, name: 'Johan Smith' },
{ id: 8, name: 'Johan Smith' },
]
const renderList = ((item) => {
return (
<View style={{ flex: 1, marginVertical: 10, marginTop: Constants.statusBarHeight }}>
<View style={{
flexDirection: 'row',
shadowOpacity: 5,
elevation: 5,
backgroundColor: '#fff', padding: 15, justifyContent: 'space-between',
}}>
<Image source={require('./assets/rn.png')}
style={{ width: 40, height: 40, borderRadius: 20, borderColor:'red', }} />
<View style={{alignSelf:'center'}}>
<Text style={{fontSize:20, textAlign:'center'}}>{item.name}</Text>
</View>
</View>
</View>
)
})
return (
<View>
<FlatList
data={data}
renderItem={({ item }) => {
return renderList(item)
}}
keyExtractor={(item) => `${item.id}`}
/>
</View>
)
}
export default class App extends Component {
render() {
return (
<>
<Home />
</>
)
}
}
..........................................................................................................................................................................................................................
