React Native Export Settings

React Native Export Settings provide a way to customize the export to your liking. We realize that every developer is different (we are developers after all), so the list is quite extensive! You'll find the list of settings with the explanation of every option below.

React Native Export - Project

Project Structure

Folder Structure
Specifies how the implementation files should be structured when the project is exported to React Native. The following options are available:

  • Group by Controller - Folders are created one per screen and named like the screen itself. All implementation files needed for that screen are put into the created folder.
  • Group by Type - Several folders of a predefined structure are created (for example, controllers, cells and so on). Implementation files are then put into those folders based on their type.
  • Flat - Every implementation file is exported into one single folder.

*CSS Structure
Specifies how the styling definitions should be attached to each exported screen. The following options are available:

  • Separate File - Definitions are extracted into a separate CSS file.
  • Same File - Definitions are kept in the same file as structure definition of the screen.

📘

Other files

Keep in mind that the folder structure only affects implementation files. Other artifacts, such as fonts, assets, configuration files and so on are always put into their respective folders.

React Native Export - Code

Code

Indent Character
The I ndentation character used for proper spacing of generated code. Available options are Spaces and Tabs.

Indent Character Count
The number of indentation characters per one indent level - for example, if there is a method inside a class, the method will be indented with 1*n indent characters, but any code inside it will be indented with at last 2*n indent characters (e.g. - 4, 8 spaces or 1, 2 tabs).

Opening Braces
Specifies how the brace behavior works. The following options are available:

  • Same Line - Opening braces start on the same line, indented by one space.
  • New Line - Opening braces start on a new line, following indentation rules set above.

Generate Comments
When enabled, Supernova generates comments for the code where appropriate. The comments are not intrusive and are usually only placed where they really have some value.

Generate Beginner Comments
When enabled, Supernova generates additional comments to explain what is done. This can result in a large number of comments but is great for understanding of the code.

Spacing (before / after) (code structure)
The number of empty lines before every specific code structure.

Empty lines at the end of the file
The number of empty lines after the last line of code in the file. Some IDEs don't allow for extraneous padding at the end of the edited file so this option is a good workaround for it.

Templates

File Headers
Defines the header block that is added to the beginning of every generated code file. By default, the header looks like this:

//
//  _filename_
//  _projectname_
//
//  Created by _authorname_.
//  Copyright © 2019 _companyname_. All rights reserved.
//

You can use _filename_, _projectname_, _authorname_ and _companyname_ tags to further enhance your headers with additional dynamic information (will be replaced when exporting).

React Native Export - Naming

Class name suffixes
When exporting, Supernova uses a smart naming engine to keep everything as unified as possible. You can select how the replacement of class names should look like - for example, if your activity is named Onboarding Flow, the output name will be by default exported as OnboardingFlowComponent. However, with these settings, you can change it so the output will look like OnboardingFlow or even something completely custom like OnboardingFlowScreen.

📘

Overriding class names

You can override the exported screen class name completely, in which those rules are not applied - select the screen you'd like to rename and write your desired name in the screen class property in the code section on the right panel.

Property name suffixes
When exporting, Supernova uses a smart naming engine to keep everything as unified as possible. you can select how the replacement of property names should look like - for example, if your component is named Header, the output name will be by default exported as headerView. However, with these settings, you can change it so the output will look like header or even something custom like headerSubcomponent.

📘

Overriding property names

You can override the exported property name completely, in which those rules are not applied - select the component you'd like to rename and write your desired name in the property name property in the code section on the right panel.