React Snippets
Import classNames, styles
react-classnames-styles
import classNames from 'classnames/bind';
import styles from '.';
const cx = classNames.bind(styles);
Export Component
react-export-component
export {default} from '.'
useState
useState
const [$1, set$1] = useState($2)
## useEffect
<code>useEffect</code>
```bash
useEffect(() => {
}, [])
Get daa
getData
useEffect(() => {,
async function getData() {,
$1,
},
,
getData();,
}, [])
React Native Snippets
React native navigation
rnnavigation
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="" component={} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
Create file app with tab navigation
rntabnavigation
import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="" component={} />
</Tab.Navigator>
</NavigationContainer>
);
}
Create file app with drawer navigation
rndrawernavigation
import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
const Drawer = createDrawerNavigator();
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="">
<Drawer.Screen name="" component={} />
</Drawer.Navigator>
</NavigationContainer>
);
}
Create react native component
rncomponent
import { StyleSheet, View } from 'react-native';
import React from 'react';
export default function test() {
return <View></View>;
}
const styles = StyleSheet.create({});
Create customize tab bar
rntabbar
import { View, Text, TouchableOpacity } from 'react-native';
function test({ state, descriptors, navigation }) {
return (
<View style={{ flexDirection: 'row' }}>
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const label =
options.tabBarLabel !== undefined
? options.tabBarLabel
: options.title !== undefined
? options.title
: route.name;
const isFocused = state.index === index;
const onPress = () => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
canPreventDefault: true,
});
if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name, route.params);
}
};
const onLongPress = () => {
navigation.emit({
type: 'tabLongPress',
target: route.key,
});
};
return (
<TouchableOpacity
accessibilityRole="button"
accessibilityState={isFocused ? { selected: true } : {}}
accessibilityLabel={options.tabBarAccessibilityLabel}
testID={options.tabBarTestID}
onPress={onPress}
onLongPress={onLongPress}
style={{ flex: 1 }}
>
<Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
{label}
</Text>
</TouchableOpacity>
);
})}
</View>
);
}
export default test
Create image
rnimage
<Image source={} style={{width: , height: } />
React native flatlist
rnflatlist
<FlatList
data={}
renderItem={({item}) => }
keyExtractor={item => }
/>
React native KeyboardAvoidingView
rnKeyboardAvoidingView
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={{}}
></KeyboardAvoidingView>;
React native SectionList
rnSectionList
<SectionList
sections={}
keyExtractor={(item, index) => }
renderItem={({item}) => (
)}
renderSectionHeader={({section: {title}}) => (
)}
/>
React native TextInput
rnTextInput
<Text
style={{ color: '#fff' }}
// options
ellipsizeMode='tail'
numberOfLines={0}
selectable={false}
>
$1
</Text>
React native ActivityIndicator
rnActivityIndicator
<ActivityIndicator
size='large'
style={styles.loading}
animating={true}
color={MD2Colors.red800}
/>
React native SafeAreaView
rnSafeAreaView
<SafeAreaView
style={[{
marginTop: StatusBar.currentHeight || 0
}]}>
</SafeAreaView>
React native Pressable
rnPressable
<Pressable
style={{
paddingHorizontal: 12,
paddingVertical: 6,
backgroundColor: 'blue',
borderRadius: 8,
}}
// options
disabled={false}
>
<Text style={{ color: '#fff' }}>$1</Text>
</Pressable>
rnFormc
<View style={{ gap: 8, width: '100%' }}>
<TextInput
style={{
paddingHorizontal: 12,
paddingVertical: 6,
borderWidth: 1,
borderColor: '#000',
borderRadius: 8,
outline: 'none',
}}
/>
<View style={{ alignItems: 'center' }}>
<Pressable
style={{
paddingHorizontal: 12,
paddingVertical: 6,
backgroundColor: 'blue',
borderRadius: 8,
}}
>
<Text style={{ color: '#fff' }}>Submit</Text>
</Pressable>
</View>
</View>
rnForm
<View style={{ gap: 8, width: '100%', flexDirection: 'row' }}>
<TextInput
style={{
paddingHorizontal: 12,
paddingVertical: 6,
borderWidth: 1,
borderColor: '#000',
borderRadius: 8,
outline: 'none',
flex: 1,
}}
/>
<View style={{ alignItems: 'center' }}>
<Pressable
style={{
paddingHorizontal: 12,
paddingVertical: 6,
backgroundColor: 'blue',
borderRadius: 8,
}}
>
<Text style={{ color: '#fff' }}>Submit</Text>
</Pressable>
</View>
</View>
React native item
rnitem
<View
style={{
flexDirection: 'row',
paddingHorizontal: 12,
paddingVertical: 8,
borderRadius: 8,
borderColor: '#000',
borderWidth: 1,
gap: 8,
alignItems: 'center',
width: '100%',
}}
>
<Text style={{ flex: 1 }}>$1</Text>
<Pressable
style={{
paddingHorizontal: 8,
paddingVertical: 6,
backgroundColor: 'blue',
borderRadius: 8,
}}
>
<Text style={{ color: '#fff' }}>$2</Text>
</Pressable>
</View>
React native item col
rnitemc
<View
style={{
paddingHorizontal: 12,
paddingVertical: 8,
borderRadius: 8,
borderColor: '#000',
borderWidth: 1,
gap: 8,
alignItems: 'center',
width: '100%',
}}
>
<Text style={{ flex: 1 }}>Text</Text>
<Pressable
style={{
paddingHorizontal: 8,
paddingVertical: 6,
backgroundColor: 'blue',
borderRadius: 8,
}}
>
<Text style={{ color: '#fff' }}>Button</Text>
</Pressable>
</View>
rninputform
<TextInput
style={{
paddingHorizontal: 12,
paddingVertical: 6,
borderWidth: 1,
borderColor: '#000',
borderRadius: 8,
outline: 'none',
flex: 1,
}}
/>
rnnvgtheaderstyles
options={{
title: 'My home',
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}
React Native Navigation Right
rnnvgtright
headerRight: () => (
<Pressable>
<Text>Button</Text>
</Pressable>
)
React Native ImageBackground
rnImageBackground
<ImageBackground source={$1} resizeMode="cover" style={$2}>
<Text style={$3}>$4</Text>
</ImageBackground>
React Native TouchableHighlight
rnTouchableHighlight
<TouchableHighlight onPress={$1}>
<View style={$2}>
<Text>$3</Text>
</View>
</TouchableHighlight>
React native Login screen
rnloginscreen
import { useState } from 'react';
import { Pressable, Text, TextInput, View } from 'react-native';
export default function App() {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const handleLogin = () => {
console.log(username);
console.log(password);
};
return (
<View
style={{
justifyContent: 'center',
alignItems: 'center',
flex: 1,
paddingHorizontal: 20,
}}
>
<View
style={{
width: '100%',
alignItems: 'center',
gap: 8,
padding: 20,
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowOffset: {
width: 0,
height: 4,
},
shadowRadius: 8,
borderRadius: 12,
}}
>
<Text
style={{
fontSize: 32,
fontWeight: '700',
marginBottom: 12,
}}
>
Login
</Text>
<View style={{ gap: 8, width: '100%' }}>
<TextInput
style={{
paddingHorizontal: 12,
paddingVertical: 6,
borderWidth: 1,
borderColor: '#000',
borderRadius: 8,
outline: 'none',
flex: 1,
}}
value={username}
onChangeText={setUsername}
/>
</View>
<View style={{ gap: 8, width: '100%' }}>
<TextInput
style={{
paddingHorizontal: 12,
paddingVertical: 6,
borderWidth: 1,
borderColor: '#000',
borderRadius: 8,
outline: 'none',
flex: 1,
}}
secureTextEntry
value={password}
onChangeText={setPassword}
/>
<View style={{ alignItems: 'center' }}>
<Pressable
style={{
paddingHorizontal: 12,
paddingVertical: 6,
backgroundColor: 'blue',
borderRadius: 8,
}}
onPress={handleLogin}
>
<Text style={{ color: '#fff' }}>Submit</Text>
</Pressable>
</View>
</View>
</View>
</View>
);
}
React native login loading
rnloginloading
import { useEffect, useState } from 'react';
import {
ActivityIndicator,
Pressable,
Text,
TextInput,
View,
} from 'react-native';
export default function Login({ navigation }) {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
const [showError, setShowError] = useState(false);
const handleLogin = async () => {
setLoading(true);
const res = await fetch(
`https://6571ea5ed61ba6fcc013f36f.mockapi.io/api/translates?username=${username}&password=${password}`,
);
const data = await res.json();
const user = data[0];
if (user && user.username === username && user.password === password) {
navigation.navigate('Translate');
} else {
setShowError(true);
}
setLoading(false);
};
useEffect(() => {
setShowError(false);
}, [username, password]);
return (
<View
style={{
justifyContent: 'center',
alignItems: 'center',
flex: 1,
paddingHorizontal: 20,
}}
>
<View
style={{
width: '100%',
alignItems: 'center',
gap: 8,
padding: 20,
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowOffset: {
width: 0,
height: 4,
},
shadowRadius: 8,
borderRadius: 12,
}}
>
<Text
style={{
fontSize: 32,
fontWeight: '700',
marginBottom: 12,
}}
>
Login
</Text>
<View style={{ gap: 8, width: '100%' }}>
<TextInput
style={{
paddingHorizontal: 12,
paddingVertical: 6,
borderWidth: 1,
borderColor: '#000',
borderRadius: 8,
outline: 'none',
flex: 1,
}}
value={username}
onChangeText={setUsername}
/>
</View>
<View style={{ gap: 8, width: '100%' }}>
<TextInput
style={{
paddingHorizontal: 12,
paddingVertical: 6,
borderWidth: 1,
borderColor: '#000',
borderRadius: 8,
outline: 'none',
flex: 1,
}}
secureTextEntry
value={password}
onChangeText={setPassword}
/>
{showError && (
<View style={{}}>
<Text style={{ color: 'red', fontSize: 12 }}>
Username or password invalid
</Text>
</View>
)}
<View style={{ alignItems: 'center' }}>
<Pressable
style={{
paddingHorizontal: 12,
paddingVertical: 6,
backgroundColor: 'blue',
borderRadius: 8,
}}
onPress={handleLogin}
>
{(loading && (
<ActivityIndicator
size='large'
// style={styles.loading}
animating={true}
color='#fff'
/>
)) || <Text style={{ color: '#fff' }}>Submit</Text>}
</Pressable>
</View>
</View>
</View>
</View>
);
}
React Native Slide
rnslide
import React, { useMemo, useRef, useState } from 'react';
import {
FlatList,
Pressable,
Text,
View,
useWindowDimensions,
} from 'react-native';
const PADDING_HORIZONTAL = 12;
const ITEM_HEIGHT = 300;
export default function Screen01() {
const { width } = useWindowDimensions();
const [data, setData] = useState([1, 2, 3]);
const widthItem = useMemo(() => width - PADDING_HORIZONTAL * 2, [width]);
const [selected, setSelected] = useState(0);
console.log('🚀 ~ Screen01 ~ selected:', selected);
const ref = useRef();
const handleScroll = ({ nativeEvent }) => {
const x = nativeEvent.contentOffset.x;
const selected = Math.floor(x / widthItem);
setSelected(selected);
};
const handlePressDot = (index) => {
console.log(ref.current);
setSelected(index);
};
return (
<View style={{ paddingHorizontal: PADDING_HORIZONTAL, gap: 12 }}>
<FlatList
initialScrollIndex={selected}
ref={ref}
onScroll={handleScroll}
style={{ width: '100%' }}
contentContainerStyle={{ width: '100%', height: ITEM_HEIGHT }}
horizontal
pagingEnabled
data={data}
renderItem={({ item }) => (
<View
style={{
width: widthItem,
height: ITEM_HEIGHT,
backgroundColor: 'red',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Text style={{ color: '#fff', fontSize: 40 }}>
{item}
</Text>
</View>
)}
/>
<View
style={{
flexDirection: 'row',
gap: 12,
justifyContent: 'center',
}}
>
{data.map((_, index) => (
<Pressable
onPress={() => handlePressDot(index)}
key={index}
style={{
width: 16,
height: 16,
backgroundColor:
index === selected ? 'blue' : '#999',
borderRadius: 999,
}}
/>
))}
</View>
</View>
);
}
Fetch API
Fetch post
fetchpost
const res = await fetch(`ENDPOINT/`, {
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
method: 'post',
body: JSON.stringify(),
});
const data = await res.json();
console.log('🚀 ~ data:', data);
Fetch get
fetchget
const res = await fetch(`ENDPOINT/`);
const data = await res.json();
console.log('🚀 ~ data:', data);
Fetch put
fetchput
const res = await fetch(`ENDPOINT/`, {
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
method: 'put',
body: JSON.stringify(),
});
const data = await res.json();
console.log('🚀 ~ data:', data);
Fetch delete
fetchdelete
const res = await fetch(`ENDPOINT/`, {
method: 'delete',
});
const data = await res.json();
console.log('🚀 ~ data:', data);
Redux Create Store
rxcs
import { configureStore } from '@reduxjs/toolkit'
export const store = configureStore({
reducer: {},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: false,
})
})
Redux Create Slice
rxslice
import { createSlice } from '@reduxjs/toolkit'
const initialState = {
}
export const Slice = createSlice({
name: '',
initialState,
reducers: {
},
})
export const { } = Slice.actions
export default Slice.reducer
Create dispatch
dispatch
const dispatch = useDispatch();
Create selector
selector
const {} = useSelector((state) => state.$1);
Create reducer in slice
rxreducerslice
: (state, { payload }) => {
}
Redux Async Thunk
rxcreateasyncthunk
const fetchUserById = createAsyncThunk(
'users/fetchByIdStatus',
async (userId, thunkAPI) => {
const response = await
return response.data
}
)
rxextrareducers
extraReducers: (builder) => {
builder.addCase(fetchUserById.fulfilled, (state, action) => {
state.entities.push(action.payload);
});
};
Redux Service
Redux Service
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
export const userApi = createApi({
reducerPath: '',
baseQuery: fetchBaseQuery({ baseUrl: }),
endpoints: (builder) => ({
// getPokemonByName: builder.query({
// query: (name) => `pokemon/name`,
// }),
}),
});
export const {} = userApi;
SQLite
Create a metro.config.js file at the root of your project
sqliteConfig
const { getDefaultConfig } = require('expo/metro-config');
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.assetExts.push('db');
module.exports = defaultConfig;
Open DB
sqliteOpenDB
import * as SQLite from 'expo-sqlite';
function openDatabase() {
if (Platform.OS === 'web') {
return {
transaction: () => {
return {
executeSql: () => {},
};
},
};
}
const db = SQLite.openDatabase('db.db');
db.exec([{ sql: 'PRAGMA foreign_keys = ON;', args: [] }], false, () =>
console.log('Foreign keys turned on'),
);
return db;
}
export default openDatabase;
export const db = openDatabase();
Create Table
sqliteCreateTable
db.transaction((tx) => {
tx.executeSql(
'create table if not exists (id integer primary key not null, );',
);
tx.executeSql('SELECT * FROM ', [], (_, { rows: { _array } }) => {});
});
Insert item into table
sqliteInsert
db.transaction((tx) => {
tx.executeSql('insert into () values ()', [], (tx, { insertId }) => {
tx.executeSql(
'select * from WHERE id = ?',
[insertId],
(_, { rows: { _array } }) => {},
);
});
});
Update item in table
sqliteUpdate
db.transaction((tx) => {
tx.executeSql('UPDATE SET WHERE id = ?', [, data.id], () => {});
});
Delete item in table
sqliteDelete
const res = await db.execAsync(
[
{
sql: 'DELETE FROM WHERE ',
args: [],
},
],
false,
);
if (Number.isInteger(res?.[0]?.insertId)) {
// Success
} else {
// Error
}
SQLite Type
sqliteType
Snippets
{
"ClassNames-Styles": {
"scope": "javascript,typescript",
"prefix": "react-classnames-styles",
"body": [
"import classNames from 'classnames/bind';",
"import styles from '.$1';",
"",
"const cx = classNames.bind(styles);"
],
"description": "Import classNames, styles"
},
"Export Component": {
"scope": "javascript,typescript",
"prefix": "react-export-component",
"body": [
"export {default} from '.$1'"
],
"description": "Export Component"
},
"React native navigation": {
"scope": "javascript,typescript",
"prefix": "rnnavigation",
"body": [
"import React from 'react';",
"import { NavigationContainer } from '@react-navigation/native';",
"import { createNativeStackNavigator } from '@react-navigation/native-stack';",
"",
"const Stack = createNativeStackNavigator();",
"",
"function App() {",
" return (",
" <NavigationContainer>",
" <Stack.Navigator>",
" <Stack.Screen name=\"$1\" component={$2} />",
" </Stack.Navigator>",
" </NavigationContainer>",
" );",
"}",
"",
"export default App;"
],
"description": "Create file app is navigation"
},
"Create file app with tab navigation": {
"scope": "javascript,typescript",
"prefix": "rntabnavigation",
"body": [
"import * as React from 'react';",
"import { Text, View } from 'react-native';",
"import { NavigationContainer } from '@react-navigation/native';",
"import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';",
"",
"const Tab = createBottomTabNavigator();",
"",
"export default function App() {",
" return (",
" <NavigationContainer>",
" <Tab.Navigator>",
" <Tab.Screen name=\"$1\" component={$2} />",
" </Tab.Navigator>",
" </NavigationContainer>",
" );",
"}"
],
"description": "Create file app with tab navigation"
},
"Create file app with drawer navigation": {
"scope": "javascript,typescript",
"prefix": "rndrawernavigation",
"body": [
"import React from 'react';",
"import { createDrawerNavigator } from '@react-navigation/drawer';",
"import { NavigationContainer } from '@react-navigation/native';",
"",
"const Drawer = createDrawerNavigator();",
"",
"export default function App() {",
" return (",
" <NavigationContainer>",
" <Drawer.Navigator initialRouteName=\"$1\">",
" <Drawer.Screen name=\"$2\" component={$3} />",
" </Drawer.Navigator>",
" </NavigationContainer>",
" );",
"}"
],
"description": "Create file app with drawer navigation"
},
"Create react native component": {
"prefix": "rncomponent",
"body": [
"import { StyleSheet, View } from 'react-native';",
"import React from 'react';",
"",
"export default function $TM_FILENAME_BASE() {",
" return <View></View>;",
"}",
"",
"const styles = StyleSheet.create({});"
],
"description": "Create react native component"
},
"Create customize tab bar": {
"prefix": "rntabbar",
"body": [
"import { View, Text, TouchableOpacity } from 'react-native';",
"",
"function $TM_FILENAME_BASE({ state, descriptors, navigation }) {",
" return (",
" <View style={{ flexDirection: 'row' }}>",
" {state.routes.map((route, index) => {",
" const { options } = descriptors[route.key];",
" const label =",
" options.tabBarLabel !== undefined",
" ? options.tabBarLabel",
" : options.title !== undefined",
" ? options.title",
" : route.name;",
"",
" const isFocused = state.index === index;",
"",
" const onPress = () => {",
" const event = navigation.emit({",
" type: 'tabPress',",
" target: route.key,",
" canPreventDefault: true,",
" });",
"",
" if (!isFocused && !event.defaultPrevented) {",
" navigation.navigate(route.name, route.params);",
" }",
" };",
"",
" const onLongPress = () => {",
" navigation.emit({",
" type: 'tabLongPress',",
" target: route.key,",
" });",
" };",
"",
" return (",
" <TouchableOpacity",
" accessibilityRole=\"button\"",
" accessibilityState={isFocused ? { selected: true } : {}}",
" accessibilityLabel={options.tabBarAccessibilityLabel}",
" testID={options.tabBarTestID}",
" onPress={onPress}",
" onLongPress={onLongPress}",
" style={{ flex: 1 }}",
" >",
" <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>",
" {label}",
" </Text>",
" </TouchableOpacity>",
" );",
" })}",
" </View>",
" );",
"}",
"",
"export default $TM_FILENAME_BASE"
],
"description": "Create customize tab bar"
},
"Fetchpost": {
"prefix": "fetchpost",
"body": [
"const res = await fetch(`${ENDPOINT}/$1`, {",
" headers: {",
" 'Content-type': 'application/json; charset=UTF-8',",
" },",
" method: 'post',",
" body: JSON.stringify($2),",
"});",
"const data = await res.json();",
"",
"console.log('🚀 ~ data:', data);"
],
"description": "Fetch"
},
"Fetchget": {
"prefix": "fetchget",
"body": [
"const res = await fetch(`${ENDPOINT}/$1`);",
"const data = await res.json();",
"",
"console.log('🚀 ~ data:', data);"
],
"description": "Fetch"
},
"Fetchput": {
"prefix": "fetchput",
"body": [
"const res = await fetch(`${ENDPOINT}/$1`, {",
" headers: {",
" 'Content-type': 'application/json; charset=UTF-8',",
" },",
" method: 'put',",
" body: JSON.stringify($2),",
"});",
"const data = await res.json();",
"",
"console.log('🚀 ~ data:', data);"
],
"description": "Fetchput"
},
"Fetchdelete": {
"prefix": "fetchdelete",
"body": [
"const res = await fetch(`${ENDPOINT}/$1`, {",
" method: 'delete',",
"});",
"const data = await res.json();",
"",
"console.log('🚀 ~ data:', data);"
],
"description": "Fetchdelete"
},
"Redux Service": {
"prefix": "reduxservice",
"body": [
"import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';",
"",
"export const userApi = createApi({",
" reducerPath: '$1',",
" baseQuery: fetchBaseQuery({ baseUrl: $2 }),",
" endpoints: (builder) => ({",
" // getPokemonByName: builder.query({",
" // query: (name) => `pokemon/${name}`,",
" // }),",
" }),",
"});",
"",
"export const {} = userApi;",
""
],
"description": "Redux Service"
},
"Redux - Create store": {
"prefix": "rxcs",
"body": [
"import { configureStore } from '@reduxjs/toolkit'",
"",
"export const store = configureStore({",
" reducer: {},",
" middleware: (getDefaultMiddleware) =>"
" getDefaultMiddleware({"
" serializableCheck: false,"
" })"
"})"
],
"description": "Redux - Create store"
},
"Redux - Create slice": {
"prefix": "rxslice",
"body": [
"import { createSlice } from '@reduxjs/toolkit'",
"",
"const initialState = {",
"}",
"",
"export const $1Slice = createSlice({",
" name: '$1',",
" initialState,",
" reducers: {",
" },",
"})",
"",
"export const { } = $1Slice.actions",
"",
"export default $1Slice.reducer"
],
"description": "Redux - Create slice"
},
"Redux Async Thunk": {
"prefix": "rxcreateasyncthunk",
"body": [
"const fetchUserById = createAsyncThunk(",
" 'users/fetchByIdStatus',",
" async (userId, thunkAPI) => {",
" const response = await $1",
" return response.data",
" }",
")"
],
"description": "Redux Async Thunk"
},
"Redux Extra Reducers": {
"prefix": "rxextrareducers",
"body": [
"extraReducers: (builder) => {",
" builder.addCase(fetchUserById.fulfilled, (state, action) => {",
" state.entities.push(action.payload)",
" })",
" }"
],
"description": "Redux Extra Reducers"
},
"React native flatlist": {
"prefix": "rnflatlist",
"body": [
"<FlatList",
" data={$1}",
" renderItem={({item}) => $2}",
" keyExtractor={item => $3}",
"/>"
],
"description": "React native flatlist"
},
"React native KeyboardAvoidingView": {
"prefix": "rnKeyboardAvoidingView",
"body": [
"<KeyboardAvoidingView",
" behavior={Platform.OS === 'ios' ? 'padding' : 'height'}",
" style={{$1}}>",
"</KeyboardAvoidingView>"
],
"description": "React native KeyboardAvoidingView"
},
"React native SectionList": {
"prefix": "rnSectionList",
"body": [
"<SectionList",
" sections={$1}",
" keyExtractor={(item, index) => $2}",
" renderItem={({item}) => (",
" $3",
" )}",
" renderSectionHeader={({section: {title}}) => (",
" $4",
" )}",
" />"
],
"description": "React native SectionList"
},
"React native TextInput": {
"prefix": "rnTextInput",
"body": [
"<TextInput",
" style={$1}",
" onChangeText={$2}",
" value={$3}",
" />"
],
"description": "React native TextInput"
},
"React native ActivityIndicator": {
"prefix": "rnActivityIndicator",
"body": [
"<ActivityIndicator",
" size='large'",
" style={styles.loading}",
" animating={true}",
" color={MD2Colors.red800}",
" />"
],
"description": "React native ActivityIndicator"
},
"React native SafeAreaView": {
"prefix": "rnSafeAreaView",
"body": [
"<SafeAreaView style={[{marginTop: StatusBar.currentHeight || 0}]}>",
" </SafeAreaView>"
],
"description": "React native SafeAreaView"
},
"React native image": {
"prefix": "rnimage",
"body": [
"<Image source={$1} style={{width: $2, height: $2} />"
],
"description": "Create image"
},
}
