Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>React-Native Custom SnippetsNew to Visual Studio Code? Get it now.
React-Native Custom Snippets

React-Native Custom Snippets

Preview

Jatin Bhuva

|
5,246 installs
| (1) | Free
This is react-native snippet extention.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Description:

  • 'React Native Custom Snippets' is an extension of full-scale react-native component snippets. It provides all the repetitive code which we are doing while writing react-native code.

  • For example, while working with flatlist we always add renderItem, data, keyExtractor, etc. So by using this extension you need to write only 'rnflatlist' and it will give all necessary code for flatlist.

Supported languages extension

  • TypeScript and TypeScript React (.ts, .tsx)
  • JavaScript and JavaScript React (.js, .jsx)

Snippets List:

Snippets Content
rnfunction React-native arrow function
rnbutton React-native Button Component
rnactivityindicator React-native ActivityIndicator Component
rnflatlist React-native Flatlist Component
rnimage React-native Image Component
rnimagebackground React-native ImageBackGround Component
rnkeyboardavoidingview React-native KeyBoardAvoidingView Component
rnmodal React-native Modal Component
rnpressable React-native Pressable Component
rnpressablein React-native Pressable Component with pressIn Prop
rnpressableout React-native Pressable Component with pressOut Prop
rnpressablelongpress React-native Pressable Component with longPress Prop
rnpressableall React-native Pressable Component with all press Props
rnrefresh React-native RefreshControl Component
rnscrollview React-native ScrollView Component
rnsectionlist React-native SectionList Component
rnstatusbar React-native StatusBar Component
rnswitch React-native Switch Component
rntext React-native Text Component
rnvertulizedlist React-native VertualizedList Component
rnview React-native View Component
rntouchablewithoutfeedback React-native TouchableWithoutFeedback Component
rntouchablewithoutfeedbacklongpress React-native TouchableWithoutFeedback Component with longPress prop
rntouchablewithoutfeedbackall React-native TouchableWithoutFeedback Componen with all press props
rntouchableopacity React-native TouchableOpacity Component
rntouchableopacityall React-native TouchableOpacity Component with all press props
rntouchableopacitylongpress React-native TouchableOpacity Component with longPress prop
rntouchablehighlight React-native TouchableHighlight Component
rntouchablehighlightall React-native TouchableHighlight Component with all press props
rntouchablehighlightlongpress React-native TouchableHighlight Component with longPress prop
rntextinput React-native TextInput Component
rnlog console.log
rnuseeffect useEffect Hook
rnstatevariable useState hook
rnalert React-native alert
rnwindowsize Window size
rnscreensize Screen size
rnstylesheet StyleSheet file snippet

rnfunction[Create React-native arrow function]:

    import React from 'react';
    import {View} from 'react-native';

    const App =() => {
        return (
            <View style={}>
            
            </View>
        );
    };

    export default App;

rnbutton[Create React-native Button Component]:

    const onPress =() => {
        
    };

    <Button
    onPress={onPress}
    title="Add title here"
    color="#841584"
    disabled={false}
    />

rnactivityindicator[Create React-native ActivityIndicator Component]:

<ActivityIndicator
  size="small"
  color="#0000ff"
  animating={true}
/>

rnflatlist [Create React-native Flatlist Component]

const renderItem = ({item}) => {
  return(
    <View>
    </View>
  );
};

const ListHeaderComponent =()=>{
  return(
    <View>      
    </View>
  );
}

const ItemSeparatorComponent=({item})=>{
  return(
    <View>    
    </View>
  );
}
const ListFooterComponent=()=>{
  return(
    <View>      
    </View>
  );
}

const onRefresh=()=>{
}

