94 cards across 6 sections
UIView
android.view.View
JSI
NativeModules
ios
android
expo prebuild
Info.plist
AndroidManifest.xml
prebuild
npx expo prebuild
app.json
View
div
Text
flexDirection
column
row
flex: 1
flex-grow/shrink/basis: 1 1 0%
%
px
em
pressed
TouchableOpacity
TouchableHighlight
useSafeAreaInsets
react-native-safe-area-context
Platform.select({ ios: ..., android: ... })
shadow*
elevation
createNativeStackNavigator
UINavigationController
Fragment
createBottomTabNavigator
createDrawerNavigator
linking
screenOptions
options
navigation.navigate('Screen', { id })
useRoute
route.params
data
renderItem
keyExtractor
FlatList
getItemLayout
scrollToIndex
windowSize
maxToRenderPerBatch
initialNumToRender
FlashList
RecyclerView
UITableView
Component.ios.tsx
Component.android.tsx
Platform.select
useSharedValue
useAnimatedStyle
Image
require('./logo.png')
@2x
@3x
expo-image
react-native-fast-image
expo-font
fontFamily
@expo/vector-icons
expo-updates
.aab
.apk
eas submit
.ipa
<FlatList data={items} keyExtractor={(item) => item.id} renderItem={renderItem}/>
getItemLayout={(_, i) => ({ length: ROW_H, offset: ROW_H * i, index: i,})}
import { Image } from 'expo-image';<Image source={{ uri }} cachePolicy="disk" />
const x = useSharedValue(0);const style = useAnimatedStyle(() => ({ transform: [{ translateX: x.value }],}));
import { createNativeStackNavigator } from '@react-navigation/native-stack';const Stack = createNativeStackNavigator();
const insets = useSafeAreaInsets();<View style={{ paddingTop: insets.top }} />
// check library docs / // reactnative.directory// for "New Architecture" support
console.log
npx react-native start// press "j" to open DevTools
Widget.ios.tsx
Widget.android.tsx
// Widget.ios.tsx// Widget.android.tsximport Widget from './Widget';
package.json
"react-native-reanimated": "3.20.1"// exact version, not "^3.20.1"
eas update --branch production \ --message "fix crash on checkout"
expo-dev-client
npx expo install expo-dev-clienteas build --profile development
const renderItem = useCallback( ({ item }) => <Row item={item} />, []);
<FlashList data={items} renderItem={renderItem} estimatedItemSize={80}/>
expo-constants
react-native-config
import Constants from 'expo-constants';const apiUrl = Constants.expoConfig .extra.apiUrl;
Platform.select({ ios, android })
Platform.OS === 'ios'
ScrollView
ListHeaderComponent
ListFooterComponent
SectionList
InteractionManager.runAfterInteractions
Animated
react-native-gesture-handler
BackHandler
style={{ ... }}
onPress
React.memo
StyleSheet.create
useCallback
InteractionManager