How do i add display loading screen while is rendering?

Hey,

How do i add display loading screen while is rendering ? This is an example from Google Adsense application page. The loading screen displayed before the main page showed after.

Thanks for you’re help,

Regards,

Hi Benjamin,

If you go to the Settings page of your app, you can upload a Splash Screen. The image you upload there will appear while the app is loading.

Thanks,
Angela

1 Like

@Benjamin sure thing! That is something that will have to be done outside of Draftbit and in code.

Once you’ve exported the project, you can add the a function towards the top after the this.state along the lines of:

loadIndicator() {
    return <ActivityIndicator color="#5A45FF" size="large" hidesWhenStopped={true} />
  }

and inside the WebView component you can add these props:

renderLoading={this.loadIndicator}
startInLoadingState={true}

Here’s the code for the whole screen put together:

import React from "react"
import { StatusBar, StyleSheet, WebView } from "react-native"
import { draftbit as screenTheme } from "../config/Themes"
import { withTheme, ScreenContainer, ActivityIndicator } from "@draftbit/ui"

class NewScreen extends React.Component {
  constructor(props) {
    super(props)
    StatusBar.setBarStyle("light-content")

    this.state = {
      theme: Object.assign(props.theme, screenTheme)
    }
  }

 loadIndicator() {
    return <ActivityIndicator color="#5A45FF" size="large" hidesWhenStopped={true} />
  }

  render() {
    const { theme } = this.state

    return (
      <ScreenContainer hasSafeArea={true} scrollable={false} style={styles.Root_ndo}>
        <WebView
          style={styles.WebView_nb7}
          renderLoading={this.loadIndicator}
          startInLoadingState={true}
          source={{ uri: "https://www.draftbit.com" }}
          bounces={true}
          scrollEnabled={true}
          scalesPageToFit={true}
          mediaPlaybackRequiresUserAction={true}
        />
      </ScreenContainer>
1 Like

Hey @angela, thanks for you’re answer. I already upload Splash Screen. What I would like is to know is there was a way to set up the same system as below for example when a webview is still loading. Splash Screen is just when the app is loading right ?

Thanks again for you’re help,

Hey @angela,

Thank you sincerely for taking the time to help me. it works very well.

Regards,

1 Like