Question 73654 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Passing property to custom header component – Reactjs

In a tab navigator I am defining I have access to the current active tab via props.children if I pass props to my CustomHeader like so:

headerTitle: (props) => <CustomHeader {...props} />

… However, the issue is that in this scenario the navigation object is not part of props. And, to clarify, the navigation object is coming in from outside this component.

If, on the other hand, I pass props like this:

headerTitle: () => <CustomHeader {...props} />

… then I do have the navigation object as part of props, but I no longer have access to props.children.

My question is, how can I have access to both within my CustomHeader?

Here is the bottomTabNavigator code:

export const ClientBottomTabNavigator = (props) => {
  const Tab = createBottomTabNavigator();
  return (
    <Tab.Navigator
      screenOptions={{
        headerShown: true,
        headerStyle: {
          backgroundColor: Colors.primary,
          elevation: 0,
          shadowOpacity: 0,
          shadowColor: 'transparent',
          height: 155,
        },
        headerShadowVisible: false,
        tabBarStyle: { backgroundColor: Colors.primary },
        headerTintColor: Colors.light,
        headerTitle: () => <CustomHeader {...props} />,
        tabBarActiveTintColor: Colors.light, 
        tabBarInactiveTintColor: Colors.lightInactive,
        tabBarActiveBackgroundColor: Colors.primary,
        tabBarInactiveBackgroundColor: Colors.primary,
      }}
      initialRouteName={'Sessions'}
    >
      <Tab.Screen
        name='Sessions'
        component={SessionsTab}
        options={{
          tabBarLabel: 'SESSIONS',
          tabBarIcon: ({ color, size }) => <FontAwesome name='street-view' color={color} size={size} />,
        }}
      />
      <Tab.Screen
        name='Chart'
        component={ChartTab}
        options={{
          tabBarLabel: 'CHARTS',
          tabBarIcon: ({ color, size }) => <FontAwesome name='id-badge' color={color} size={size} />,
        }}
      />
      <Tab.Screen
        name='Goals'
        component={GoalsTab}
        options={{
          tabBarLabel: 'EDIT GOALS',
          tabBarIcon: ({ color, size }) => <FontAwesome name='trophy' color={color} size={size} />,
        }}
      />
    </Tab.Navigator>
  );
};

And here is the CustomHeader code:

const CustomHeader = (props) => {
  const patient = useSelector(selectActivePatient);
  const dispatch = useDispatch();
  return (
    <View>
      <View style={{ width: '100%', flexDirection: 'row', justifyContent: 'space-between', marginBottom: 4 }}>
        <Feather
          name='chevron-left'
          size={24}
          onPress={() => {
            props.navigation.navigate('Main'); // Here is where I want to be able to customize the back button based on the currentTab
          }}
          color={styles.colors.textInverse}
          style={{ minWidth: '8%', justifySelf: 'flex-start', alignSelf: 'flex-start' }}
        />
        <Text
          style={{
            color: Colors.light,
            fontSize: 18,
            alignSelf: 'center',
            justifySelf: 'center',
            fontWeight: 'bold',
          }}
        >
          {patient?.firstName} {patient?.lastName}
        </Text>
        <Feather
          name='' // Leave this blank
          style={{ minWidth: '8%', justifySelf: 'flex-end', alignSelf: 'flex-end' }}
        />
      </View>

      <View style={{ alignItems: 'center', paddingBottom: 6 }}>
        <Text style={{ color: '#fff', fontSize: 18, marginBottom: 6 }}>{convertService(patient?.service)}</Text>
        <View>
          <TextInput
            style={{
              color: Colors.light,
              fontSize: 16,
              width: '100%',
              textAlign: 'center',
            }}
            placeholder='Add a note...'
            placeholderTextColor={styles.colors.textPlaceholder}
            maxLength={50}
            onChangeText={(text) => dispatch(updateNote(patient?.id, text))}
            defaultValue={patient?.note?.value}
          />
        </View>
      </View>
    </View>
  );
};
Tags:

2

Answers


  1. 0

    Pass it as a separate property, for example like this:

    export const ClientBottomTabNavigator = (props) => {
  const currentTab = props.children; // This is the current tab value I want to pass
  const Tab = createBottomTabNavigator();
  return (
    <Tab.Navigator
      screenOptions={{
...
        headerTitle: (props) => <CustomHeader {...props} currentTab={currentTab} />, // I want to pass it here
...
      }}
      initialRouteName={'Sessions'}
    >
...
    </Tab.Navigator>
  );
};
    Login or Signup to reply.
  2. 0

    You could give the CustomHeader some kind of title prop and pass the children of the headerTitle props.

    export const ClientBottomTabNavigator = (props) => {
  const currentTab = props.children;
  const Tab = createBottomTabNavigator();
  return (
    <Tab.Navigator
      screenOptions={{
        headerTitle: (headerProps) => (
          <CustomHeader {...props} title={headerProps.children} />
        ),
      }}
      initialRouteName={"Sessions"}
    >
      ...
    </Tab.Navigator>
  );
};

    And in the CustomHeader

    export default function CustomHeader(props) {
  return (
    <View>
      <Text>{props.title}</Text>
    </View>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search