How do i add display loading screen while is rendering?

#1

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.

loading
loading.gif1794×914 638 KB

Thanks for you’re help,

Regards,

#2

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.

16%20PM
Screen Shot 2019-11-05 at 2.24.16 PM.png1742×1280 138 KB

Thanks,
Angela

1 Like
#4

@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
#3

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,

#5

Hey @angela,

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

Regards,

1 Like