rn-glitch-effect

Welcome to Glitch Effect :wave:

What is React native Glitch Effect?

• Is a simple way to glitch your text and images.

Instalation

  npm i rn-glitch-effect

Properties - Glitch

props	description	default value
text	Your text label that's going to be displayed.	empty	String
glitchHeight	The height that you want your glitch effect will have.	80	Integer
glitchAmplitude	The amplitude of your glitch. In other words, how far your effect will be from the main text.	5	Integer
glitchDuration	The duration of your glitch effect.	1500	Milisseconds
repeatDelay	How long time your effect will wait, to start another turn of effect.	2000	Milisseconds
shadowColor	The shadow color of your effect.	#add8e6	rgb
textStyle	The style that you want to give to your text.	{color: '#000000',fontWeight: 'bold',letterSpacing: 3,}	Object
heightInputRange	The input range to the interpolation of main animation. With this you can control each part of your effect height.	[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]	array
positionYInputRange	The input range to the interpolation of main animation. With this you can control each part of your effect position.	[0, 10, 20, 30, 60, 65, 70, 80, 90, 100]	array
outOfTextRange	Will make your effect get out of the range from your text	false	Boolean
disableAutoAnimation	enable or disabled your animation	false	Boolean

Properties - GlitchImage

props	description	default value
glitchHeight	The height that you want your glitch effect will have.	200	Integer
glitchAmplitude	The amplitude of your glitch. In other words, how far your effect will be from the main text.	5	Integer
glitchDuration	The duration of your glitch effect.	1500	Milisseconds
repeatDelay	How long time your effect will wait, to start another turn of effect.	2000	Milisseconds
shadowColor	The shadow color of your effect.	#add8e6	rgb
imageStyle	The style that you want to give to your text.	{width: 400,height: 200}	Object
heightInputRange	The input range to the interpolation of main animation. With this you can control each part of your effect height.	[0, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110]	array
positionYInputRange	The input range to the interpolation of main animation. With this you can control each part of your effect position.	[0, 10, 20, 30, 60, 65, 70, 80, 90, 100]	array
disableAutoAnimation	enable or disabled your animation	false	Boolean
source	Your image path.	false	String

Usage

Basic Glitch

• You can use this with or without the View container

import React from 'react';
import {View, StyleSheet} from 'react-native';
import {Glitch} from 'rn-glitch-effect';
const App = () => {

  return (
      <View style={styles.containerWithBg}>
        <Glitch
          text={'GLITCH'}
          mainColor={'black'}
          shadowColor={'green'}
        />
      </View>
  );
};
const styles = StyleSheet.create({
  containerWithBg: {backgroundColor: 'red', marginBottom: '5%'},
});
export default App;

Glitch with Button

• You can use this with a button wrapping your text and define if it will activate the glitch when clicked

import React, {useRef} from 'react';
import {TouchableHighlight, StyleSheet} from 'react-native';
import {Glitch} from 'rn-glitch-effect';
const App = () => {
  const ref = useRef();
  return (
    <View style={[styles.container]}>
      <TouchableHighlight
        onPress={() => {
          ref.current.animate();
        }}
        style={[styles.containerWithBg]}>
        <Glitch
          text={'RESPONSIVE'}
          ref={ref}
          mainColor={'black'}
          shadowColor={'pink'}
          disableAutoAnimation={true}
        />
      </TouchableHighlight>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {flex: 1, justifyContent: 'center', alignItems: 'center'},
  containerWithBg: {backgroundColor: 'red', marginBottom: '5%'},
});
export default App;

import React from 'react';
import {StyleSheet, View} from 'react-native';
import {Glitch, GlitchImage} from 'rn-glitch-effect';
import Gator from './assets/images/gator.jpeg';
const App = () => {
  return (
    <View style={[styles.container]}>
      <View style={styles.containerWithBg}>
        <Glitch
          text={'GLITCH'}
          mainColor={'black'}
          shadowColor={'green'}
          outOfTextRange={false}
        />
        <GlitchImage shadowColor={'red'} mainColor={'black'} source={Gator} />
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  containerWithBg: {backgroundColor: 'red', marginBottom: '5%'},
  image: {
    width: 400,
    height: 200,
  },
});
export default App;

End of the line :)

If you have any ideia to contribute with this project, please make your self home.