Set Tint Color

Change the tint color of the map. This will change the color of the user location icon and the compass.

import React from 'react';
import { MapView, Camera, UserLocation } from '@rnmapbox/maps';
import { ButtonGroup } from '@rneui/base';
import { SafeAreaView } from 'react-native-safe-area-context';

const COLOR = ['red', 'yellow', 'green'];
const OPTIONS = [{ label: 'red' }, { label: 'yellow' }, { label: 'green' }];
const styles = { matchParent: { flex: 1 } };

class SetTintColor extends React.Component {
  state = { tintColor: COLOR[0] };

  onTintColorChange = (index) => {
    this.setState({ tintColor: COLOR[index] });
  };

  render() {
    return (
      <SafeAreaView style={styles.matchParent}>
        <MapView style={styles.matchParent} tintColor={this.state.tintColor}>
          <Camera
            followZoomLevel={16}
            followUserMode="compass"
            followUserLocation
          />

          <UserLocation renderMode="native" androidRenderMode="compass" />
        </MapView>
        <ButtonGroup
          onPress={this.onTintColorChange}
          buttons={OPTIONS.map((i) => i.label)}
          selectedIndex={COLOR.indexOf(this.state.tintColor)}
        />
      </SafeAreaView>
    );
  }
}

export default SetTintColor;

}