CODEWITHSUNDEEP
androidreact-nativenative-base
ssuhat
ssuhat

Reputation: 7656

React Native - Native Base Footer not change color

Here is the code:

 // Bottom.js
<StyleProvider style={getTheme(commonColor)}>
    <Footer>
        <FooterTab>
            <Button active>
                <Icon active name="food" size={24}  />
                <Text active>Lunch Box</Text>
            </Button>
            <Button>
                <Icon name="coins" size={24} />
                <Text>Point</Text>
            </Button>
            <Button>
                <Icon name="face" size={24} />
                <Text>Profile</Text>
            </Button>
        </FooterTab>
    </Footer>

</StyleProvider>

// commonColor.js

// Footer
footerHeight: 55,
footerDefaultBg: '#ffffff',

// FooterTab
tabBarTextColor: '#FFF',
tabBarTextSize: platform === 'ios' ? 14 : 16,
activeTab: platform === 'ios' ? '#007aff' : '#fff',
sTabBarActiveTextColor: '#007aff',
tabBarActiveTextColor: '#fff',
tabActiveBgColor: platform === 'ios' ? '#1569f4' : '#1569f4',

here is the result: Result

I've tried edit FooterTab.js directly but no changed at all.

The only changes that can happen on render is tabActiveBgColor: platform === 'ios' ? '#1569f4' : '#1569f4'. And I don't even know why only this code is working, I not even set any active on FooterTab.

What I expected is when I set active the button and text become white.

Any Solution?

Upvotes: 5

Views: 11503

Answers (5)

Pranav Lende
Pranav Lende

Reputation: 1

Set the style prop of FooterTab, like this:

<Footer style={{ borderTopWidth: 0 }} >
    <FooterTab>
        <Button active>
            <Icon active name="food" size={24}  />
            <Text active>Lunch Box</Text>
        </Button>
        <Button>
            <Icon name="coins" size={24} />
            <Text>Point</Text>
        </Button>
        <Button>
            <Icon name="face" size={24} />
            <Text>Profile</Text>
        </Button>
    </FooterTab>
</Footer>

I also added { borderTopWidth: 0 } to the Footer's style prop because there usually is a thin white line just above the Footer. That question was asked here:

How to remove bottom line of Header and top line of Footer in Native Base?

Upvotes: 0

Nijat Aliyev
Nijat Aliyev

Reputation: 904

1) Run this command from your terminal after installing native-base.

node node_modules/native-base/ejectTheme.js

When you run the above command, a folder named native-base-theme gets copied to your project root. Inside the directory are two folders named components and variables

2) Wrap the code or component to which you want to apply the theme with StyleProvider

for example HomeScreen

import React, { Component } from 'react';
import { Container, Content, Text, StyleProvider } from 'native-base';
import getTheme from './native-base-theme/components';
import material from './native-base-theme/variables/material';
import CustomFooter from '../components/CustomFooter';
​export default class HomeScreen extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <StyleProvider style={getTheme(material)}>
        <Container>
          <Content>
            <Text>
              I have changed the text color.
            </Text>
          </Content>
          <CustomFooter screen="Home" navigation={this.props.navigation} />
        </Container>
      </StyleProvider>
    );
  }
}

CustomFooter.js

import React, {Component} from 'react';
import {FooterTab, Footer, Button, Icon} from 'native-base';

export default class CustomFooter extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const navigation = this.props.navigation;
    const activeMenu = this.props.screen;
    return (
      <Footer>
        <FooterTab>
          <Button
            active={activeMenu == 'Home' ? true : false}
            onPress={() => navigation.navigate('Home')}>
            <Icon active={activeMenu == 'Home' ? true : false} name="home" />
          </Button>
          <Button
            active={activeMenu == 'Cart' ? true : false}
            onPress={() => navigation.navigate('Cart')}>
            <Icon active={activeMenu == 'Cart' ? true : false} name="card" />
          </Button>
          <Button
            active={activeMenu == 'Map' ? true : false}
            onPress={() => navigation.navigate('Map')}>
            <Icon active={activeMenu == 'Map' ? true : false} name="map" />
          </Button>
          <Button
            active={activeMenu == 'Profile' ? true : false}
            onPress={() => navigation.navigate('Profile')}>
            <Icon
              active={activeMenu == 'Profile' ? true : false}
              name="person"
            />
          </Button>
          <Button
            active={activeMenu == 'Settings' ? true : false}
            onPress={() => navigation.navigate('Settings')}>
            <Icon
              active={activeMenu == 'Settings' ? true : false}
              name="settings"
            />
          </Button>
        </FooterTab>
      </Footer>
    );
  }
}

3) Change colors now from native-base-theme folder

go to /native-base-theme/variables/material.js

find tabActiveBgColor and change value

  // FooterTab
  tabBarTextColor: '#bfc6ea',
  tabBarTextSize: 11,
  activeTab: '#fff',
  sTabBarActiveTextColor: '#007aff',
  tabBarActiveTextColor: '#fff',
  tabActiveBgColor: 'purple', // for example changed to purple color

Then reload app (Be carefully hot reloading do not effect sometimes) shake phone and tap to reload button.

Thats is all.

For more details => https://docs.nativebase.io/Customize.html#theaming-nb-headref

Upvotes: 1

S Debasish Nayak
S Debasish Nayak

Reputation: 263

If you have to change the color of the footer background then change the value of

footerDefaultBg in platform.js

To change the color of the selected button in footer or any other place as well, change the value of

"tabActiveBgColor" in the same platform.js .

Upvotes: 0

Hermenpreet Singh
Hermenpreet Singh

Reputation: 474

I have solved this issue for adding style in FooterTab.You do not need to do any styling in native base Footer component.Here is my source code-

     <Footer>
          <FooterTab style={{backgroundColor:"#FFF"}}>
              <Button style={{paddingLeft:0, paddingRight:0}}>
                  <Text}}>iFeeds</Text>
              </Button>
              <Button style={{paddingLeft:0, paddingRight:0}}>
                  <Text}}>iFeeds</Text>
              </Button>
          </FooterTab>
    <Footer>

My output is

Upvotes: 12

Awis A.
Awis A.

Reputation: 1

You need to change value of tabActiveBgColor in platform.js not commonColor.js

Upvotes: 0

Related Questions