I'm going to share with you something I learned today! I needed to show some pictures in a project I'm working on, in a square form. Like Instagram.
Researching, I found that with just one attribute I could achieve what I wanted! (bless you stackoverflow!) and discovered that there is a simple way to solve it.
The magic is on aspectRatio: 1
πΎπ First of all, React Native has support for creating styles on components with a fixed proportion. Using this is useful, for example, if you want to have a component that always has the same shape (as I needed!).
πΎπ Second: the ratio is defined by the width : height
πΎπFinally here we go: setting the aspect ratio to 1 cause the view to be square: aspectRatio: 1
Here is an example of code.
import React from "react";
import { StyleSheet, View, Image } from "react-native";
const SquareComponent= () => {
return (
<View style={styles.squareRatio}>
<Image
source={{
uri: "https://wallpaperaccess.com/full/317501.jpg",
}}
</View>
);
};
const styles = StyleSheet.create({
squareRatio: {
width: '95%,
aspectRatio: 1
}
});
export default SquareComponent
β¨π This is because the ratio is defined by the width : height. 1 : 1 means the width and height are the same.
β¨ For example, if you want a view which is 16:9 (the standard TV widescreen ratio) you can set this property: aspectRation: 16 / 9
The same for other aspect ratios.β¨
β¨ You could do the same with components and views, not only with images :)
Here is my result! β¨π and so simple! β
Top comments (3)
Nice π
Thanks ! :)
ππ