Import { StatusBar } from 'expo-status-bar'; import React from 'react'; import {

Animated, Dimensions, Image, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import * as ImagePicker from 'expo-image-picker';
import { useState, useEffect } from 'react';
import SearchScreen from './src/screens/SearchScreen';
import plusIcon from './assets/plus.png'
import heartIcon from './assets/heart.png'
import searchIcon from './assets/search.png'
import userIcon from './assets/userIcon.png'
import chatIcon from './assets/chatIcon.png'
// Font Awesome Icons...
import { FontAwesome5 } from '@expo/vector-icons'
import { useRef } from 'react';
import { Button } from 'react-native-web';
import { ScrollView } from 'react-native-gesture-handler';

const Tab = createBottomTabNavigator();

// Hiding Tab Names...
export default function App() {
const [image, setImage] = useState([]);

useEffect(() => {
(async () => {
if (Platform.OS !== 'web') {
const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (status !== 'granted') {
alert('Sorry, we need camera roll permissions to make this work!');
}
}

})();
}, []);
//image picker
const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: false,
aspect: [4, 3],
quality: 1,

});

console.log(result);

if (!result.cancelled) {
setImage(result.uri);
}
};

// Animated Tab Indicator...
const tabOffsetValue = useRef(new Animated.Value(0)).current;
return (
<NavigationContainer>
<Tab.Navigator tabBarOptions={{
showLabel: false,
// Floating Tab Bar...
style: {
backgroundColor: 'white',

// Max Height...
height: 60,
// Shadow...
shadowColor: '#000',
shadowOpacity: 0.06,
shadowOffset: {
width: 10,
height: 10
},
paddingHorizontal: 0,
}
}}>

{
// Tab Screens....

// Tab ICons....
}
{
//search tab button
}
<Tab.Screen name={"search"} component={searchScreen} options={{
tabBarIcon: ({ focused }) => (
<View style={{
// centring Tab Button...
position: 'absolute',
top: 20
}}>
<Image source={searchIcon} style={{
width: 22,
height: 22,
tintColor: focused ? '#32BB8B' : 'gray',

}}></Image>
</View>
)
}} listeners={({ navigation, route }) => ({
// Onpress Update....
tabPress: e => {
Animated.spring(tabOffsetValue, {
toValue: 0,
useNativeDriver: true
}).start();
}
})}></Tab.Screen>
{
//favorite
}
<Tab.Screen name={"Search"} component={favoriteScreen} options={{
tabBarIcon: ({ focused }) => (
<View style={{
// centring Tab Button...
position: 'absolute',
top: 20
}}>
<Image source={heartIcon} style={{
width: 22,
height: 22,
tintColor: focused ? '#32BB8B' : 'gray',
}}></Image>

</View>
)
}} listeners={({ navigation, route }) => ({
// Onpress Update....
tabPress: e => {
Animated.spring(tabOffsetValue, {
toValue: getWidth(),
useNativeDriver: true
}).start();

App

.