How to add full screen control in Mapbox GL using react native

How to add full screen control in Mapbox GL using react native

To use the FullscreenControl component from Mapbox GL in a React Native app, you’ll typically need to create a custom component that handles the full-screen functionality since Mapbox GL doesn’t provide a built-in fullscreen control for React Native. You can achieve this by manipulating the dimensions of the MapView component.

Here’s an example of how you might create a custom fullscreen control for a Mapbox GL map in React Native:

First, install the required packages if you haven’t already:

npm install react-native-mapbox-gl @react-native-mapbox-gl/maps

Then, create a custom component to handle the fullscreen functionality:

import React, { useState } from 'react';
import MapboxGL from '@react-native-mapbox-gl/maps';
import { Dimensions, TouchableOpacity } from 'react-native';

const MapFullScreen = () => {
  const [isFullScreen, setIsFullScreen] = useState(false);

  const toggleFullScreen = () => {
    setIsFullScreen(!isFullScreen);
  };

  const getMapDimensions = () => {
    if (isFullScreen) {
      return Dimensions.get('window');
    } else {
      return { width: 300, height: 300 }; // Set default dimensions here
    }
  };

  return (
    <TouchableOpacity onPress={toggleFullScreen}>
      <MapboxGL.MapView style={getMapDimensions()}>
        {/* Your MapboxGL components */}
      </MapboxGL.MapView>
    </TouchableOpacity>
  );
};

export default MapFullScreen;

 

You can also use the React native Modal to show the full screen on the same screen like below screenshot:-

Show Fullscreen using <MODAL/>

<Modal
             dismissable={false}
             visible={isFullMapVisible}
             style={{
               justifyContent: 'center',
               alignItems: 'center',
               flex: 1,
               margin: 0,
             }}>
             <MapboxGL.MapView>
             
           </MapboxGL.MapView>
</Modal>