@mindinventory/react-native-skia-components

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

Installation

using npm

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

using yarn

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

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

Card

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

animation={'rotate'}
animateBorder={'normal'}

animation={'bounce'}
animateBorder={'normal'}

animation={'none'}
animateBorder={'normal'}

animation={'rotate'}
animateBorder={'disco'}

Neopop

<NeoPopButton
  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}
/>

Floating

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

<FlipView
  style={styles.cardContainer}
  flipDirection={'horizontal'}
  flipZoom={0.1}
  ref={flipRef}
  duration={1000}
  perspective={1000}
  frontView={
    <View style={{flex:1, backgroundColor:'red'}} />
  }
  backView={
    <View style={{flex: 1, backgroundColor: 'green'}}/>
  }
/>

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

Check out our Work

Library used

• 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