MovieApp/BottomTabNavigator.js at master · Marvidik/MovieApp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
// BottomTabNavigator.js

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import { View, Text, TouchableOpacity } from 'react-native';
import Animated from 'react-native-reanimated';

const TabNavigator = createBottomTabNavigator();

const BottomTabNavigator = () => {
  return (
    <NavigationContainer>
      <TabNavigator.Navigator
        tabBar={(props) => <MyTabBar {...props} />}
        initialRouteName="Home"
      >
        <TabNavigator.Screen name="Home" component={HomeScreen} />
        <TabNavigator.Screen name="Settings" component={SettingsScreen} />
        <TabNavigator.Screen name="Profile" component={ProfileScreen} />
        {/* Add more screens as needed */}
      </TabNavigator.Navigator>
    </NavigationContainer>
  );
};

const MyTabBar = ({ state, descriptors, navigation }) => {
  return (
    <View style={{ flexDirection: 'row', height: 56, backgroundColor: '#fff' }}>
      {state.routes.map((route, index) => (
        <Tab
          key={route.key}
          route={route}
          descriptor={descriptors[route.key]}
          navigation={navigation}
          index={index}
        />
      ))}
    </View>
  );
};

const Tab = ({ route, descriptor, navigation, index }) => {
  const isFocused = navigation.state.index === index;

  const onPress = () => {
    const event = navigation.emit({
      type: 'tabPress',
      target: route.key,
      canPreventDefault: true,
    });

    if (!isFocused && !event.defaultPrevented) {
      navigation.navigate(route.name);
    }
  };

  return (
    <TouchableOpacity
      onPress={onPress}
      style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
    >
      <View
        style={{
          width: 40,
          height: 40,
          borderRadius: 20,
          backgroundColor: isFocused ? '#3498db' : '#ecf0f1',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        {isFocused ? (
          <Animated.View
            style={{
              width: 30,
              height: 30,
              borderRadius: 15,
              backgroundColor: '#fff',
              justifyContent: 'center',
              alignItems: 'center',
            }}
          >
            {/* Your icon component for the selected state */}
            <Text>{route.name}</Text>
          </Animated.View>
        ) : (
          // Your icon component for the unselected state
          <Text>{route.name}</Text>
        )}
      </View>
    </TouchableOpacity>
  );
};

export default BottomTabNavigator;