javascriptreact.json

{
    /*
	// Place your snippets for JavaScript React here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    // same ids are connected.
    
*/ "React Native Component": {
        "prefix": "imrnc",
        "body": [
            "import React, { Component } from \"react\";",
            "import { \n\tView,\n\tText,\n\tStyleSheet\n} from \"react-native\";",
            "\nclass ${1:componentName} extends Component {",
            "\trender() {",
            "\t\treturn (",
            "\t\t\t<View style={styles.container}>",
            "\t\t\t\t<Text>${1:componentName}</Text>",
            "\t\t\t</View>",
            "\t\t);",
            "\t}",
            "}",
            "export default ${1:componentName};",
            "\nconst styles = StyleSheet.create({",
            "\tcontainer: {",
            "\t\tflex: 1,",
            "\t\talignItems: 'center',",
            "\t\tjustifyContent: 'center'",
            "\t}",
            "});"
        ],
        "description": "React Component"
    },
    "Create StyleSheet": {
        "prefix": "imrnss",
        "body": [
            "const styles = StyleSheet.create({",
            "\n$0",
            "\n});\n"
        ],
        "description": "Const Styles"
    },
    "console.log": {
        "prefix": "clog",
        "body": [
            "console.log(${1:})"
        ],
        "description": "console.log"
    },
    "React Native Pan Responder": {
        "prefix": "imrnp",
        "body": [
            "this.panResponder = PanResponder.create({",
            "\n\tonMoveShouldSetPanResponder: (evt, gestureState) => true,",
            "\tonPanResponderGrant: (evt, gestureState) =>{",
            "\n\t},",
            "\tonPanResponderMove: (evt, gestureState) => {",
            "\n\t},",
            "\tonPanResponderRelease: (evt, gestureState) => {",
            "\n\t},",
            "\n})"
        ],
        "description": "React Native Pan Responder"
    },
    "React Native Functional Component": {
        "prefix": "imrnfc",
        "body": [
            "import React from \"react\";",
            "import { \n\tView,\n\tText,\n\tStyleSheet\n} from \"react-native\";",
            "\nconst ${1:componentName} = (props) => (",
            "\t<View style={styles.container}>",
            "\t\t<Text>${1:componentName}</Text>",
            "\t</View>",
            "\t)",
            "export default ${1:componentName};",
            "\nconst styles = StyleSheet.create({",
            "\tcontainer: {",
            "\t\tflex: 1,",
            "\t\talignItems: 'center',",
            "\t\tjustifyContent: 'center'",
            "\t}",
            "});"
        ],
        "description": "React Native Functional Component"
    }
}