Hiding and Showing the any component from the application screen is a easy process if you have a little knowledge about States. We would going to Change the states value on button onPress. Regarding the changed value we have been Hide Show View component using ternary operator in Android and iOS.
Contents in this project Hide Show View Text Component :
1. Start a fresh React Native project. If you don’t know how then read my this tutorial.
2. Add
AppRegistry ,
StyleSheet ,
Text ,
View and
Button component in import block.
|
1
2
3
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, Text, View, Button } from ‘react-native’;
|
3. Create Constructor in your class with Super method and make a state named as status. Now set the status state value as true. This is the default status value so when the application load at first time it will show us the View or Text component passed in ternary operator syntax.
|
1
2
3
4
5
6
7
8
9
10
|
constructor(){
super();
this.state ={
status:true
}
}
|
4. Create function named as ShowHideTextComponentView . We have to call this function on button onPress and it will change the status state value . If the value is true then it changes it to false and if the value is false then it set it to true.
|
1
2
3
4
5
6
7
8
9
10
11
|
ShowHideTextComponentView = () =>{
if(this.state.status == true)
{
this.setState({status: false})
}
else
{
this.setState({status: true})
}
}
|
5. Create custom style css class named as MainContainer .
|
1
2
3
4
5
6
7
8
9
10
11
12
|
const styles = StyleSheet.create({
MainContainer :{
// Setting up View inside content in Vertically center.
justifyContent: ‘center’,
flex:1,
margin: 10
}
});
|
6. Add View as parent view in render’s return block and Call the MainContainer class into View.
|
1
2
3
4
5
6
7
8
9
10
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
7. Add { } curly bracts inside the View component and inside the curly bracket using Ternary operator set condition. So if the given status state value is true then it shows the first passed view and if the status value is false then it hide the first view.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
render() {
return (
<View style={styles.MainContainer}>
{
// Pass any View or Component inside the curly bracket.
// Here the ? Question Mark represent the ternary operator.
this.state.status ? <Text style= {{ fontSize: 25, color: “#000”, textAlign: ‘center’ }}> Hello Friends </Text> : null
}
</View>
);
}
|
8. Add Button component, set onPress on button and call the ShowHideTextComponentView function.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
render() {
return (
<View style={styles.MainContainer}>
{
// Pass any View or Component inside the curly bracket.
// Here the ? Question Mark represent the ternary operator.
this.state.status ? <Text style= {{ fontSize: 25, color: “#000”, textAlign: ‘center’ }}> Hello Friends </Text> : null
}
<Button title=“Hide Text Component” onPress={this.ShowHideTextComponentView} />
</View>
);
}
|
9. Complete source code for index.android.js / index.ios.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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, Text, View, Button } from ‘react-native’;
class Myproject extends Component {
constructor(){
super();
this.state ={
status:true
}
}
ShowHideTextComponentView = () =>{
if(this.state.status == true)
{
this.setState({status: false})
}
else
{
this.setState({status: true})
}
}
render() {
return (
<View style={styles.MainContainer}>
{
// Pass any View or Component inside the curly bracket.
// Here the ? Question Mark represent the ternary operator.
this.state.status ? <Text style= {{ fontSize: 25, color: “#000”, textAlign: ‘center’ }}> Hello Friends </Text> : null
}
<Button title=“Hide Text Component” onPress={this.ShowHideTextComponentView} />
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
// Setting up View inside content in Vertically center.
justifyContent: ‘center’,
flex:1,
margin: 10
}
});
AppRegistry.registerComponent(‘Myproject’, () => Myproject);
|
Screenshots :
Also Read :
React Native 0.60 Stable Version is launched-Learn About New Changes
React Native Set Gradient Effect Background on TextInput Android iOS
React Native Facebook Login Integration Example Tutorial Explained
React Native Create Custom JSON ListView with Multiple Items Tutorial
React Native Drawer Navigator with Custom Sidebar Menu with Icons Tutorial
