Adding OverLay to react-native using react-native-elements
First lets create a project name AwesomeModal.
npx react-native init AwesomeModal
![](https://learningaboutcode.com/wp-content/uploads/2022/04/Screenshot-2022-04-03-at-1.10.26-PM-1024x566.png)
now install the required dependencies
npm install @rneui/themed @rneui/base
now open the project with code. in your terminal and you can see this below screen.
![](https://learningaboutcode.com/wp-content/uploads/2022/04/Screenshot-2022-04-03-at-1.49.52-PM-1024x572.png)
and add the following code in your App.js file
![](https://learningaboutcode.com/wp-content/uploads/2022/04/Screenshot-2022-04-03-at-2.12.37-PM-1024x567.png)
In line 1-3, we are just importing the required dependencies
From line 12-27 we are rendering the View
In line 16 we are calling a function toggleOverlay, which toggles the overlay (to hide or show )
In Line 19-25, we are showing the Overlay when its visible is true
In Line 30- 49, we showing the styles for this App.js
In Line 51, we are exporting OverLayComponent
Conclusion
I have published the code in Github repo