React Native - invalid prop children - react-native

Question

I've created a few components. One of them should allow nesting however it inexplicably does not (inexplicable because I couldn't find any posts with quite this problem)
There is one image required to run this (it can be replaced with anything)
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { View, StatusBar, StyleSheet, ImageBackground } from 'react-native';
export class PhonyStatusBar extends Component {
render () {
return (
<View style={styles.statusBar} />
);
}
}
export class HomeScreen extends Component {
static propTypes = {
children: PropTypes.string
}
render () {
return (
<View>
{this.props.children}
</View>
);
}
}
export class AppGrid extends Component {
render () {
return (
<View />
);
}
}
export default class App extends Component {
render() {
return (
<View>
{/* hide system status bar */}
<StatusBar hidden={true} />
<PhonyStatusBar />
{/* throw in our own status bar */}
<HomeScreen>
<View />
</HomeScreen>
</View>
);
}
}
const styles = StyleSheet.create({
backgroundImage: {
width:'100%',
height:'100%',
},
statusBar: {
width: '100%',
height: 25.33,
backgroundColor: 'rgba(255, 157, 0, 0.5)'
},
});

Answer 1

In react children is a built in prop, already defined by the library, for components. This is not a prop that you should be defining manually. See this for more detail: https://reactjs.org/docs/jsx-in-depth.html#children-in-jsx
Try removing:
static propTypes = {
children: PropTypes.string
}
from HomeScreen to resolve the issue.