Customize

Customizing NativeBase will be a cakewalk for you. That is due to the fact, NativeBase has organized its code in modular pattern. It provides separate set of files for customizing each component.

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.

1. nativebase-customizer-headref

2. NativeBase Customizer

Customizing NativeBase components is now made far more easier with NativeBase Customizer. Components can be customized visually with a friendly user interface. You can either download the variable.js file for the customized theme or the whole demo app at the end.

Visit NativeBase Customizer home page for mor information.

3. theme-and-variables-headref

4. What are themes and variables and how to change them?

NativeBase comes with a theme folder which comprises of two sub-folders

  • components: Theme styling files for all the NativeBase components. This is where you would change the style properties of the components if you need to.

    Example, if you need to change the height of Button component, you'll need to change height in native-base-theme/components/Button.js.

  • variables: Contains three preset theme variable files, namely Platform, material, commonColor. You can change the variables (for 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.

  • Platform: The default theme of NativeBase which maps to the design of the platform where the app runs i.e., platform-specific theme for iOS and Android.
  • Material: Sometimes, you need Material design for both the platforms. Not everyone is a fan of it, but Google does use Material design on iOS. This theme is not 100% material yet but, it can be used today.
  • CommonColor: Most of the brands use a common color scheme for both the platforms.But they also follow platform specific icons, font and orientation of the components. CommonColor theme is best suited for such use-cases.

Check Theme and Variables to know list of customizable variables. Before going ahead of modifying in your node_modules/native-base/theme, check the procedure below to generate new theme for you to play with.

5. theaming-nb-headref

6. Setup to theme NativeBase apps

To setup customized theme with your app, you should first eject NativeBase theme, which creates a copy of NativeBase theme at your project root. And then you are ready to have fun customizing theme for your app.

  • Run this command from your terminal after installing native-base.

    node node_modules/native-base/ejectTheme.js

  • When you run the above command, a folder named native-base-theme gets copied to your project root. Inside the directory are two folders named components and variables.

  • All the theme files and variables get added to your project root. Change the variables or theme files.
  • Wrap the code or component to which you want to apply the theme with StyleProvider.
  • Pass the variable i.e., platform/material/commonColors.js as the parameter of theme function, which is passed as a value to style prop of component StyleProvider.
  • The theme you pass should be a function.

Now your project is ready for theme customization.

Syntax to add Material Design

import React, { Component } from 'react';
import { Container, Content, Text, StyleProvider } from 'native-base';
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>
    );
  }
}

  • The <StyleProvider> with theme can be applied to any component of NativeBase.
  • The theme holds good with all its descendants.
  • The above code for theme change works this way:
    Go to native-base-theme/variables/platform.js and modify color code for textColor.
  • Similarly you can customize theme for rest of the NativeBase components by modifying color code of their respective attributes, some of which are explained below.

7. theme-color-headref

8. Theme Color

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

  • Primary color: brandPrimary
  • Info color: brandInfo
  • Success color: brandSuccess
  • Danger color: brandDanger
  • Warning color: brandWarning

9. theme-font-headref

10. 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.

To include these fonts into your app, go to native-base-theme/platform.js (you can change this in any of the three theme variable files) and replace value for fontFamily with your choice of font name. NativeBase allows you to add more font styles on your own.

Font families included with NativeBase:

  • Entypo
  • EvilIcons
  • FontAwesome
  • Foundation
  • Ionicons
  • MaterialIcons
  • Octicons
  • Roboto
  • Roboto_medium
  • SimpleLineIcons
  • Zocial

10.0.1. iOS

  • With react-native
    Run this command on your terminal
    react-native link
  • Manually
    • Browse through node_modules and drag the font file the ones you want to your project in Xcode. Make sure your app is checked under "Add to targets" and that "Create groups" is checked if you add the whole folder.
    • Edit Info.plist and include in property called Fonts provided by application and type in the files you just added.

10.0.2. Android

  • With react-native
    Run this command on your terminal
    react-native link
  • Manually
    • Copy the font files to android/app/src/main/assets/fonts.

11. customize-button-headref

12. Button Customize

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';
import { Container, Content, Button, Text, StyleProvider } from 'native-base';
import buttonTheme from './Themes/buttonTheme';
​// buttonTheme is the customized theme of Button Component​
export default class ThemeButtonExample extends Component {
  render() {
    return (
      <Container>
        <Content>
          <StyleProvider style={buttonTheme()}>
            <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>
    );
  }
}

With Variables

With the variable.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';
import { Container, Content, Button, 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={buttonTheme(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

13. custom-component-headref

14. Theme Your Custom Component

To add support for themes to your component you need to make two simple 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() {
    // connect styles to props.style defined by the theme
    const styles = this.props.style;
    return (
      <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
  • The second 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 2.0 components by adding your own style rules to the theme file of that component (provided for each component). The default NativeBase 2.0 component style should be at the bottom of the style object. This style will always be applied as a base style and then any other theme style will be merged with the style, i.e., the theme style rules will override the base component rules. At 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
    ....
  }
};

Style exposed to Children

The rule *.button-content will be available to child components of the CustomComponent defined above.

results matching ""

    No results matching ""