React Native Skia Shadow

Android and iOS compatible shadows with React Native Skia.

Report Bug · Request Feature

Table of Contents

1. About The Project
2. Getting Started
   • Peer Dependencies
   • Installation
3. Usage
4. Contributing
5. License
6. Acknowledgments

About the Project

Take a look at the iOS and Android screenshots below.

iOS (iPhone 15 Pro Max)

Android (Nexus 5)

Getting Started

Peer Dependencies

@shopify/react-native-skia

React Native CLI

npm install @shopify/react-native-skia

yarn add @shopify/react-native-skia

• (MacOS only) Install Cocoa packages

  npx pod-install

Expo

npx expo install @shopify/react-native-skia

Installation

npm install react-native-skia-shadow

yarn add react-native-skia-shadow

(back to top)

Usage

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

Props

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

Example

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={styles.circle} />
      </SkiaShadow>
    </View>
  );
};

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. https://github.com/chsdwn/react-native-skia-shadow/tree/main/example/src

(back to top)

Contributing

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

(back to top)

License

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

(back to top)

Acknowledgments

• Made with create-react-native-library
• React Native Skia

(back to top)