Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

After making changes in FooterTab.js and platform.js can't get footerTtab active color and android BG changed.

See original GitHub issue

I’ve made all changes which found in the documentation for customizing component. The only part that I am confused is which imports should I do here:

import {Root, Footer, FooterTab, Icon, Button, StyleProvider } from "native-base";
import getTheme from './native-base-theme/components';
import platform from './native-base-theme/variables/platform';
................................
................................
.................................
................................
const tabs = TabNavigator({
    Home: {screen: HomeScreen},
   Saved: {screen: SavedScreen},
   Profile: {screen: ProfileScreen},
},
    {
        tabBarPosition: 'bottom',
        swipeEnabled: false,
        tabBarComponent: props => {
            return (
              <StyleProvider style={getTheme(platform)}>
                <Footer >
                    <FooterTab>
                        <Button
                            vertical
                            active={props.navigationState.index === 0}
                            onPress={() => props.navigation.navigate("Home")}>
                            <Icon name="bowtie" />
                            
                        </Button>
                        <Button
                            vertical
                            active={props.navigationState.index === 1}
                            onPress={() => props.navigation.navigate("Saved")}>
                            <Icon name="briefcase" />
                            
                        </Button>
                        <Button
                            vertical
                            active={props.navigationState.index === 2}
                            onPress={() => props.navigation.navigate("Profile")}>
                            <Icon name="headset" />
                            <Text>Jade</Text>
                        </Button>
                    </FooterTab>
                </Footer>
                </StyleProvider>
            );
        }
    });

All the time it shows different errors when I change importing lines.

import getTheme from './native-base-theme/components';
import platform from './native-base-theme/variables/platform';

What is wrong and what should I fix here to make my changes worked?

<StyleProvider style={getTheme(platform)}>

Issue Analytics

State:
Created 6 years ago
Comments:6 (4 by maintainers)

Top GitHub Comments

1reaction

SupriyaKalghatgicommented, Mar 16, 2018

@ArtyomBaykov delete node_modules and do yarn

0reactions

SupriyaKalghatgicommented, Mar 27, 2018

Fixed with 2.4.1

Top Results From Across the Web

how to change the active footertab background color in ...

Inside tab bar you can use your component and to make its color change you need to pass active props by default the...

Color state list resource | Android Developers

A ColorStateList is an object you can define in XML that you can apply as a color, but will actually change colors, depending...

How to change the background color of the active nav-item?

The state of list of items can be changed by changing the background-color CSS property. Syntax: background-color: color | transparent;

accent-color - CSS: Cascading Style Sheets - MDN Web Docs

Values. auto. Represents a UA-chosen color, which should match the accent color of the platform, if any.

Android – 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} ...