React Native Cyberpunk Button

Button with glitch display effect inspired by cyberpunk 2077 game webpage. Button is styled to resemble component on cyberpunk web page. Button component is highly customisable. You can change animation params, button and text style.

react-native-cyberpunk-button

Button with glitch display effect inspired by cyberpunk 2077 game webpage. Button is styled to resemble component on cyberpunk web page. Button component is highly customisable. You can change animation params, button and text style.

Usage

Install module:

npm install --save react-native-cyberpunk-button

or

yarn add react-native-cyberpunk-button

Import button and use it in your app:

import CyberButton from 'react-native-cyberpunk-button';

export default function App() {
  const btnRef = useRef();

  return (
    <View>
      ...

      <View>
        <Text>autoplay animation:</Text>
        <CyberButton label="cyberpunk_" />
      </View>

      <View>
        <Text>Button with animation activated onPress:</Text>
        <TouchableOpacity onPress={() => btnRef.current.animate()}>
          <CyberButton
            ref={btnRef}
            disableAutoAnimation
            label="cyberpunk_"
          />
        </TouchableOpacity>
      </View>
    </View>
  );
}

CyberButton props

Default label container style:

{
  height: buttonHeight,
  paddingRight: buttonHeight /  2,
  paddingLeft: buttonHeight / 4,
  borderColor: shadowColor,
  backgroundColor: mainColor,
  borderRightWidth: 2,
  alignItems: 'center',
  justifyContent: 'center',
}

Default label text style:

{
  color: '#ffffff',
  fontWeight: 'bold',
  letterSpacing: 3,
  fontSize: buttonHeight / 2.5
}

CyberButton instance methods

animate - will trigger single glitch animation. Useful with disableAutoAnimation prop.

React Native Epicode Academy

This package is a part of React Native Epicode Academy YouTube series.

Download Details:

Author: msadura

Source Code: https://github.com/msadura/react-native-cyberpunk-button

react-native react mobile-apps

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Skenix is providing React Native Development Services with qualified React Native App Developers. Get the best React Native App Development Services.

Are you a mobile app developer looking for more efficient tools for your projects? Mobile app development is getting tougher and tougher as the market continues to grow. As a developer, you need to develop Apps which meet the demands of your users. To achieve this, adopt the right tools, like the React Native development framework.

Looking for top React Native mobile app development company in USA for Startups & Enterprise? Find out the top list of React Native mobile app development company in USA.

Hire top react native app development company in New York to build and develop custom react native mobile apps for Android & iOS with the latest features.