Skip to main content
Version: v11.3.2

Working with Themes in React Native


You can style React Native apps using a theme. Common (theme) styles will greatly reduce the styling effort of individual apps. The following topics related to a theme are discussed in this article.

  1. How to create a theme
  2. Theme project structure
  3. Customizing a theme
  4. Compile a theme
  5. Update a theme
  6. Import a theme

Required Software

  • Node (14.x)
  • React Native Codegen:
npm install -g @wavemaker/rn-codegen

1. Creating a Theme

  • Open a terminal
  • Navigate to a directory where you wish to create a theme project
  • Execute the following command
wm-rn-codegen theme generate ${theme-name}
  • A new folder with the given theme name should get created.
  • Open .wmproject.properties file.
  • Provide value to name (required) and other metadata.
  • Push the theme project to your VCS (optional).

2. Theme Project Structure

Following is the folder structure of a theme project.

  • $ThemeProject

    • src

      • android - theme customizations specific to Android
      • ios - theme customizations specific to iOS
      • common - theme customizations that are common to both Android and iOS
    • theme.png - a picture that represents this theme

    • wavemaker - This folder contains all the default styles provided by WaveMaker React Native Framework. The WaveMaker platform maintains the contents of this folder. Therefore, avoid any modifications in this folder.

    • .wmproject.properties - information about the theme

3. Customize Theme

To understand customization, let's take the button as an example.

  • Go to $ThemeProject/wavemaker
  • For each widget, there is a less file inside the wavemaker folder. Copy button.less from wavemaker/components/basic/button.less to src/common/components/basic/button.less
note

Path structure should be the same in both wavemaker and src/common folders. If you need customizations for a specific platform, copy the file into src/platform_name

  • Open the copied file and change or add styles

Customizing theme colors

  • Open wavemaker/variables.less
  • Select the color that requires change.
  • Open src/common/variables.less. For a platform-specific change, open corresponding variables.less of that platform folder.
  • If @platformColor has to be changed, add a less variable with the name @_platformColor and assign the desired value. The new variable name must have an underscore between @ and variable name. For example, @_primaryColor will override the value of @primaryColor.

4. Compile Theme

  • Open a terminal
  • Navigate to the directory where the theme project is.
  • Execute the following command.
wm-rn-codegen theme compile
  • Under the dist folder, the theme.zip file should get created after successful compilation.

5. Update Theme Project

  • Open a terminal
  • Navigate to the directory where the theme project is.
  • Execute the following command.
wm-rn-codegen theme update
  • Theme project: contents of the wavemaker folder migrates.
note

When @wavemaker/rn-codegen is updated, run theme update on the existing theme projects.

6. Import Theme into a Project

  • You can import the zip generated in the compiled step into a React Native project. For more information, see import and apply a theme.