Theming NativeBase Apps

Customizing NativeBase will be a cakewalk for you. That is due to the fact, NativeBase has categorized its screens into different sections. It provides a separate file inclusive of color schemes for different sections.

Note: NativeBase is built on top of React Native.
Hence with any component you can pass the style property which will be merged to the default style of that component.

Steps to be followed to customize NativeBase:

Now your project is ready for theme customization.

What are themes and variables and how to change them?

When you run node node_modules/native-base/ejectTheme.js from your terminal, a folder named native-base-theme gets copied to your project root. Inside the directory are two folders named components and variables.
The components folder contains the theme styling files for all the components. This is where you would change the style properties of your components if you need to.
For example, if you need to change the height of Button component, you'll need to change this line in native-base-theme/components/Button.js.
The variables folder contains the three preset theme variables. You can change the variables,(color, fontFamily, iconFamily etc) for a uniform look and feel throughout your app.

Three themes to start with

NativeBase is packed with three preset themes.
Syntax to add Material Design
import {Container, Content, Text} from 'native-base';
import React, {Component} from 'react-native';
import getTheme from './native-base-theme/components';
import material from './native-base-theme/variables/material';
​
export default class ThemeExample extends Component {
    render() {
        return (
        <StyleProvider style={getTheme(material)}>
            <Container>
                    <Content>
                        <Text>
                            I have changed the text color.
                        </Text>
                    </Content>
            </Container>
          </StyleProvider>
        );
    }
}



Theming Your Custom Component

To add support for themes to your component you only need to make two minor changes to it.

The main thing you need to change is to start using the style rules from the props.style property, instead of using the static variable defined alongside the component. You can define the default style of the component statically (the same way as before) but you shouldn’t use that property to get the actual style in runtime. This allows us to merge the default style with any theme style that may be active in the app, and provide the final style to components


Simple component with static style
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
​
export default class CustomComponent extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.textContent}>
                    Your Component with static style
                </Text>
            </View>
        );
    }
    const styles = StyleSheet.create({
        container: {
          flex: 1,
          backgroundColor: 'green',
        },
        textContent: {
          fontSize: 20,
          color: 'red',
        },
    });
}

In order to support themes, we need to:
  1. Replace the occurrences of styles with this.props.style
  2. Connect the component to the theme
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { connectStyle } from 'native-base';
​
class CustomComponent extends Component {
  render() {
      return (
        // connect styles to props.style defined by the theme
        const styles = this.props.style;
          <View style={styles.container}>
              <Text style={styles.textContent}>
                  Your Component with static style
              </Text>
          </View>
      );
  }
}
const styles = {
    container: {
      flex: 1,
      backgroundColor: 'green',
    },
    textContent: {
      fontSize: 20,
      color: 'red',
    },
};
// connect the component to the theme
export default connectStyle('yourTheme.CustomComponent', styles)(CustomComponent);

The connectStyle function receives two arguments. The first one represents the fully qualified name that component will be referenced by in the theme, and the second one is the default component style. Fully qualified name of the component needs to have namespace prefix, separated with . from the component name (yourTheme.CustomComponent).
Any styles defined in the theme will be merged with the default style, and theme rules will override the rules from the default style. The style that is sent to connectStyle shouldn’t be created using the StyleSheet.create. Style sheet will be created by the connectStyle function at appropriate time.

Use StyleProvider to Customize components

With the above simple changes, we have a component that can receive styles from the outside. The only thing left to do is to initialize the style provider within the app, so that theme styles are correctly distributed to components. To do this, we need to initialize the StyleProvider component, and render any customizable components within it:
import React, { Component } from 'react';
import { StyleProvider } from 'native-base';
  ​
  class CustomComponent extends Component {
      render() {
          return (
            // connect styles to props.style defined by the theme
            const styles = this.props.style;
              <StyleProvider style={customTheme()}>
                      Your Custom Components
              </StyleProvider>
          );
      }
  }
  // Define your own Custom theme
  const customTheme = {
      'yourTheme.CustomComponent': {
        // overrides CustomComponent style...
      }
  };

