passing a prop from index into header component - react-native

Question

I'm following a udemy tutorial on react-native.
I'm trying to pass a prop from my index.js into my header.js. The header should say, "Albums". But is is always showing up blank.
If I remove {props.headerText} from header.js and replace it with
"Albums"
then it works. But I'm trying to make the component reusable per the tutorial instructions.
note: I'm using Create React Native App and this is on an android emulator.
App.js
import React from 'react';
import { View } from 'react-native';
import Header from './src/components/header';
export default class App extends React.Component {
render() {
return (
<Header />
);
}
}
index.js
import React from 'react';
import { Text, AppRegistry } from 'react-native';
import Header from './src/components/header';
const App = () => (
<Header headerText={'Albums'} />
);
AppRegistry.registerComponent('albums', () => App);
header.js
import React from 'react';
import { Text, View } from 'react-native';
const Header = (props) => {
const { textStyle, viewStyle } = styles;
return (
<View style={viewStyle}>
<Text style={textStyle}>{props.headerText}</Text>
</View>
);
};
const styles = {
viewStyle: {
justifyContent: 'center'
},
headerStyle: {
fontSize: 20
}
};
export default Header;
Am I missing anything? I've been over and over each file line by line and I can't find any issues.
Thanks!

Answer 1

I would suggest you
const Header = ({props}) => {
const { textStyle, viewStyle } = styles;
return (
<View style={viewStyle}>
<Text style={textStyle}>{props.headerText}</Text>
</View>
);
};
And to pass props ;
const App = () => (
<Header props={someProps} />
);