How to make this cards in react-native?

user_15248777 0
Viewed 126

enter image description here

It needs to be spread out at 100 percent, so I need the card width to be in percent.

I have already tried, position and flex but It does not work.

expo react-native
1 Answers

Try this:

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

const win = Dimensions.get('window');
const { width, height } = Image.resolveAssetSource(require("../assets/image.png"));
const a = 0.5;

const App = () => {
  return(
    <View>
      <Image source={require("../assets/image.png")} style={styles.image}>
    </View>
  )

}

const styles = Stylesheet.create({
  image: {
    resizeMode: 'contain',
    width: a * win.width,
    height: (a * win.width)*(height/width),
  }
})

Here we are using the width of the screen to determine what should be the optimum width of the image. You can vary the value of a in order to set desired width %. height is calculated to maintain the aspect ratio of the image.

user_111860830
Related