CODEWITHSUNDEEP
javascriptreactjsreact-nativeexpo
Zeed Tanue
Zeed Tanue

Reputation: 121

React Native Expo splash with progress bar

I am learning React Native and practising it with expo. I have made a Loading screen for my app which is with npm react-native-progress. enter image description here

Is there any way i can replace the splash image in expo at app.json with my screen? I have made some studies and I found out expo comes with this default splash image option. How can i get rid off this ".png image splash" of expo and use a screen while the app is loading? If there's any please guide me through this.Thank you.

Upvotes: 0

Views: 1790

Answers (1)

Alex
Alex

Reputation: 766

You can just show that progress screen while the app is loading:

export default function App() {
  const [appIsReady, setAppIsReady] = useState(false);

  useEffect(() => {
    async function prepare() {
      await loadAllYourData();
      setAppIsReady(true);
    }

    prepare();
  }, []);


  return appIsReady ? (
    <View>
      <Text>My App</Text>
    </View>
  ) : (
    <MySplashScreenWithProgressBar />
  );
}

Upvotes: 0

Related Questions