在加载过程中显示文本

Question

I have a question. I have a loader and during the loading I would show three different texts. Like text1, then this disappear and it's show text2 and then text3.

<View style={style.container}>
        <View style={style.page}>
          <ActivityIndicator size="large" color="#56cbbe" />
          <Text>Text1.. </Text> 
          <Text>Text2.. </Text> 
          <Text>Text3.. </Text>
        </View>
</View> 

In this case I only show the three texts together. How can I do?

Thank you:)

Answer 1

What you want is to show indicator and text1 during loading time and then text2 and text3 . Is that right?

So I made an example for you. This should solve the problem by changing the status value. You can display the indicator for the duration of loading and show the text by changing the status value when loading is complete.

Example Code

//This is an example code to understand ActivityIndicator//

import React from 'react';
//import react in our code.

import { ActivityIndicator, Button, View, StyleSheet,Text } from 'react-native';
//import all the components we are going to use.

export default class App extends React.Component {
  state = { showIndicator: true };

  componentDidMount() {
     setTimeout(() => {this.setState({showIndicator: false})}, 2000)
  }

  onButtonPress = () => {
    //function to change the state to true to view activity indicator
    //changing state will re-render the view and indicator will appear
  };

  render() {
    //Check if showIndicator state is true the show indicator if not show button
    if (this.state.showIndicator) {
      return (
        <View style={styles.container}>
          {/*Code to show Activity Indicator*/}
          <ActivityIndicator size="large" color="#0000ff" />
                    <Text>Text1.. </Text> 
          {/*Size can be large/ small*/}
        </View>
      );
    } else {
      return (
        <View style={styles.container}>
           <Text>Text2.. </Text> 
          <Text>Text3.. </Text>
        </View>
      );
    }
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    flexDirection: 'column',
    alignItems: "center"
  },
});

Answer 2

One way to solve this is to use setInterval and call update function to loop through the texts assuming if they are present in form of array.

Simply saying for example.

Let's maintain loadingText in state as loadingText: ['text1', 'text2', 'text3'] ,A variable to track the present item as currentLoadingTextIndex: 0 and call setInterval in componentDidUpdate . Be careful when calling update function in here,as one wrong mistake will make your app crash.

componentDidUpdate(prevProps, prevState) {
    if (!prevState.isLoading && this.state.isLoading) {
      this.timerId = setInterval(this.changeLoadText, 2000);
    } else if (prevState.isLoading && !this.state.isLoading) {
      clearInterval(this.timerId);
    }
  }

and finally our update function

changeLoadText = () => {
    this.setState(prevState => {
      return {
        currentLoadingTextIndex:
          (prevState.currentLoadingTextIndex + 1) %
          prevState.loadingText.length,
      };
    });
  };

I am attaching a working expo Demo for clarity purpose.