React-navigation and MapView issues

#1

Hi everyone! I’m starting to learning some topics about react-navigation, everything was okay until I had to work with a MapView…

Expected Behavior:

  • MapView renders at the initial region I’m passing to it. (Location of the user’s phone)
  • Whenever the user go back to the map, it has to be located at the user’s current city.

Current Behavior:
At the expoV23.0.0 I had an issue that whenever I go back to the MapView from any screen located at a drawer, the map appears with the zoom out at its maximum. Then I realize this happens because react-navigation re-renders a map in top of my old map, and the search location is constantly updating with wrong latitudes.

My second issue appeared after upgrading to the expov25.0.0, now when the MapView renders the first time, it does at a wrong location, something it’s changing the initial region (I’ve already checked the coords i’m sending to it and everything is find) of the MapView and now it is located in the middle of the sea.

package.json:

{
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "dependencies": {
    "axios": "^0.17.1",
    "country-data": "0.0.31",
    "expo": "^25.0.0",
    "firebase": "^4.8.0",
    "react": "16.2.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz",
    "react-native-app-link": "^0.4.0",
    "react-native-elements": "^0.18.4",
    "react-native-google-places-autocomplete": "^1.3.6",
    "react-native-google-static-map": "^0.1.11",
    "react-native-modal-dropdown": "^0.6.0",
    "react-native-modalbox": "^1.4.2",
    "react-native-star-rating": "^1.0.8",
    "react-native-timer": "^1.3.1",
    "react-navigation": "^1.0.0-beta.27",
    "react-redux": "^5.0.6",
    "react-timer-mixin": "^0.13.3",
    "redux": "^3.7.2",
    "redux-persist": "^5.4.0",
    "redux-thunk": "^2.2.0",
    "socket.io": "^2.0.4",
    "socket.io-client": "^2.0.4",
    "validate.js": "^0.12.0"
  }
}

Example my navigator structure:

const MainNavigator = TabNavigator({
        screen: { screen: Loader },
        map: { screen: Drawer },
                  .......
             some other screens
      }, {
        navigationOptions: {
          tabBarVisible: false
        },
        lazy: true
      });

const Drawer = DrawerNavigator({
  mainComponent : {
    screen : StackNavigator({
      mapDrawer:{screen:MapViewerScreen},
      group1:{
        screen: StackNavigator({
            test :  {screen : Test}
                   .....
          some other screens
        }, {
          initialRouteName: 'profileInfo',
          swipeEnabled:false,
          animationEnabled:false,
          navigationOptions:{
            tabBarVisible:false,
            headerStyle:{
              marginTop: Platform.OS=== 'ios' ? 0: 24,
            },
          },
          tabBarOptions: {
            indicatorStyle: {
              color:'#03add9',
            },
            labelStyle: {
              fontSize:22,
              color:'#5c5c61',
              paddingBottom:5,
            }
          }
        })
      },
      group2: {
        screen : TabNavigator({
          some other screens 
               .......
        }, {
            tabBarPosition: 'top',
            backBehavior:'none',
            swipeEnabled: false,
            animationEnabled:false,
            navigationOptions: {
              tabBarVisible:false,
            },
            lazyLoad: true,
            tabBarOptions: {
              backBehavior: 'none',
              labelStyle: {
                fontSize:22,
                color:'#5c5c61',
                paddingBottom:5,
              },
              indicatorStyle: {
                backgroundColor:'#03add9',
                height: 2,
                alignSelf: 'flex-end',
              },
              tabStyle: {
                backgroundColor: 'white',
                height: height * 0.07
              },
            }
        })
      },
      rent:{
        screen: TabNavigator({
          some other screens.....
        },{
          swipeEnabled:false,
          animationEnabled:false,
          lazyLoad: true,
          navigationOptions:{
            tabBarVisible:false,
          }
        })
      },
      help:{
        screen: TabNavigator({
          some other screens.....
        })
      }
    }, {
      initialRouteName: 'mapDrawer',
      navigationOptions: {
        headerTitleStyle: {
          fontSize:22,
          color:'#03add9'
        },
        headerStyle: {
          backgroundColor: '#f4fcfe',
          height: height *0.1,
        },
      },
    })
  }
},{
  drawerOpenRoute: 'DrawerOpen',
  drawerCloseRoute: 'DrawerClose',
  drawerToggleRoute: 'DrawerToggle',
  navigationOptions: ({navigation}) => ({
    drawerLockMode: 'locked-closed'
  }),
  contentOptions: {
    activeTintColor: "#e91e63"
  },
  contentComponent: props => <SideBar {...props} />
})

PS: I’m not a native speaker, so please feel free to correct my english I want to improve it too!

#2

Hey there @sagomezza - sorry this is so frustrating! We pull in react-native-maps for the MapView component, so it might be best to check their documentation/issues for help. Note that in SDK 25 we use 0.19.0 of react-native-maps (link) and in SDK 23 we used 0.17.1 (link).

It’s difficult for us to help with your issue directly since it seems to depend on the specific structure of your code & how you’re using react-navigation and react-native-maps together. However, if you can make a snack that minimally reproduces your problem - i.e. has the smallest amount of code necessary to reproduce it - we might be able to help!

#3

It seems that my second problem is solved in react-native-maps v0.20.0, is there any way to update it? Or I have to wait till expo v26.0.0 is released?

Ty for the quick answer.

#4

React Native Maps has native code, so you will need a future version of the Expo client.

#5

I see.There’s any expected release date for the next version? Will the next version use react-native-maps v0.20?

#6

No expected release date. An upgrade of RN Maps wasn’t slated for SDK 26. In general, if you need something in a timely way, detaching gives you that control.

closed #7

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.