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!