React Native Cheatsheet – Components, Hooks & API Paling Sering Digunakan

#1 import React from 'react'

Mengimpor React

#2 import { View } from 'react-native'

Mengimpor komponen View

#3 import { Text } from 'react-native'

Mengimpor komponen Text

#4 import { Image } from 'react-native'

Mengimpor komponen Image

#5 import { ScrollView } from 'react-native'

Mengimpor komponen ScrollView

#6 import { FlatList } from 'react-native'

Mengimpor komponen FlatList

#7 import { SectionList } from 'react-native'

Mengimpor komponen SectionList

#8 import { TextInput } from 'react-native'

Mengimpor komponen TextInput

#9 import { Button } from 'react-native'

Mengimpor komponen Button

#10 import { TouchableOpacity } from 'react-native'

Mengimpor komponen TouchableOpacity

#11 import { TouchableHighlight } from 'react-native'

Mengimpor komponen TouchableHighlight

#12 import { TouchableWithoutFeedback } from 'react-native'

Mengimpor komponen TouchableWithoutFeedback

#13 import { Pressable } from 'react-native'

Mengimpor komponen Pressable

#14 import { SafeAreaView } from 'react-native'

Mengimpor SafeAreaView

#15 import { StatusBar } from 'react-native'

Mengimpor StatusBar

#16 import { StyleSheet } from 'react-native'

Mengimpor StyleSheet

#17 import { ActivityIndicator } from 'react-native'

Loading indicator

#18 import { Modal } from 'react-native'

Membuat modal popup

#19 import { Alert } from 'react-native'

Menampilkan alert dialog

#20 import { Linking } from 'react-native'

Membuka URL eksternal

#21 import { Dimensions } from 'react-native'

Mengambil ukuran layar

#22 import { Platform } from 'react-native'

Mendeteksi platform Android/iOS

#23 import { Keyboard } from 'react-native'

Mengontrol keyboard

#24 import { useState } from 'react'

Hook state

#25 import { useEffect } from 'react'

Hook lifecycle

#26 import { useRef } from 'react'

Hook referensi

#27 import { useContext } from 'react'

Hook context

#28 import { useCallback } from 'react'

Hook memo function

#29 import { useMemo } from 'react'

Hook memo value

#30 function App(){ return <View></View> }

Membuat functional component

#31 const App=()=>{ return <View/> }

Arrow function component

#32 export default App

Export komponen

#33 <View>...</View>

Container layout utama

#34 <Text>Hello</Text>

Menampilkan teks

#35 <Image source={{uri:'https://'}} />

Menampilkan gambar dari URL

#36 <Image source={require('./img.png')} />

Menampilkan gambar lokal

#37 <TextInput placeholder='Name' />

Input teks

#38 <TextInput secureTextEntry />

Input password

#39 <Button title='Submit' onPress={handleSubmit} />

Tombol sederhana

#40 <TouchableOpacity onPress={handleClick}>

Tombol custom

#41 <Pressable onPress={handlePress}>

Komponen interaktif modern

#42 <ScrollView>...</ScrollView>

Container scroll

#43 <FlatList data={items} renderItem={renderItem} />

Menampilkan list performa tinggi

#44 <SectionList sections={sections} />

List dengan section

#45 keyExtractor={(item)=>item.id}

Menentukan key pada FlatList

#46 renderItem={({item})=><Text>{item}</Text>}

Render item list

#47 style={styles.container}

Menggunakan style

#48 StyleSheet.create({})

Membuat style object

#49 flex:1

Flex layout memenuhi ruang

#50 flexDirection:'row'

Layout horizontal

#51 flexDirection:'column'

Layout vertical

#52 justifyContent:'center'

Align horizontal

#53 alignItems:'center'

Align vertical

#54 padding:10

Padding layout

#55 margin:10

Margin layout

#56 backgroundColor:'blue'

Background color

#57 color:'white'

Warna teks

#58 fontSize:18

Ukuran font

#59 fontWeight:'bold'

Ketebalan font

#60 borderWidth:1

Border width

#61 borderRadius:8

Border radius

#62 width:100

Lebar elemen

#63 height:100

Tinggi elemen

#64 position:'absolute'

Posisi absolut

#65 top:10

Posisi top

#66 left:10

Posisi left

#67 onPress={()=>alert('Pressed')}

Event klik

#68 onChangeText={(text)=>setValue(text)}

Event input change

#69 onSubmitEditing={handleSubmit}

Event submit keyboard

#70 setCount(count+1)

Update state

#71 const ref=useRef(null)

Membuat ref

#72 ref.current

Akses ref

#73 Dimensions.get('window')

Mengambil ukuran layar

#74 width=Dimensions.get('window').width

Lebar layar

#75 height=Dimensions.get('window').height

Tinggi layar

#76 Platform.OS==='ios'

Cek platform iOS

#77 Platform.OS==='android'

Cek platform Android

#78 Linking.openURL('https://example.com')

Membuka browser

#79 Keyboard.dismiss()

Menutup keyboard

#80 ActivityIndicator size='large'

Loading spinner

#81 Modal visible={true}

Menampilkan modal

#82 StatusBar barStyle='light-content'

Mengatur warna status bar

#83 SafeAreaView style={{flex:1}}

Area aman iPhone notch

#84 fetch('https://api.com')

HTTP request

#85 axios.get('/api')

Request menggunakan axios

#86 try{...}catch(e){...}

Error handling

#87 clearInterval(timer)

Menghapus interval

#88 AsyncStorage.getItem('key')

Ambil data lokal

#89 AsyncStorage.removeItem('key')

Hapus data lokal

#90 navigation.navigate('Home')

Navigasi screen

#91 navigation.goBack()

Kembali ke screen sebelumnya

#92 import { NavigationContainer } from '@react-navigation/native'

Container navigasi

#93 import { createNativeStackNavigator } from '@react-navigation/native-stack'

Stack navigator

#94 const Stack=createNativeStackNavigator()

Membuat stack

#95 <Stack.Screen name='Home' component={HomeScreen} />

Mendaftarkan screen

#96 useNavigation()

Hook navigasi

#97 useRoute()

Mengambil parameter route

#98 route.params.id

Mengambil parameter dari route

React Native Cheatsheet – Components, Hooks & API Paling Sering Digunakan

Useful links

Company

Newsletter