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.