DEV Community: Shevon Soyza

Exploring Lists in React Native: Choosing the Right Component

Shevon Soyza — Mon, 21 Aug 2023 13:21:07 +0000

Introduction

When it comes to developing user-friendly, optimised apps with the React Native framework, lists play an important role. Lists help us organise and present the information neatly in the apps. React Native offers different types of list components for different scenarios. In this article, we will discuss:

FlatList
SectionList
ScrollView
VirtualizedList
GridList

Among them, choosing the right list component will help increase the app’s performance and user experience. So, let’s take a quick look at these components.

FlatList: Efficient Rendering for Long Lists

When dealing with a lengthy dataset where we need to show lots of things in order, the FlatList component is the go-to solution. Also, it has a virtualization technique that only shows what you’re looking at right now. Unlike traditional lists that render all items at once, FlatList renders only the items currently visible on the screen. This means our app will load faster and use less memory.

Here's a simple example:

import React from 'react';
import {FlatList, View, Text} from 'react-native';

const data = [
  {id: '1', title: 'Item 1'},
  {id: '2', title: 'Item 2'},
  {id: '3', title: 'Item 3'},
  // ...more data
];

const FlatListComponent = () => {
  return (
    <FlatList
      data={data}
      keyExtractor={item => item.id}
      renderItem={({item}) => (
        <View>
          <Text>{item.title}</Text>
        </View>
      )}
    />
  );
};

export default FlatListComponent;

SectionList: Categorising Data with Style

The SectionList is a component that puts things into groups with headings. If the app involves organising data into sections, we can use this component. It enables you to create lists with different sections, each with its own header. For example, let’s say we are making a recipe application and need to group the recipes by type.

import React from 'react';
import {SectionList, View, Text} from 'react-native';

const recipes = [
  {
    title: 'Desserts',
    data: [{name: 'Cake', ingredients: 'Flour, Sugar'} /* ... */],
  },
  // ... more types of recipes
];

const SectionListComponent = () => {
  return (
    <SectionList
      sections={recipes}
      keyExtractor={item => item.name}
      renderSectionHeader={({section: {title}}) => (
        <Text style={{fontSize: 20, fontWeight: 'bold'}}>{title}</Text>
      )}
      renderItem={({item}) => (
        <View>
          <Text>{item.name}</Text>
          <Text>{item.ingredients}</Text>
        </View>
      )}
    />
  );
};

export default SectionListComponent;

ScrollView: Flexibility in Complex Layouts

Now, let’s discuss ScrollView. It’s not exactly a list component, but it allows you to create scrollable layouts with different contents like text, images, and other components.
So, ScrollView is best for layout screens with mixed content or complex layouts. Here's a simple example:

import React from 'react';
import {ScrollView, Text, Image} from 'react-native';

const ScrollViewComponent = () => {
  return (
    <ScrollView>
      <Text>Some text content</Text>
      <Image source={require('./image.jpg')} />
      {/* ...more components */}
    </ScrollView>
  );
};

export default ScrollViewComponent;

VirtualizedList: Unveiling the Magic of Efficient Rendering

This virtualizedList component will optimise memory usage and rendering performance of the app by recycling components. It ensures smooth scrolling and gives plenty of room for customization. Also, FlatList and SectionList are powered by the underlying VirtualizedList. And when we need more flexibility than what FlatList provides, we can simply use VirtualizedList. Here’s an example code:

import React from 'react';
import {VirtualizedList, View, Text} from 'react-native';

const data = [
  {id: '1', title: 'Item 1'},
  {id: '2', title: 'Item 2'},
  // ...more data
];

const VirtualizedListComponent = () => {
  return (
    <VirtualizedList
      data={data}
      getItemCount={data.length}
      getItem={(data, index) => data[index]}
      keyExtractor={item => item.id}
      renderItem={({item}) => (
        <View>
          <Text>{item.title}</Text>
        </View>
      )}
    />
  );
};

export default VirtualizedListComponent;

GridList: Making Pretty Grids

There’s no built-in component called GridList in React Native. But still, we can make grid-like layouts using a combination of View and styling. Or we can achieve grid layouts using the versatile FlatList. Here's an example where we need to display content like image galleries or product listings in grid format.

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

// Imagine you have product info
const products = [
  {id: 1, name: 'Cool Product 1', price: 19.99},
  // ... more products
];

const GridLayoutComponent = () => {
  // Here's how you make a grid
  return (
    <View>
      {products.map(product => (
        <View key={product.id}>
          <Text>{product.name}</Text>
          <Text>${product.price}</Text>
        </View>
      ))}
    </View>
  );
};

