React Native

title: React Native
published: true
description:
tags:

Use a ratio of 100:42 for best results.

published_at: 2025-01-25 03:35 +0000

Difference between CLI and EXPO

Feature	Expo Go	Expo CLI
Purpose	Run & preview apps	Manage & build Expo projects
Installation Needed?	No (only install Expo Go app)	Yes (npm install -g expo-cli)
Works with Custom Native Code?	❌ No	✅ Yes (bare workflow)
Hot Reloading	✅ Yes	✅ Yes
Builds Standalone Apps?	❌ No	✅ Yes (expo build)
Requires a Physical Device?	✅ Yes (or Emulator)	✅ Yes (for testing on devices)

📌 React Native Native Components with Props

Component	Description	Key Props
View	Container for other components (like )	style, onLayout
Text	Displays text content	style, numberOfLines, ellipsizeMode
Image	Displays images	source, resizeMode, style
ScrollView	Scrollable container	horizontal, showsVerticalScrollIndicator
FlatList	Optimized list for large datasets	data, renderItem, keyExtractor
SectionList	List with sections (grouped list)	sections, renderItem, renderSectionHeader
TextInput	Input field for text entry	value, onChangeText, keyboardType
Button	Simple button component	title, onPress, disabled
Pressable	More flexible button	onPress, onLongPress, style
TouchableOpacity	Button that fades when pressed	onPress, activeOpacity
TouchableHighlight	Button that highlights when pressed	onPress, underlayColor
Switch	A toggle switch	value, onValueChange
Slider	Selects a value in a range	value, onValueChange, minimumValue, maximumValue
KeyboardAvoidingView	Adjusts layout when keyboard appears	behavior, keyboardVerticalOffset
Modal	Pop-up modal window	visible, onRequestClose, animationType
Alert	Shows a native alert	title, message, buttons
StatusBar	Controls the status bar appearance	hidden, barStyle, backgroundColor
ActivityIndicator	Displays a loading spinner	animating, size, color
ImageBackground	Uses an image as a background	source, style, resizeMode
RefreshControl	Enables pull-to-refresh in ScrollView	refreshing, onRefresh
Vibration	Controls device vibration	vibrate (method)
Linking	Opens external links	openURL, canOpenURL (methods)
Share	Opens a share dialog	share (method)
Platform	Detects platform (iOS/Android)	OS, Version, isTV
PermissionsAndroid	Manages Android permissions	request, check (methods)
NativeModules	Calls platform-specific native modules	Varies by module
PixelRatio	Handles pixel density scaling	get, roundToNearestPixel

📌 React Native Native Components with Props

Component	Description	Key Props
View	Container for other components (like )	style, onLayout
Text	Displays text content	style, numberOfLines, ellipsizeMode
Image	Displays images	source, resizeMode, style
ScrollView	Scrollable container	horizontal, showsVerticalScrollIndicator
FlatList	Optimized list for large datasets	data, renderItem, keyExtractor
SectionList	List with sections (grouped list)	sections, renderItem, renderSectionHeader
TextInput	Input field for text entry	value, onChangeText, keyboardType
Button	Simple button component	title, onPress, disabled
Pressable	More flexible button	onPress, onLongPress, style
TouchableOpacity	Button that fades when pressed	onPress, activeOpacity
TouchableHighlight	Button that highlights when pressed	onPress, underlayColor
Switch	A toggle switch	value, onValueChange
Slider	Selects a value in a range	value, onValueChange, minimumValue, maximumValue
KeyboardAvoidingView	Adjusts layout when keyboard appears	behavior, keyboardVerticalOffset
Modal	Pop-up modal window	visible, onRequestClose, animationType
Alert	Shows a native alert	title, message, buttons
StatusBar	Controls the status bar appearance	hidden, barStyle, backgroundColor
ActivityIndicator	Displays a loading spinner	animating, size, color
ImageBackground	Uses an image as a background	source, style, resizeMode
RefreshControl	Enables pull-to-refresh in ScrollView	refreshing, onRefresh
Vibration	Controls device vibration	vibrate (method)
Linking	Opens external links	openURL, canOpenURL (methods)
Share	Opens a share dialog	share (method)
Platform	Detects platform (iOS/Android)	OS, Version, isTV
PermissionsAndroid	Manages Android permissions	request, check (methods)
NativeModules	Calls platform-specific native modules	Varies by module
PixelRatio	Handles pixel density scaling	get, roundToNearestPixel

use Flatlist

const data = [
  {
    id: 1,
    name: 'John',
  },
  {
    id: 2,
    name: 'Jane',
  },
  {
    id: 3,
    name: 'Doe',
  },
];

<FlatList
        data={data}
        renderItem={({ item }) => <Text>{item.name}</Text>}
        keyExtractor={(item) => item.id.toString()}
/>