🧩 Component Reference

📦 View

The fundamental container component. Maps to native view (UIView on iOS, android.view on Android).

import { View } from 'react-native';

<View style={styles.container}>
  {children}
</View>

📝 Text

Display text. All text must be wrapped in Text component.

import { Text } from 'react-native';

<Text style={styles.title} numberOfLines={2}>
  Hello World
</Text>

🖼️ Image

Display images from local assets or remote URLs.

import { Image } from 'react-native';

// Local image
<Image source={require('./assets/logo.png')} />

// Remote image (requires dimensions)
<Image 
  source={{ uri: 'https://example.com/image.jpg' }}
  style={{ width: 200, height: 200 }}
/>

👆 Pressable

Recommended touchable component with flexible press state styling.

import { Pressable } from 'react-native';

<Pressable
  onPress={() => console.log('Pressed')}
  style={({ pressed }) => [
    styles.button,
    pressed && styles.buttonPressed
  ]}
>
  {({ pressed }) => (
    <Text>{pressed ? 'Pressing...' : 'Press Me'}</Text>
  )}
</Pressable>

📜 ScrollView

Scrollable container for content that may overflow. Use for small amounts of content.

import { ScrollView } from 'react-native';

<ScrollView
  contentContainerStyle={styles.content}
  showsVerticalScrollIndicator={false}
>
  {/* Content */}
</ScrollView>

📱 SafeAreaView

Renders content within safe area boundaries (avoids notches, status bars).

import { SafeAreaView } from 'react-native';
// OR better: use expo
import { SafeAreaView } from 'react-native-safe-area-context';

<SafeAreaView style={{ flex: 1 }}>
  {/* Content respects safe areas */}
</SafeAreaView>

Tip: Use react-native-safe-area-context for more control with useSafeAreaInsets() hook.

📋 FlatList

Performant list for large datasets with virtualization.

import { FlatList } from 'react-native';

<FlatList
  data={items}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <ItemComponent item={item} />}
  ListHeaderComponent={<Header />}
  ListEmptyComponent={<EmptyState />}
  onEndReached={loadMore}
  onEndReachedThreshold={0.5}
/>

📑 SectionList

List with section headers for grouped data.

import { SectionList } from 'react-native';

const sections = [
  { title: 'A', data: ['Apple', 'Avocado'] },
  { title: 'B', data: ['Banana', 'Blueberry'] },
];

<SectionList
  sections={sections}
  keyExtractor={(item, index) => item + index}
  renderItem={({ item }) => <Text>{item}</Text>}
  renderSectionHeader={({ section }) => (
    <Text style={styles.header}>{section.title}</Text>
  )}
/>

⚡ FlashList (Shopify)

High-performance drop-in replacement for FlatList.

import { FlashList } from '@shopify/flash-list';

<FlashList
  data={items}
  renderItem={({ item }) => <Item data={item} />}
  estimatedItemSize={100}
/>

Install: npx expo install @shopify/flash-list

Key difference: Requires estimatedItemSize prop for best performance.

⌨️ TextInput

Text input field for user input.

import { TextInput } from 'react-native';

<TextInput
  value={text}
  onChangeText={setText}
  placeholder="Enter text..."
  style={styles.input}
  autoCapitalize="none"
  keyboardType="email-address"
  returnKeyType="done"
  onSubmitEditing={handleSubmit}
/>

🔘 Switch

Toggle switch for boolean values.

import { Switch } from 'react-native';

<Switch
  value={isEnabled}
  onValueChange={setIsEnabled}
  trackColor={{ false: '#767577', true: '#81b0ff' }}
  thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
/>

⏳ ActivityIndicator

Loading spinner.

import { ActivityIndicator } from 'react-native';

<ActivityIndicator size="large" color="#0000ff" />

// Conditional loading
{isLoading ? (
  <ActivityIndicator size="large" />
) : (
  <Content />
)}

📷 expo-camera

import { CameraView, useCameraPermissions } from 'expo-camera';

const [permission, requestPermission] = useCameraPermissions();

<CameraView style={{ flex: 1 }} facing="back">
  {/* Camera preview */}
</CameraView>

Install: npx expo install expo-camera

🖼️ expo-image

High-performance image component with caching.

import { Image } from 'expo-image';

<Image
  source={{ uri: 'https://example.com/image.jpg' }}
  style={{ width: 200, height: 200 }}
  contentFit="cover"
  placeholder={blurhash}
  transition={200}
/>

Install: npx expo install expo-image

🎨 expo-linear-gradient

import { LinearGradient } from 'expo-linear-gradient';

<LinearGradient
  colors={['#4c669f', '#3b5998', '#192f6a']}
  style={styles.gradient}
>
  <Text>Gradient Background</Text>
</LinearGradient>

Install: npx expo install expo-linear-gradient

🔔 expo-notifications

