React Native Code Snippet on VS Code

Make use code snippet feature in VS Code make your life bit more easier when creating a new component or screen with React Native.

Just type rns an viola everything is ready.

What you have to do is open VS Code > Preference > User Snippets and add this new one.

Save it as ‘ReactNative.code-snippets.

{
    "Class Component": {
    "prefix": "rns",
    "body": [
        "import React, { Component } from 'react'",
        "import { View, Text } from 'react-native'",
        "",
        "class ${1:filename} extends Component {",
        "   render() {",
        "       return (",
        "           <View style={styles.container}>",
        "               <Text>${1:filename}</Text>",
        "           </View>",
        "       );",
        "   }",
        "}",
        "",
        "const styles = {",
        "   container: {",
        "       flex: 1,",
        "       justifyContent: 'center',",
        "       alignItems: 'center',",
        "   },",
        "};",
        "",
        "export default ${1:filename};",
        ""
        ],
    "description": "Class Component Template"
}

[Bonus] If you do ReactJS here is the similar snippets.

{
    "Class Component": {
    "prefix": "rjs",
    "body": [
        "import React, { Component } from 'react'",
        "",
        "class ${1:filename} extends Component {",
        "   render() {",
        "       return (",
        "           <div>",
        "               <h1>${1:filename}</h1>",
        "           </div>",
        "       );",
        "   }",
        "}",
        "",
        "",
        "export default ${1:filename};",
        ""
        ],
    "description": "Class Component Template"
}

[Bonus 2] For React in Laravel

{
    "Class Component": {
    "prefix": "lr",
    "body": [
        "import React, { Component } from 'react'",
        "import ReactDOM from 'react-dom'",
        "",
        "class ${1:filename} extends Component {",
        "  render() {",
        "    return (",
        "      <div>",
        "        <h1>${1:filename}</h1>",
        "      </div>",
        "    );",
        "  }",
        "}",
        "",
        "",
        "export default ${1:filename};",
        "",
        "const element = document.getElementById('${1:filename}');",
        "if (element) {",
        "  const props = Object.assign({},element.dataset);",
        "  ReactDOM.render(<${1:filename} {...props} />, element);",
        "}",
        ],
    "description": "Class Component Template"
}