Skip to content

Mindinventory/react-native-skia-components

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

62 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

@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

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

Screenshot 2022-11-14 at 11 19 29 AM

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.

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

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.

app development