maintab.js

import React from 'react'
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import Ionicons from 'react-native-vector-icons/Ionicons'
import {responsiveFontSize} from 'react-native-responsive-dimensions'

import HomeScreen from '../homeScreen/homeScreen'
import colorThemes from '../../__global__/styles/themes/colorThemes'
import AccountScreen from '../homeScreen/accountScreen'
import {StyleSheet, View, Image} from 'react-native'
import TabNavigator from '../../__global__/libs/react-native-tab-navigator'

export default function MainTab() {
  const [selectedTab, setselectedTab] = React.useState('home')

  return (
    <TabNavigator style={styles.container}>
      <TabNavigator.Item
        selected={selectedTab === 'home'}
        title="Home"
        selectedTitleStyle={{color: '#FF7158'}}
        tabStyle={{
          borderTopWidth: selectedTab === 'home' ? 3 : 0,
          borderTopColor: '#FF7158',
          backgroundColor: selectedTab === 'home' ? '#fff8f6' : '#FFFFFF',
        }}
        renderIcon={() => (
          <Image
            source={require('images/mainTab/ic_beranda.png')}
            style={{width: 18, height: 18}}
          />
        )}
        renderSelectedIcon={() => (
          <Image
            source={require('images/mainTab/ic_beranda-actives.png')}
            style={{width: 18, height: 18}}
          />
        )}
        onPress={() => setselectedTab('home')}>
        <HomeScreen />
      </TabNavigator.Item>
      <TabNavigator.Item
        selected={selectedTab === 'profile'}
        title="Pemesanan"
        selectedTitleStyle={{color: '#FF7158'}}
        tabStyle={{
          borderTopWidth: selectedTab === 'profile' ? 3 : 0,
          borderTopColor: '#FF7158',
          backgroundColor: selectedTab === 'profile' ? '#fff8f6' : '#FFFFFF',
        }}
        renderIcon={() => (
          <Image
            source={require('images/mainTab/ic_pemesanan-inactive.png')}
            resizeMode="stretch"
            style={{width: 18, height: 18}}
          />
        )}
        renderSelectedIcon={() => (
          <Image
            source={require('images/mainTab/ic_pemesanan-active.png')}
            resizeMode="stretch"
            style={{width: 18, height: 18}}
          />
        )}
        onPress={() => setselectedTab('profile')}>
        <AccountScreen selected={() => setselectedTab('home')} />
      </TabNavigator.Item>
      <TabNavigator.Item
        selected={selectedTab === 'riwayat'}
        accessibilityLabel={'menuAkun'}
        title="Akun"
        selectedTitleStyle={{color: '#FF7158'}}
        tabStyle={{
          borderTopWidth: selectedTab === 'riwayat' ? 3 : 0,
          borderTopColor: '#FF7158',
          backgroundColor: selectedTab === 'riwayat' ? '#fff8f6' : '#FFFFFF',
        }}
        renderIcon={() => (
          <Image
            source={require('images/mainTab/ic_akun-inactive.png')}
            resizeMode="stretch"
            style={{width: 18, height: 18}}
          />
        )}
        renderSelectedIcon={() => (
          <Image
            source={require('images/mainTab/ic_akun-active.png')}
            resizeMode="stretch"
            style={{width: 18, height: 18}}
          />
        )}
        renderBadge={() => (
          <View
            style={{
              width: 10,
              height: 10,
              backgroundColor: '#FF7158',
              borderRadius: 50,
            }}></View>
        )}
        onPress={() => setselectedTab('riwayat')}>
        <AccountScreen />
      </TabNavigator.Item>

      <TabNavigator.Item
        selected={selectedTab === 'user'}
        accessibilityLabel={'menuAkun'}
        title="Akun"
        selectedTitleStyle={{color: '#FF7158'}}
        tabStyle={{
          borderTopWidth: selectedTab === 'user' ? 3 : 0,
          borderTopColor: '#FF7158',
          backgroundColor: selectedTab === 'user' ? '#fff8f6' : '#FFFFFF',
        }}
        renderIcon={() => (
          <Image
            source={require('images/mainTab/ic_akun-inactive.png')}
            resizeMode="stretch"
            style={{width: 18, height: 18}}
          />
        )}
        renderSelectedIcon={() => (
          <Image
            source={require('images/mainTab/ic_akun-active.png')}
            resizeMode="stretch"
            style={{width: 18, height: 18}}
          />
        )}
        renderBadge={() => (
          <View
            style={{
              width: 10,
              height: 10,
              backgroundColor: '#FF7158',
              borderRadius: 50,
            }}></View>
        )}
        onPress={() => setselectedTab('user')}>
        <AccountScreen />
      </TabNavigator.Item>
    </TabNavigator>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
})

// const Tab = createBottomTabNavigator()
// function MainTab() {
//   return (
//     <Tab.Navigator
//       screenOptions={({route}) => ({
//         tabBarIcon: ({focused, color, size}) => {
//           let iconName

//           if (route.name === 'Beranda') {
//             iconName = focused ? 'ios-home' : 'ios-home'
//           } else if (route.name === 'Dompet') {
//             iconName = focused ? 'ios-wallet' : 'ios-wallet'
//           } else if (route.name === 'Order') {
//             iconName = focused ? 'ios-document' : 'ios-document'
//           } else if (route.name === 'Akun') {
//             iconName = focused ? 'ios-contact' : 'ios-contact'
//           }

//           // You can return any component that you like here!
//           return (
//             <Ionicons
//               name={iconName}
//               size={responsiveFontSize(2.8)}
//               color={color}
//             />
//           )
//         },
//       })}
//       tabBarOptions={{
//         activeTintColor: colorThemes.blue0,
//         inactiveTintColor: 'grey',
//         activeBackgroundColor: '#ddeeff',
//       }}>
//       <Tab.Screen name="Beranda" component={HomeScreen} />
//       <Tab.Screen name="Dompet" component={HomeScreen} />
//       <Tab.Screen name="Order" component={HomeScreen} />
//       <Tab.Screen name="Akun" component={AccountScreen} />
//     </Tab.Navigator>
//   )
// }
// export default MainTab