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.