HMS MAP not re render

[hussainahmad]

Description I'm trying to use Huawei maps in react native Application using bottom tab navigation. after making all suggested changes App first time load maps loaded successfully. after switching tab map hide.

Expected behavior map should load perfectly after tab switching.

Current behavior map not re rendering

Screenshots

Logs https://ghostbin.co/paste/fhh3v

Environment

• Platform: [ React-Native: 0.63.4, React: 16.13.1]
• Kit: [Map - 5.0.3-302-01 ]
• Kit Version [e.g. 5.0.3]
• OS Version [e.g. Android 10 Huawei Y9 prime]
• Android Studio version (if applicable) [e.g. 4.0]
• Platform version (if applicable)
• Node Version (14.15.3)
• Your Location/Region (if applicable)

Other Add any other context about the problem here

[hussainahmad]

For Reference

https://user-images.githubusercontent.com/5903522/103346557-23334d00-4ab6-11eb-8dc8-256fa18abc9d.mp4

[utarit]

Hi, Can you send me your code where you use tab navigation with map and your package.json file for further investigation?

[hussainahmad]

Hi @utarit Package.Json

  "dependencies": {
    "@hmscore/react-native-hms-map": "^5.0.3-302-01",
    "@hmscore/react-native-hms-push": "^5.0.2-301",
    "@react-native-community/async-storage": "^1.12.1",
    "@react-native-community/clipboard": "^1.5.1",
    "@react-native-community/cookies": "^5.0.1",
    "@react-native-community/datetimepicker": "^3.0.8",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-community/netinfo": "^5.9.9",
    "@react-navigation/material-bottom-tabs": "^5.3.10",
    "@react-navigation/material-top-tabs": "^5.3.10",
    "@react-navigation/native": "^5.8.10",
    "@react-navigation/stack": "^5.12.8",
    "accordion-collapse-react-native": "^0.4.0",
    "i18next": "^19.8.2",
    "moment": "^2.29.1",
    "moment-timezone": "^0.5.31",
    "prop-types": "^15.7.2",
    "react": "16.13.1",
    "react-fast-compare": "^3.2.0",
    "react-native": "^0.63.4",
    "react-native-bootsplash": "^3.1.2",
    "react-native-flash-message": "^0.1.17",
    "react-native-gesture-handler": "^1.9.0",
    "react-native-keyboard-aware-scroll-view": "^0.9.3",
    "react-native-localize": "^2.0.1",
    "react-native-material-dropdown": "^0.11.1",
    "react-native-material-menu": "^1.2.0",
    "react-native-modal-datetime-picker": "^9.1.0",
    "react-native-modals": "^0.19.10",
    "react-native-paper": "^4.5.0",
    "react-native-reanimated": "^1.13.2",
    "react-native-restart": "0.0.19",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-screens": "^2.16.1",
    "react-native-share": "^4.1.0",
    "react-native-tab-view": "^2.15.2",
    "react-native-timeago": "^0.5.0",
    "react-native-vector-icons": "^7.1.0",
    "react-native-webview": "^11.0.2",
    "react-redux": "^7.2.1",
    "redux": "^4.0.5",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0"
  },

And For Map:

<HMSMap
                    ref={ref => this.map = ref}
                    style={{width:Layout.window.width, height:Layout.window.height}}
                    camera={this.state.camera}
                    compassEnabled={true}
                    zoomControlsEnabled={true}
                    mapType={MapTypes.NORMAL}
                    mapStyle={
                      '[{"mapFeature":"all","options":"labels.icon","paint":{"icon-type":"night"}}]'
                    }
                    myLocationEnabled={true}
                    myLocationButtonEnabled={true}
                    markerClustering={true}
                >
                     {this.state.markers.length>0 && this
                        .state
                        .markers
                        .map((marker, index) => {
                            let title = this.props.label?marker.title:null
                            return <HMSMarker
                            key={index}
                            clusterable={true}
                            ref={ref => { this.marker = ref; }}
                            coordinate={marker.latlng}
                            onClick={()=>this.goToDetailScreen(marker.item)}
                            markerAnchor={[ 0.5, 0.5  ]}
                            infoWindowAnchor ={[ 0.5, 0.5  ]}
                            title={title}
                            rotation={marker.heading}
                           />
                            })}
                </HMSMap>

