CODEWITHSUNDEEP
javascriptreactjsreact-native
securecurve
securecurve

Reputation: 5817

React Native: Background image loads as the last component, albeit it's added first

This is my exact code:

    <Image source={require('./images/person.png')} style={styles.backgroundImage} >

        <View style={styles.container}>
            <Greeting name='Rexxar' />
            <Greeting name='Jaina' />
            <Greeting name='Valeera' />
            <Bananas />
            <Blinking />
        </View>
    </Image>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  backgroundImage: {
    flex: 1,
    resizeMode: 'contain', 
    width : null,
    height : null
  }
}

When I try to add person.png as a background image, it works fine, but the images loads as the last component, which is not a good behavior, since I want the background image to show before everything else. Is there a way to avoid this, or may be I'm doing it wrongly?

Upvotes: 2

Views: 820

Answers (1)

vijayst
vijayst

Reputation: 21856

This can be accomplished by handling the onLoad event of the Image.

<Image 
  source={require('./images/person.png')} 
  style={styles.backgroundImage}
  onLoad={e => this.setState({ viewVisible: true })}
>
  {this.state.viewVisible ?
     <View style={styles.container}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
        <Bananas />
        <Blinking />
     </View>
  : null}
</Image>

Upvotes: 2

Related Questions