DEV Community

Cover image for Loading Modal in React Native with Activity Indicator
Suyash Vashishtha
Suyash Vashishtha

Posted on

Loading Modal in React Native with Activity Indicator

Loading modals are basically a wrapper to tell our user that something is happening and restrict them to tap anywhere else.

Common example - while uploading something..

It is a most common used widget in Mobile dev industry and I don’t know why React Native doesn’t really provide one.

Edit - I have made a package for it as react-native-loading-modal , In case you want to use it.

So that's why we are making a fully customisable Loading Modal in React Native using Activity Indicator from react-native

JSX Code for Custom loading modal

don’t worry code is available at here

JSX code for custom loading modal

Styling for Custom Loading modal using Stylesheet

Styling for Custom Loading modal using Stylesheet

That's it, now you can call your Loading modal simply by doing



<LoadingModal modalVisible={true}/>


Enter fullscreen mode Exit fullscreen mode

or with custom task or label



<LoadingModal modalVisible={true} task={'Your task'} />


Enter fullscreen mode Exit fullscreen mode

That's it for this blog ❤️, If you guys want source code here's the link to the code website -> click here

`

Let me know your thoughts comments and share it with your friends !

With love Suyash ❤️🧑🏻‍💻

Top comments (3)

Collapse
 
suyashdev profile image
Suyash Vashishtha

Ok, so this blog inspired me to make a package for it and here it is lol-
react-native-loading-modal

Collapse
 
nicolas_aguilar_84454414e profile image
Nicolas Aguilar

Hey Suyash, I wanted to implement this loading modal in my app, and looks great, but then when I run my app again, freezes in the splash-screen, no error message.

No idea why, any recommendation?

Collapse
 
suyashdev profile image
Suyash Vashishtha

Sorry for the late replies , but have you tried updating the package ? I made some TS types updates in it , may be they can resolve it !