0

I'm using React native for make an app, and I'm using ImageBackground component to insert an image, like a card. The problem: when I insert images with different resolution my borderRadius changes and this differ to others, I'm looking for inserting images with different resolutions in my card and keep the border radius equal but this not work.

 <ImageBackground
        source={{ uri: item.image}}
        style={{
          height: SCREEN_HEIGHT * 0.14,
          width: SCREEN_WIDTH * 0.6,
          marginRight: 15,
          marginLeft:5,
        }}
        imageStyle={{borderRadius: 10}} // border radius for HEREE!!!!!
        resizeMode={'stretch'}
      >
        <View style={{
          height: (SCREEN_HEIGHT * 0.15)/2.5,//Here we need to specify the height of blurred part
          overflow: 'hidden',
          width: '100%',
          position: 'absolute',
          bottom: 0,
          borderRadius: 15 //borderRadius for  blur effect container
        }}>
          <ImageBackground
            source={{ uri: item.image}}
            blurRadius={10}
            style={{
              height:  SCREEN_HEIGHT * 0.15,
              width: '100%' ,// SCREEN_WIDTH * 0.6,
              position: 'absolute',
              bottom: 0,
              justifyContent: 'flex-end'
            }}
            resizeMode={'stretch'}
          >
            <View style={{marginBottom: 10}}>
              <TextContainer>{item.name}</TextContainer>
              <ButtonArrow>
                <ArrowRight name="arrow-forward-outline" size={normalize(15)}/>
              </ButtonArrow>
            </View>
          </ImageBackground>
        </View>
      </ImageBackground>

Result: my cards has different radius, any suggestion?

IMAGE: [1]: https://i.stack.imgur.com/2XNoa.png

Antonio Rodríguez
  • 75
  • 1
  • 6

1 Answers1

0

The solution was change the resizeMode from Stretch to cover, however this applied variations in how I see the image

Antonio Rodríguez
  • 75
  • 1
  • 6
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 20 '22 at 00:05