0

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 ?

varad
  • 7,309
  • 20
  • 60
  • 112

1 Answers1

1

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

<StyleProvider style={...}>
   <Container> {*<--------------*}
   ...
   <Container>
</StyleProvider>
David
  • 15,894
  • 22
  • 55
  • 66
  • https://docs.nativebase.io/Customize.html#custom-component-headref at the section where they have wrapped button I dont see any Container wrapper for button. Is it mendatory ? – varad Mar 29 '18 at 09:08
  • Also from the doc: in the Anatomy section: "A common way to use NativeBase screen structure is to have all the components within " – David Mar 29 '18 at 09:22
  • I wil try that out.. Thank you for your response. – varad Mar 29 '18 at 09:33