React Native : Basic : Interaction with List , Images

1 min read

Relsell Global : Cross platform development using React Native

Hello Friends

Today we are going to learn , how to make FlatList in React native. We will be adding one custom list item. And all this is pretty easy.

Assuming , you already have a working setup for react native.

So create a new component for example App2List inside App2List.js file [ to be added].

We will start with importing desired components like below

import React, { Component } from 'react';
import { AppRegistry, FlatList, StyleSheet, Text, View,Image } from 'react-native';

For FlatList , it’s , important we set its props , [ data, renterItem] so that it can be used perfectly in our program.

 <FlatList
          data={dataSource}
          renderItem={({item}) => {          }
         
/>

so in the above code snippet we need to set datasource. datasource could be an array of your custom objects.

const dataSource = [
  {key: 'Anil',title:'CEO',profilepic:'https://firebasestorage.googleapis.com/v0/b/rnfirebasedemo-a238a.appspot.com/o/profiles%2Fanil.jpg?alt=media&token=78b94b84-55df-4c7d-aa69-109c3753dfa0'},
  {key: 'Sunil',title:'DIRECTOR',profilepic:'https://firebasestorage.googleapis.com/v0/b/rnfirebasedemo-a238a.appspot.com/o/profiles%2Fanil.jpg?alt=media&token=78b94b84-55df-4c7d-aa69-109c3753dfa0'},
  {key: 'Kittu',title:'DIRECTOR',profilepic:'https://firebasestorage.googleapis.com/v0/b/rnfirebasedemo-a238a.appspot.com/o/profiles%2Fkittu.jpg?alt=media&token=7496b5dc-619b-4998-be97-73815d567b85'}
];

renderItem is set as an error function,

renderItem={({item}) => 
          <View style={styles.itemwrapper}>

          <MyListItem
          title = {item.title}
          name = {item.key}
          itemStyle = {styles}
          pp = {{uri: item.profilepic}}
          />
          </View>
      
          }

 

So to sum up below it the full file

import React, { Component } from 'react';
import { AppRegistry, FlatList, StyleSheet, Text, View,Image } from 'react-native';
const dataSource = [
  {key: 'Anil',title:'CEO',profilepic:'https://firebasestorage.googleapis.com/v0/b/rnfirebasedemo-a238a.appspot.com/o/profiles%2Fanil.jpg?alt=media&token=78b94b84-55df-4c7d-aa69-109c3753dfa0'},
  {key: 'Sunil',title:'DIRECTOR',profilepic:'https://firebasestorage.googleapis.com/v0/b/rnfirebasedemo-a238a.appspot.com/o/profiles%2Fanil.jpg?alt=media&token=78b94b84-55df-4c7d-aa69-109c3753dfa0'},
  {key: 'Kittu',title:'DIRECTOR',profilepic:'https://firebasestorage.googleapis.com/v0/b/rnfirebasedemo-a238a.appspot.com/o/profiles%2Fkittu.jpg?alt=media&token=7496b5dc-619b-4998-be97-73815d567b85'},
  



  
];

renderItemFunc = ({item}) => {
  return<Text style={styles.item}>{item.key}</Text>;
}

export default class App2List extends Component {
  render() {
    return (
      <View style={styles.container}>

       <Text style={styles.headingText}>Our Team</Text>

        <FlatList
          data={dataSource}
          renderItem={({item}) => 
          <View style={styles.itemwrapper}>

          <MyListItem
          title = {item.title}
          name = {item.key}
          itemStyle = {styles}
          pp = {{uri: item.profilepic}}
          />
          </View>
      
          }
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 50
  },
  itemwrapper: {
    borderWidth:1,
    borderRadius:10,
    marginTop:16,
    marginLeft:16,
    marginRight:16
  },
  item: {
    flex:1,
    padding: 10,
    fontSize: 18,
    height: 44,
  },
  itemtitle: {
    flex:1,
    padding: 12,
    fontSize: 12,
    height: 30,
    fontStyle:'italic'
  },
  itemImage: {
    height:50,
    width:50,
    borderRadius: 50/2
  },
  headingText: {
   fontSize:50,
   textAlign:'center',
  },
});

class MyListItem extends React.PureComponent {
  
  render() {
    return (
      
        <View style={{flexDirection:'row',padding:16}}>
          <Image style={this.props.itemStyle.itemImage} source={this.props.pp} />
          <Text style={this.props.itemStyle.item}>{this.props.name}</Text>
          <Text style={this.props.itemStyle.itemtitle}>{this.props.title}</Text>
        </View>
    
    );
  }
}

Output will be as below

Happy Coding

One Reply to “React Native : Basic : Interaction with List ,…”

Leave a Reply

Your email address will not be published. Required fields are marked *