Making your own React Native custom components with Ignite generators

Discover one of Ignite’s hidden gems — generators!

In Ignite 6.0, one of the big changes was reworking how our generators work to make them simpler and more project-specific rather than generic.

What are generators? They’re Ignite CLI commands that create components, models, screens, and other features of your app with a single command, like this:

ignite generate screen Welcome

This will create a folder in your app/screens folder called welcome and put a welcome-screen.tsx file in there.

YourApp
  app
    screens
      welcome
        welcome-screen.tsx

Previous Versions

In prior versions of Ignite, generators were contained in the boilerplate NPM package, which meant that you needed to keep a copy of Andross or Bowser in your dependencies. Even Infinite Red React Native developers found the old generators confusing. Truth be told, this feature wasn’t used very often.

Ignite 6.x Generators

In Ignite 6.x+ (code-named “Ignite Flame”), generators were completely rewritten. The templates are now automatically copied into your app in this folder:

YourApp
  ignite
    templates
      component
      model
      navigator
      screen

Each folder is automatically recognized as a generator command. For example, the ignite/templates/component folder corresponds to the command ignite generate component SomeComponent.

When you run the generator, several things happen. Let’s take this command as an example:

ignite generate component JamonHolmgren

1. It’ll check to see if there’s a folder called ignite/templates/component. This is the source of the template files.
2. It’ll look for and (create if it’s missing) a folder called app/components.
3. Any files in the app/templates/component folder will be copied over.
   • If the filename contains NAME (all upper-case), that will be replaced with the name provided when they ran the command. In our example, a file NAME.test.tsx would be named jamon-holmgren.test.tsx.
   • If the filename ends in .ejs, it’ll be parsed as a template. (More on this below.)
4. If there’s an index.ts in the destination folder (e.g. app/components/index.ts), a line with an export will be added to the end of that file automatically.

Templating with ejs

If you look in those .ejs files in ignite/templates/, you’ll see that you can inject a few things. (More on ejs later in this article.) For example, in the following screenshot, you can see this code in a couple places:

<%= props.pascalCaseName %>

Example from the model generator template

Available properties are:

• props.camelCaseName, e.g. HelloWorld
• props.kebabCaseName, e.g. hello-world
• props.pascalCaseName, e.g. helloWorld

ejs is a very cool templating language and you can read more about it here: https://ejs.co/

How to make your own generator

Ignite comes with four pretty useful generators, and now you know how to customize them.

But how do you create your own generators?

Let’s make a generator for a custom React hook. It’ll be triggered with:

ignite generate hook useIgnite

First, make a folder in your app at ignite/templates called hook.

Make a new file in that folder called NAME.ts.ejs.

In that file, add this code:

import { Alert } from "react-native"
import { useEffect } from "react"
export const <%= props.camelCaseName %> = () => {
  useEffect(() => {
    Alert.alert("Triggered <%= props.camelCaseName %>")
  }, [])
}

Save that file and run ignite generate, which will list all generators. You should see your new generator in there!

Let’s try it out. Run it!

ignite generate hook useIgnite

You should see output that looks something like this:

Generated new files:
   /Users/jh/Code/DemoApp/app/hooks/use-ignite/use-ignite.ts

Go look at the file that was just generated. It should look like this:

import { Alert } from "react-native"
import { useEffect } from "react"
export const useIgnite = () => {
  useEffect(() => {
    Alert.alert("Triggered useIgnite")
  }, [])
}

You can see that the useIgnite name (in camelCase) was inserted into the right place of the template.

Congrats! You’ve built your first generator.

If you want, you can add an index.ts to the new app/hooks folder which will then export any new hooks you generate going forward.

Final thoughts

We are potentially going to add some additional customization ability, such as the ability to specify what destination folder to drop the new files into. If/when that lands, we’ll update this article.

Happy generating!