CODEWITHSUNDEEP
androidiosreact-native
sebap
sebap

Reputation: 1691

React Native : Is it possible to have a Navigator inside a View?

Because when I do so, nothing is rendered. The final idea is to have a common background image for the whole app. I tried to wrap Navigator inside Image, same result.

<View style={styles.container}>
  <Image source={pic} style={styles.backgroundImage}></Image>
  <Navigator
    configureScene={this.configureScene}
    style={styles.app}
    initialRoute={{ component: Main }}
    renderScene={this.renderScene}
  />
</View>

Upvotes: 4

Views: 1769

Answers (2)

Taylor Page
Taylor Page

Reputation: 125

Just add flex: 1 to your View's style. Bada bing bada boom.

<View style={{ flex: 1 }}>
   <Navigator
     configureScene={this.configureScene}
     style={styles.app}
     initialRoute={{ component: Main }}
     renderScene={this.renderScene}
   />
 </View>

Upvotes: 12

sebap
sebap

Reputation: 1691

What puts me into error was that if container of navigator got align-items:center, I don't see it. Don't know why yet. But I'm fine enough with this solution.

<Image source={pic} style={styles.backgroundImage}>
            <Navigator
              configureScene={this.configureScene}
              style={styles.app}
              initialRoute={{ component: Main }}
              renderScene={this.renderScene}
            />
          </Image>

Style:

app: {
    flex: 1
  },
  backgroundImage: {
    flex: 1,
    justifyContent: 'center',
    //alignItems: 'center'
  }

Upvotes: 3

Related Questions