Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>reactnative-snippetNew to Visual Studio Code? Get it now.
reactnative-snippet

reactnative-snippet

Ha Anh Thao

|
3,217 installs
| (1) | Free
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info
  • React Snippets
    • Import classNames, styles
    • Export Component
    • useState
    • Get daa
  • React Native Snippets
    • React native navigation
    • Create file app with tab navigation
    • Create file app with drawer navigation
    • Create react native component
    • Create customize tab bar
    • Create image
    • React native flatlist
    • React native KeyboardAvoidingView
    • React native SectionList
    • React native TextInput
    • React native ActivityIndicator
    • React native SafeAreaView
  • Fetch API
    • Fetch post
    • Fetch get
    • Fetch put
    • Fetch delete
  • Redux - Redux-toolkit
    • Redux Create Store
    • Redux Create Slice
    • Create dispatch
    • Create selector
    • Create reducer in slice
    • Redux Async Thunk
    • Redux Extra Reducers
    • Redux Service
  • SQLite
    • Create a metro.config.js file at the root of your project
    • Open DB
    • Create Table
    • Insert item into table
    • Update item in table
    • Delete item in table
    • SQLite Type
  • Snippets

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>

React native Form Column

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>

React native Form Row

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>

React native input form

rninputform

<TextInput
    style={{
        paddingHorizontal: 12,
        paddingVertical: 6,
        borderWidth: 1,
        borderColor: '#000',
        borderRadius: 8,
        outline: 'none',
        flex: 1,
    }}
/>

React Native Adjusting header styles

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 - Redux-toolkit

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
  }
)

Redux Extra Reducers

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"
	},
}
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft