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

[ArtyomBaykov]

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)}>

[ArtyomBaykov]

@akhil-geekyants If I got right you fixed this bug. But can you tell me please what is wrong in this part?

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

And this part:

<StyleProvider style={getTheme(platform)}>

These parts are the pieces of the above code.

[akhil-ga]

@ArtyomBaykov when you run node node_modules/native-base/ejectTheme.js from your terminal, a folder named native-base-theme gets copied to your project root. If you are trying to use getTheme and platform from a file inside some folder you have to change the import paths accordingly.

You can refer docs here

[akhil-ga]

@ArtyomBaykov Posting a sample code

Code

import React from 'react';
import { Text, View } from 'react-native';
import { TabNavigator } from 'react-navigation';
import { Footer, FooterTab, Button, Icon, Text as NBText, StyleProvider } from 'native-base'
import getTheme from './native-base-theme/components';
import platform from './native-base-theme/variables/platform';

class Lucy extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text>Lucy</Text>
            </View>
        );
    }
}

class Nine extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text>Nine</Text>
            </View>
        );
    }
}

class Jade extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text>Jade</Text>
            </View>
        );
    }
}

export default TabNavigator({
    Lucy: { screen: Lucy },
    Nine: { screen: Nine },
    Jade: { screen: Jade }
},
    {
        tabBarPosition: 'bottom',
        swipeEnabled: false,
        tabBarComponent: props => {
            return (
                <StyleProvider style={getTheme(platform)}>
                    <Footer>
                        <FooterTab>
                            <Button
                                active={props.navigationState.index === 0}
                                onPress={() => props.navigation.navigate("Lucy")}>
                                <NBText>Lucy</NBText>
                            </Button>
                            <Button
                                active={props.navigationState.index === 1}
                                onPress={() => props.navigation.navigate("Nine")}>
                                <NBText>Nine</NBText>
                            </Button>
                            <Button
                                active={props.navigationState.index === 2}
                                onPress={() => props.navigation.navigate("Jade")}>
                                <NBText>Jade</NBText>
                            </Button>
                        </FooterTab>
                    </Footer>
                </StyleProvider>
            );
        }
    });

Gif

[ArtyomBaykov]

@akhil-geekyants it shows this error:

[SupriyaKalghatgi]

@ArtyomBaykov delete node_modules and do yarn

[SupriyaKalghatgi]

Fixed with 2.4.1