how to change the active footertab background color in nativebase

Question

I want to change the background color of my active footer tab in native base. I haven't found anything on that o the official doc. Pls, guide me on this. Thanks

<Footer style={styles.footer}>
    <FooterTab  style={styles.footerTab} >
      <TouchableOpacity

        onPress={() => this.props.navigation.navigate('Mainhome')}>
        <Image
          source={require('../assets/home.png')}
          style={styles.footerIcon}
        />
      </TouchableOpacity>

      <TouchableOpacity

        onPress={() => this.props.navigation.navigate('Search')}>
        <Image
          source={require('../assets/search.png')}
          style={styles.footerIcon}
        />
      </TouchableOpacity>
      <TouchableOpacity
</FooterTab>
<Footer>

Answer 1

I gave detailed information on this subject

"react-native": "0.62.2",

"native-base": "^2.13.12"

"@react-navigation/drawer": "^5.8.2",

"@react-navigation/native": "^5.5.1",

"@react-navigation/stack": "^5.5.1",

=> https://stackoverflow.com/a/62372156/11302100

Answer 2

Inside tab bar you can use your component and to make its color change you need to pass active props by default the active color is blue ... and to change it just add color to the component inside fotter tab Working example: https://snack.expo.io/@msbot01/authentic-chips

import React, { Component } from 'react';
import { Text, View, StyleSheet, ScrollView, FlatList } from 'react-native';
import { Container, Header, Content, Footer, FooterTab, Button} from 'native-base';


export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

      tabStatus1:true,
      tabStatus2:false,
      tabStatus3:false,
      tabStatus4:false,
    }
  }

  componentDidMount(){


  }

  checkTabSelected(tab){
    switch(tab) {
      case 1:
        this.setState({

          tabStatus1:true,
          tabStatus2:false,
          tabStatus3:false,
          tabStatus4:false
        })
        // code block
        break;
      case 2:
        this.setState({

          tabStatus1:false,
          tabStatus2:true,
          tabStatus3:false,
          tabStatus4:false
        })
        // code block
        break;
      case 3:
        // code block
        this.setState({

          tabStatus1:false,
          tabStatus2:false,
          tabStatus3:true,
          tabStatus4:false
        })
        break;
      case 4:
        this.setState({

          tabStatus1:false,
          tabStatus2:false,
          tabStatus3:false,
          tabStatus4:true
        })
        // code block
        break;

    }
  }




  render() {
    return ( 
      <View style={{ flex: 1 }}>
       <Container>
        <Header />
        <Content />
        <Footer>
          <FooterTab>
            <Button  onPress={()=>{this.checkTabSelected(1)}} active={this.state.tabStatus1} style={{backgroundColor: this.state.tabStatus1?'red':null}} >
              <Text>Apps</Text>
            </Button>
            <Button  onPress={()=>{this.checkTabSelected(2)}} active={this.state.tabStatus2}  style={{backgroundColor: this.state.tabStatus2?'red':null}}>
              <Text>Camera</Text>
            </Button>
            <Button onPress={()=>{this.checkTabSelected(3)}} active={this.state.tabStatus3}  style={{backgroundColor: this.state.tabStatus3?'red':null}}>
              <Text>Navigate</Text>
            </Button>
            <Button  onPress={()=>{this.checkTabSelected(4)}} active={this.state.tabStatus4}  style={{backgroundColor: this.state.tabStatus4?'red':null}}>  
              <Text>Contact</Text>
            </Button>
          </FooterTab>
        </Footer>
      </Container>
      </View>
    );
  }
} 

const styles = StyleSheet.create({




});