React VS Code Snippets

javascript.json

{
/*
	// Place your snippets for JavaScript 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.
	// Example:
	"Print to console": {
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	}
*/
	"stateless rn component": {
		"prefix": "rn",
		"body": [
			"import React from 'react';",
			"import { StyleSheet, View } from 'react-native';",
			"",
			"type Props = {",
			"\tchildren?: any,",
			"\tstyle?: StyleSheet.Styles,",
			"};",
			"",
			"const $1 = (props: Props) => {\n\treturn (",
			"\t\t<View style={[styles, props.style]}>{props.children}</View>",
			"\t);",
			"};\n",
			"const styles = StyleSheet.create({});",
			"",
			"export default $1;\n"
		]
	},

	"stateful rn component": {
		"prefix": "rn",
		"body": [
			"import React, { Component } from 'react';",
			"import { StyleSheet, View } from 'react-native';",
			"",
			"type Props = {",
			"\tchildren: any,",
			"\tstyle: StyleSheet.Styles,",
			"};",
			"",
			"class $1 extends Component {",
			"\tprops: Props\n",
			"\tconstructor(props) {",
			"\t\tsuper(props);",
			"\t\tthis.state = {};",
			"\t}\n",
			"\trender() {",
			"\t\tconst { style, children } = this.props;",
			"\t\treturn (\n\t\t\t<View style={[styles, style]}>\n\t\t\t\t{children}\n\t\t\t</View>\n\t\t);",
			"\t}",
			"}\n",
			"$1.defaultProps = {",
			"\tchildren: [],",
			"\tstyle: StyleSheet.create({}),",
			"};",
			"",
			"const styles = StyleSheet.create({});",
			"",
			"export default $1;\n"
		]
	},

	"bind method to rn class": {
		"prefix": "rn",
		"body": [
			"this.$1 = this.$1.bind(this);"
		]
	},

	"jest snapshot test spec": {
		"prefix": "story",
		"body": [
			"import React from 'react';",
			"import $1 from './index';\n",
			"module.exports = {",
			"\tstoryGroup: '$1',",
			"\tstories: {",
			"\t\tdefault: () => <$1 />,",
			"\t},\n};\n"
		]
	}
}