Version: Next

Changing Styles of Native Components

In /theme/defaultTheme folder, you can see the __applicationAndroidStyle.json file. This file contains the styles for the native components.

We can change the styles of the native components by editing this file. For example:

We can change the default navigation bar color with navigationBarColor property.
We can change the default status bar color with statusBarColor property.

Properties

colorPrimary – The color of the app bar.
colorPrimaryDark – The color of the status bar and contextual app bars; this is normally a dark version of colorPrimary.
colorAccent – The color of UI controls such as check boxes, radio buttons, and edit text boxes.
windowBackground – The color of the screen background.
textColorPrimary – The color of UI text in the app bar.
statusBarColor – The color of the status bar.
navigationBarColor – The color of the navigation bar.

{
  "__applicationAndroidStyle": {
    "colorPrimary": "#07A8FF",
    "colorPrimaryDark": "#066ea6",
    "colorAccent": "#07A8FF",
    "v27": {
      "android:navigationBarColor": "#ffffff",
      "android:windowTranslucentStatus": true,
      "android:windowLightNavigationBar": true
    }
  }
}

info

colorPrimary - The color displayed most frequently across your app's screens and components. This color should pass accessibilty guidelines for text / iconography when drawn on top of the surface or background color.

For more information about the style of the native components, please refer to the Color and Styles and Themes section of the Android developer documentation.

Changing Styles of Native Components

Properties​

Properties