I am working on mobile app and I've run into problem which I don't know how to resolve.
I have to load some data from API after creating a screen. I do this in componentDidMount
method which is async
so I can use await
keyword. After that I am setting state so the Loader component (which is just modal displaying text) is hidden and the screen is rerendered with data from API. This works fine on Android devices. But running this code on iOS (iPhone X) doesn't work. The render methods of SomeScreen.js
and Loader.js
are called and Loader.js
render method is returning null (checked with console) but the view on iPhone is not updated. Loader modal is still there even when its render method is returning null. Am I doing anything wrong? Calling this.foceUpdate()
doesn't help either.
SomeScreen.js
import React, {Component} from 'react';import Loader from 'components/Loader/Loader';export default class SomeScreen extends Component { constructor(props) { super(props); this.state = { loading: true, data: [] }; } async componentDidMount() { const data = await this.loadData(); this.setState({loading: false, data: data}) } async loadData() { //fetch and return data from API } render() { return (<SafeAreaView style={{flex: 1}}><Loader loading={this.state.loading}/> //other rendering...</SafeAreaView> ); }}
Loader.js
import React, {Component} from 'react';import {Modal, Text, View} from 'react-native';export default class Loader extends Component { static defaultProps = { loading: false }; render() { if (this.props.loading !== true) { return null; } return(<Modal transparent={false} animationType={'none'} visible={true}><View style={{backgroundColor: "white", flex: 1, justifyContent: "center"}}><Text>Loading data...</Text></View></Modal> ) }}