react native combine drawer and tab bottom navigation code example

Example 1: create bottom navigation bar react native

Copyimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
function MyTabs() {  return (    <Tab.Navigator>      <Tab.Screen name="Home" component={HomeScreen} />      <Tab.Screen name="Settings" component={SettingsScreen} />    </Tab.Navigator>  );}

Example 2: react native navigation remove top header screen

// This using the @react-navigation/material-top-tabs from the
// stackoverflow source...
export default class Login extends Component {
    static navigationOptions = {
        header: null
    }
}
// Didn't work for me but it did give me a clue. I ended up
// setting the header to return a basically a blank
setTimeout(() => {
    navigation.setOptions({
      header: () => (
        <View style={{ backgroundColor: "white" }}>
          <Text
            style={[
              { color: "white" },
              Platform.OS === "android" ? { fontSize: 20 } : { fontSize: 1 }
            ]}
          >
            .
          </Text>
        </View>
      )
    });
  }, 1);
// Note: in iOS sumulation, I had to tweak the initial fontSize
// to get it to not show on reload... Hence the addition of the
// setTimeout. Yes there is a blink, but now at least I don't
// have to do the tweak to start with. Not sure if this really
// works on an iOS device. Don't have a real one to test on.

Example 3: android hide and show bottom navigation

public class BottomNavigationViewBehavior extends CoordinatorLayout.Behavior<BottomNavigationView> {

private int height;

@Override
public boolean onLayoutChild(CoordinatorLayout parent, BottomNavigationView child, int layoutDirection) {
    height = child.getHeight();
    return super.onLayoutChild(parent, child, layoutDirection);
}

@Override
public boolean onStartNestedScroll(@NonNull CoordinatorLayout coordinatorLayout,
                               BottomNavigationView child, @NonNull 
                               View directTargetChild, @NonNull View target,
                               int axes, int type)
{
    return axes == ViewCompat.SCROLL_AXIS_VERTICAL;
}

@Override
public void onNestedScroll(@NonNull CoordinatorLayout coordinatorLayout, @NonNull BottomNavigationView child,
           @NonNull View target, int dxConsumed, int dyConsumed,
           int dxUnconsumed, int dyUnconsumed, 
            @ViewCompat.NestedScrollType int type)
{
   if (dyConsumed > 0) {
       slideDown(child);
   } else if (dyConsumed < 0) {
       slideUp(child);
   }
}

private void slideUp(BottomNavigationView child) {
    child.clearAnimation();
    child.animate().translationY(0).setDuration(200);
}

private void slideDown(BottomNavigationView child) {
    child.clearAnimation();
    child.animate().translationY(height).setDuration(200);
}