Modal is a type of View component available in react native that supports both Android and iOS applications. Modal comes with 3 different showing options which decides how the Modal will show inside the react native app. Modal shows above the screen and covers all the application screen. So in this tutorial we would going to create a react naive app with rounded corners Modal Component. So let’s get started .
Contents in this project Simple Modal Component iOS Android Example Tutorial :
1. Import StyleSheet, View, Modal, Text, Button and Platform component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Modal, Text, Button, Platform } from ‘react-native’;
|
2. Create a constructor() in your class. Inside the constructor() create a State named as ModalVisibleStatus and set its default value as False. This state is used to Show and Hide the Modal component.
|
1
2
3
4
5
6
7
8
9
10
|
constructor(props) {
super(props);
this.state = {
ModalVisibleStatus: false
};
}
|
3. Create a function named as ShowModalFunction(). This function is used to change the ModalVisibleStatus State value to visible.
|
1
2
3
4
5
|
ShowModalFunction(visible) {
this.setState({ModalVisibleStatus: visible});
}
|
4. Create a Root Main View in render’s return block.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
5. Create Modal component inside Root View.
transparent : This prop support Boolean value true or false. If its value is false then it will disable the transparency view in modal, If its value is true then it will enable the transparency.
animationType : This prop supports 3 types of values slide, fade and none.
- slide : Modal will smoothly slide from bottom to top with animation of application screen.
- fade : Modal will fade in and fade out on showing time.
- none : Modal will direct show on application screen without any animation.
visible : Supports Boolean value to show and hide the Modal.
onRequestClose : This prop would call the android mobile device hardware back button and also the Menu button Apple TV. You can call any function here and it will execute on back button press.
|
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
|
render() {
return (
<View style={styles.MainContainer}>
<Modal
transparent={false}
animationType={“slide”}
visible={this.state.ModalVisibleStatus}
onRequestClose={ () => { this.ShowModalFunction(!this.state.ModalVisibleStatus)} } >
</Modal>
</View>
);
}
|
6. Create a Main View in Modal. This would be our complete Modal View.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<Modal
transparent={false}
animationType={“slide”}
visible={this.state.ModalVisibleStatus}
onRequestClose={ () => { this.ShowModalFunction(!this.state.ModalVisibleStatus)} } >
<View style={{ flex:1, justifyContent: ‘center’, alignItems: ‘center’ }}>
</View>
</Modal>
|
7. Now again create another View component inside the View. We would do this because we want to show Modal in the middle of application screen.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<Modal
transparent={false}
animationType={“slide”}
visible={this.state.ModalVisibleStatus}
onRequestClose={ () => { this.ShowModalFunction(!this.state.ModalVisibleStatus)} } >
<View style={{ flex:1, justifyContent: ‘center’, alignItems: ‘center’ }}>
<View style={styles.ModalInsideView}>
</View>
</View>
</Modal>
|
8. Create a Sample Text component and a Button inside the View. The button is used to again Hide the Modal component, So we would call the ShowModalFunction(!this.state.ModalVisibleStatus)} method on Button onPress event. This would hide the Modal.
|
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
|
<Modal
transparent={false}
animationType={“slide”}
visible={this.state.ModalVisibleStatus}
onRequestClose={ () => { this.ShowModalFunction(!this.state.ModalVisibleStatus)} } >
<View style={{ flex:1, justifyContent: ‘center’, alignItems: ‘center’ }}>
<View style={styles.ModalInsideView}>
{/* Put All Your Components Here, Which You Want To Show Inside The Modal. */}
<Text style={styles.TextStyle}>Text Component With Some Sample Text In Modal. </Text>
<Button title=“Click Here To Hide Modal” onPress={() => { this.ShowModalFunction(!this.state.ModalVisibleStatus)} } />
{/* Put All Your Components Here, Which You Want To Show Inside The Modal. */}
</View>
</View>
</Modal>
|
9. Create a Button after closing Modal . This button is used to Show the Modal component, This button is also shows on Root Main View.
|
1
|
<Button onPress={() => { this.ShowModalFunction(true) }} title=“Click Here To Show Modal” />
|
10. Create CSS Style for All components.
|
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
|
const styles = StyleSheet.create({
MainContainer :{
flex:1,
justifyContent: ‘center’,
alignItems: ‘center’,
marginTop: (Platform.OS == ‘ios’) ? 20 : 0
},
ModalInsideView:{
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor : “#00BCD4”,
height: 300 ,
width: ‘90%’,
borderRadius:10,
borderWidth: 1,
borderColor: ‘#fff’
},
TextStyle:{
fontSize: 20,
marginBottom: 20,
color: “#fff”,
padding: 20,
textAlign: ‘center’
}
});
|
11. Complete source code for App.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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Modal, Text, Button, Platform } from ‘react-native’;
export default class Mynewproject extends Component {
constructor(props) {
super(props);
this.state = {
ModalVisibleStatus: false
};
}
ShowModalFunction(visible) {
this.setState({ModalVisibleStatus: visible});
}
render() {
return (
<View style={styles.MainContainer}>
<Modal
transparent={false}
animationType={“slide”}
visible={this.state.ModalVisibleStatus}
onRequestClose={ () => { this.ShowModalFunction(!this.state.ModalVisibleStatus)} } >
<View style={{ flex:1, justifyContent: ‘center’, alignItems: ‘center’ }}>
<View style={styles.ModalInsideView}>
{/* Put All Your Components Here, Which You Want To Show Inside The Modal. */}
<Text style={styles.TextStyle}>Text Component With Some Sample Text In Modal. </Text>
<Button title=“Click Here To Hide Modal” onPress={() => { this.ShowModalFunction(!this.state.ModalVisibleStatus)} } />
{/* Put All Your Components Here, Which You Want To Show Inside The Modal. */}
</View>
</View>
</Modal>
<Button onPress={() => { this.ShowModalFunction(true) }} title=“Click Here To Show Modal” />
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
flex:1,
justifyContent: ‘center’,
alignItems: ‘center’,
marginTop: (Platform.OS == ‘ios’) ? 20 : 0
},
ModalInsideView:{
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor : “#00BCD4”,
height: 300 ,
width: ‘90%’,
borderRadius:10,
borderWidth: 1,
borderColor: ‘#fff’
},
TextStyle:{
fontSize: 20,
marginBottom: 20,
color: “#fff”,
padding: 20,
textAlign: ‘center’
}
});
|
Screenshots in Android device :
Screenshot in iOS device :
Also Read :
React Native Custom Radio Button Group Component for Android iOS
React Native Getting Started With NativeBase Cross Platform UI Components
React Native Show SuperScript SubScript Text in Android iOS Example
React Native Detect App is in Background or Foreground using AppState
React Navigation 5.x Show Image Icon in Header Bar React Native
