WaveMaker Docs

WaveMaker Docs

  • Get started
  • Widgets
  • Mobile
  • How-to
  • Enterprise
  • Releases
  • Blog
  • Sign-in

›React Native

Mobile Development

  • React Native or Cordova

React Native

  • Welcome
  • Features
  • Supported Widgets
  • Supported Variables
  • Test Run Preview
  • Debug Web Preview
  • Inspection Framework
  • Mobile Preview
  • Styles
  • Theme
  • Export as Zip
  • Build Installers
  • Debug APK
  • Debug IPA

Cordova

  • Building Hybrid Mobile Apps
  • Native Device Support
  • First Mobile App
  • Mobile Design

    • Mobile Page Design
    • Gesture Support
    • Mobile Tabbar
    • Mobile Navbar

    Mobile Installer

    • Test Run (Preview)
    • Debugging Mobile Apps
    • Test via Live Sync
    • Testing Hybrid Mobile Apps using WaveLens
    • Mobile Build - Android
    • Generating iOS and Android Distribution Certificates
    • Export Cordova zip
    • Mobile Build - Manual
    • Mobile Build - AppChef

    Mobile Integrations

    • Mobile Integrations - Amazon Mobile Analytics
    • Mobile Integrations - Amazon SNS
    • Using Push Notifications in Mobile Device
    • Invoking Web App APIs in Mobile Apps

    Offline Features

    • Offline Data Support
    • Implementation
    • Switching between Offline and Online Mode
Edit

Working with Themes for WaveMaker React Native apps.


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.
Last updated on 8/26/2022 by Swetha Kundaram
← StylesExport as Zip →
  • Required Software
  • 1. Creating a Theme
  • 2. Theme Project Structure
  • 3. Customize Theme
    • Customizing theme colors
  • 4. Compile Theme
  • 5. Update Theme Project
  • 6. Import Theme into a Project
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2023 WaveMaker, Inc. All rights reserved.