List App in React Native

React Native Lists in 2 minutes

ReactNative Lists in 2 minutes

This article explains how to show a list of data to the user in a React Native application. The user can see a list of data by any form. It can be a list of Images, Texts, Videos, etc.

React Native at the core does not have any Component or Class to show the data as a List, rather it makes use of the map() method that converts a list of data into a key, count pair and provides an iterator. It is up to the developer to show this iterator to the user in any way. This article will use the same map() method to render a List of Dictionary values to the user.

Before we begin, this article assumes you have a basic understanding of what React Native Components are and can understand the basic syntax. You can take a look at this video for ramping up your basics super fast if you are on a Clock!

Understanding Map Method

The Javascript provides the Map method that runs on an Array of values, converting them into a map of the Array element and its position as value. From the docs of the Map method in Javascript,

The Map object holds key-value pairs and remembers the original insertion order of the keys. Any value (both objects and primitive values) may be used as either a key or a value. 

To apply the Map method on the array of values, use the following syntax

list.map((listItems, count)=>(log(listItem, position)))

If there are 10 values in an array, it will get loaded in the ‘listItem’ and the position in the ‘position’ variable. As the document says, the object can be either an Array of primitive objects or a user-defined object also. Depending on what is present as the value in the array, you can then access them like a normal data structure.

For the example program below, we will try to show a list of Dict items to the user. Sample data is,

 
ids:[ 
{age:22,name:'ABC'}, 
{age:25,name:'DSA'}, 
{age:24,name:'asd'} 
]

To load this in the map, directly run it over the map method and access the value using the listItem.age, listItem.name to retrieve that value.

React Native List Points to Remember
React Native List Points to Remember

Empty Fragments in Lists

Once we are ready to load the data to the user, it is just a matter of rendering it inside the render() inside our component. The one challenge that you will face is when trying to render the data is trying to return multiple elements. For example, React will not allow multiple-element return values like what our current requirement is.

In order to do that, think about making use of an Empty Fragment. Simple return value like,

return(
<Text></Text>
<Text></Text>
)

Can be wrapped inside an Empty Fragment like,

return(
<>
<Text></Text>
<Text></Text>
</>
)

This will act as a placeholder for the React Native to understand that there are multiple elements that can be rendered inside an empty placeholder of an Element.

One disadvantage of using empty fragments is that they cannot be styled using a Stylesheet in react native. In order to allow styling to be done on the container or the outer element that holds these values, consider making use of elements like View, Touchableopacity, TouchableFeedback, etc. All these have the capability of acting as outer/placeholder elements on the UI.

Using TouchableOpacity for Styling

Before we continue to the final section or the example App, we will try replacing the empty Fragment with a simple TouchableOpacity element.

Simply import the TouchableOpacity from react-native like this,

import {TouchableOpacity} from 'react-native';

This will make it easy to wrap around the elements and return from the component.

return(
<TouchableOpacity>
<Text></Text>
<Text></Text>
</TouchableOpacity> 
)

The only use of touchable opacity here is to give a simple opacity based animation on clicking, which gives a good UI experience. Other than that, TouchableOpacity is a simple element mostly used for wrapping, container purposes.

React Native List Example App

import React, { Component } from 'react';
import {StyleSheet, Text,TouchableOpacity, View} from 'react-native';

class App extends Component{

state = {
ids:[
{age:22,name:'ABC'},
{age:25,name:'DSA'},
{age:24,name:'asd'}
]
}

render(){
return(
{
this.state.ids.map((listItems, count)=>(
{listItems.name}
{listItems.age}
COUNT = {count}
))
}
);
}
}
export default App;

const style = StyleSheet.create(
{
touchableOpacity: {
padding: 10,
margin:10,
backgroundColor: '#d34543',
alignItems: 'center'
},
textView:{
color:'white'
}
}
)

This gives an application that looks like,

Before Styling

React Native List App without styling
React Native List App without styling

After Styling

List App in React Native
List App in React Native

Leave a Comment