Calling a component that is not displayed - react-native

Question

I need some help please.
in one of my pages I call a component. However, it is not displayed. I'm not sure what's wrong, and how to find out where exactly the error came from. I know that the code contained in the component is good since I am calling it in another screen. I wonder if it's not because of 'parent' use
<View style={{width: "66.66%"}}>
<MapView parent={this} />
<Text>{"ICIII"}</Text>
</View>
There is just the text that is displayed (the text was here just to test). I hope someone can help me try to understand where the problem come from, I know I have a lot to learn so thank you for your time and explanations.
This is the component MapView :
export default class MapView extends Component {
constructor(props) {
super(props);
this.state = {
progress: new Animated.Value(0),
onLoading: true,
height: 0,
user_id: 0,
lang: "en",
access_token: "",
stats : "",
screen_updated: 0,
map_request_periods: "",
map_request_periods_title: "",
map_request_periods_val: "*"
};
}
performMessageFromWebView(e) {
if (e.nativeEvent && e.nativeEvent.data) {
let id = e.nativeEvent.data.replace('flightId=', '');
if (parseInt(id) > 0) {
this.props.navigation.navigate("UpdateTripsForm", {flightId: parseInt(id)}); // Open Screen UpdateTripForm.js
return true;
}
}
return false;
}
initUserData = async () => {
let user_id = await retrieveProfileUserId();
let lang = await retrieveAppLang();
let user_stats = await getUserFlightStats();
let access_token = await renewAccessToken();
if (user_id && lang && access_token && parseInt(user_id) > 0) {
this.setState({
user_id: parseInt(user_id),
lang: lang,
stats: user_stats,
access_token: access_token,
});
}
};
async UNSAFE_componentWillMount() {
this.initUserData();
}
async componentDidMount() {
// Refresh data
this.props.navigation.addListener("didFocus", async (payload) => {
let user_id = await retrieveProfileUserId();
let user_stats = await getUserFlightStats();
let access_token = await renewAccessToken();
if (user_id && access_token && parseInt(user_id) > 0) {
this.setState({
screen_updated: this.state.screen_updated + 1,
user_id: parseInt(user_id),
stats: user_stats,
access_token: access_token,
map_request_periods: "", // Force reinitialize choice
map_request_periods_title: "",
map_request_periods_val: "*"
});
console.log(Device.DeviceType);
}
// Force PORTRAIT orientation
await ScreenOrientation.getOrientationAsync().then(
(data_orientation) => {
if (parseInt(data_orientation) == parseInt(ScreenOrientation.Orientation.LANDSCAPE_LEFT) || parseInt(data_orientation) == parseInt(ScreenOrientation.Orientation.LANDSCAPE_RIGHT)) {
ScreenOrientation.lockAsync(
ScreenOrientation.OrientationLock.PORTRAIT_UP
);
}
}
);
});
// const data = this.props.navigation.getParam('this.selectedStartDate', 'this.selectedEndDate');
// this.setState({ this.state.selectedStartDate, this.state.selectedEndDate});
Animated.timing(this.state.progress, {
toValue: 1,
duration: 3000,
easing: Easing.linear,
useNativeDriver: true,
}).start();
if (this.state.onLoading == true) {
setTimeout(
function () {
this.setState({ onLoading: false });
}.bind(this),
3000
);
}
}
render() {
return (
<View>
<WebView
geolocationEnabled={true}
javaScriptEnabled={true}
scrollEnabled={false}
overScrollMode="never"
source={{
uri:
"https://www.blzlva.org/fr/mestrips" +
"?society_id=" + API_SOCIETYID +
"&user_id=" + this.state.user_id +
"&lang=" + this.state.lang +
"&hidezoom=1" +
"&access_token=" + this.state.access_token +
"&screen=" + this.state.screen_updated
}}
originWhitelist={[
"https://www.blzblz.org",
"https://www.blabla.com"
]}
scalesPageToFit={true}
onMessage={(m) => this.performMessageFromWebView(m)}
style={{ marginHorizontal: 0, backgroundColor: "transparent" }}
/>
</View>
);
}
}

Answer 1

Import the map component which page you want to use it like following,
import Map from '../../map.js'
then use the component inside a view like following,
<View style={{width:100px}}>
<Map/>
</View>