CODEWITHSUNDEEP
react-native
Shashika Virajh
Shashika Virajh

Reputation: 9457

React-Native footer is not static

I Created a footer for a react-native application. It is not fixed to the bottom. When the keyboard is on, the footer also moves to the upwards. This is my code. How can I have a fixed footer to the bottom?

export const TabNavFooter = TabNavigator(
  {
    mainfeed: { screen: MainFeedScreen },
    workout: { screen: WorkoutScreen },
    videos: { screen: VideosScreen },
    chat: { screen: ChatScreen },
    profile: { screen: ProfilePageScreen }
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === "chat") {
          iconName = `message${focused ? "" : "-outline"}`;
        } else if (routeName === "profile") {
          iconName = `account${focused ? "" : "-outline"}`;
        }

        return <Icon name={iconName} size={25} color={tintColor} />;
      }
    }),
    tabBarComponent: TabBarBottom,
    tabBarPosition: "bottom",
    tabBarOptions: {
      activeTintColor: "blue",
      inactiveTintColor: "gray"
    },
    swipeEnabled: false,
    lazyLoad: true,
    animationEnabled: false
  }
);

Upvotes: 0

Views: 300

Answers (1)

Pritish Vaidya
Pritish Vaidya

Reputation: 22189

It doesn't happen generally unless the there is some overlay component over the Tabs that you're trying to focus.

To fix the TabBar to the bottom of the screen you add the tab styles as

tabBarOptions: {
            //... Other props
            style: {
                position: 'absolute',
                bottom: 0,
                right: 0,
                left: 0,
                height: 54,
            }
        }

Upvotes: 2

Related Questions