Custom Tab Navigation By Wix React Native Navigation

Question

I am new to React Native. and for navigation purpose I am using react native navigation library by wix version 1.1.486.

For tab navigation I have achieved this:-

Is there any way to lift this tab bar from bottom to top?

The code responsible for this:-

import { Navigation } from 'react-native-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
const startTabs = ()=>{

    Promise.all([
        Icon.getImageSource("md-map",30),
        Icon.getImageSource("ios-share-alt",30) 
    ]).then(sources =>{
        Navigation.startTabBasedApp({

            tabs: [
                {
                  label: 'One', 
                  title: 'One', 
                  screen: 'prabhuji.FlowerTabOne', 
                  icon: sources[0]

                },
                {
                    label: 'Two', 
                    title: 'Two', 
                    screen: 'prabhuji.FlowerTabTwo', 
                    icon: sources[1]
                },
                {
                    label: 'Three', 
                    title: 'Three', 
                    screen: 'prabhuji.FlowerTabThree', 
                    icon: sources[1]

                },
                {
                    label: 'Four',
                    title: 'Four', 
                    screen: 'prabhuji.FlowerTabFour', 
                    icon: sources[0]
                }
              ],
              tabsStyle: { 

              },
              appStyle: {
                orientation: 'portrait', // Sets a specific orientation to the entire app. Default: 'auto'. Supported values: 'auto', 'landscape', 'portrait'
                tabBarBackgroundColor: '#0f2362',
            }
        });
    });



}

export default startTabs;

Answer 1

well the question was asked long ago, but it seems still active, so i'll answer it.

you can use iconInsets to lift this tab bar from bottom to top: { top: 5, bottom: -5 } Please with values obviously. Exmapl code could be something like this

{
  component: {
    id: "accountsScreenBottomTabId",
    name: "TraderCientzone.AccountsScreen",
    waitForRender: true,
    options: {
      layout: {
        orientation: "portrait",
      },
      bottomTab: {
        iconColor: "#363636",
        selectedIconColor: "#ccb134",
        selectedTextColor: "#ccb134",
        text: localString("BOTTOM_MENU.ACCOUNT", locale),
        // icon: { uri: "acounts_icon" },
        icon: AccountsNormal,
        iconInsets: { top: 5, bottom: -5 },
      },
    },
  },
},

Answer 2

Download source code from here (Tab Navigation React Native)

You can also use the default navigation library to create a bottom tab bar in react native like following.

const BottomNavigation = createBottomTabNavigator({
Home:{
    screen: HomeScreen,
    tabBarOptions: { 
        showIcon: true 
      },
    navigationOption:{
        tabBarIcon: ({ tintColor }) => (
            <Icon name='../../assets/home_icon.png' size={20}/>
          )
    }
},
Movie:{
    screen: MovieScreen,
    tabBarOptions: { 
        showIcon: true 
      },
     navigationOption:{
        tabBarIcon: ({ tintColor }) => (
            <Icon name='../../assets/home_icon.png' size={20}/>
          )
    }
},


Sport:{
    screen: SportScreen,
    tabBarOptions: { 
        showIcon: true 
      },
    navigationOption:{
        tabBarIcon: ({ tintColor }) => (
            <Icon name='../../assets/home_icon.png' size={20}/>
          )
    }
}
})
const NavigationContainer = createAppContainer(BottomNavigation)

Thanks!