Border radius not fitting properly on the image (React Native)-CodePudding

import React from 'react'
import { Dimensions, Image, StyleSheet, View } from 'react-native'

const GameOverScreen = () => {
  return (
      <View style={styles.screen}>
          <View style={styles.imageContainer}>
            <Image
              source={{uri: 'https://www.photocircle.net/public/uploads/photos/thumbnail_1000x1000/99732-You-Got-This-rose--by-photocircle-.jpg'}} 
              style={styles.image} 
            />
          </View>
      </View>
  )
}

export default GameOverScreen

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  imageContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: Dimensions.get('window').width > 400 ? 150 : 100,
    borderWidth: 2,
    marginVertical: 15,
    overflow: 'hidden'
  },
  image: {
    width: Dimensions.get('window').width > 400 ? 300 : 200,
    height: Dimensions.get('window').height > 700 ? 300 : 200,
    borderRadius: Dimensions.get('window').width > 400 ? 150 : 100,
  }
})

The above code currently renders the following output (for larger screen sizes like iPhone 11)

The following is for smaller devices like iPhone 8

As can be seen here, there is extra white spaces along the right and left sides of the image, which is not desirable. Also, the border up and down the image looks like a flat line rather than circle. How to properly fixed this so that the border sticks to the circular image?

CodePudding user response：

Give height and width by comparing same value instead compare and give height and width according to window height and width. For example, try below styling

  imageContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 300, // Border radius can be any value higher than half of the height/width to get circle shape, so no need to compare
    borderWidth: 2,
    marginVertical: 15,
    overflow: 'hidden'
  },
  image: {
    width: Dimensions.get('window').width > 400 ? 300 : 200,
    height: Dimensions.get('window').width > 400 ? 300 : 200, // compare with same value as width results height and width same to get circle shape
    borderRadius: 300 // like mentioned above
  }

CodePudding user response：

Try below code:

import React from 'react'
import { Dimensions, Image, StyleSheet, View } from 'react-native'

const GameOverScreen = () => {
  return (
      <View style={styles.screen}>
          <View style={styles.imageContainer}>
            <Image
              source={{uri: 'https://www.photocircle.net/public/uploads/photos/thumbnail_1000x1000/99732-You-Got-This-rose--by-photocircle-.jpg'}} 
              style={styles.image} 
            />
          </View>
      </View>
  )
}

export default GameOverScreen

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  imageContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: Dimensions.get('window').width/2,
    borderWidth: 2,
    marginVertical: 15,
    overflow: 'hidden'
  },
  image: {
    width: Dimensions.get('window').width/2,
    height: Dimensions.get('window').width/2,
    borderRadius: Dimensions.get('window').width/2,
  }
})