How to set auto height for View with Navigator inside?

Question

I use the default components View and Navigator. Wrapping the Navigator inside a View, I want it to automatically get the height of the content (Navigator), but if I don't set an explicit height for the View component - the Navigator does not show, as if it had position: absolute.

If I add a Text component inside a View - the View automatically gets the height from the child Text component. But if I set 'height: auto' for View - this property doesn't work.

render() {
  return (
    <View style={{height: 'auto', backgroundColor: 'powderblue'}}>
      <Navigator
        initialRoute={{ title: 'My Initial Scene', index: 0 }}
        renderScene={(route, navigator) => {
          return (
            <MyScene title={route.title} />
          )
        }}
      />
    </View>
  )
}

Answer 1

style={{height:'auto'}} will not work. You must use an integer or use flex. Here you can see an example of the options.

https://facebook.github.io/react-native/docs/height-and-width.html

Your code will look like this:

render() {
        return (
            <View style={{flex:1, backgroundColor: 'powderblue'}}>
                <Navigator
                    style={{flex:1}}
                    initialRoute={{ title: 'My Initial Scene', index: 0 }}
                    renderScene={(route, navigator) => {
                        return (
                            <MyScene
                                title={route.title}
                            />
                        )
                    }

                    }
                />
            </View>
        )
    }