How can I have a custom navigation component in react-native-navigation Stack? - react-native

Question

I'm trying:
export default function Navigator() {
return (<>
<Stack.Navigator screenOptions={{
headerShown: false
}} initialRouteName="Home" >
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Feed" component={FeedScreen} />
</Stack.Navigator >
<CustomTabBar />
</>
);
}
And:
export const CustomTabBar = () => {
const onHomePress = () => { }
return (
<SafeAreaView style={styles.safeAreaView}>
<View style={styles.navContainer}>
<View style={{ flex: 1 }}>
<Avatar rounded source={{ uri: 'https://source.unsplash.com/random/100x100?profile picture,smile' }} containerStyle={styles.avatar} />
</View>
<View style={{ flex: 1 }}>
<Chip
title={<View style={styles.pillContainer}>
<Ionicons name='search' color='white' />
<TouchableOpacity onPress={onHomePress}>
<Ionicons name='ios-home' color='white' />
</TouchableOpacity>
<Ionicons name='planet' color='white' />
</View>}
type="outline"
containerStyle={styles.chipContainer}
/>
</View>
<View style={{ flex: 1 }}>
<Animated.View style={styles.btnCircle}>
<TouchableOpacity
style={{
flex: 1,
justifyContent: 'center'
}}
onPress={() => Alert.alert('Click Action')}>
<Ionicons name={'paper-plane-outline'} color={'white'} size={25} />
</TouchableOpacity>
</Animated.View>
</View>
</View>
</SafeAreaView>
);
}
If I move the CustomTabBar inside the Stack.Navigator, we get an error.
but this creates the white area at the bottom:
How can I have my custom navigation element?

Answer 1

StackScreen at custom bottom tab bar is not bad idea.
If you want custom bottom tab bar for use custom tabbar, actually still you can use BottomTabBar but if you want use stack screens, try like this.
<>
<NavigationContainer>
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name={"TestScreen"} component={TestScreen} />
</Stack.Navigator>
</NavigationContainer>
{/* custom tab bar */}
<View
style={{
position: "absolute",
bottom: 0,
width: "100%",
alignItems: "center",
}}>
<Text>TEST</Text>
<Text>TEST</Text>
<Text>TEST</Text>
<Text>TEST</Text>
</View>
</>
In your case, White Space is'nt custom tab bar's background. And stack screen's height is not "100%".
So In case, you can use position: "absolute", bottom: 0 then screen get full area, and cover the deault background(whitespace).