CODEWITHSUNDEEP
react-nativenative-base
Rahul K
Rahul K

Reputation: 31

How to override style in NativeBase?

In every code example mentioned in NativeBase Docs, there's no usage of React StyleSheet.
I didn't find a way to override styles of NativeBase.
How can I include React StyleSheet into my app?

Upvotes: 3

Views: 5376

Answers (2)

Swanky Coder
Swanky Coder

Reputation: 1018

NativeBase uses a different approach to add styling to your component.

It uses a Utility first approach, wherein it leverages the ReactNative stylesheets API and adds a layer of Utility Props on top of it. The idea is to pass props to your component to change their styling, instead of defining a className and adding styles in a separate stylesheet.

For example, with React Native, you would write:

function Example() {
  return (
    <View style={styles.container}>
      {/* content */}
    </View>;
  );

}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#0891b2',
    paddingVertical: 16,
    paddingHorizontal: 12,
    borderRadius: 5,
    alignSelf: 'center',
    width: 375,
    maxWidth: '100%'
  }
});

Now, with NativeBase, to achieve the same view, you would write it as follows:

function Example() {
  return (
    <NativeBaseProvider>
      <Box bg="primary.600" py="4" px="3" rounded="md" width={375} maxWidth="100%">
        {/* content */}
      </Box>
    </NativeBaseProvider>;
  );
}

Here, NativeBase has already defined bg, py, px, etc. as props and mapped them to the styling properties of backgroundColor, paddingVertical , paddingHorizontal, etc. respectively.

There is a list of these mappings provided here, which you can simply refer to add any styling that you may need for your component.

Upvotes: 2

Shivam Sinha
Shivam Sinha

Reputation: 5150

For NativeBase usually if you want customize the appearance you need to do it at a theme level and not a component/widget level.

http://nativebase.io/docs/v0.5.2/customize

I believe the reason it this keeps the UI consistent.

Have a look at the source code for all the widgets that you are trying to override the style for:

https://github.com/GeekyAnts/NativeBase/blob/master/Components/Widgets/

There are certain cases where you can amend certain aspects e.g. for the button this.props.style is used anywhere but this.props.textStyle

So you can override the textStyle when you define the component: 

<Button textStyle={{...}}/>

https://github.com/GeekyAnts/NativeBase/blob/master/Components/Widgets/Button.js

Upvotes: 0

Related Questions