Getting a warning when passing from one screen to another - react-native

Question

The error doesn't keep me from going from one screen to another but I want to understand it.
The error is:
Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.
The first screen code is:
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isFirstConnection: true,
status: 0,
fontLoaded: false,
isConnected: false
};
}
async UNSAFE_componentWillMount() {
let lang = await retrieveAppLang();
if (lang.length == 2) {
i18n.changeLanguage(lang);
}
}
async componentDidMount() {
let isConnected = await userSessionActive();
await Font.loadAsync({
FunctionLH: require("./assets/fonts/FunctionLH-Light.ttf"),
});
const data = await this.performTimeConsumingTask();
if (data !== null && (isConnected === false || isConnected === true)) {
this.setState({
isFirstConnection: false,
status: 1,
fontLoaded: true,
isConnected: isConnected
});
}
}
performTimeConsumingTask = async () => {
return new Promise((resolve) =>
setTimeout(() => {
resolve("result");
}, 1500)
);
};
render() {
if (this.state.status == 1) {
if (this.state.isFirstConnection && this.state.fontLoaded) {
return <SplashScreen />;
} else if (this.state.isConnected === true) {
// TODO : Use Navigation !
return <Navigation screenProps={'MyTrips'}/>;
} else {
return <Navigation screenProps={'Authentication'}/>;
}
}
return (
<ImageBackground
source={require("./assets/images/background.jpg")}
style={{ flex: 1 }}
>
<View style={[styles2.container, styles2.containerCentered]}>
<StatusBar hidden={true} />
<View style={styles2.subContainer}>
<Image
style={styles2.logo}
source={require("./assets/images/logo.png")}
/>
<ActivityIndicator size="large" color="#43300E" />
<Text>Loading data...</Text>
</View>
</View>
</ImageBackground>
);;
}
}
The second screen (I guess this is the origin of the problem):
export default class MyTrips extends Component {
constructor(props) {
super(props);
this.state = {
location: null,
errorMessage: null,
measured: false,
height: 0,
value1: 0,
};
}
handleLayout = (e) => {
this.setState({
measured: true,
height: e.nativeEvent.layout.height + 1,
});
};
render() {
return (
<ImageBackground
source={require("../../assets/images/background.jpg")}
style={styles.backgroundImage}
>
<Header
backgroundImage={require("../../assets/images/bg-header.png")}
backgroundImageStyle={{
resizeMode: "stretch",
}}
centerComponent={{
text: i18n.t("mytrips.title"),
style: styles.headerComponentStyle,
}}
containerStyle={[styles.headerContainerStyle, { marginBottom: 0 }]}
statusBarProps={{ barStyle: "light-content" }}
/>
<ScrollView style={styles.containerScrollNoMargins}>
<View style={{ width: '100%', height: height / 3 + 40}}>
<WebView
geolocationEnabled={true}
source={{
uri:
"https:blabla",
}}
originWhitelist={[
"https://www.blabla.org",
"https://www.hophop.com",
]}
injectedJavaScript={`const meta = document.createElement('meta');
meta.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-
scale=0.5, user-scalable=0'); meta.setAttribute('name', 'viewport');
document.getElementsByTagName('head')[0].appendChild(meta); `}
scalesPageToFit={false}
style={{ marginHorizontal: 0, backgroundColor: "transparent" }}
/>
</View>
<View style={styles.container}>
<Text>{"\n"}</Text>
<TouchableOpacity
style={styles.touchable}
onPress={() => this.props.navigation.navigate("TripsForm")}
>
<View style={styles.view}>
<Text style={styles.textimg}>{i18n.t("mytrips.trip")}</Text>
</View>
<Image
source={require("../../assets/images/btn-background.png")}
style={styles.tripsimg}
/>
</TouchableOpacity>
</View>
<View style={styles.container}>
<Image
source={require("../../assets/images/cadran.png")}
style={styles.btnWithIcon}
/>
<View style={[styles.row, { marginTop: 28 }]}>
<Text style={styles.statText}>
{i18n.t("stats.action.dist")}
{"\n"}
<AnimateNumber
value={10000}
countBy={100}
style={{
fontFamily: "FunctionLH",
fontSize: 24,
color: "#FFF",
}}
/>
</Text>
</View>
<Text
style={[styles.textimg, styles.measure]}
onLayout={this.handleLayout}
>
0
</Text>
<Image
source={require("../../assets/images/btn-background.png")}
style={styles.cadran}
/>
</View>
<View style={styles.container}>
<Image
source={require("../../assets/images/hublo.png")}
style={styles.btnWithIcon}
/>
<View style={[styles.row, { marginTop: 28 }]}>
<Text style={styles.statText}>
{i18n.t("stats.action.flights")}
{"\n"}
<AnimateNumber
value={100}
countBy={1}
style={{
fontFamily: "FunctionLH",
fontSize: 24,
color: "#FFF",
}}
/>
</Text>
</View>
<Text
style={[styles.textimg, styles.measure]}
onLayout={this.handleLayout}
>
0
</Text>
<Image
source={require("../../assets/images/btn-background.png")}
style={styles.cadran}
/>
</View>
<Text>{"\n"}</Text>
</ScrollView>
</ImageBackground>
);
}
}

Answer 1

I found the solution but I don't really understand why there was an error...
Instead of:
return <Navigation screenProps={'MyTrips'}/>;
} else {
return <Navigation screenProps={'Authentication'}/>;
}
I directly imported the screens and this works:
return <MyTrips/>;
} else {
return <Authentication />;