[utarit]

Hi, I am able to see the map with bottom navigation by using adding this style prop to map Can you try this and inform me if it worked? If it doesnt work can you share your navigation codes that you navigate to/from map so i can try your codes and find out the source of the problem.

showcase

[hussainahmad]

Hi , Sorry for the late response. I tried with above workaround it is not working , My navigation code is

const MonitorStack = createStackNavigator();
const MonitorStckScreen = () => (
    <MonitorStack.Navigator>
        <MonitorStack.Screen
            name="MapScreen"
            component={MapScreen}
           />
    </MonitorStack.Navigator>
)

const SettingStack = createStackNavigator();

const SettingStackScreen = ()=>(
    <SettingStack.Navigator screenOptions={{
        headerShown: false
      }}>
        <SettingStack.Screen name={'Setting Screen'} component={SettingScreen}/>
        <SettingStack.Screen name = {'FeedBack'} component={FeedBackScreen}/>
        <SettingStack.Screen name={'User Manual'} component={UserManual}/>
    </SettingStack.Navigator>
)

const BottomTab = createMaterialBottomTabNavigator();
const BottomTabScreen = () => (
    <BottomTab.Navigator
        barStyle={{
        backgroundColor: Theme.primary
    }}
        backBehavior={'initialRoute'}
        initialRouteName={'Unit Stack'}
        labeled={false}>
        <BottomTab.Screen
            name={'Map creen'}
            component={MonitorStckScreen}/>
        <BottomTab.Screen
            name={"Setting Screen"}
            component={SettingStackScreen}
            />
    </BottomTab.Navigator>
);

[utarit]

Hi, We have tried your code and simulate your environment as far as I can. We used the code below

/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
import HMSMap, {MapTypes} from '@hmscore/react-native-hms-map';
import {createStackNavigator} from '@react-navigation/stack';

function SettingsScreen() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Settings!</Text>
    </View>
  );
}

function HomeScreen() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <HMSMap
        style={{
          ...StyleSheet.absoluteFillObject,
          height: '100%',
        }}
        compassEnabled={true}
        zoomControlsEnabled={true}
        mapType={MapTypes.NORMAL}
        mapStyle={
          '[{"mapFeature":"all","options":"labels.icon","paint":{"icon-type":"night"}}]'
        }
        myLocationEnabled={true}
        myLocationButtonEnabled={true}
        markerClustering={true}
      />
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <BottomTabScreen />
    </NavigationContainer>
  );
}

const MonitorStack = createStackNavigator();
const MonitorStckScreen = () => (
  <MonitorStack.Navigator>
    <MonitorStack.Screen name="MapScreen" component={HomeScreen} />
  </MonitorStack.Navigator>
);

const SettingStack = createStackNavigator();

const SettingStackScreen = () => (
  <SettingStack.Navigator
    screenOptions={{
      headerShown: false,
    }}>
    <SettingStack.Screen name={'Setting Screen'} component={SettingsScreen} />
  </SettingStack.Navigator>
);

const BottomTab = createMaterialBottomTabNavigator();
const BottomTabScreen = () => (
  <BottomTab.Navigator
    backBehavior={'initialRoute'}
    initialRouteName={'Unit Stack'}
    labeled={false}>
    <BottomTab.Screen name={'Map creen'} component={MonitorStckScreen} />
    <BottomTab.Screen name={'Setting Screen'} component={SettingStackScreen} />
  </BottomTab.Navigator>
);

with these dependencies:

  "dependencies": {
    "@hmscore/react-native-hms-map": "^5.0.3-302-01",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/bottom-tabs": "^5.11.2",
    "@react-navigation/material-bottom-tabs": "^5.3.10",
    "@react-navigation/native": "^5.8.10",
    "@react-navigation/stack": "^5.12.8",
    "react": "16.13.1",
    "react-native": "0.63.4",
    "react-native-gesture-handler": "^1.9.0",
    "react-native-paper": "^4.5.0",
    "react-native-reanimated": "^1.13.2",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-screens": "^2.16.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.16.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.64.0",
    "react-test-renderer": "16.13.1"
  },

We couldn't achieve to reproduce same error. You can see the result video.

If you can send the all project, We can check the configuration files and other differences and spot the problem.