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.

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.

1. theaming-nb-headref

2. 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:

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

node node_modules/native-base/ejectTheme.js
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.

3. 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 contain the theme styling files for all the 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 this line in native-base-theme/components/Button.js.

The variables folder contain three preset theme variables. 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.
Material: Sometimes, you need Material design for both the platforms. Not everyone is a fan but Google does use Material design on iOS. This theme is not 100% material yet but, it can be used today.
Common Colors: 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. Common Colors theme is best suited for such use-cases.

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.

4. custom-component-headref

5. Theme Your Custom Component

To add support for themes to your component you need to make two simple 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:

Replace the occurrences of styles with this.props.style
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.

6. theme-color-headref

7. Theme Color

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

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

8. t heme-font-headref

9. 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 Themes/myTheme.js
Replace value for fontFamily with your choice of font name.

Font families included with NativeBase:

Entypo
EvilIcons
FontAwesome
Foundation
Ionicons
MaterialIcons
Octicons
Roboto
Roboto_medium
SimpleLineIcons
Zocial

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

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

9.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/https://docs.nativebase.io/docs/assets/fonts.

10. customize-button-headref

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

Customize

Customize

1. theaming-nb-headref

2. Theming NativeBase Apps

Steps to be followed to customize NativeBase:

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

Three themes to start with

4. custom-component-headref

5. Theme Your Custom Component

Use `StyleProvider` to Customize components

Style exposed to Children

6. theme-color-headref

7. Theme Color

8. t heme-font-headref

9. Theme Font

9.0.1. iOS

9.0.2. Android

10. customize-button-headref

11. Button Customize

With Button theme

With Variables

results matching ""

No results matching ""

Customize

1. theaming-nb-headref

2. Theming NativeBase Apps

Steps to be followed to customize NativeBase:

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

Three themes to start with

4. custom-component-headref

5. Theme Your Custom Component

Use StyleProvider to Customize components

Style exposed to Children

6. theme-color-headref

7. Theme Color

8. t heme-font-headref

9. Theme Font

9.0.1. iOS

9.0.2. Android

10. customize-button-headref

11. Button Customize

With Button theme

With Variables

results matching ""

No results matching ""

Use `StyleProvider` to Customize components