How to display multiple Text with simple blinking animation using Props and States in react native example tutorial using setInterval() method.
Blinking text is used to get user attention while surfing the application. In this tutorial we would going to implement Blinking animation on Text using props and states. So lets get started .
Contents in this project Blinking Animation on Text :
- Start a fresh React Native project. If you don’t know how, then read my this tutorial.
- Add StyleSheet, View and Text component in import block.
- Create another class named as BlinkingClass in your project .
- Create Constructor with Props.
- Set Props in Super method .
- Set state using this.state and set Text visibility true using showText .
- Create setInterval() method .
- In BlinkingClass class create let object and In let object create Prop named as text .
- Create component Text in BlinkingClass render’s return block.
- Set display as Prop in Text component.
- Add View component in your Main Class.
- Creating component using BlinkingClass name and using text prop set your own text inside it to blink.
- Complete Source Code for index.android.js file.
1. Start a fresh React Native project. If you don’t know how, then read my this tutorial.
2. Add StyleSheet, View and Text component in import block.
|
1
|
import { AppRegistry, Text, View, StyleSheet } from ‘react-native’;
|
3. Create another class named as BlinkingClass in your project .
|
1
2
3
|
class BlinkingClass extends Component {
}
|
4. Create Constructor with Props in BlinkingClass.
|
1
2
3
4
|
class BlinkingClass extends Component {
constructor(props) {
}
}
|
5. Set Props in Super method .
|
1
2
3
4
5
|
class BlinkingClass extends Component {
constructor(props) {
super(props);
}
}
|
6. Set state using this.state and set Text visibility true using showText .
|
1
2
3
4
5
6
|
class BlinkingClass extends Component {
constructor(props) {
super(props);
this.state = {showText: true};
}
}
|
7. Create setInterval() method .
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
class BlinkingClass extends Component {
constructor(props) {
super(props);
this.state = {showText: true};
// Change the state every second or the time given by User.
setInterval(() => {
this.setState(previousState => {
return { showText: !previousState.showText };
});
},
// Define any blinking time.
1000);
}
}
|
8. In BlinkingClass class create let object and In let object create Prop named as text .
|
1
2
3
4
5
6
|
render() {
let display = this.state.showText ? this.props.text : ‘ ‘;
return (
);
}
|
9. Create component Text in BlinkingClass render’s return block.
|
1
2
3
4
5
6
|
render() {
let display = this.state.showText ? this.props.text : ‘ ‘;
return (
<Text style = {{ textAlign: ‘center’, marginTop : 10 }}> </Text>
);
}
|
10. Set display as Prop in Text component.
|
1
2
3
4
5
6
|
render() {
let display = this.state.showText ? this.props.text : ‘ ‘;
return (
<Text style = {{ textAlign: ‘center’, marginTop : 10 }}>{display}</Text>
);
}
|
11. Add View component in your Main Class.
|
1
2
3
|
<View>
</View>
|
12. Creating component using BlinkingClass name and using text prop set your own text inside it to blink.
|
1
2
3
4
5
|
<View>
<BlinkingClass text=‘This Is Blinking Text 1’ />
<BlinkingClass text=‘This Is Blinking Text 2’ />
<BlinkingClass text=‘This Is Blinking Text 3’ />
</View>
|
13. Complete Source Code for index.android.js file.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
import React, { Component } from ‘react’;
import { AppRegistry, Text, View, StyleSheet } from ‘react-native’;
class BlinkingClass extends Component {
constructor(props) {
super(props);
this.state = {showText: true};
// Change the state every second or the time given by User.
setInterval(() => {
this.setState(previousState => {
return { showText: !previousState.showText };
});
},
// Define any blinking time.
1000);
}
render() {
let display = this.state.showText ? this.props.text : ‘ ‘;
return (
<Text style = {{ textAlign: ‘center’, marginTop : 10 }}>{display}</Text>
);
}
}
class Myproject extends Component {
render() {
return (
<View>
<BlinkingClass text=‘This Is Blinking Text 1’ />
<BlinkingClass text=‘This Is Blinking Text 2’ />
<BlinkingClass text=‘This Is Blinking Text 3’ />
</View>
);
}
}
AppRegistry.registerComponent(‘Myproject’, () => Myproject);
|
Screenshot in iOS device :
Screenshot in Android device :
Also Read :
React Native Take Screenshot of App Programmatically in iOS Android
React Native Create Alert Dialog in Android iOS Application Tutorial
React Native Add Floating Action Button in Both Android iOS App
How to Create Custom Trapezoid Shape View in React Native
React Native KeyboardAvoidingView with TextInput Example Tutorial
