How to make hexagon shape image in react native? - react-native

Question

I want to make hexagon shape image like as below image but didn't find any perticular way to make it customized.
Here is the image:
Suggest any library to make it possible in react-native.

Answer 1

So I thought that the usage of a hexagon path was so common that finding an existing one online would be a simple task, but searches proved to be fruitless so I decided to make a function that would make a regular hexagon Skia Path. I found a really cool quora answer on how to get the points any size hexagon(regular hexagon), and then I just connect the points:
import {Skia} from "#shopify/react-native-skia";
function makeHexagonPath(size, offset) {
const path = Skia.Path.Make();
let [xOffset, yOffset] = offset || [0, 0];
if (!size) size = 10;
// https://www.quora.com/How-can-you-find-the-coordinates-in-a-hexagon
const halfed = size / 2;
const sqrt = (Math.sqrt(3) * size) / 2;
const points = [
[size, 0], //a
[halfed, sqrt], //b
[-halfed, sqrt], //c
[-size, 0], //d
[-halfed, -sqrt], //e
[halfed, -sqrt], //f
].map(([x, y]) => [x + xOffset, y + yOffset]);
console.log(points);
path.moveTo(...points[0]);
points.forEach((point) => path.lineTo(...point));
path.close();
return path;
}
With the makeHexagonPath function you draw a clipping of any size and use the offset parameter to move the hexagon to desired location:
const imageSize = 200
export default function ClipImage({imageSrc}) {
const image = useImage(imageSrc);
const hexagonSize = imageSize / 2;
const path = makeHexagonPath(hexagonSize, [hexagonSize, hexagonSize]);
if (!image) return null;
return (
<Group clip={path}>
/*<Path path={path} color="lightblue" />*/
<Image
image={image}
fit="cover"
x={0}
y={0}
width={imageSize}
height={imageSize}
/>
</Group>
);
}
I would post an expo snack demoing it but react-native-skia wasnt working for me on expo but in the default react-native environment it worked like a charm