@mindinventory/react-native-skia-components  !@mindinventory/React Native Skia Components Top Language !@mindinventory/React Native Skia Components TypeScript !@mindinventory/React Native Skia Components License !IOS !Android

This library provide UIKit like Card, NeoPop button and Floating button.

!@mindinventory react-native-skia-components

Installation

using npm

``sh
npm install @mindinventory/react-native-skia-components
`

using yarn

`sh
yarn add @mindinventory/react-native-skia-components
`




$3

- AnimatedCard ('yoyo' | 'disco' | 'rotate' | 'bounce')
- NeoPopButton
- FloatingButton
- FlipView

$3

- Fancy Scroll Indicator
- Amazing Line & Bar Chart
- Circular Progress Bar
- Star-War Buttons

$3

- Android
- iOS

Usage

`js
import {
Card,
NeoPopButton,
FloatingButton,
} from '@mindinventory/react-native-skia-components';
`

Card

`js
backgroundColor={'#000'}
blur={10}
borderColors={['cyan', 'magenta', 'yellow', 'cyan']}
borderWidth={5}
cardRadius={20}
height={220}
width={310}
animation={'rotate'}
animateBorder={'normal'}
duration={1000}
>
{...}

`
`js
animation={'rotate'}
animateBorder={'normal'}
`
!cardJeko
`js
animation={'bounce'}
animateBorder={'normal'}
`
!card
`js
animation={'none'}
animateBorder={'normal'}
`
!card3
`js
animation={'rotate'}
animateBorder={'disco'}
`
!thank




Neopop

`js
backgroundColor={'#f96b8f'}
bottomShadowColor={'#363636'}
depth={10}
height={80}
sideShadowColor={'#363636'}
isFloating={false}
textStyle={{
color: 'white',
...textStyle
}}
title={Neo Pop Button}
width={80}
onPress={()=>{}}
shadowHeight={15}
sideShadowColor={"rgba(250, 226, 46, 1)"}
style={...style}
titleSize={10}
disabled={false}
/>
`
!neoPop




Floating

`js
backgroundColor={'rgba(250, 226, 46,1)'}
bottomShadowColor={'rgba(0, 0, 0,1)'}
depth={25}
height={200}
isFloating={true}
shadowHeight={20}
sideShadowColor={'rgba(195, 161, 60,1)'}
textStyle={{
fontSize: 24,
}}
title={'Press Me'}
width={300}
/>
`





FlipView

`js
style={styles.cardContainer}
flipDirection={'horizontal'}
flipZoom={0.1}
ref={flipRef}
duration={1000}
perspective={1000}
frontView={

}
backView={

}
/>
`
!flipview




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

$3

* React-Native-Skia
* React-Native-Reanimated

License!

@mindinventory/react-native-skia-components MIT-licensed.

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.