This content originally appeared on DEV Community and was authored by Maria Antonella ?
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! ☘
This content originally appeared on DEV Community and was authored by Maria Antonella ?
Maria Antonella ? | Sciencx (2021-09-07T22:26:41+00:00) Making a square photo like Instagram with React Native ✨. Retrieved from https://www.scien.cx/2021/09/07/making-a-square-photo-like-instagram-with-react-native-%e2%9c%a8/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.