Making a square photo like Instagram with React Native ✨

Posted on

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
Enter fullscreen mode

Exit fullscreen mode

✨ 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! ☘

screen with square picture

Leave a Reply

Your email address will not be published.