@mindinventory/react-native-skia-components

@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

📝 Get FREE Industry WhitePapers →

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

Please feel free to use this component and Let us know if you are interested to building Apps or Designing Products.