CODEWITHSUNDEEP
react-nativenative-base
varad
varad

Reputation: 8029

native base not over riding theme style

I have a componet like:

import React, { Component } from 'react'
import { StyleSheet } from 'react-native'
import { StyleProvider, Container, Content, Footer, FooterTab, Button, Icon } from 'native-base'


export default class MainFooter extends Component {
  render() {
    return (
        <StyleProvider style={footerTabTheme}>
        <Footer>
          <FooterTab>
            <Button>
              <Icon name="ios-home" />
            </Button>
            <Button active>
              <Icon name="ios-people" />
            </Button>
            <Button>
              <Icon style={{fontSize: 45}} name="ios-radio-button-on-outline" />
            </Button>
            <Button>
              <Icon name="md-medkit" />
            </Button>
            <Button>
              <Icon name="ios-people" />
            </Button>
          </FooterTab>
        </Footer>
        </StyleProvider>
    )
  }
}

const footerTabTheme = {
  "NativeBase.Button": {
     ".active": {
       backgroundColor: "#c71818",
     }
   }
 }

According to documentation I should be able to customize the active button background color for footer now.

But I am getting error about can not read androidRipple or something.

What is wrong in here ?

Upvotes: 0

Views: 1250

Answers (1)

David
David

Reputation: 16277

According to the documentation, you need wrap all UI inside the 'Container' component:

<StyleProvider style={...}>
   <Container> {*<--------------*}
   ...
   <Container>
</StyleProvider>

Upvotes: 1

Related Questions