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

Issue

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?

Solution

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).

Answered By - PaleRedDot
Answer Checked By - - Mary Flores (ReactFix Volunteer)