React Native Live Templates for PhpStorm or WebStorm

When creating a new react native component, there's a bit of boilerplate code to start off with.

With PhpStorm or WebStorm, you can create a live template to knock out the boilerplate code pretty easily.

The goal is to create a new file and type rncf+TAB for a functional component with a name based on the file name, or rncc+TAB for a class component.

1) Go to: Preferences -> Editor -> Live Templates.

2) Click the + button and add a new Live Template Group named React Native.

3) Click the + button to add a new Live Template.

I created 2 templates, one for a function (rncf), and another for a component class (rncc).

Let's create the component function template first:

1) Set abbreviation to rncf

2) Set Description to React Native component class.

3) Set Template text:

import React from 'react';
import { View } from 'react-native';

export const $fnName$ = () => {
  return (
    
  )
};

4) Click Edit variables and set the expression to: FileNameWithoutExtension.

5) Click Define under the text area and check JavaScript so this template only triggers in js files.


Now repeat the steps for the component class, the difference being an the abbreviation rncc and the following template code:

import React, { Component } from 'react';
import { View } from 'react-native';

export const Foo extends Component() {
  state = {};
  
  render() {
    return (
      
    }
  }
}

Adapt the templates to whatever your own boilerplate code tends to be.