React Native Skills

React Native Skills is a community skill for building mobile applications with React Native, covering component patterns, navigation setup, native module integration, platform-specific code, and performance optimization for cross-platform apps.

What Is This?

Overview

React Native Skills provides patterns for building production mobile applications with React Native. It covers component patterns with FlatList, ScrollView, and Pressable for native-feeling interactions, navigation setup using React Navigation with stack, tab, and drawer navigators, native module integration for accessing platform APIs like camera, biometrics, and push notifications, platform-specific code using Platform.select and file extensions for iOS and Android customization, and performance optimization with InteractionManager, lazy loading, and image caching. The skill enables web developers to build native mobile experiences using React knowledge.

Who Should Use This

This skill serves React developers building their first mobile applications with React Native, teams creating cross-platform apps that share code between iOS and Android, and engineers integrating native modules for platform-specific functionality.

Why Use It?

Problems It Solves

Web-style scrolling patterns cause poor performance in mobile lists without native optimization. Navigation between screens requires platform-aware transitions and gesture handling. Platform-specific features like biometrics need native module bridges. Performance issues from JavaScript thread blocking cause janky animations and interactions.

Core Highlights

FlatList provides virtualized list rendering for smooth scrolling of large datasets. React Navigation handles platform-native transitions with gesture-driven navigation. Native modules bridge JavaScript to platform APIs for device capabilities. Performance patterns keep the JavaScript thread responsive.

How to Use It?

Basic Usage

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

interface Item {
  id: string;
  title: string;
  subtitle: string;
}

function ItemList({
  items,
  onPress,
}: {
  items: Item[];
  onPress: (id: string)
    => void;
}) {
  return (
    <FlatList
      data={items}
      keyExtractor={
        (item) => item.id}
      renderItem={({ item }) => (
        <Pressable
          onPress={() =>
            onPress(item.id)}
          style={({ pressed }) => [
            styles.row,
            pressed &&
              styles.pressed,
          ]}>
          <View>
            <Text
              style={
                styles.title}>
              {item.title}
            </Text>
            <Text
              style={
                styles.subtitle}>
              {item.subtitle}
            </Text>
          </View>
        </Pressable>
      )}
      ItemSeparatorComponent={
        () => <View
          style={styles.sep} />}
    />
  );
}

const styles =
  StyleSheet.create({
    row: { padding: 16 },
    pressed: { opacity: 0.7 },
    title: { fontSize: 16,
      fontWeight: '600' },
    subtitle: { fontSize: 14,
      color: '#666',
      marginTop: 4 },
    sep: { height: 1,
      backgroundColor:
        '#eee' },
  });

Real-World Examples

import React from 'react';
import {
  createNativeStackNavigator
} from
  '@react-navigation/'
  + 'native-stack';
import {
  NavigationContainer
} from
  '@react-navigation/native';

type RootStack = {
  Home: undefined;
  Detail: { id: string };
  Settings: undefined;
};

const Stack =
  createNativeStackNavigator<
    RootStack>();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerLargeTitle:
            true,
          animation:
            'slide_from_right',
        }}>
        <Stack.Screen
          name="Home"
          component={
            HomeScreen} />
        <Stack.Screen
          name="Detail"
          component={
            DetailScreen} />
        <Stack.Screen
          name="Settings"
          component={
            SettingsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Advanced Tips

Use Reanimated for complex animations that run on the UI thread without JavaScript bridge overhead. Implement FlashList as a drop-in replacement for FlatList with better recycling performance. Use Hermes engine for faster startup and reduced memory usage. Implement CodePush for over-the-air JavaScript updates that bypass app store review cycles for minor fixes.

When to Use It?

Use Cases

Build a product listing app with virtualized scrolling and native-feeling press interactions. Create a tabbed navigation structure with typed route parameters. Implement biometric authentication using a native module bridge.

Related Topics

React Native, mobile development, React Navigation, native modules, and cross-platform apps.

Important Notes

Requirements

React Native CLI or Expo for project setup and building. Xcode for iOS development and Android Studio for Android. Node.js and platform-specific SDKs for native compilation.

Usage Recommendations

Do: use FlatList or FlashList for all scrollable lists to get virtualized rendering. Prefer Pressable over TouchableOpacity for consistent press feedback. Use typed navigation with TypeScript for route parameter safety.

Don't: use ScrollView for long lists which renders all items at once causing memory issues. Run heavy computations on the JavaScript thread during animations. Inline styles in render methods when StyleSheet.create provides optimized style references.

Limitations

Native module integration requires Objective-C/Swift or Java/Kotlin knowledge for custom bridges. Platform differences in behavior require testing on both iOS and Android. Hot reload may not reflect native code changes requiring full rebuilds. Debugging requires separate tools for JavaScript and native layers which adds complexity to the development workflow.