You can also add more style rules to the NativeBase components by adding your own style rules to the theme file of that component (provided for each component). The default NativeBase component style should be at the bottom of the style object. This style will always be applied as a base style. After that any theme style will be merged with the style, i.e., the theme style rules will override the base component rules. In the end, any style specified through the style prop directly on the component will be merged on top of the styles mentioned above to get the final component style. Rules above the default component style are the new rule types that are specific to theme styles. These style objects in the theme for any components can be applied to them as a property.
import React, { Component } from 'react';
  import { StyleProvider, Button, Text } from 'native-base';
  ​
  class CustomComponent extends Component {
      render() {
          return (
            // connect styles to props.style defined by the theme
            const styles = this.props.style;
              <StyleProvider style={customTheme()}>
                  <Button customStyleProp>
                      <Text>Custom Button</Text>
                  </Button>
              </StyleProvider>
          );
      }
  }
  // Define your own Custom theme
  const customTheme = {
      'NativeBase.Button': {
        .customStyleProp: {
          height: 70,
          borderRadius: 35,
        },
        // Default styles of NativeBase Button Component
        ....
      }
  };


Theme Color

To change the basic theme context of NativeBase, make necessary changes with the following variables:

Theme Font

Having different font types in your React Native apps is not tough any more.
NativeBase provides you with a set of nine font families.

Font families included with NativeBase:

NativeBase allows you to add more font styles on your own.

iOS

Android



Customize Button

Steps to customize theme for Button attributes:

With Button theme

With this theme of Button component you can modify any style rules applied to the default Button component.

Syntax
import React, { Component } from 'react-native';
    import { Container, Content, Button, Icon, Text, StyleProvider } from 'native-base';
    import getTheme from './Themes/buttonTheme';
    ​// buttonTheme is the customized theme of Button Component​

    export default class ThemeButtonExample extends Component {
        render() {
            return (
            <StyleProvider style={getTheme()}>
                <Container>
                    <Content>
                          <Button primary>
                            <Text> Primary </Text>
                          </Button>
                          <Button success>
                            <Text> Success </Text>
                          </Button>
                          <Button info>
                            <Text> Info </Text>
                          </Button>
                          <Button warning>
                            <Text> Warning </Text>
                          </Button>
                          <Button danger>
                            <Text> Danger </Text>
                          </Button>

                          <Button small>
                            <Text> Small </Text>
                          </Button>
                          <Button>
                            <Text> Default </Text>
                          </Button>
                          <Button large>
                            <Text> Large </Text>
                          </Button>
                    </Content>
                </Container>
              </StyleProvider>
            );
        }
    }

With Variables

With the native-base-theme/variables/platform.js file you can modify the variable values passed to the theme of the Button component.
Say value of btnTextSize to change the fontSize of the Text in Button.

Syntax
import React, { Component } from 'react-native';
import { Container, Content, Button, Icon, Text, getTheme, StyleProvider } from 'native-base';
import customVariables from './Themes/variable';
​// getTheme is default theme of NativeBase Components
// customVariables is customized variables used in the components theme

export default class ThemeButtonExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <StyleProvider style={getTheme(customVariables)}>
                      <Button primary>
                        <Text> Primary </Text>
                      </Button>
                      <Button success>
                        <Text> Success </Text>
                      </Button>
                      <Button info>
                        <Text> Info </Text>
                      </Button>
                      <Button warning>
                        <Text> Warning </Text>
                      </Button>
                      <Button danger>
                        <Text> Danger </Text>
                      </Button>

                      <Button small>
                        <Text> Small </Text>
                      </Button>
                      <Button>
                        <Text> Default </Text>
                      </Button>
                      <Button large>
                        <Text> Large </Text>
                      </Button>
                    </StyleProvider>
                </Content>
            </Container>
        );
    }
}

Note: To customise button theme, refer Theme Color


More to come . . .