https://github.com/mindinventory/react-native-skia-components
This library provide UIKit like Card, NeoPop button and and Floating button.
https://github.com/mindinventory/react-native-skia-components
animations canvas card card-animation custom-components graphics mindinventory neo-pop-button neopop react-native react-native-skia skia uikit-components
Last synced: 5 months ago
JSON representation
This library provide UIKit like Card, NeoPop button and and Floating button.
- Host: GitHub
- URL: https://github.com/mindinventory/react-native-skia-components
- Owner: Mindinventory
- License: mit
- Created: 2022-11-09T08:43:51.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-16T11:46:35.000Z (about 2 years ago)
- Last Synced: 2024-10-30T04:44:13.591Z (6 months ago)
- Topics: animations, canvas, card, card-animation, custom-components, graphics, mindinventory, neo-pop-button, neopop, react-native, react-native-skia, skia, uikit-components
- Language: TypeScript
- Homepage: https://www.mindinventory.com/react-native-app-development.php
- Size: 44.3 MB
- Stars: 52
- Watchers: 7
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# @mindinventory/react-native-skia-components [](https://www.npmjs.com/package/@mindinventory/react-native-skia-components)     
This library provide UIKit like Card, NeoPop button and Floating button.
## Installation
using npm
```sh
npm install @mindinventory/react-native-skia-components
```
using yarn
```sh
yarn add @mindinventory/react-native-skia-components
```
### Included Components
- AnimatedCard ('yoyo' | 'disco' | 'rotate' | 'bounce')
- NeoPopButton
- FloatingButton
- FlipView
### Upcoming Components
- Fancy Scroll Indicator
- Amazing Line & Bar Chart
- Circular Progress Bar
- Star-War Buttons
### Supported platform
- Android
- iOS
## Usage
```js
import {
Card,
NeoPopButton,
FloatingButton,
} from '@mindinventory/react-native-skia-components';
```
# Card
```js
{...}
```
```js
animation={'rotate'}
animateBorder={'normal'}
```
```js
animation={'bounce'}
animateBorder={'normal'}
```
```js
animation={'none'}
animateBorder={'normal'}
```
```js
animation={'rotate'}
animateBorder={'disco'}
```
# Neopop
```js
{}}
shadowHeight={15}
sideShadowColor={"rgba(250, 226, 46, 1)"}
style={...style}
titleSize={10}
disabled={false}
/>
```
# Floating
```js
```
# FlipView
```js
}
backView={
}
/>
```
# Props to use
# Card Props
| Parameter | Type | Description |
| --------------- | -------------------------- | ---------------------------------- |
| width | _number (Optional)_ | Set width of card layout. |
| height | _number (Optional)_ | Set height of card layout. |
| backgroundColor | _string (Optional)_ | Set background of card. |
| cardRadius | _number (Optional)_ | Set corner radius of card. |
| borderWidth | _number (Optional)_ | Set border width of card. |
| borderColors | _Array (Optional)_ | Set border gradient color of card. |
| blur | _number (Optional)_ | Set border blur radius of card. |
| animation | string | Set animation of card in ('rotate', 'bounce', 'none'). |
| animateBorder | string | Set animation of card border in ('normal', 'disco', 'none', 'yoyo'). |
| duration | number | Set duration of animating border of card. |
# NeoPopButton Props
| Parameter | Type | Description |
| ----------------- | -------------------- | -------------------------------------------------------------------- |
| style | _style (Optional)_ | Give style of button. |
| title | _string (Optional)_ | Title of button. |
| width | _number (Optional)_ | Set width of button. |
| height | _number (Optional)_ | Set height of button. |
| depth | _number (Optional)_ | Set depth of button. |
| shadowHeight | _number (Optional)_ | Add shadow height for button. |
| backgroundColor | _string (Optional)_ | Add background color to button. |
| bottomShadowColor | _string (Optional)_ | Add bottom shadow color of button. |
| sideShadowColor | _string (Optional)_ | Add right shadow color of button. |
| textStyle | _style (Optional)_ | Give TextStyle button title texts. |
| titleSize | _number (Optional)_ | Set text size of title. |
| isFloating | _boolean (Optional)_ | set value `true` or `false` to get either Floating or NeoPop button. |
| floatAnimation | _boolean (Optional)_ | set value `true` or `false` to get button float animation on or off. |
| duration | _number (Optional)_ | set duration of the floatAnimation of the button. |
| disabled | _boolean (Optional)_ | set button disabled or not. |
# FloatingButton Props
| Parameter | Type | Description |
| ----------------- | -------------------- | -------------------------------------------------------------------- |
| style | _style (Optional)_ | Give style of button. |
| title | _string (Optional)_ | Title of button. |
| width | _number (Optional)_ | Set width of button. |
| height | _number (Optional)_ | Set height of button. |
| depth | _number (Optional)_ | Set depth of button. |
| shadowHeight | _number (Optional)_ | Add shadow height for button. |
| backgroundColor | _string (Optional)_ | Add background color to button. |
| bottomShadowColor | _string (Optional)_ | Add bottom shadow color of button. |
| sideShadowColor | _string (Optional)_ | Add right shadow color of button. |
| textStyle | _style (Optional)_ | Give TextStyle button title texts. |
| titleSize | _number (Optional)_ | Set text size of title. |
| isFloating | _boolean (Optional)_ | set value `true` or `false` to get Floating button. |
# FlipView Props
| Parameter | Type | Description |
| ----------------- | -------------------- | -------------------------------------------------------------------- |
| style | _style (Optional)_ | Provide an style to inner elements of the `FlipView`. |
| frontView | _JSX.ELement (Required)_ | Element that render on `Front` side of the view. |
| backView | _JSX.ELement (Required)_ | Element that render on `Back` side of the view. |
| flipZoom | _number (Optional)_ | Provide an flipZoom scale of the view when it animate. |
| flipDirection | _string (Optional)_ | Provide an flipDirection of the view that in horizontal or vertical. |
| perspective | _number (Optional)_ | Provide an perspective value of the view for zIndex. |
| duration | _number (Optional)_ | Duration of the flip card animation. |
| ref(FlipViewRef) | _React.ElementRef_ | To flip the view use flip() function. and get value of is view or not isFlip. |
## Contributing!
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## 📱 Check out other lists of our Mobile UI libraries
## 💻 Check out other lists of Web libraries
📝 Get FREE Industry WhitePapers →
## Check out our Work
### Library used
* [React-Native-Skia](https://github.com/Shopify/react-native-skia)
* [React-Native-Reanimated](https://github.com/software-mansion/react-native-reanimated)
## License!
@mindinventory/react-native-skia-components [MIT-licensed](./LICENSE).
# Let us know!
If you use our open-source libraries in your project, please make sure to credit us and Give a star to www.mindinventory.com
Please feel free to use this component and Let us know if you are interested to building Apps or Designing Products.