export default GridLayoutComponent;

import React from 'react';
import {View, FlatList, Image} from 'react-native';

const data = [
  {id: '1', image: require('./image1.jpg')},
  {id: '2', image: require('./image2.jpg')},
  // ...more data
];

const GridLayoutComponent = () => {
  return (
    <FlatList
      data={data}
      keyExtractor={item => item.id}
      numColumns={2}
      renderItem={({item}) => (
        <View>
          <Image source={item.image} />
        </View>
      )}
    />
  );
};

export default GridLayoutComponent;

Picking the Right List: Easy Tips

FlatLists for large datasets and to ensure smooth performance.
SectionList for when data needs to be categorised.
ScrollView for when the layout design involves mixed content.
VirtualizedList to create your own customised lists if none of the built-in components meet your needs.
Grid Layout for making grids using View and Stylings.

Every app is unique. By understanding the strengths and use cases for the above FlatList, SectionList, ScrollView, VirtualizedList and GridList; we can develop a highly engaging and efficient cross-platform app in React Native. Happy Coding!

How to Add App Icons in React Native (Android and iOS)

Shevon Soyza — Mon, 14 Aug 2023 16:53:58 +0000

Before we launch a mobile application for users, adding a custom app icon is an important aspect. A professional and eye-catching icon not only represents your app’s identity but also improves user recognition. In this guide, I will share the process of adding app icons for Android and iOS in React Native.

1. Understanding App Icons

First, Let’s understand the concept of app icons for Android and iOS. The requirements and guidelines for app icons are different for both platforms.

Android App Icon:
Android app icons are represented by PNG files and are available in various sizes for different screen densities. The standard sizes include mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi. React Native automatically handles the selection of the appropriate icon size based on the device's screen density.

iOS App Icon:
iOS app icons are also represented by PNG files but have different size requirements compared to Android. iOS app icons need to be in specific sizes for different devices like iPhones, iPads, and App Store icons.

2. Preparing App Icons

First, we need to prepare our app icons in the required sizes for both Android and iOS. You can use design tools like Adobe Photoshop, Sketch or you can use online tools that generate app icons based on a single image. Here, we need to make sure icons are in PNG format.

Here are some popular websites that were widely used for generating app icons for both Android and iOS platforms.

Always make sure to review the generated icons and make any necessary adjustments to match your design requirements before implementing them in your React Native project.

3. Adding App Icons in React Native

Now, let's go through the step-by-step process of adding app icons for Android and iOS in a React Native project.

Step 1: Adding an Android App Icon

Navigate to the android/app/src/main/res directory in your React Native project. Here you will see subdirectories called mipmap-mdpi, mipmap-hdpi, mipmap-xhdpi, mipmap-xxhdpi, and mipmap-xxxhdpi.

Place the corresponding app icon PNG files in each of these folders with the following dimensions (in pixels):
• mdpi: 48x48
• hdpi: 72x72
• xhdpi: 96x96
• xxhdpi: 144x144
• xxxhdpi: 192x192

Now, your Android app icons are set!

Step 2: Adding an iOS App Icon

Navigate to the ios/{YourAppName}/Images.xcassets/AppIcon.appiconset directory in your React Native project.

Replace the default icon files in this directory with your custom app icon PNG files. Ensure that you have the following icon sizes (in pixels) for iOS:

20x20
29x29
40x40
60x60
76x76
83.5x83.5 (for iPad Pro)
1024x1024 (used for the App Store)

Make sure to update the Contents.json file in the same directory to include your custom icon file names.

Step 3: Linking the Icons

For Android, there's no additional linking required. React Native will automatically detect the icons and use them based on the device's screen density.

For iOS, we need to make sure the correct icons are added in the project settings. Check it in the xCode project (located in the ios/{YourAppName}.xcworkspace directory).

Clean and rebuild your iOS project in Xcode to ensure the changes take effect.

4. Testing the App Icons

It's essential to test your app icons on actual devices and simulators/ emulators to ensure they appear correctly.

Run your React Native app on different Android devices and iOS devices/ simulators to verify that the icons display correctly in the app drawer and on the home screen.

Troubleshooting Tips -

If your icons don't display as expected, double-check the image filenames and file paths.
Clear the build caches and rebuild the app to ensure your changes take effect.

5. Conclusion

The app icons are the face of your application, which represents your app's identity. So, invest some time and effort in creating a professional, eye-catching icon to stand out in the crowded app stores.

By following the above steps, I hope you have easily added the app icons to your React Native app.

Happy Coding !!!