const onEndReached=()=>{
}

      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        ListHeaderComponent={ListHeaderComponent}
        ListFooterComponent={ListFooterComponent}
        ItemSeparatorComponent={ItemSeparatorComponent}
        numColumns={1}
        ListEmptyComponent={<ActivityIndicator/>}
        horizontal={false}
        scrollEnabled={true}
        onRefresh={onRefresh}
        maxToRenderPerBatch={20}
        onEndReachedThreshold={3}
        onEndReached={onEndReached}
        refreshing={true}
        showsHorizontalScrollIndicator={false}
        pagingEnabled={false}
      />

rnimage[Create React-native Image Component]:

    <Image
        style={}
        source={}
        resizeMode={'contain'}
    />

rnimagebackground[Create React-native ImageBackGround Component]:

    <ImageBackground
        source={} 
        resizeMode="cover" 
        style={}>

            <View style={}>

            </View>

    </ImageBackground>

rnkeyboardavoidingview[Create React-native KeyBoardAvoidingView Component]:

    <KeyboardAvoidingView
        behavior={Platform.OS === "ios" ? "padding" : "height"}
        style={}
        enabled={true}
        >

            <View style={}>
            
            </View>

    </KeyboardAvoidingView>

rnmodal[Create React-native Modal Component]:

    const onRequestClose=()=>{

    }

    <Modal
        animationType="slide"
        transparent={true}
        visible={true}
        onRequestClose={onRequestClose}
        >

            <View style={}>
                
            </View>

    </Modal>

rnpressable[Create React-native Pressable Component]:

    const onPress = () => {

    };

    const content = () => {
        return (
            <View style={}>
            </View>
        )
    }

    <Pressable
        onPress={onPress}
        style={}
        disabled={false}
    >
            {content}
    </Pressable>

rnpressablein[Create React-native Pressable Component with pressIn Prop]:

    const onPress = () => {

    };

    const onPressIn = () => {

    };

    const content = () => {
        return (
            <View style={}>
            </View>
        )
    }

    <Pressable
        onPress={onPress}
        onPressIn={onPressIn}
        style={}
        disabled={false}>

            {content}

    </Pressable>

rnpressableout[Create React-native Pressable Component with pressOut Prop]:

   const onPress = () => {

};
const onPressOut = () => {

};
const content = () => {
  return (
    <View style={}>
    </View>
  )
}

<Pressable
  onPress={onPress}
  onPressOut={onPressOut}
  style={}
  disabled={false}>
  {content}
</Pressable>

rnpressablelongpress[Create React-native Pressable Component with longPress Prop]:

 const onPress = () => {

};
const onLongPress = () => {

};
const content = () => {
  return (
    <View style={}>
    </View>
  )
}

<Pressable
  onPress={onPress}
  onLongPress={onLongPress}
  style={}
  disabled={false}>
  {content}
</Pressable>

rnpressableall[Create React-native Pressable Component with all Props]:

 const onPress = () => {

};
const onPressIn = () => {

};
const onPressOut = () => {

};
const onLongPress = () => {

};
const content = () => {
  return (
    <View style={}>
    </View>
  )
}

<Pressable
  onPress={onPress}
  onPressIn={onPressIn}
  onPressOut={onPressOut}
  onLongPress={onLongPress}
  style={}
  disabled={false}>
  {content}
</Pressable>

rnscrollview[Create React-native ScrollView Component]:

   const content = () => {
  return (
    <View style={}>
    </View>
  )
}
const onScroll = () => {

}
const refreshControl = () => {
  return (
    <View style={}>
    </View>
  )
}
<ScrollView
  style={}
  contentContainerStyle={}
  horizontal={false}
  onScroll={onScroll}
  pagingEnabled={false}
  refreshControl={refreshControl}
  scrollEnabled={true}
  showsHorizontalScrollIndicator={false}
  showsVerticalScrollIndicator={true}>
  {content}
</ScrollView>

rnsectionlist[Create React-native SectionList Component]:

 const DATA = []
