How to pass Screen Name to another component - reactjs

Question

I have a common Header component. How can I pass 'Screen Name' to this component?
I want to pass the 'Screen Name' from Home to HeaderStyle.
I want to use the headerstyle in other component and pass 'Screen Name' to the headerstyle
import HeaderStyle From './HeaderStyle '
export default class Home extends Component {
render (){
return (
// <HeaderStyle>Screen Name</HeaderStyle>
<HeaderStyle Name={"Screen Name"}/>
<HeaderStyle />
)
}
export default class HeaderStyle extends Component {
render() {
return (
<View>
<Header >
<View style={{
width: width, height: hp('12%'),
flexDirection: 'row', backgroundColor: '#141414'
}} >
<Left>
<Image style={styles.logo}
source={require('../assets/images/1x/logo.png')}>
</Image>
</Left>
<View style={{ marginLeft: 280, marginTop: 20 }}>
<Text style={{ color: 'white', fontSize: 35, fontWeight: 'bold' }}>
Should be Dynamic Screen Name</Text></View>
<Right>
<TouchableOpacity onPress={this.ShowHideComponent2}>
<Image style={styles.imgsearch} source={require('../assets/test/a.png')}>
</Image>
</TouchableOpacity>
</Right>
</View>
</Header>
{this.showAssests()}
</View>
);
}
}

Answer 1

Create a function and read window.location.pathname , then in Header component render that function, for Example
export default function currentScreenName(){
let screenName = '';
switch(window.location.pathname){
case '/employees':
screenName = 'Employees';
break;
case '/admin':
screenName = 'Admin';
break;
default:
screenName = 'Dashboard';
}
return screenName;
}
//Header.js
<h1>{currentScreenName()}</h1>

Answer 2

You can simply pass the header prop in static navigationOptions directly inside the screen component.
For example
In your screen component
class HomeScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
header: <HeaderStyle Name={"Screen Name"}/>
};
/* render function, etc */
}
Inside HeaderStyle component use the props in the Text
<Text style={{ color: 'white', fontSize: 35, fontWeight: 'bold' }}>
{this.props.Name}
</Text>
Find more information on header customisation here

Answer 3

thanks a lot i solve the problem
in the home Screen i send the screen name like this
<Headerstyle title={"text"} />
and in the HeaderStyle i receive the title like this
<Text >{this.props.title}</Text>