https://github.com/chsdwn/react-native-skia-shadow
Android and iOS compatible shadows with React Native Skia.
https://github.com/chsdwn/react-native-skia-shadow
android expo ios package react-native shadow
Last synced: 11 months ago
JSON representation
Android and iOS compatible shadows with React Native Skia.
- Host: GitHub
- URL: https://github.com/chsdwn/react-native-skia-shadow
- Owner: chsdwn
- License: mit
- Created: 2023-10-07T14:33:13.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-15T17:27:12.000Z (almost 2 years ago)
- Last Synced: 2025-03-27T02:51:21.593Z (12 months ago)
- Topics: android, expo, ios, package, react-native, shadow
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-skia-shadow
- Size: 2.57 MB
- Stars: 26
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
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 Shadow
Android and iOS compatible shadows with React Native Skia.
Report Bug
·
Request Feature
Table of Contents
## 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
```sh
npm install @shopify/react-native-skia
```
```sh
yarn add @shopify/react-native-skia
```
- (MacOS only) Install Cocoa packages
```sh
npx pod-install
```
##### Expo
```sh
npx expo install @shopify/react-native-skia
```
### Installation
```sh
npm install react-native-skia-shadow
```
```sh
yarn add react-native-skia-shadow
```
## 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
```tsx
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { SkiaShadow } from 'react-native-skia-shadow';
export const App = () => {
return (
);
};
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
## Contributing
See the [contributing guide](https://github.com/chsdwn/react-native-skia-shadow/blob/main/CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
Distributed under the MIT License. See [`LICENSE`](https://github.com/chsdwn/react-native-skia-shadow/blob/main/LICENSE) for more information.
## Acknowledgments
- Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
- [React Native Skia](https://github.com/Shopify/react-native-skia)