CODEWITHSUNDEEP
react-nativeflexboxalignment
Boss Nass
Boss Nass

Reputation: 3522

React Native Flex Box Align

I am attempting to align an image within and ImageBackground component though no matter what I do, it doesn't appear to follow the flexbox rules.

Below is the desired result

enter image description here

But I am currently getting

enter image description here

Below is the code I have used

render () {
console.log(this.props.data.attributes.main_image_url)
return (
  <TouchableOpacity onPress={this._handlePress} style={styles.container}>
    <ImageBackground source={{uri: "https:"+this.props.data.attributes.main_image_url}} style={styles.background}>
      <View style={styles.logoContainer}>
        <Image
          // defaultSource={require('../Images/logo-placeholder.png')}
          source={{uri: "https:"+this.props.data.attributes.logo_url}}
          resizeMode="contain"
          style={styles.logo}
        />
      </View>
    </ImageBackground>
  </TouchableOpacity>
)

}

Styles

    container: {
    marginBottom: Metrics.doubleSection,
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'stretch',
  },
  background: {
    height: Metrics.screenWidth / 2,
    width: Metrics.screenWidth-(Metrics.baseMargin*2),
    margin: Metrics.baseMargin
  },
  logoContainer: {
    backgroundColor: Colors.coal,
    justifyContent: 'flex-end',
    alignItems: 'left',
    left: Metrics.doubleBaseMargin,
    height: Metrics.images.xl,
    width: Metrics.images.xl
  },
  logo: {
    height: Metrics.images.xl,
    width: Metrics.images.xl
  }

Upvotes: 1

Views: 232

Answers (1)

Rutvik Bhatt
Rutvik Bhatt

Reputation: 3296

Change your logoContainer style as below set position:'absolute' and set bottom:negative value: 

logoContainer: {
    backgroundColor: Colors.coal,
    justifyContent: 'flex-end',
    alignItems: 'flex-start',
    position:'absolute', // set position to absolute 
    bottom:-10, //give relative value here
    left: Metrics.doubleBaseMargin,
    height: Metrics.images.xl,
    width: Metrics.images.xl
  },

Upvotes: 2

Related Questions