The icon is an SVG using react-native-svg. I need it to keep aspect ratio and expand to fill the parent container. What do I do?
<View style={styles.container}>
<TouchableOpacity style={styles.closeContainer} onPress={onClose}>
<IconClose style={styles.closeIcon} />
</TouchableOpacity>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
},
closeContainer: {
paddingHorizontal: 26,
},
closeIcon: {
flex: 1,
},
})
CodePudding user response:
You can use the aspectRatio property on the parent as well as the icon. Something like
<View style={styles.container}>
<TouchableOpacity style={styles.closeContainer} onPress={onClose}>
<IconClose style={styles.closeIcon} />
</TouchableOpacity>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
},
closeContainer: {
paddingHorizontal: 26,
aspectRatio: 375 / 200,
},
closeIcon: {
flex: 1,
aspectRatio: 375 / 200,
},
})