how to add components in the header

[silli]

hi, I created the project with expo, react-tab, in the header in addition to the name of the site / project I would like to try to insert components.
For example I would like to put the clickable logo or a button to try how it works.

The default code that I would like to modify is this:

function getHeaderTitle(route) {
  const routeName = route.state?.routes[route.state.index]?.name ?? INITIAL_ROUTE_NAME;

  switch (routeName) {
    case 'Home':
      return 'Homepage';
    case 'Links':
      return 'Menu';
  }
}

You can read the complete code of the page here:
https://paste.notify.me/sakifadiya.coffeescript

How to do something like this:

function getHeaderTitle(route) {
  const routeName = route.state?.routes[route.state.index]?.name ?? INITIAL_ROUTE_NAME;

  switch (routeName) {
    case 'Home':
        return (
        <Image
        source={
          __DEV__
          ? require('../assets/images/logo.png')
          : require('../assets/images/logo.png')
        }
        style={styles.welcomeImage}
        />
      );
    case 'Links':
      return 'Menu';
  }
}

Thank you

[akumau1]

Are you using react-navigation to switch between different pages?

[silli]

The concept is not yet completely clear to me, but the pages generated by default by the react-tabs project have the following import in app.js

import { NavigationContainer } from ‘@react-navigation/native’;
import { createStackNavigator } from ‘@react-navigation/stack’;
import BottomTabNavigator from ‘./navigation/BottomTabNavigator’;

This is the app.js file:
https://paste.notify.me/qafaguveko.js

In the new pages that I personally created I fetch a call that I manage with switches and routes

[akumau1]

@silli
So the react navigation documentation is probably some of the nicest documentation out there: https://reactnavigation.org/docs/header-buttons . I strong advise you spend some time there, as they really do explain stuff well. Let me try to explain too.

Here you will see that you can do something like this to add buttons to your navigation header (copied from their website):

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerTitle: props => <LogoTitle {...props} />,
          headerRight: () => (
            <Button
              onPress={() => alert('This is a button!')}
              title="Info"
              color="#fff"
            />
          ),
        }}
      />
    </Stack.Navigator>
  );
}

How it works is that each time you call create a component <Stack.Screen>...</Stack.Screen> you designate one screen inside of your stack navigator. You can think of your stack navigator as a big tree of routes, with each route leading towards a screen. Inside the Stack.Screen component you then designate whatever you want to customise on that screen.

https://reactnavigation.org/docs/stack-navigator#options shows you all the options you can add within one screen to make it look and behave the way you want to.

You can designate react native components as the left, right, or title of the header using something like the headerRight: ... part in the code segment above. It can be any type of react native component, but usually it’s best to stick with Icons, buttons, or some or other formatted text, to prevent overly complicated behaviour.

I hope this helps.

[silli]

thanks you were very kind, I managed to add a logo and a button in the header:
if anyone is interested this is the file:
https://paste.notify.me/emesubefaj.coffeescript

one thing that confused me is that this file, in the default react-tabs example, is called BottomTabNavigator.js but it also manages the header.

[akumau1]

Any of the navigators in react navigation acts the controller/manager for an entire set of pages.

• Bottom tab navigation lets you switch between screens using tabs at the bottom of the screen.
• Stack navigator lets you navigate between screens using buttons (usually)
• Drawer navigator lets you use the classic “pop out drawer” to navigate between pages.

You can also nest these navigators to get the desired effect, such as using a drawer navigator as well as a tab navigator.
All that said and done - the navigator that you choose determines how to reach that specific page as well as the other pages you set up in the navigator, but it also determines things such as the header, transition animation, etc. You can manually go and disable/change the header or go and tweak the transition animations. The navigator doesn’t just do navigation - that’s what makes react navigation so great.

[silli]

You have been clear, i will read the documentation carefully.

From what I see, in my case, bottomTabNavigator also has the task of setting the header, I think it’s a nested navigator if I’m not mistaken. But I could set it elsewhere.

I am very attracted to react, especially for the possibility of using expo facilitating the simultaneous development of web / android / ios, but I must admit that it is more complicated than other front-end languages