React Native SVG expand to fill container

user_13589440 0
Viewed 71

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,
  },
})
react-native reactjs
1 Answers

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,
  },
})
user_134425290
Related