hoaphantn7604 / react-native-curved-bottom-bar

A high performance, beautiful and fully customizable curved bottom navigation bar for React Native.
MIT License
485 stars 100 forks source link

Support screen options #55

Open Ahmadhmaid777 opened 1 year ago

Ahmadhmaid777 commented 1 year ago

Curved-bottom-bar should support screen options so i can pass options to CurvedBottomBar screen like this example

<CurvedBottomBar.Screen name={SCREEN_KEYS.PROFILE} position="RIGHT" component={ProfileScreen} options={{headerShown: false}} />

ducpt-bili commented 1 year ago

+1 I want do disable header, but not found the way to do it.

ducpt-bili commented 1 year ago

I found the way to do that. on CurvedBottomBar.Navigator i add: screenOptions={{ headerShown: false, }} and it work.

Ahmadhmaid777 commented 1 year ago

I found the way to do that. on CurvedBottomBar.Navigator i add: screenOptions={{ headerShown: false, }} and it work.

That's good for make header hidden in all screens but I can't hide header for specific screen or add different title for every screen

ozdemiremrah commented 1 year ago

Also

screenOptions={{ tabBarHideOnKeyboard: true }}

not working.

draturi95 commented 1 year ago

@ozdemiremrah

I'm facing the same issue.

Did you find a way to make the bottom navigator disappear for the case where the keyboard is enabled?

ozdemiremrah commented 1 year ago

@draturi95 I have listen Keyboard events didShow and didHide

here is my code.

const bottomBarRef = useRef();

  useEffect(() => {
    const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
      //console.log('keyboardDidShow')
      bottomBarRef.current.setVisible(false)
    });
    const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
      //console.log('keyboardDidHide') 
      bottomBarRef.current.setVisible(true)
    });

    return () => {
      showSubscription.remove();
      hideSubscription.remove();
    };
  }, []);

....
<CurvedBottomBar.Navigator
        ref={bottomBarRef}
        ...
        />
julekgwa commented 1 year ago

I found the way to do that. on CurvedBottomBar.Navigator i add: screenOptions={{ headerShown: false, }} and it work.

This's not the way, the original support hiding individual headers but this one doesn't seem to support it.