Easy Steps: FLATLIST

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 (

<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 (

);

}}

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>
);
}
}

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

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'
}
})

LIST

Example : #8

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 :)

Modal

Example : #9

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, { 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 (

<FlatList

numColumns={2}

keyExtractor={(item) => item.id}

data={people}

renderItem={({ item }) => (

)}

</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,

});

..........................................................................................................................................................................................................................

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 />
</>
)
}
}

Easy Steps

Sunday, August 19, 2018

FLATLIST

1 comment: