Nativebase: Change default colors without ejecting

Created on 31 Mar 2018  路  2Comments  路  Source: GeekyAnts/NativeBase

Edit:
I've followed the customization instructions from the website (https://docs.nativebase.io/Customize.htm) and don't see any changes when editing the below color props in the platform.js file. The UI comps are great but i need to update colors!

I'm edditing the colors here:

// Color
brandPrimary: platform === "ios" ? "#ff0000" : "#ff0000",
brandInfo: "#62B1F6",
brandSuccess: "#5cb85c",
brandDanger: "#d9534f",
brandWarning: "#f0ad4e",
brandDark: "#000",
brandLight: "#f4f4f4",

but dont see the change.

awaiting response

All 2 comments

@jstansbe Posting a sample code with gif

Code

import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { Container, Header, Content, Button, Text, StyleProvider } from 'native-base';
import getTheme from './native-base-theme/components';
import platform from './native-base-theme/variables/platform';

export default class App extends Component {
  render() {
    return (
      <StyleProvider style={getTheme(platform)}>
        <Container>
          <Header />
          <Content style={{ backgroundColor: 'grey' }}>
            <Button light style={styles.buttonStyle}><Text> Light </Text></Button>
            <Button primary style={styles.buttonStyle}><Text> Primary </Text></Button>
            <Button success style={styles.buttonStyle}><Text> Success </Text></Button>
            <Button info style={styles.buttonStyle}><Text> Info </Text></Button>
            <Button warning style={styles.buttonStyle}><Text> Warning </Text></Button>
            <Button danger style={styles.buttonStyle}><Text> Danger </Text></Button>
            <Button dark style={styles.buttonStyle}><Text> Dark </Text></Button>
          </Content>
        </Container>
      </StyleProvider>
    );
  }
}

const styles = StyleSheet.create(
  {
    buttonStyle: {
      margin: 10
    }
  }
)

Gif

customizetheme

Check here for any reference http://docs.nativebase.io/Customize.html#Customize

@jstansbe If you want to customize anything with NativeBase theme, then its good practice to eject the theme and then go ahead with your customizations

Was this page helpful?
0 / 5 - 0 ratings

Related issues

natashache picture natashache  路  3Comments

maphongba008 picture maphongba008  路  3Comments

kitsune7 picture kitsune7  路  3Comments

agersoncgps picture agersoncgps  路  3Comments

natashache picture natashache  路  3Comments