How to use the react-navigation.createMaterialTopTabNavigator function in react-navigation

image: {
          uri: USE_REMOTE_IMAGES
            ? song.artworkUrl60
            : 'https://image-cdn.hypb.st/https%3A%2F%2Fhypebeast.com%2Fimage%2F2018%2F09%2Flil-yachty-mtv-how-high-2-movie-0.jpg?q=75&w=800&cbr=1&fit=max',
        },
      };
    });
}
const Songs = transformSongList(Popular);

const GenreScreen = createGenreScreen(genres);
const MoodScreen = createGenreScreen(moods);

const PopularScreen = props => ;

const MusicTabNavigator = createMaterialTopTabNavigator(
  {
    Popular: PopularScreen,
    Moods: MoodScreen,
    Genres: GenreScreen,
  },
  {
    style: {
      maxHeight: height - (48 + 8), // Tab Bar Height + padding
    },
    tabBarOptions: {
      swipeEnabled: true,
      activeTintColor: 'white',
      inactiveBackgroundColor: 'transparent',
      safeAreaInset: 'never',
      upperCaseLabel: false,
      scrollEnabled: false,

),
        navigationOptions: {
          tabBarLabel: () => (
            
          ),
        },
      },
    ]),
  );

  // prettier-ignore
  return createMaterialTopTabNavigator(reactionsTabs, {
    backBehavior: 'none',

    // The user may have originally navigated here to look at a reaction
    // that's since been removed.  Ignore the nav hint in that case.
    ...(reactionName !== undefined && reactionsTabs[reactionName]
      ? { initialRouteName: reactionName }
      : {}),

    ...tabsOptions({
      showLabel: true,
      showIcon: false,
      style: {
        borderWidth: 0.15,
      },
    }),
  });

DebugSVG,
    // $FlowFixMe
    DebugWSImport,
    // $FlowFixMe
    BenchmarkQRStream,
  },
  stackNavigatorConfig,
);

SettingsStack.navigationOptions = {
  tabBarIcon: (props: *) => (
    
  ),
};

const ManagerMain = createMaterialTopTabNavigator(
  {
    ManagerAppsList,
    ManagerDevice,
  },
  topTabNavigatorConfig,
);

ManagerMain.navigationOptions = {
  title: i18next.t("tabs.manager"),
  headerStyle: styles.headerNoShadow,
};

const ManagerStack = createStackNavigator(
  {
    // $FlowFixMe
    Manager,

screen: ProfileStackNavigation,
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const iconName = focused ? 'ios-contact' : 'ios-contact-outline';
        return ;
      },
    })
  }
},{
  tabBarOptions : {
    showLabel : false
  },
  // initialRouteName: 'Search'
})

