React-Native Component Generator
Simple, template-based React-Native component generator for VS Code.
Based on the generate-react-component extension by @joshjg.
His extension stopped working on February 2019 because of a VSCode update, and since it hasn't been fixed by the time this version was released (June 17th, 2019), I took the liberty to create this extension by applying @nonjene's pull request to fix it and adapted it to generate React-Native components.
- Right click any directory in the explorer panel
- Select React-Native Component
- Input name and choose options
What's the deal with these files?
The default templates are opinionated, admittedly. They adhere to the best practices promoted in this video by Scott Bowler.
- When asked, type
n to use (styled-components)[https://www.styled-components.com/]. If you don't wanna use styled-components, the component will be generated with a StyleSheet import from React-Native and styles setup. The
SomeComponentStyles.js will still be generated, you can either use it or delete it. If you have suggestions or know how to tell vscode to not generate it in case the generator doesn't use styled-components, feel free to send a pull request.
package.json simply passes the component through so you can
import SomeComponent from '/components/SomeComponent'
However, this package does not force these principles. You can easily customize the templates to match your own tech stack.
The component templates are completely customizable. You can add additional boolean options to the generator panel from the package's settings. One option is included by default:
StyledComponents determines whether to insert styled-components declarations in your component.
This extension contributes the following settings:
react-native-component-generator.conditionals: Array of strings which will toggle certain portions of your templates.
react-native-component-generator.componentTemplatePath: Absolute path to custom component template directory. If left blank, defaults to built-in template.
react-native-component-generator.containerTemplatePath: Absolute path to custom classComponent template directory. If left blank, defaults to built-in template.
Template syntax is very simple:
- Any occurrence of
__ComponentName__ in a filename or a file's content will be replaced with the user's text input.
- Any text surrounded by
/* IF condition */ and
/* ENDIF */, where
condition is the name of an option (defined in the package settings) will be removed unless
condition is enabled (or invalid)
- Any text surrounded by
/* IF !condition */ and
/* ENDIF */ will be removed unless
condition is disabled (or invalid)
- Any remaining
/* IF */ or
/* ENDIF */ comments will be removed, but the text between them will be untouched