CODEWITHSUNDEEP
reactjsreact-native
Dovid
Dovid

Reputation: 76

React Native SVG expand to fill container

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

Upvotes: 2

Views: 289

Answers (1)

Becca
Becca

Reputation: 136

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

Upvotes: 1

Related Questions