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