[Bug]: snapshotManager.takeSnap does not work with bounds

[NVTuann201]

Mapbox Implementation

Mapbox

Mapbox Version

default

React Native Version

0.75.2

Platform

Android

@rnmapbox/maps version

10.1.31

Standalone component to reproduce

import {Camera, MapView, snapshotManager, StyleURL} from '@rnmapbox/maps';
import {useState} from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';

const AppMap = () => {
 const bounds = [
   [73.7600360295555, 27.562587612793436],
   [77.33589097013527, 23.986732672213662],
 ];
 const [map, setMap] = useState<MapView | null>(null);

 const onPress = async () => {
   if (!map) {
     return;
   }
   const snapshot = await snapshotManager.takeSnap({
     bounds,
     width: 1024,
     height: 1024,
   });
 };

 return (
   <View style={styles.page}>
     <View style={styles.container}>
       <MapView
         styleURL={StyleURL.SatelliteStreet}
         ref={c => setMap(c)}
         style={styles.map}></MapView>
       <TouchableOpacity style={styles.button} onPress={onPress}>
         <Text style={styles.buttonText}>Take Snap</Text>
       </TouchableOpacity>
     </View>
   </View>
 );
};
const styles = StyleSheet.create({
 page: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
 },
 container: {
   height: '100%',
   width: '100%',
 },
 map: {
   flex: 1,
 },
 button: {
   position: 'absolute',
   bottom: 20,
   left: '50%',
   transform: [{translateX: -50}],
   backgroundColor: '#007AFF',
   paddingVertical: 10,
   paddingHorizontal: 20,
   borderRadius: 5,
   justifyContent: 'center',
   alignItems: 'center',
 },
 buttonText: {
   color: '#FFF',
   fontSize: 16,
   fontWeight: 'bold',
 },
});

export default AppMap;

Observed behavior and steps to reproduce

Expected behavior

Can take screenshot with input bounds

Notes / preliminary analysis

No response

Additional links and references

No response

[github-actions]

Lint failed 😭

Please fix the errors in your code example - More info.:

error: 'React' must be in scope when using JSX (react/react-in-jsx-scope) at example.tsx:25:5:
  23 | 
  24 |   return (
> 25 |     <View style={styles.page}>
     |     ^
  26 |       <View style={styles.container}>
  27 |         <MapView
  28 |           styleURL={StyleURL.SatelliteStreet}


error: 'React' must be in scope when using JSX (react/react-in-jsx-scope) at example.tsx:26:7:
  24 |   return (
  25 |     <View style={styles.page}>
> 26 |       <View style={styles.container}>
     |       ^
  27 |         <MapView
  28 |           styleURL={StyleURL.SatelliteStreet}
  29 |           ref={c => setMap(c)}


error: 'React' must be in scope when using JSX (react/react-in-jsx-scope) at example.tsx:27:9:
  25 |     <View style={styles.page}>
  26 |       <View style={styles.container}>
> 27 |         <MapView
     |         ^
  28 |           styleURL={StyleURL.SatelliteStreet}
  29 |           ref={c => setMap(c)}
  30 |           style={styles.map}></MapView>


error: 'React' must be in scope when using JSX (react/react-in-jsx-scope) at example.tsx:31:9:
  29 |           ref={c => setMap(c)}
  30 |           style={styles.map}></MapView>
> 31 |         <TouchableOpacity style={styles.button} onPress={onPress}>
     |         ^
  32 |           <Text style={styles.buttonText}>Take Snap</Text>
  33 |         </TouchableOpacity>
  34 |       </View>


error: 'React' must be in scope when using JSX (react/react-in-jsx-scope) at example.tsx:32:11:
  30 |           style={styles.map}></MapView>
  31 |         <TouchableOpacity style={styles.button} onPress={onPress}>
> 32 |           <Text style={styles.buttonText}>Take Snap</Text>
     |           ^
  33 |         </TouchableOpacity>
  34 |       </View>
  35 |     </View>


5 errors found.```