const renderItem = () => {
  return (
    <View  style={}>
    </View>
  )
}
const renderSectionHeader = () => {
  return (
    <View style={}>
    </View>
  )
}
const itemSeparatorComponent = () => {
  return (
    <View style={}>
    </View>
  )
}
const listEmptyComponent = () => {
  return (
    <View style={}>
    </View>
  )
}
const listFooterComponent = () => {
  return (
    <View style={}>
    </View>
  )
}
const listHeaderComponent = () => {
  return (
    <View style={}>
    </View>
  )
}
const onEndReached = () => { }
const onRefresh = () => { }
<SectionList
  sections={DATA}
  keyExtractor={item => item.key}
  renderItem={renderItem}
  renderSectionHeader={renderSectionHeader}
  extraData={DATA}
  initialNumToRender={10}
  ItemSeparatorComponent={itemSeparatorComponent}
  ListEmptyComponent={listEmptyComponent}
  ListFooterComponent={listFooterComponent}
  ListHeaderComponent={listHeaderComponent}
  onEndReached={onEndReached}
  onRefresh={onRefresh}
  refreshing={false}
/>

rnstatusbar[Create React-native StatusBar Component]:

<StatusBar
  animated={false}
  barStyle={'default'} // 'default', 'dark-content', 'light-content'
  hidden={false}
/>

rnswitch[Create React-native Switch Component]:

const onChange = () => { }
const onValueChange = () => { }

<Switch
  value={false}
  onChange={onChange}
  onValueChange={onValueChange}
  disabled={false}
  trackColor={ false: "#767577", true: "#81b0ff" }
  thumbColor={ value ? "#f5dd4b" : "#f4f3f4" }
/>

rntext[Create React-native Text Component]:

 <Text
  style={}
  numberOfLines={0}
  selectable={false}>
  titleText
</Text>

rnvertulizedlist[Create React-native VertualizedList Component]:

const getItem = () => {};

const getItemCount = () => {};

const renderItem = () => {
  return <View></View>;
};
const renderListFooterComponent = () => {
  return <View></View>;
};
const renderItemSeparatorComponent = () => {
  return <View></View>;
};

<VirtualizedList
  data={DATA}
  extraData={DATA}
  initialNumToRender={10}
  renderItem={renderItem}
  keyExtractor={(item) => item.key}
  getItemCount={getItemCount}
  getItem={getItem}
  ItemSeparatorComponent={renderItemSeparatorComponent}
  ListFooterComponent={renderListFooterComponent}
/>;

rnview[Create React-native View Component]:

 <View style={}>
 
 </View>

rntouchablewithoutfeedback[Create React-native TouchableWithoutFeedback Component]:

const onPress = () => {
  console.log("onPress");
};

<TouchableWithoutFeedback
  disabled={false}
  onPress={onPress}
></TouchableWithoutFeedback>;

rntouchablewithoutfeedbacklongpress[Create React-native TouchableWithoutFeedback Component with longPress prop]:

const onPress = () => {
  console.log("onPress")
  };

const onLongPress = () => {
  console.log("onLongPress")
  };

<TouchableWithoutFeedback
  disabled={false}
  onLongPress={onLongPress}
  onPress={onPress}>
 </TouchableWithoutFeedback>

rntouchablewithoutfeedbackall[Create React-native TouchableWithoutFeedback Component with all press props]:

const onPress = () => {
  console.log("onPress")
  };
const onLongPress = () => {
  console.log("onLongPress")
  };
const onPressIn = () => {
  console.log("onPressIn")
  };
const onPressOut = () => {
  console.log("onPressOut")
  };

<TouchableWithoutFeedback
  disabled={false}
  onPress={onPress}
  onLongPress={onLongPress}
  onPressIn={onPressIn}
  onPressOut={onPressOut}>
 </TouchableWithoutFeedback>

rntouchableopacity[Create React-native TouchableOpacity Component]:

const onPress = () => {
  console.log("onPress")
  };

<TouchableOpacity
  style={}
  activeOpacity={1}
  disabled={false}
  onPress={onPress}>
 </TouchableOpacity>

rntouchableopacityall[Create React-native TouchableOpacity Component with all press props]:

