I'm having difficulties replicating the same navigation and animations styling from my Bottom-Tabs/TabBar code to my Drawer. I want my Drawer to have the same routing styles and animations as the TabBar, but i'm can't seem to get it to work.
Appreciate any help provided - thanks in advance!
Bottom-Tabs / TabBar code which I want to replicate to the Drawer
import React from "react";
import {
Text,
View,
TouchableOpacity,
StyleSheet,
Animated,
} from "react-native";
import * as Haptics from "expo-haptics";
import { Ionicons } from "@expo/vector-icons";
import { BottomTabBarProps } from "@react-navigation/bottom-tabs";
import Colors from "../constants/Colors";
const TabBar = ({ state, navigation }: BottomTabBarProps) => {
return (
<View style={styles.tabBar}>
{
state.routes.map((route, index) => {
const focused = state.index === index;
const isActions = route.name === "Actions";
const itemColor = focused ? Colors.Primary: Colors.subtitle;
const onPress = () => {
const event = navigation.emit({
type: "tabPress",
target: route.key,
canPreventDefault: true,
});
if (!focused && !event.defaultPrevented) {
navigation.navigate(route.name);
}
if (isActions) {
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
}
};
let iconName;
switch (route.name) {
case "Home":
iconName = "home";
break;
case "Explore":
iconName = "search";
break;
case 'Profile':
iconName = 'person';
break;
default:
iconName = 'person';
break;
}
const animatedValue = new Animated.Value(1);
const onPressIn = () => {
Animated.spring(animatedValue, {
toValue: 0.9,
useNativeDriver: true,
}).start();
};
const onPressOut = () => {
Animated.spring(animatedValue, {
toValue: 1,
useNativeDriver: true,
}).start();
};
const animatedStyle = {
transform: [{ scale: animatedValue }],
};
return (
<Animated.View
style={[styles.tabItem, animatedStyle, isActions ? { marginTop: 7 } : { marginTop: 10},]}
key={route.name}
>
<TouchableOpacity
onPress={onPress}
onPressIn={onPressIn}
onPressOut={onPressOut}
>
{
isActions ? (
<View style={styles.actionsButton}>
<Ionicons name='add' size={20} color='white' />
</View>
) : (
<View style={{ alignItems: "center"}}>
<Ionicons name={iconName as any} size={20} color={itemColor} style={{ marginBottom: 2}}/>
<Text style={[{color: itemColor }, styles.tabBarText]}>{route.name}</Text>
</View>
)
}
</TouchableOpacity>
</Animated.View>
);
})}
</View>
)
}
const styles = StyleSheet.create({
tabBar: {
flexDirection: 'row',
height: 85,
backgroundColor: "white",
borderColor: 'white',
borderTopColor: Colors.border,
borderWidth: 1,
justifyContent: 'space-evenly',
},
tabItem: {
width: 60
},
tabBarText: {
fontSize: 10,
fontWeight: '700',
},
actionsButton: {
width: 42,
height: 42,
backgroundColor: Colors.Primary,
borderRadius: 21,
alignSelf: 'center',
justifyContent: 'center',
alignItems: 'center',
},
});
export default TabBar;
Drawer code which i'm having difficulties replicating the same linking and animations as TabBar
import React from 'react';
import {
View,
StyleSheet
} from 'react-native';
import {
DrawerItem,
DrawerContentScrollView,
} from '@react-navigation/drawer';
import {
Avatar,
Title,
Caption,
Paragraph,
Drawer,
Text,
} from 'react-native-paper';
import { Ionicons } from "@expo/vector-icons";
import { useNavigation } from '@react-navigation/native';
export function SideBar(props) {
const navigation = useNavigation();
return (
<DrawerContentScrollView {...props}>
<View style={styles.drawerContent}>
<View style={styles.userInfoSection}>
<Avatar.Image
source={{
uri:
'https://www.innovaxn.eu/wp-content/uploads/blank-profile-picture-973460_1280.png',
}}
size={50}
/>
<Title style={styles.title}>FirstName LastName</Title>
<Caption style={styles.caption}>@test</Caption>
</View>
<Drawer.Section style={[styles.drawerSectionanimatedStyle, isActions ? { marginTop: 7 } : { marginTop: 10},]}
key={route.name}
>
<DrawerItem
icon={({ color, size }) => (
<Ionicons
name="person-circle"
color={color}
size={size}
/>
)}
label="Home"
onPress={() => navigation.navigate('Home')}
/>
<DrawerItem
icon={({ color, size }) => (
<Ionicons
name="person-circle"
color={color}
size={size}
/>
)}
label="Inbox"
onPress={() => {}}
/>
<DrawerItem
icon={({ color, size }) => (
<Ionicons
name="person-circle"
color={color}
size={size}
/>
)}
label="Notifications"
onPress={() => {}}
/>
</Drawer.Section>
</View>
</DrawerContentScrollView>
);
}
const styles = StyleSheet.create({
drawerContent: {
flex: 1,
},
userInfoSection: {
paddingLeft: 20,
paddingTop: 20,
},
title: {
marginTop: 10,
fontWeight: 'bold',
},
caption: {
fontSize: 14,
lineHeight: 14,
},
row: {
marginTop: 20,
flexDirection: 'row',
alignItems: 'center',
},
section: {
flexDirection: 'row',
alignItems: 'center',
marginRight: 15,
},
paragraph: {
fontWeight: 'bold',
marginRight: 3,
},
drawerSection: {
marginTop: 15,
},
});