React-Native Custom Snippets

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:

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 const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

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