1.1.0 • Published 3 years ago
rn-glitch-effect v1.1.0
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-effectProperties - 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.