CODEWITHSUNDEEP
react-nativereact-navigationexpo
roshambo
roshambo

Reputation: 2794

React Native Multiple HeaderRight Buttons Inside Navigator

I am wanting to display two buttons on the headerRight nav options, however, react-navigation-header-buttons does not seem to allow multiple header button components to be used only one. I want to manage some state with one component which doesn't work since I am in my navigator file / hooks do not work as its not a functional component.

Docs :

This approach obviously won't work:

headerRight: (
<HeaderButtons HeaderButtonComponent={SoundButton}>
  <Item
    title="Sound" //key
    color="white"
  />
</HeaderButtons>
<HeaderButtons HeaderButtonComponent={ShareButton}>
   <Item
     title="Share" //key
     color="white"
   />
</HeaderButtons>
),

Neither this approach:

headerRight: (
<HeaderButtons>
      <Item
        title="Sound" //key
        color="white"
        ??? component to call - ButtonElement = ?
      />
      <Item
        title="Share" //key
        color="white"
         ??? component to call - ButtonElement = ?
      />
</HeaderButtons>
)

SoundButton:

//React Deps
import React from "react";
import { HeaderButton } from "react-navigation-header-buttons";
import { useDispatch, useSelector } from "react-redux";

//Store
import * as soundActions from "../store/actions/sound-action";

//Misc
import { Ionicons } from "@expo/vector-icons";

const CustomHeaderButton = props => {
const sound = useSelector(state => state.sound.soundState);

const dispatch = useDispatch();

const soundButton = () => {
  dispatch(soundActions.toggleSound(sound));
};

  return (
    <HeaderButton
      {...props}
      IconComponent={Ionicons}
      iconSize={23}
      iconName={sound === "playing" ? "ios-volume-high" : "ios-volume-off"}
      onPress={soundButton}
    />
  );
};

export default CustomHeaderButton;

ShareButton:

//React Deps
import React from "react";
import { Share } from "react-native";
import { HeaderButton } from "react-navigation-header-buttons";

//Misc
import { Ionicons } from "@expo/vector-icons";

const CustomHeaderButton = props => {

  const shareButton = async () => {
    try {
      const result = await Share.share({
        message:
          "Message"
      });

      if (result.action === Share.sharedAction) {
        if (result.activityType) {
          // shared with activity type of result.activityType
        } else {
          // shared
        }
      } else if (result.action === Share.dismissedAction) {
        // dismissed
      }
    } catch (error) {
      console.log(error.message);
    }
  };

  return (
    <HeaderButton
      {...props}
      IconComponent={Ionicons}
      iconSize={23}
      iconName="md-share"
      onPress={shareButton}
    />
  );
};

export default CustomHeaderButton;

Wondering what alternatives I have? Thanks

Upvotes: 1

Views: 4074

Answers (2)

Gaurav Roy
Gaurav Roy

Reputation: 12215

You can achieve something like this,

The header component , and you can add as many components in the header:

export default class ProAppHeader extends Component {
render() {
    return (
      <View style={{
        shadowColor: 'rgba(89, 89, 89,0.2)',
        shadowOffset: {
          width: 40,
          height: 40
        },
        shadowRadius: 40,
        elevation:10
      }}>
      <Header>
        <Left style={{ flex: 1 }}>
          <Button transparent onPress={() => this.handleBackClick()}> // here you can use this.props.navigation.goBack() 
            <Icon name='arrow-back' />
          </Button>
        </Left>
        <Body>
          <Title>{this.props.title}</Title>
        </Body>
        <View style={{ flex: 1 }} />
      </Header>
      </View>
    );
  }

}

and in your normal class where you want the headers , just import the class and use it at the top.

<ProAppHeader title="Profile" navigation={this.props.navigation} />

Upvotes: 1

roshambo
roshambo

Reputation: 2794

My bad simple solution provided by @Gaurav Roy. Just refactored my components to be custom and not depend on HeaderButtons component.

 headerRight: (
 <View style={{flexDirection:"row"}}>
  <ShareButton />
  <SoundButton />
 </View>
 )

Thanks

Upvotes: 13

Related Questions