Changing the theme of Google Map on click - React Native

Question

I have react native maps and I am setting the custom map theme as this.state.mapTheme .

constructor() {
    super();
    this.state = {
        mapTheme: Themes.SANANDREAS
    }
}

And I have the render method as such:

render() {
    return (
        <Container style ={styles.container}>      
            <Button rounded style={styles.contributeButton} onPress={() => {
                this.setState({
                    mapTheme: Themes.BROWNTHEME
                })
            }} iconLeft light>
              <Icon name='hand' />
              <Text>Contribute</Text>
            </Button>
            <MapView
                style={styles.map}
                provider = { MapView.PROVIDER_GOOGLE }
                customMapStyle = { this.state.mapTheme }
            ></MapView>
        </Container>
);}

It all seems to be working, but when I change the state on press of the button, the render method is getting called but the theme does not change. Both of my themes are working but on press nothing happens. The page reloads but without the new theme being used. What am I doing wrong here?

Answer 1

Considering the MapView component's lifecycle functions it won't update the styles automatically if new style props is passed. You should force it by calling _updateStyle after theme change directly with the help of 'ref':

setMapRef = ref => this.mapRef = ref;

handleButtonClick = () => {
  this.setState({ mapTheme: Themes.BROWNTHEME }, () => {
    this.mapRef._updateStyle();
  })
}

render() {
  return (
     <Container>      
       <Button onPress={this.handleButtonClick}
         title="Update map theme"
       />
       <MapView
         ref={this.setMapRef}
         customMapStyle={this.state.mapTheme}
       />
     </Container>
  );
}