@mindinventory/react-native-skia-components

This library provide UIKit like Card, NeoPop button and 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,
  FlipView,
} 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

NeoPopButton Props

FloatingButton Props

FlipView Props

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.