import * as Notifications from 'expo-notifications';

// Schedule notification
await Notifications.scheduleNotificationAsync({
  content: {
    title: "Reminder",
    body: "Don't forget!",
  },
  trigger: { seconds: 60 },
});

Install: npx expo install expo-notifications

📍 expo-location

import * as Location from 'expo-location';

const { status } = await Location.requestForegroundPermissionsAsync();
const location = await Location.getCurrentPositionAsync({});
console.log(location.coords.latitude, location.coords.longitude);

Install: npx expo install expo-location

📁 expo-file-system

import * as FileSystem from 'expo-file-system';

// Read file
const content = await FileSystem.readAsStringAsync(fileUri);

// Write file
await FileSystem.writeAsStringAsync(fileUri, 'content');

// Download file
const { uri } = await FileSystem.downloadAsync(url, fileUri);

Install: npx expo install expo-file-system

🔗 expo-linking

import * as Linking from 'expo-linking';

// Open URL
await Linking.openURL('https://google.com');

// Open settings
await Linking.openSettings();

// Get initial URL (deep link)
const url = await Linking.getInitialURL();

Install: npx expo install expo-linking

📤 expo-sharing

import * as Sharing from 'expo-sharing';

if (await Sharing.isAvailableAsync()) {
  await Sharing.shareAsync(fileUri);
}

Install: npx expo install expo-sharing

📦 expo-secure-store

Encrypted key-value storage for sensitive data.

import * as SecureStore from 'expo-secure-store';

// Store
await SecureStore.setItemAsync('token', 'secret-value');

// Retrieve
const token = await SecureStore.getItemAsync('token');

// Delete
await SecureStore.deleteItemAsync('token');

Install: npx expo install expo-secure-store

🎭 react-native-reanimated

High-performance animations running on UI thread.

import Animated, { 
  useSharedValue, 
  useAnimatedStyle,
  withSpring 
} from 'react-native-reanimated';

const offset = useSharedValue(0);
const animatedStyle = useAnimatedStyle(() => ({
  transform: [{ translateX: offset.value }],
}));

<Animated.View style={animatedStyle} />

Install: npx expo install react-native-reanimated

👆 react-native-gesture-handler

Native gesture handling.

import { GestureDetector, Gesture } from 'react-native-gesture-handler';

const pan = Gesture.Pan()
  .onUpdate((e) => {
    offset.value = e.translationX;
  });

<GestureDetector gesture={pan}>
  <Animated.View />
</GestureDetector>

Install: npx expo install react-native-gesture-handler

🎬 lottie-react-native

Render After Effects animations.

import LottieView from 'lottie-react-native';

<LottieView
  source={require('./animation.json')}
  autoPlay
  loop
  style={{ width: 200, height: 200 }}
/>

Install: npx expo install lottie-react-native

📊 react-native-svg

SVG support for React Native.

import Svg, { Circle, Rect, Path } from 'react-native-svg';

<Svg height="100" width="100">
  <Circle cx="50" cy="50" r="45" fill="blue" />
</Svg>

Install: npx expo install react-native-svg

📱 @react-native-async-storage/async-storage

Persistent key-value storage.

import AsyncStorage from '@react-native-async-storage/async-storage';

// Store
await AsyncStorage.setItem('key', 'value');
await AsyncStorage.setItem('user', JSON.stringify(user));

// Retrieve
const value = await AsyncStorage.getItem('key');
const user = JSON.parse(await AsyncStorage.getItem('user'));

// Remove
await AsyncStorage.removeItem('key');

// Clear all
await AsyncStorage.clear();

Install: npx expo install @react-native-async-storage/async-storage

📝 react-hook-form

Performant form handling.

import { useForm, Controller } from 'react-hook-form';

const { control, handleSubmit, errors } = useForm();

<Controller
  control={control}
  name="email"
  rules={{ required: true }}
  render={({ field: { onChange, value } }) => (
    <TextInput value={value} onChangeText={onChange} />
  )}
/>

Install: npm install react-hook-form

🔄 @tanstack/react-query

Server state management and caching.

import { useQuery, useMutation } from '@tanstack/react-query';

const { data, isLoading, error } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers,
});

const mutation = useMutation({
  mutationFn: createUser,
  onSuccess: () => queryClient.invalidateQueries(['users']),
});

Install: npm install @tanstack/react-query

📦 Quick Install Commands

# Animation & Gestures
npx expo install react-native-reanimated react-native-gesture-handler

# Storage
npx expo install @react-native-async-storage/async-storage expo-secure-store

# Media
npx expo install expo-camera expo-image expo-image-picker

# Location & Maps
npx expo install expo-location react-native-maps

# UI
npx expo install react-native-svg expo-linear-gradient @shopify/flash-list

# Forms & Data
npm install react-hook-form @tanstack/react-query zod