https://github.com/lewiscasewell/react-native-patterns
React native component library that allows you to build reproducible and abstract patterns. Useful for fallbacks for images, e.g. Avatars or list items
https://github.com/lewiscasewell/react-native-patterns
react-native react-native-skia
Last synced: 5 months ago
JSON representation
React native component library that allows you to build reproducible and abstract patterns. Useful for fallbacks for images, e.g. Avatars or list items
- Host: GitHub
- URL: https://github.com/lewiscasewell/react-native-patterns
- Owner: lewiscasewell
- Created: 2023-11-06T14:49:02.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-04-07T08:33:55.000Z (about 1 year ago)
- Last Synced: 2025-09-26T04:41:27.129Z (9 months ago)
- Topics: react-native, react-native-skia
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-patterns
- Size: 3.23 MB
- Stars: 18
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
```bash
yarn add @shopify/react-native-skia
yarn add react-native-patterns
```
## Usage
### MeshGradient
```tsx
import { MeshGradient } from 'react-native-patterns';
const uniqueKey = 'some-unique-key'; // such as an id
const someNiceColors = ['#51C4D3', '#FF2BF1', '#32FF2B', '#311263'];
function App() {
return (
);
}
```
Or you can also choose to wrap around other components…
```tsx
Hello, world!
```
If using in list, would recommend using with `@shopify/flash-list` for better performance.
### Grid
```tsx
import { Grid } from 'react-native-patterns';
const uniqueKey = 'some-unique-key'; // such as an id
function App() {
return (
);
}
```