React Native Boilerplates on Visual Studio Code

I can basically add snippets to visual studio code to make my life easy. Because I use the same templates when I want to create a new screen, controller, or etc.

I am going to add some snippets for the React Native projects.

Instructions

First, I need to navigate to use snippets from the top menu. Code > Preferences> User Snippets.

Then, I can see my existing snippets at the top of the opened menu or I can select the related language and I can add my boilerplate into it. I can create unlimited number of snippets.

Boilerplate/Snippet Examples

Snippets are JSON-base. I am going to add my boilerplates below. I can add these to the main scope on the snippet file.

React Native Basic Screen Snippet

"basic react js screen template": {
	"prefix": "r-boiler",
	"body": [
		"import React from 'react'",
		"import {View,Text,StyleSheet} from 'react-native'",
		"",
		"const $TM_FILENAME_BASE = () => {",
		"return (",
		"<View></View>",
		")",
		"}",
		"",
		"const styles = StyleSheet.create({})",
		"",
		"export default $TM_FILENAME_BASE"
	]

React Native App.js Snippet

"react app.js template": {
	"prefix": "r-boiler-appjs",
	"body": [
		"import React from 'react'",
		"import { createAppContainer } from 'react-navigation'",
		"import { createStackNavigator } from 'react-navigation-stack'",
		"",
		"import IndexScreen from './src/screens/IndexScreen'",
		"",
		"const navigator = createStackNavigator({",
		"Index: IndexScreen",
		"}, {",
		"initialRouteName: 'Index',",
		"defaultNavigationOptions: {",
		"title: '$WORKSPACE_NAME'",
		"}",
		"})",
		"",
		"const App = createAppContainer(navigator)",
		"",
		"export default () => {",
		"return <App />",
		"}"
	]
}

Descriptions

• The first part of the template is the description: “react app.js template”
• The prefix is the name that I will use when I need to call the snippet.
• The body is my template.

Pre-defined Constants

$WORKSPACE_NAME # project name
$TM_FILENAME_BASE # the file name

For more information: https://code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets