React Native Core Components

import { View } from 'react-native';

<View style={{ flex: 1, backgroundColor: '#fff' }}>
  <View style={{ width: 100, height: 100 }} />
</View>

import { Text } from 'react-native';

<Text
  numberOfLines={2}
  ellipsizeMode="tail"
  onPress={() => console.log('tapped')}
  selectable
  style={{ fontSize: 16, color: '#000' }}
>
  Hello World
</Text>

import { Image } from 'react-native';

// Local asset
<Image source={require('./assets/logo.png')} style={{ width: 100, height: 100 }} />

// Remote
<Image
  source={{ uri: 'https://example.com/photo.jpg' }}
  style={{ width: 200, height: 200 }}
  resizeMode="cover"
  onLoad={() => console.log('loaded')}
  onError={({ nativeEvent }) => console.error(nativeEvent.error)}
/>

// With headers (remote)
<Image source={{ uri: '...', headers: { Authorization: 'Bearer token' } }} />

npx expo install expo-image

import { Image } from 'expo-image';

<Image
  source="https://example.com/photo.jpg"
  style={{ width: 200, height: 200 }}
  contentFit="cover"            // like resizeMode
  transition={200}              // fade-in ms
  cachePolicy="memory-disk"     // 'none' | 'disk' | 'memory' | 'memory-disk'
  placeholder={{ blurhash: 'L6PZfSi_.AyE_3t7t7R**0o#DgR4' }}
  priority="high"
/>

import { TextInput } from 'react-native';

const [value, setValue] = React.useState('');

<TextInput
  value={value}
  onChangeText={setValue}
  placeholder="Enter text"
  placeholderTextColor="#999"
  style={{ borderWidth: 1, padding: 8, borderRadius: 4 }}
  autoCapitalize="none"
  autoCorrect={false}
  returnKeyType="done"
  onSubmitEditing={() => Keyboard.dismiss()}
  secureTextEntry         // for passwords
  keyboardType="email-address"
  multiline
  numberOfLines={4}
/>

import { Pressable, Text } from 'react-native';

<Pressable
  onPress={() => console.log('pressed')}
  onLongPress={() => console.log('long press')}
  onPressIn={() => {}}
  onPressOut={() => {}}
  hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
  style={({ pressed }) => [
    { backgroundColor: pressed ? '#ddd' : '#fff' },
    styles.button,
  ]}
>
  {({ pressed }) => <Text>{pressed ? 'Pressing' : 'Press Me'}</Text>}
</Pressable>

import { TouchableOpacity, TouchableHighlight } from 'react-native';

// Fades on press
<TouchableOpacity activeOpacity={0.7} onPress={handlePress}>
  <Text>Tap me</Text>
</TouchableOpacity>

// Darkens on press
<TouchableHighlight underlayColor="#DDDDDD" onPress={handlePress}>
  <Text>Tap me</Text>
</TouchableHighlight>

import { ScrollView } from 'react-native';

<ScrollView
  horizontal
  showsHorizontalScrollIndicator={false}
  showsVerticalScrollIndicator={false}
  bounces={false}              // iOS: disable bounce
  onScroll={({ nativeEvent }) => console.log(nativeEvent.contentOffset.y)}
  scrollEventThrottle={16}    // ms between onScroll events
  contentContainerStyle={{ padding: 16 }}
  keyboardShouldPersistTaps="handled"
  refreshControl={
    <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
  }
>
  {/* children */}
</ScrollView>

import { SafeAreaView } from 'react-native';
// OR (preferred — handles more edge cases)
import { SafeAreaView } from 'react-native-safe-area-context';

<SafeAreaView style={{ flex: 1 }}>
  <YourContent />
</SafeAreaView>

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

const [visible, setVisible] = React.useState(false);

<Modal
  visible={visible}
  animationType="slide"    // 'none' | 'slide' | 'fade'
  transparent
  presentationStyle="pageSheet"  // iOS: 'fullScreen' | 'pageSheet' | 'formSheet'
  onRequestClose={() => setVisible(false)}  // Android back button
>
  <View style={{ flex: 1, justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.5)' }}>
    <View style={{ backgroundColor: '#fff', padding: 20, borderRadius: 12 }}>
      <Text>Modal Content</Text>
      <Pressable onPress={() => setVisible(false)}>
        <Text>Close</Text>
      </Pressable>
    </View>
  </View>
</Modal>

import { ActivityIndicator } from 'react-native';

<ActivityIndicator size="large" color="#0000ff" />
<ActivityIndicator size="small" animating={isLoading} />

import { Switch } from 'react-native';

const [enabled, setEnabled] = React.useState(false);

<Switch
  value={enabled}
  onValueChange={setEnabled}
  trackColor={{ false: '#767577', true: '#81b0ff' }}
  thumbColor={enabled ? '#f5dd4b' : '#f4f3f4'}
  ios_backgroundColor="#3e3e3e"
/>

import { KeyboardAvoidingView, Platform } from 'react-native';

<KeyboardAvoidingView
  style={{ flex: 1 }}
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
  keyboardVerticalOffset={Platform.OS === 'ios' ? 64 : 0}
>
  <TextInput ... />
</KeyboardAvoidingView>

import { StatusBar } from 'react-native';
// OR for Expo
import { StatusBar } from 'expo-status-bar';

// React Native built-in
<StatusBar barStyle="dark-content" backgroundColor="#fff" translucent />

// Expo
<StatusBar style="auto" />