react-native-patterns

A react native component library that allows you to build reproducible abstract patterns for your application.

This library was built using @shopfiy/react-native-skia

Features

• uniqueKey prop allows you to assign a pattern to an id, so that it will be the same every time
• Can blur, or add an overlay, or custom styles
• Works just like a View component
• Written in typescript
• Compatible with expo

Installation

1yarn add @shopify/react-native-skia
2yarn add react-native-patterns

Usage

MeshGradient

1import { MeshGradient } from 'react-native-patterns';
2
3const uniqueKey = 'some-unique-key'; // such as an id
4const someNiceColors = ['#51C4D3', '#FF2BF1', '#32FF2B', '#311263'];
5
6function App() {
7  return (
8    <MeshGradient
9      // required
10      uniqueKey={uniqueKey}
11      width={200}
12      height={200}
13      // optional
14      // default colors are randomly selected
15      colors={someNiceColors}
16      // default black
17      overlayColor="white"
18      overlayOpacity={0.5}
19      blurRadius={0.5}
20      style={{
21        borderRadius: 20,
22      }}
23    />
24  );
25}

Or you can also choose to wrap around other components…

1<MeshGradient
2  uniqueKey="hello-world"
3  width={200}
4  height={200}
5  overlayOpacity={0.5}
6  style={{
7    borderRadius: 20,
8    justifyContent: 'center',
9    alignItems: 'center',
10  }}
11>
12  <Text>Hello, world!</Text>
13</MeshGradient>

If using in list, would recommend using with @shopify/flash-list for better performance.

Grid

1import { Grid } from 'react-native-patterns';
2
3const uniqueKey = 'some-unique-key'; // such as an id
4
5function App() {
6  return (
7    <Grid
8      // required
9      uniqueKey={uniqueKey}
10      width={200}
11      height={200}
12      // optional
13      frontColor="#51C4D3"
14      backColor="#FF2BF1"
15      borderSize={0.5}
16      zoomPercentage={40}
17      mask="none"
18      style={{
19        borderRadius: 20,
20      }}
21    />
22  );
23}