React Native Code Snippet on VS Code

1 minute, 16 seconds

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