├── App.js
├── README.md
├── app.json
├── assets
    ├── adaptive-icon.png
    ├── favicon.png
    ├── icon.png
    ├── plus.png
    └── splash.png
├── babel.config.js
├── package-lock.json
└── package.json


/App.js:
--------------------------------------------------------------------------------
  1 | import { StatusBar } from 'expo-status-bar';
  2 | import React from 'react';
  3 | import { Animated, Dimensions, Image, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
  4 | import 'react-native-gesture-handler';
  5 | import { NavigationContainer } from '@react-navigation/native';
  6 | import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
  7 | 
  8 | // Plus...
  9 | import plus from './assets/plus.png'
 10 | 
 11 | // Font Awesome Icons...
 12 | import { FontAwesome5 } from '@expo/vector-icons'
 13 | import { useRef } from 'react';
 14 | 
 15 | const Tab = createBottomTabNavigator();
 16 | 
 17 | // Hiding Tab Names...
 18 | export default function App() {
 19 |   // Animated Tab Indicator...
 20 |   const tabOffsetValue = useRef(new Animated.Value(0)).current;
 21 |   return (
 22 |     <NavigationContainer>
 23 |       <Tab.Navigator tabBarOptions={{
 24 |         showLabel: false,
 25 |         // Floating Tab Bar...
 26 |         style: {
 27 |           backgroundColor: 'white',
 28 |           position: 'absolute',
 29 |           bottom: 40,
 30 |           marginHorizontal: 20,
 31 |           // Max Height...
 32 |           height: 60,
 33 |           borderRadius: 10,
 34 |           // Shadow...
 35 |           shadowColor: '#000',
 36 |           shadowOpacity: 0.06,
 37 |           shadowOffset: {
 38 |             width: 10,
 39 |             height: 10
 40 |           },
 41 |           paddingHorizontal: 20,
 42 |         }
 43 |       }}>
 44 | 
 45 |         {
 46 |           // Tab Screens....
 47 | 
 48 |           // Tab ICons....
 49 |         }
 50 |         <Tab.Screen name={"Home"} component={HomeScreen} options={{
 51 |           tabBarIcon: ({ focused }) => (
 52 |             <View style={{
 53 |               // centring Tab Button...
 54 |               position: 'absolute',
 55 |               top: 20
 56 |             }}>
 57 |               <FontAwesome5
 58 |                 name="home"
 59 |                 size={20}
 60 |                 color={focused ? 'red' : 'gray'}
 61 |               ></FontAwesome5>
 62 |             </View>
 63 |           )
 64 |         }} listeners={({ navigation, route }) => ({
 65 |           // Onpress Update....
 66 |           tabPress: e => {
 67 |             Animated.spring(tabOffsetValue, {
 68 |               toValue: 0,
 69 |               useNativeDriver: true
 70 |             }).start();
 71 |           }
 72 |         })}></Tab.Screen>
 73 | 
 74 |         <Tab.Screen name={"Search"} component={SearchScreen} options={{
 75 |           tabBarIcon: ({ focused }) => (
 76 |             <View style={{
 77 |               // centring Tab Button...
 78 |               position: 'absolute',
 79 |               top: 20
 80 |             }}>
 81 |               <FontAwesome5
 82 |                 name="search"
 83 |                 size={20}
 84 |                 color={focused ? 'red' : 'gray'}
 85 |               ></FontAwesome5>
 86 |             </View>
 87 |           )
 88 |         }} listeners={({ navigation, route }) => ({
 89 |           // Onpress Update....
 90 |           tabPress: e => {
 91 |             Animated.spring(tabOffsetValue, {
 92 |               toValue: getWidth(),
 93 |               useNativeDriver: true
 94 |             }).start();
 95 |           }
 96 |         })}></Tab.Screen>
 97 | 
 98 | 
 99 |         {
100 | 
101 |           // Extra Tab Screen For Action Button..
102 |         }
103 | 
104 |         <Tab.Screen name={"ActionButton"} component={EmptyScreen} options={{
105 |           tabBarIcon: ({ focused }) => (
106 | 
107 |             <TouchableOpacity>
108 |               <View style={{
109 |                 width: 55,
110 |                 height: 55,
111 |                 backgroundColor: 'red',
112 |                 borderRadius: 30,
113 |                 justifyContent: 'center',
114 |                 alignItems: 'center',
115 |                 marginBottom: Platform.OS == "android" ? 50 : 30
116 |               }}>
117 |                 <Image source={plus} style={{
118 |                   width: 22,
119 |                   height: 22,
120 |                   tintColor: 'white',
121 |                 }}></Image>
122 |               </View>
123 |             </TouchableOpacity>
124 |           )
125 |         }}></Tab.Screen>
126 | 
127 |         <Tab.Screen name={"Notifications"} component={NotificationScreen} options={{
128 |           tabBarIcon: ({ focused }) => (
129 |             <View style={{
130 |               // centring Tab Button...
131 |               position: 'absolute',
132 |               top: 20
133 |             }}>
134 |               <FontAwesome5
135 |                 name="bell"
136 |                 size={20}
137 |                 color={focused ? 'red' : 'gray'}
138 |               ></FontAwesome5>
139 |             </View>
140 |           )
141 |         }} listeners={({ navigation, route }) => ({
142 |           // Onpress Update....
143 |           tabPress: e => {
144 |             Animated.spring(tabOffsetValue, {
145 |               toValue: getWidth() * 3,
146 |               useNativeDriver: true
147 |             }).start();
148 |           }
149 |         })}></Tab.Screen>
150 | 
151 |         <Tab.Screen name={"Settings"} component={SettingsScreen} options={{
152 |           tabBarIcon: ({ focused }) => (
153 |             <View style={{
154 |               // centring Tab Button...
155 |               position: 'absolute',
156 |               top: 20
157 |             }}>
158 |               <FontAwesome5
159 |                 name="user-alt"
160 |                 size={20}
161 |                 color={focused ? 'red' : 'gray'}
162 |               ></FontAwesome5>
163 |             </View>
164 |           )
165 |         }} listeners={({ navigation, route }) => ({
166 |           // Onpress Update....
167 |           tabPress: e => {
168 |             Animated.spring(tabOffsetValue, {
169 |               toValue: getWidth() * 4,
170 |               useNativeDriver: true
171 |             }).start();
172 |           }
173 |         })}></Tab.Screen>
174 | 
175 |       </Tab.Navigator>
176 | 
177 |       <Animated.View style={{
178 |         width: getWidth() - 20,
179 |         height: 2,
180 |         backgroundColor: 'red',
181 |         position: 'absolute',
182 |         bottom: 98,
183 |         // Horizontal Padding = 20...
184 |         left: 50,
185 |         borderRadius: 20,
186 |         transform: [
187 |           { translateX: tabOffsetValue }
188 |         ]
189 |       }}>
190 | 
191 |       </Animated.View>
192 |     </NavigationContainer>
193 |   );
194 | }
195 | 
196 | function getWidth() {
197 |   let width = Dimensions.get("window").width
198 | 
199 |   // Horizontal Padding = 20...
200 |   width = width - 80
201 | 
202 |   // Total five Tabs...
203 |   return width / 5
204 | }
205 | 
206 | function EmptyScreen() {
207 |   return (
208 |     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
209 |     </View>
210 |   );
211 | }
212 | 
213 | function SettingsScreen() {
214 |   return (
215 |     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
216 |       <Text>Settings!</Text>
217 |     </View>
218 |   );
219 | }
220 | 
221 | function HomeScreen() {
222 |   return (
223 |     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
224 |       <Text>Home!</Text>
225 |     </View>
226 |   );
227 | }
228 | 
229 | function NotificationScreen() {
230 |   return (
231 |     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
232 |       <Text>Notifications!</Text>
233 |     </View>
234 |   );
235 | }
236 | 
237 | function SearchScreen() {
238 |   return (
239 |     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
240 |       <Text>Search!</Text>
241 |     </View>
242 |   );
243 | }
244 | 
245 | const styles = StyleSheet.create({
246 |   container: {
247 |     flex: 1,
248 |     backgroundColor: '#fff',
249 |     alignItems: 'center',
250 |     justifyContent: 'center',
251 |   },
252 | });
253 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Custom Floating Bottom Tab Navigator In React Native
2 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "customtabbar",
 4 |     "slug": "customtabbar",
 5 |     "version": "1.0.0",
 6 |     "orientation": "portrait",
 7 |     "icon": "./assets/icon.png",
 8 |     "splash": {
 9 |       "image": "./assets/splash.png",
10 |       "resizeMode": "contain",
11 |       "backgroundColor": "#ffffff"
12 |     },
13 |     "updates": {
14 |       "fallbackToCacheTimeout": 0
15 |     },
16 |     "assetBundlePatterns": [
17 |       "**/*"
18 |     ],
19 |     "ios": {
20 |       "supportsTablet": true
21 |     },
22 |     "android": {
23 |       "adaptiveIcon": {
24 |         "foregroundImage": "./assets/adaptive-icon.png",
25 |         "backgroundColor": "#FFFFFF"
26 |       }
27 |     },
28 |     "web": {
29 |       "favicon": "./assets/favicon.png"
30 |     }
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/assets/adaptive-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ReactiveKoding/customtabbar/27dba8f1be58a5e5a281e127f0e5f456d2a40b34/assets/adaptive-icon.png


--------------------------------------------------------------------------------
/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ReactiveKoding/customtabbar/27dba8f1be58a5e5a281e127f0e5f456d2a40b34/assets/favicon.png


--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ReactiveKoding/customtabbar/27dba8f1be58a5e5a281e127f0e5f456d2a40b34/assets/icon.png


--------------------------------------------------------------------------------
/assets/plus.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ReactiveKoding/customtabbar/27dba8f1be58a5e5a281e127f0e5f456d2a40b34/assets/plus.png


--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ReactiveKoding/customtabbar/27dba8f1be58a5e5a281e127f0e5f456d2a40b34/assets/splash.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function(api) {
2 |   api.cache(true);
3 |   return {
4 |     presets: ['babel-preset-expo'],
5 |   };
6 | };
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "main": "node_modules/expo/AppEntry.js",
 3 |   "scripts": {
 4 |     "start": "expo start",
 5 |     "android": "expo start --android",
 6 |     "ios": "expo start --ios",
 7 |     "web": "expo start --web",
 8 |     "eject": "expo eject"
 9 |   },
10 |   "dependencies": {
11 |     "@react-native-community/masked-view": "0.1.10",
12 |     "@react-navigation/bottom-tabs": "^5.11.11",
13 |     "@react-navigation/native": "^5.9.4",
14 |     "expo": "~41.0.1",
15 |     "expo-status-bar": "~1.0.4",
16 |     "react": "16.13.1",
17 |     "react-dom": "16.13.1",
18 |     "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
19 |     "react-native-gesture-handler": "~1.10.2",
20 |     "react-native-reanimated": "~2.1.0",
21 |     "react-native-safe-area-context": "3.2.0",
22 |     "react-native-screens": "~3.0.0",
23 |     "react-native-web": "~0.13.12"
24 |   },
25 |   "devDependencies": {
26 |     "@babel/core": "^7.9.0"
27 |   },
28 |   "private": true
29 | }
30 | 


--------------------------------------------------------------------------------