React Native Skia Shadow

Android and iOS compatible shadows with React Native Skia.

About the Project

Take a look at the iOS and Android screenshots below.

iOS (iPhone 15 Pro Max)

React Native Skia Shadow iOS Screenshot

Android (Nexus 5)

React Native Skia Shadow Android Screenshot

Getting Started

Peer Dependencies


React Native CLI
npm install @shopify/react-native-skia
yarn add @shopify/react-native-skia
  • (MacOS only) Install Cocoa packages

    npx pod-install
npx expo install @shopify/react-native-skia


npm install react-native-skia-shadow
yarn add react-native-skia-shadow


Wrap the component you want to add a shadow inside a SkiaShadow component.


Prop Type Default
blur number
dx number
dy number
color Color 'black'
borderRadius number 0
borderTopLeftRadius number borderRadius
borderTopRightRadius number borderRadius
borderBottomLeftRadius number borderRadius
borderBottomRightRadius number borderRadius


import React from 'react';
import { StyleSheet, View } from 'react-native';
import { SkiaShadow } from 'react-native-skia-shadow';

export const App = () => {
  return (
    <View style={styles.container}>
      <SkiaShadow blur={5} dx={0} dy={0} color="blue" borderRadius={9999}>
        <View style={} />

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  circle: {
    width: 150,
    height: 150,
    borderRadius: 9999,
    backgroundColor: 'red',

For usage details, please refer to the src folder of the example app.


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


Distributed under the MIT License. See LICENSE for more information.



View Github