This guide walks you through setting up a new React Native app from scratch, including best practices for performance and a custom component using FlashList.

Prerequisites

Make sure you have the following installed:

Node.js (LTS version)
npm or yarn
Watchman (for macOS)
Xcode (for iOS) or Android Studio (for Android)

Install React Native CLI

npm install -g expo-cli

Create a New Project

npx create-expo-app MyApp
cd MyApp

Run the App

npm start
# or
yarn start

Follow the instructions to run on iOS, Android, or web.

Install FlashList for Better Performance

npm install @shopify/flash-list

Create a Custom List Component with FlashList

import { FlashList } from '@shopify/flash-list';
import { View, Text } from 'react-native';

const data = Array.from({ length: 1000 }, (_, i) => ({ key: String(i), value: \`Item $\{i+1}\` }));

export function MyFlashList() {
  return (
    <FlashList
      data={data}
      renderItem={({ item }) => (
        <View style={{ padding: 16, borderBottomWidth: 1, borderColor: '#eee' }}>
          <Text>{item.value}</Text>
        </View>
      )}
      estimatedItemSize={50}
    />
  );
}

FlashList is highly performant for large lists. Adjust estimatedItemSize for your content.

Next Steps

Explore more advanced topics like navigation, theming, and state management to build a production-ready app.