const onPress = () => {
  console.log("onPress")
  };
const onLongPress = () => {
  console.log("onLongPress")
  };
const onPressIn = () => {
  console.log("onPressIn")
  };
const onPressOut = () => {
  console.log("onPressOut")
  };

<TouchableOpacity 
  style={}
  activeOpacity={1}
  disabled={false}
  onLongPress={onLongPress}
  onPress={onPress}
  onPressIn={onPressIn}
  onPressOut={onPressOut}>
 </TouchableOpacity>

rntouchableopacitylongpress[Create React-native TouchableOpacity Component with onLongPress props]:

const onPress = () => {
  console.log("onPress")
  };
const onLongPress = () => {
  console.log("onLongPress")
  };

<TouchableOpacity
  style={}
  activeOpacity={1}
  disabled={false}
  onLongPress={onLongPress}
  onPress={onPress}>
 </TouchableOpacity>

rntouchablehighlight[Create React-native TouchableHighlight Component]:

const onPress = () => {
  console.log("onPress")
  };

<TouchableHighlight
  style={}
  activeOpacity={1}
  disabled={false}
  onPress={onPress}>
 </TouchableHighlight>

rntouchablehighlightall[Create React-native TouchableHighlight Component with all press props]:

const onPress = () => {
  console.log("onPress")
  };
const onLongPress = () => {
  console.log("onLongPress")
  };
const onPressIn = () => {
  console.log("onPressIn")
  };
const onPressOut = () => {
  console.log("onPressOut")
  };

<TouchableHighlighta
  activeOpacity={1}
  style={}
  disabled={false}
  onLongPress={onLongPress}
  onPress={onPress}
  onPressIn={onPressIn}
  onPressOut={onPressOut}>
 </TouchableHighlight>

rntouchablehighlightlongpress[Create React-native TouchableHighlight Component with longPress props]:

const onPress = () => {
  console.log("onPress")
  };
const onLongPress = () => {
  console.log("onLongPress")
  };

<TouchableHighlight
  style={}
  activeOpacity={1}
  disabled={false}
  onLongPress={onLongPress}
  onPress={onPress}>
 </TouchableHighlight>

rntextinput[Create React-native TextInput Component]:

const onChangeText=()=>{
console.log("onChangeText")
}

  <TextInput
        style={}
        editable={false}
        onChangeText={onChangeText}
        defaultValue={defaultValue}
        value={value}
        placeholder="Enter your placeholder"
        keyboardType="default"
        placeholderTextColor="#000"
        multiline={true}
        secureTextEntry={false}
      />

rntextinput[Create React-native TextInput Component]:

const onChangeText=()=>{
console.log("onChangeText")
}

  <TextInput
        style={}
        editable={false}
        onChangeText={onChangeText}
        defaultValue={defaultValue}
        value={value}
        placeholder="Enter your placeholder"
        keyboardType="default"
        placeholderTextColor="#000"
        multiline={true}
        secureTextEntry={false}
      />

rnlog[Console.log() ]:

console.log('==========================Start-Log-Massage========================================');
console.log('');
console.log('==============================End-Log-Massage======================================');

rnuseeffect[useEffect() Hook]:

useEffect(()=>{
},[])

rnstatevariable[Create state variable]:

const [onRequestClose, setonRequestClose]=useState()

rnalert[Create Alert massage]:

const onCancel = () => {};
const onOk = () => {};
Alert.alert("Alert Title", "My Alert Msg", [
  {
    text: "Cancel",
    onPress: onCancel,
    style: "cancel",
  },
  { text: "OK", onPress: onOk },
]);

rnwindowsize[Window width and hight variables]:

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

rnscreensize[Screen width and hight variables]:

const windowWidth = Dimensions.get('screen').width;
const windowHeight = Dimensions.get('screen').height;

rnstylesheet[Create StyleSheet snippet]:


import { StyleSheet } from "react-native";

export default styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});


For other snippet addition you are feel free to contact me in Q&A section.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft