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.
-
react-native-skia-uicomponents are highly customizable, you can change the color, size, stroke width, stroke cap, etc. -
react-native-skia-uiallows you to animate the progress of theActivityIndicator(for example, you can animate the progress ofMaterialCircularProgressIndicator.Determinate). It's powered byreact-native-reanimated. -
react-native-skia-uicomponents are consistent across platforms. For example,MaterialCircularProgressIndicatorlooks the same on Android, IOS and Web (unlikeActivityIndicatorfromreact-native).
- You don't need to customize the
ActivityIndicatorand you don't need to animate it. - You need native look and feel of the
ActivityIndicatoron 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.
npm install react-native-skia-uiThis library has the following peer dependencies:
@shopify/react-native-skiareact-native-reanimated
If you don't have them installed, you can install them with:
npm install @shopify/react-native-skia react-native-reanimatedFor now, the library only provides a few components:
MaterialCircularProgressIndicator.DeterminateMaterialCircularProgressIndicator.Indeterminate-
MaterialCircularProgressIndicator(blend of the two above)
CupertinoActivityIndicatorCupertinoActivityIndicator.PartiallyRevealed
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 (
<View style={styles.container}>
<Text>Determinate progress indicators</Text>
<MaterialCircularProgressIndicator.Determinate
size={56}
valueColor="green"
strokeWidth={5}
strokeCap="round"
value={progress}
/>
<MaterialCircularProgressIndicator.Determinate
size={100}
valueColor="blue"
strokeWidth={4}
strokeCap="round"
value={progress}
/>
<CupertinoActivityIndicator.PartiallyRevealed
color="black"
progress={progress}
radius={50}
/>
<Text>Indeterminate progress indicators</Text>
<MaterialCircularProgressIndicator.Indeterminate
size={40}
valueColor="black"
/>
<MaterialCircularProgressIndicator.Indeterminate
size={100}
valueColor="red"
backgroundColor={'#f0f0f0'}
strokeWidth={8}
strokeCap="round"
/>
<CupertinoActivityIndicator color="black" radius={50} />
</View>
);
}See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Made with create-react-native-library