react-native-skia-ui

showcase.webm

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

1npm 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:

1npm 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

1import * as React from 'react';
2
3import { StyleSheet, Text, View } from 'react-native';
4import { MaterialCircularProgressIndicator } from 'react-native-skia-ui/material-circular-progress-indicator';
5import { useSharedValue, withTiming } from 'react-native-reanimated';
6import { CupertinoActivityIndicator } from 'react-native-skia-ui/cupertino-activity-indicator';
7export default function App() {
8  const progress = useSharedValue(0);
9  React.useEffect(() => {
10    const id = setInterval(() => {
11      progress.value = withTiming(Math.random(), { duration: 1000 });
12    }, 1000);
13
14    return () => clearInterval(id);
15  });
16
17  return (
18    <View style={styles.container}>
19      <Text>Determinate progress indicators</Text>
20      <MaterialCircularProgressIndicator.Determinate
21        size={56}
22        valueColor="green"
23        strokeWidth={5}
24        strokeCap="round"
25        value={progress}
26      />
27      <MaterialCircularProgressIndicator.Determinate
28        size={100}
29        valueColor="blue"
30        strokeWidth={4}
31        strokeCap="round"
32        value={progress}
33      />
34      <CupertinoActivityIndicator.PartiallyRevealed
35        color="black"
36        progress={progress}
37        radius={50}
38      />
39
40      <Text>Indeterminate progress indicators</Text>
41      <MaterialCircularProgressIndicator.Indeterminate
42        size={40}
43        valueColor="black"
44      />
45      <MaterialCircularProgressIndicator.Indeterminate
46        size={100}
47        valueColor="red"
48        backgroundColor={'#f0f0f0'}
49        strokeWidth={8}
50        strokeCap="round"
51      />
52      <CupertinoActivityIndicator color="black" radius={50} />
53    </View>
54  );
55}

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library