Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xantredev/react-native-skia-ui
Cross platform UI primitives implemented with `@shopify/react-native-skia`
https://github.com/xantredev/react-native-skia-ui
components react-native reanimated skia
Last synced: 16 days ago
JSON representation
Cross platform UI primitives implemented with `@shopify/react-native-skia`
- Host: GitHub
- URL: https://github.com/xantredev/react-native-skia-ui
- Owner: XantreDev
- License: mit
- Created: 2024-03-09T11:01:56.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-06-02T14:54:03.000Z (7 months ago)
- Last Synced: 2024-12-08T20:39:09.009Z (17 days ago)
- Topics: components, react-native, reanimated, skia
- Language: TypeScript
- Homepage:
- Size: 1.75 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# `react-native-skia-ui`
[showcase.webm](https://github.com/XantreGodlike/react-native-skia-ui/assets/57757211/f9579007-d8aa-438c-8083-915c8fb2ad41)
Cross platform UI primitives implemented with `@shopify/react-native-skia`.
This library provides functionality of system UI components like `ActivityIndicator` for Android, IOS and Web.
### Why not use `ActivityIndicator` from `react-native`?
- `react-native-skia-ui` components are highly customizable, you can change the color, size, stroke width, stroke cap, etc.
- `react-native-skia-ui` allows you to animate the progress of the `ActivityIndicator` (for example, you can animate the progress of `MaterialCircularProgressIndicator.Determinate`). It's powered by `react-native-reanimated`.
- `react-native-skia-ui` components are consistent across platforms. For example, `MaterialCircularProgressIndicator` looks the same on Android, IOS and Web (unlike `ActivityIndicator` from `react-native`).
### Cases when you should use `ActivityIndicator` from `react-native`:
- You don't need to customize the `ActivityIndicator` and you don't need to animate it.
- You need native look and feel of the `ActivityIndicator` on Android and IOS (for most cases, it's what you need).
Components are ported from flutter and are implemented using `@shopify/react-native-skia` and `react-native-reanimated`.
## Installation
```sh
npm install react-native-skia-ui
```
### Peer Dependencies
This library has the following peer dependencies:
- `@shopify/react-native-skia`
- `react-native-reanimated`
If you don't have them installed, you can install them with:
```sh
npm install @shopify/react-native-skia react-native-reanimated
```
## Usage
For now, the library only provides a few components:
### `react-native-skia-ui/material-circular-progress-indicator`
- `MaterialCircularProgressIndicator.Determinate`
- `MaterialCircularProgressIndicator.Indeterminate`
- `MaterialCircularProgressIndicator` (blend of the two above)
### `react-native-skia-ui/cupertino-activity-indicator`
- `CupertinoActivityIndicator`
- `CupertinoActivityIndicator.PartiallyRevealed`
[Example](./example/src//App.tsx)
```tsx
import * as React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { MaterialCircularProgressIndicator } from 'react-native-skia-ui/material-circular-progress-indicator';
import { useSharedValue, withTiming } from 'react-native-reanimated';
import { CupertinoActivityIndicator } from 'react-native-skia-ui/cupertino-activity-indicator';
export default function App() {
const progress = useSharedValue(0);
React.useEffect(() => {
const id = setInterval(() => {
progress.value = withTiming(Math.random(), { duration: 1000 });
}, 1000);
return () => clearInterval(id);
});
return (
Determinate progress indicators
Indeterminate progress indicators
);
}
```
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)