const AppNavigation = createMaterialTopTabNavigator({
  Camera: {
    screen: Camera
  },
  TabDashboard: {
    screen: TabDashboard
  },
  Inbox: {
    screen: createStackNavigator({ Inbox })
  }
}, {
  initialRouteName: 'TabDashboard',
  tabBarComponent: null,
  swipeEnabled: (props) => {
    const firstIndex = props.index;
    const firstRoute = props.routes[firstIndex];
    if (firstRoute.routeName === 'TabDashboard') {

},
    labelStyle: {
      fontSize: 12,
      fontWeight: 'bold',
      marginBottom: 12,
      marginTop:12,
    },
    indicatorStyle: {
      height: 0,
    },
    showIcon: true,
  }
}

// Bottom App tabs
const AppTabNavigator = createMaterialTopTabNavigator(configurations, options)

// Making the common header title dynamic in AppTabNavigator
AppTabNavigator.navigationOptions = ({ navigation }) => {
  let { routeName } = navigation.state.routes[navigation.state.index]
  let headerTitle = routeName
  return {
    headerTitle,
  }
}

const AppStackNavigator = createStackNavigator({
  Header: {
    screen: AppTabNavigator,
    // Set the header icon
    navigationOptions: ({navigation}) => ({
      headerLeft: (

import React from 'react';
import { createMaterialTopTabNavigator } from 'react-navigation';
import { Ionicons, Foundation } from "@expo/vector-icons";

import GridScreen from '../screens/profile/gridScreen';
import ListScreen from '../screens/profile/listScreen';
import TagScreen from '../screens/profile/tagScreen';
import BookmarkScreen from '../screens/profile/bookmarkScreen';

export default profileTabNavigation = createMaterialTopTabNavigator (
  {
    Grid: {
      screen: GridScreen
    },
    List: {
      screen: ListScreen
    },
    Tag: {
      screen: TagScreen
    },
    Bookmark: {
      screen: BookmarkScreen
    },
  },{
      navigationOptions: ({ navigation }) => ({
        tabBarIcon: ({ focused }) => {

import Register from './user/Register'
import Login from './user/Login'
import Me from './Me'
import Cart from '../screens/Cart';
import Checkout from '../screens/Checkout';
import Profile from '../screens/user/Profile';
import PurchaseHistories from '../screens/PurchaseHistories';
import AddProduct from '../screens/AddProduct';
import SellerPage from '../screens/SellerPage';
import Wishlist from '../screens/user/Wishlist';
import Search from '../screens/Search';
import ListSearch from '../screens/ListSearch';
import AccountSettings from '../screens/user/AccountSettings';
import DetailProduct from '../screens/DetailProduct';

const LogNavigator = createMaterialTopTabNavigator({
	Register2: {
		screen: Register,
		navigationOptions: {
	    	tabBarLabel: 'Daftar',
	    },
	},
	Login: {
		screen: Login,
		navigationOptions: {
	    	tabBarLabel: 'Log In',
	    }
	}
},{
  initialRouteName: 'Register2',
  swipeEnabled: true,
  animationEnabled: false,

import Camera from '../screens/Camera/Camera.container';
import Inbox from '../screens/Inbox/Inbox.container';

import Home from '../screens/Home/Home.container';
import Search from '../screens/Search/Search.container';
import AddPhoto from '../screens/AddPhoto/AddPhoto.screen';
import Love from '../screens/Love/Love.screen';
import Profile from '../screens/Profile/Profile.container';

//TAB ADD PHOTO
import Gallery from '../screens/Gallery/Gallery.container';
import Foto from '../screens/Foto/Foto.container';
import Video from '../screens/Video/Video.container';


const TabAddPhoto = createMaterialTopTabNavigator({
  Gallery: {
    screen: createStackNavigator({ Gallery })
  },
  Foto: {
    screen: createStackNavigator({ Foto })
  },
  Video: {
    screen: createStackNavigator({ Video })
  }
}, {
  tabBarPosition: 'bottom',
  tabBarOptions: {
    activeTintColor: '#000',
    inactiveTintColor: '#999',
    indicatorStyle: {
      backgroundColor: '#000'

scrollEnabled: false,
};

export const DownloadsTabs = createMaterialTopTabNavigator(
  {
    InProgressDownloads: { screen: InProgressDownloads },
    CompletedDownloads: { screen: CompletedDownloads },
  },
  {
    initialRouteName: 'InProgressDownloads',
    swipeEnabled: false,
    tabBarOptions,
  },
);

export const AccountsTabs = createMaterialTopTabNavigator(
  {
    Approvals: { screen: Approvals },
    QuotaUsage: { screen: QuotaUsage },
  },
  {
    initialRouteName: 'Approvals',
    swipeEnabled: false,
    tabBarOptions,
  },
);

const createStackForDrawer = (stackName, screen, headerTitle) =>
  createStackNavigator(
    {
      [stackName]: { screen },
    },

import Approvals from './Approvals';
import QuotaUsage from './QuotaUsage';

import { theme } from '../styles';

const tabBarOptions = {
  labelStyle: {
    fontSize: 15,
  },
  style: {
    backgroundColor: theme.PRIMARY_COLOR,
  },
  scrollEnabled: false,
};

export const DownloadsTabs = createMaterialTopTabNavigator(
  {
    InProgressDownloads: { screen: InProgressDownloads },
    CompletedDownloads: { screen: CompletedDownloads },
  },
  {
    initialRouteName: 'InProgressDownloads',
    swipeEnabled: false,
    tabBarOptions,
  },
);

export const AccountsTabs = createMaterialTopTabNavigator(
  {
    Approvals: { screen: Approvals },
    QuotaUsage: { screen: QuotaUsage },
  },