SetUp.md

theaming-nb-headref

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.