@mindinventory/react-native-skia-components NPM

@mindinventory/react-native-skia-components

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

@mindinventory react-native-skia-components

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

cardJeko

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

card

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

card3

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

thank

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

neoPop

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

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.