SetUp.md

Theming NativeBase Apps

Steps to be followed to customize NativeBase component via theme:

• Copy the folder theme and paste in your rootProject if you want to customize each component for your project. (/node_modules/native-base/theme)
• Or Create a folder Themes under your rootProject and copy and paste only those component files here which you want to customize.
  Say TextTheme.js
• Import the file Themes/TextTheme.js into your code.
  Make the necessary theme changes into TextTheme.js.
• Wrap the code or component to which you want to apply the theme with <StyleProvider>.
• Pass the theme i.e TextTheme as the value of style prop of component <StyleProvider>.

Steps to be followed to customize NativeBase component via variables:

• Copy the file variable.js (/node_modules/native-base/theme/variable.js)
• Create a folder Themes under your rootProject and paste the here.
  Say variable.js
• Import the file Themes/variable.js into your code.
  Make the necessary theme changes into variable.js.
• Wrap the code or component to which you want to apply the theme with <StyleProvider>.
• Pass the variable i.e variable.js as the parameter of theme function, which is passed as a value to style prop of component <StyleProvider>.

Now your project is ready for theme customization.

General Syntax

import {Container, Content, Text} from 'native-base';
import React, {Component} from 'react-native';
import TextTheme from './Themes/TextTheme';
import variable from './Themes/variable';
​
export default class ThemeExample extends Component {
    render() {
        return (
            <Container>
                <StyleProvider  style={TextTheme(variable)}>
                    <Content>
                        <Text>
                            I have changed the text color.
                        </Text>
                    </Content>
                </StyleProvider>
            </Container>
        );
    }
}

• 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 Themes/TextTheme.js and modify any style prop. Or Go to Themes/variable.js and modify color code for textColor.
• Similarly you can customize theme for the rest of NativeBase components by modifying color code of their respective attributes, some of which are explained below.

See one of the examples here