React Native: Set React Navigation's Screens Headers

I want to have the tabs from BottomTabsNavigator and the header from StackNavigator in the case of jwt = true.

Do someone know how can I do it?

You can find my navigation jsx below.

If I didn't give sufficient details, please ask me.

Thank you.

<NavigationContainer>  {jwt ? (<Bottom.Navigator><Bottom.Screen        name="ToDoList"        component={Home}        options={{          title: "Not To Do List",          tabBarIcon: ({ color }: any) => (<Icon name="check" color={color} size={28} />          ),        }}      /><Bottom.Screen        name="NotToDoList"        component={NotToDo}        options={{          title: "To Do List",          tabBarIcon: ({ color }: any) => (<FIcon name="ban" color={color} size={28} />          ),        }}      /><Bottom.Screen        name="Profile"        component={Profile}        options={{          tabBarIcon: ({ color }: any) => (<FIcon name="user" color={color} size={28} />          ),        }}      /></Bottom.Navigator>  ) : (<Stack.Navigator><Stack.Screen        name="SignIn"        component={SignIn}        options={{ ...centerTitle("Sign In"), headerLeft }}      /><Stack.Screen        name="SignUp"        component={SignUp}        options={{ ...centerTitle("Sign Up"), headerLeft }}      /></Stack.Navigator>  )}</NavigationContainer>