hide a view on condition in react native

Question

I am developing react native application where I wanted to show some loader before loading screen,

I have different component for Loader and different component to load data,

In Loader component I hava a field isVisible (true/false) like below

constructor(props) {
        super(props);
        this.state = {
        index: 0,
        types: ['CircleFlip', 'Bounce', 'Wave', 'WanderingCubes', 'Pulse', 'ChasingDots', 'ThreeBounce', 'Circle', '9CubeGrid', 'WordPress', 'FadingCircle', 'FadingCircleAlt', 'Arc', 'ArcAlt'],
        size: 100,
        color: "#ff0000",
        isVisible: true
        }

render() {
    var type = this.state.types[this.state.index];

    return (
      <View style={styles.container}>
        <Spinner style={styles.spinner} isVisible={this.state.isVisible} size={this.state.size} type={'ThreeBounce'} color={this.state.color}/>
      </View>
    );
  }

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    // backgroundColor: '#d35400',
  },

  spinner: {
    marginBottom: 50
  },

  btn: {
    marginTop: 20
  },

  text: {
    color: "white"
  }
});

and in Other Component where I am rendering my view after getting data from api.

constructor(props) {
        super(props);
        this.state = {
          tableHead: ['Form Name', 'Download'],
          tableData: [],
          isVisible:true
        }
      }

 componentDidMount(){
          dataSourceRes =getDocumentList(function(dataSourceRes){
             var tableDataRows=[];
             for(let i = 0; i < dataSourceRes.length; i++){
                var arr=[];
                arr.push(dataSourceRes[i].docName, dataSourceRes[i].docPath);
                tableDataRows.push(arr);
             }
             this.setState({
                tableData : tableDataRows
             });


        }.bind(this));
     };
render() {

    const state = this.state;
    const element = (data, index) => (
      <TouchableOpacity onPress={() => this._alertIndex(data)}>
        <View style={styles.btn}>
          <Text style={styles.btnText}>Download</Text>
        </View>
      </TouchableOpacity>
    );

    return (
      <View style={styles.container}>
        <Loader></Loader>
       {/* <Loader> */}
        <ScrollView>
        <Table borderStyle={{borderColor: 'transparent'}}>
          <Row data={state.tableHead} style={styles.head} textStyle={styles.textHeader}/>
          {
            state.tableData.map((rowData, index) => (
              <TableWrapper key={index} style={styles.row}>
                {
                  rowData.map((cellData, cellIndex) => (
                    <Cell key={cellIndex} data={cellIndex === 1 ? element(cellData, index) : cellData} textStyle={styles.text}/>
                  ))
                }
              </TableWrapper>
            ))
          }
        </Table>

        </ScrollView>

        {/* </Loader> */}

      </View>
    )
  }
}

Please let me know the solution how to resolve it

Answer 1

You could do as follows

class Foo extends React.Component {
  constructor(props) {
    this.state = { loading: true };
  }

  componentDidMount() {
    // Fetch data then set state
    fetch(something).then(() => this.setState({ loading: false }));
  }

  render() {
    if (this.state.loading) {
      return <Loader/>;
    }

    return <MyComponent/>;
  }
}  

Answer 2

从api获取数据后，将isvisibility false发送给加载程序组件