react-native-skia-shadow

KO | EN

gitlite — search

#javascript #llm #golang #go #machine-learning #rust #macos #nodejs #windows #awesome #pytorch #ios #mcp #open-source

react-native-skia-shadow

(★ 26)

Android and iOS compatible shadows with React Native Skia.

react-native-skia-shadow Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<div align="center">
  <a name="title"></a>
  <h3 align="center">React Native Skia Shadow</h3>
  
  <p align="center">
    Android and iOS compatible shadows with React Native Skia.
    <br />
    <br />
    <a href="https://github.com/chsdwn/react-native-skia-shadow/issues">Report Bug</a>
    ·
    <a href="https://github.com/chsdwn/react-native-skia-shadow/issues">Request Feature</a>
  </p>
</div>

<details>
  <summary>Table of Contents</summary>
  <ol>
    <li><a href="#about-the-project">About The Project</a></li>
    <li>
      <a href="#getting-started">Getting Started</a>
      <ul>
        <li><a href="#peer-dependencies">Peer Dependencies</a></li>
        <li><a href="#installation">Installation</a></li>
      </ul>
    </li>
    <li><a href="#usage">Usage</a></li>
    <li><a href="#contributing">Contributing</a></li>
    <li><a href="#license">License</a></li>
    <li><a href="#acknowledgments">Acknowledgments</a></li>
  </ol>
</details>

## About the Project

<p align="center">Take a look at the iOS and Android screenshots below.</p>

<div>

### iOS (iPhone 15 Pro Max)

</div>

<div>

### Android (Nexus 5)

</div>

## 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 (
    <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

## 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)

react-native-skia-shadow

react-native-skia-shadow Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

react-native-skia-shadow

react-native-skia-shadow Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README