score:3

Accepted answer

you render both components, the right and left and you put an if condition inside state.

header component render method

render() {
  const { leftorright } = this.props // right - true, left - false
  return(
    ...
    { leftorright ? <righticon />  : <lefticon />}
  );

}

inside component that calls header

import header from './somepath ...';

class something extends react.component {
   this.state = { leftorright }

   render() {
     return(
        <header leftorright = {this.state.leftorright}/>
     );
   }
}

you could have a function that sets leftorright in your parent class

score:0

one way to do this is write a header component and pass all the things, as props, which you can then access them in header components props like..

    <header title="headertitle" 
            leftbuttontitle="leftbutton" 
            rightbutton={canbeaobjectwithsomeinfo} 
            leftbuttonclick={handleclick} /> 

and then in your header component(can be class or a function)

const header = ({}) => (
  <view>
    <view onpress={this.props.handleclick}>{this.props.leftbutton}</view>
    <view>{this.props.title}</view>
    <view onpress={this.props.handlerightclick}>{this.props.rightbutton}</view>
  </view>
)

something like this you can have and then you can design header accordingly

score:2

i guess you can always use a render prop that way you can not only decide whether to render left/right icon component but the component rendering the icon does not even have to know what to render:

the term “render prop” refers to a simple technique for sharing code between react components using a prop whose value is a function.

return (
  <view style={styles.container}>
    <header
      headertext={"barcode scanner"}
      renderrighticon={() => (
        <touchablehighlight righticon>
          <ionicons name="md-barcode" size={36} color="white" />
        </touchablehighlight>
      )}
    />
  </view>
);

then you can use call the right icon as a function:

return (
  <view style={viewstyle}>
    <text style={textstyle}>{this.props.headertext}</text>
    {renderlefticon && (
      <view style={leftbutton}>
        {renderlefticon()}
      </view>)
    }
    {renderrighticon  && (
      <view style={rightbutton}>
        {renderrighticon()}
      </view>)
    }
  </view>
);

Related Query

More Query from same tag