React-native: Component not rendering

Question

I have a map component which renders when I invoke the following method:

render() {
    return (
      <MapComponents />
    )
  }

However, I want to create invoke <MapComponents /> from within <View>, like this:

render() {
    return (
      <View>
      <MapComponents />
      </View>
    )
  }

At this point, I get a blank screen. Any ideas why this might be?

Answer 1

You need to add flex: 1 to the parent so it takes up all the available space:

render() {
  return (
    <View style={{ flex: 1 }}>
      <MapComponents />
    </View>
  )
}