DEV Community

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

Posted on

8 1

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 ❤️🧑🏻‍💻

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

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 !

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more