Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16552

React-native - screen on iOS is not updated even if render method is called

$
0
0

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>        )    }}

Viewing all articles
Browse latest Browse all 16552

Trending Articles