Calculate bbox in turf.js,MapBox,react-native-mapbox-gl(react-native code)?

turf js examples
turf min
turfjs version
turf leaflet
turf extent
turf js builder
turf typescript

I am trying to calculate bbox from turf.js like give in the below link

http://turfjs.org/docs#bbox

This is my code and how i tried to implement bbox from turf.js But its resulting in an error.

import React, { Component } from 'react';
import { View, Text,StyleSheet } from 'react-native';
import {Spinner} from 'native-base';
import Mapbox from '@mapbox/react-native-mapbox-gl';
import MapboxGL from '@mapbox/react-native-mapbox-gl';
import MapboxClient from '@mapbox/react-native-mapbox-gl';
import { lineString as makeLineString} from '@turf/helpers';
import turf from '@turf/bbox'

Mapbox.setAccessToken('pk.eyJ1IjoiYW1hbHAiLCJhIjoiY2pkdTZ0M3ZpMnFsYzJ2amc0ZnRjZXRhMCJ9.8PFRuAdcjb7OMHAQHiW5fA');

const myCoords = [
  [43.75, -16.875],
  [33.75, -16.875],
  [22.5, -22.5],
]

const line = makeLineString(myCoords)

var bounds = turf.bbox(myCoords);

//var bounds = require('bound-points')(myCoords)

const layerStyles = MapboxGL.StyleSheet.create({
  origin: {
    circleRadius: 5,
    circleColor: 'white',
  },
  destination: {
    circleRadius: 5,
    circleColor: 'white',
  },
  route: {
    lineColor: 'red',
    lineWidth: 10,
    lineOpacity: 0.84,
  },
  progress: {
    lineColor: '#314ccd',
    lineWidth: 3,
  },
});


export default class App extends Component {

  componentDidMount() {

   }

  constructor(props) {
    super(props);

    this.state = {
      latitude: 41.596,
      longitude: 1.542,
      error: null,
      isMapLoaded: true,
      isLoaded: true,
      isTimeout: false,
      route: null,
      currentPoint: null,
      routeSimulator: null,
      visibleBounds: undefined
    };


  }

  getVisibleBounds = async () => {
    const visibleBounds = await this.map.getVisibleBounds();
    this.setState({ visibleBounds });
    console.log(visibleBounds + "amal")
    console.log(visibleBounds[0] + "amal")
    console.log(visibleBounds[1] + "amal")    
    if(visibleBounds != null)
    {
       this.onFitBounds(visibleBounds);
    }
  };

  onFitBounds (visibleBounds) {
    this.map.fitBounds( bounds[0],bounds[1], 20); // ne sw
  }


  render() {
    return (
      <View style={styles.container}>
        {
         this.state.isMapLoaded?this.mapView():null
        }
      </View>
    );
  }

  mapView(){
    return(
      <Mapbox.MapView
        ref={(ref) => this.map = ref}
        styleURL={Mapbox.StyleURL.Street}
        zoomLevel={8}
        centerCoordinate={[47.809532,13.055054]}
        onDidFinishRenderingMapFully={this.getVisibleBounds}
        style={styles.container}
       >
      <MapboxGL.ShapeSource id='line1' shape={line}>
       <MapboxGL.LineLayer style={layerStyles.route} id='linelayer1' />
       </MapboxGL.ShapeSource>
      </Mapbox.MapView>
    )
  }



}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },

});

This what i am getting (error screen),what might be the issue,i am not able to get the bbox function from '@turf/bbox'.I am feeding a certain number of co-ordinates to

turf.bbox(myCoords)

And setting it to fitBounds in mapbox.

Possibly the way you are importing it.

Try

var bbox = require('@turf/bbox')

bbox(myCoords)

android, Just use this function instead,it will return the perfect output for your this.map.​fitBounds( bounds[0],bounds[1], 20); // ne sw function. Ex: if var points = [[-1, 1], [5,​  Turf.js is an open-source JavaScript library used for spatial analysis.

Just use this function instead,it will return the perfect output for your this.map.fitBounds( bounds[0],bounds[1], 20); // ne sw function.

Ex: if var points = [[-1, 1], [5, 10], [-8, 13]]

output: [ [ -8, 1 ], [ 5, 13 ] ]

function findBounds(points) {
  var n = points.length
  if(n === 0) {
    return []
  }
  var d = points[0].length
  var lo = points[0].slice()
  var hi = points[0].slice()
  for(var i=1; i<n; ++i) {
    var p = points[i]
    for(var j=0; j<d; ++j) {
      var x = p[j]
      lo[j] = Math.min(lo[j], x)
      hi[j] = Math.max(hi[j], x)
    }
  }
  return [lo, hi]
}

react-native-mapbox-gl/Lobby, Calculate bbox in turf.js,MapBox,react-native-mapbox-gl(react-native code)? - i tried to implement bbox from turf.js But its resulting in an error. import React,  While there are no breaking changes in the way the library is used, the install method has been changed and we've dropped support for RN0.59 and below. The reason for this is that Mapbox has changed the way they bundle the Native SDK, which greatly complicated manual installation. You must now use

import module/package

var turf = require('@turf/turf');

Now use

turf.bbox(myCoords)

it is working for me. answer by @Charlie Wade

nitaliano/react-native-mapbox-gl, hello evrybody, im kinda new to js and react and what not. Just wondering if we have an approximate estimate on which week in July V7 getSource('id-of-​shape') but it doesn't seems like getSource is a function in react-native-mapbox-​gl. trying to support custom WMS server URL with bbox bounds for RasterSource  Mapbox GL JS in a Reactive application. and our react-native-mapbox-gl project wraps Mapbox GL Native for use with React Native. More from Points of interest.

Maps SDK for React Native | Glossary | Help, I'm beginning with react native as well as mapbox, coming from a leaflet background At the moment I'm using turf.js bbox for calculating the bound box for all of the @mfazekas I had this code from https://github.com/react-native-​mapbox-gl/  Code examples for Mapbox GL JS. Supplement forward geocoding search results from another data source

React leaflet polygon example, Calculate displayed region bounding box using onRegionDidChange payload? #684. Closed. smoll opened this issue on Oct 22, 2017 · 1 comment. Closed  +1, need this as well. The code sample above will be a decent approximation near the equator when the map is pretty zoomed in, but it will fail at the southern parts of the southern hemisphere and the northern parts of the northern hemisphere when zoomed out, because the (default) Mercator projection stretches out certain parts of the globe.

The solution is to use turf.js to calculate the boundingbox and setCamera with bounds. This question belongs to stack overflow tbh. Mapbox Augmented Reality SDK for React Native. An official React Native component for building cross platform augmented reality applications. Note this SDK is in it's beta phase and will be under heavy development as we move towards our 1.0. What is Mapbox? Mapbox is the location data platform for mobile and web applications.