Display fullscreen image when state is loading using Redux

Question

I have a fullscreen image I would like to display when my app state is loading. How can set this up?

I would like to implement something like this:

if (videos == "") {
  return (
    <View style={styles.imageContainer}>
      <Image
        style={styles.image}
        source={require("../assets/images/tc-logo.png")}
      />
    </View>
  );
}

My current app.js looks like this

export default class App extends React.Component {
  runInitialAppStartActions = () => {
    store.dispatch(fetchData());
  };

  render() {
    return (
      <ImageBackground
        source={require("./assets/images/TC_background.jpg")}
        style={styles.container}
      >
        <Provider store={store}>
          <PersistGate
            loading={null}
            persistor={persistor}
            onBeforeLift={this.runInitialAppStartActions}
          >
            <AppNavigator
              ref={navigatorRef => {
                NavigationService.setTopLevelNavigator(navigatorRef);
              }}
            />
          </PersistGate>
        </Provider>
      </ImageBackground>
    );
  }
}

I have a redux action, but how would I connect my main app.js to redux? — Bomber, Jul 19 '19 at 13:49
Sorry, don't know about redux much. You should add redux tag to your question. :-) — Monika Mangal, Jul 19 '19 at 13:54

score 0 · Answer 1 · answered Jul 19 '19 at 14:06

0

Sory, i can't write comment, i need 50 reputation for comments.So I'm writing as an answer. Im new in react, maybe you can solve with componentDidMount() method.

You can look this question: Stop rendering of a component after componentDidMount()

answered Jul 19 '19 at 14:06

ariferol01

221
4
13

jovan curayag · Answer 2 · 2019-07-19T15:07:32.143

You can simply do it like this. I just assumed that you have a state named videos.

import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as videoAction from '../actions/videoAction.js';

class App extends React.Component {
  constructor(props) {
   super(props);
   this.state = {
     videos: ''
    };
   }
  async componentDidMount() {
    await this.props.videoAction.getVideo();

    this.setState({
     videos: this.props.videoState.videos
    }); 
  }
  runInitialAppStartActions = () => {
    store.dispatch(fetchData());
  };

  render() {
    const {videos} = this.state;

    if (videos == "") {
      return (
        <View style={styles.imageContainer}>
          <Image
            style={styles.image}
            source={require("../assets/images/tc-logo.png")}
          />
        </View>
      );
     }else{
        return (
          <ImageBackground
            source={require("./assets/images/TC_background.jpg")}
            style={styles.container}
          >
            <Provider store={store}>
              <PersistGate
                loading={null}
                persistor={persistor}
                onBeforeLift={this.runInitialAppStartActions}
              >
                <AppNavigator
                  ref={navigatorRef => {
                  NavigationService.setTopLevelNavigator(navigatorRef);
                  }}
                />
              </PersistGate>
            </Provider>
          </ImageBackground>
        );
      }
  }
}
const mapStateToProps = (state) => {
 return {
  videoState: state.videoState
 };
};
const mapDispatchToProps = (dispatch) => {
 return{
  videoAction: bindActionCreators(videoAction, dispatch)
 };
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

App.js isn't connected to redux so I can't access state – Bomber Jul 19 '19 at 14:51 — Bomber, Jul 19 '19 at 14:51
you should connect your redux like that. – jovan curayag Jul 19 '19 at 15:08 — jovan curayag, Jul 19 '19 at 15:08

Display fullscreen image when state is loading using Redux

2 Answers2