react-native , Set the bounds of a mapView


Set the bounds of a mapView

Question:

Tag: react-native

I have an app that calls an api and returns a list of locations.

Once the data is returned, I convert the JSON to map points for annotations.

These get added to the ma with no problem.

The problem I am running into is setting the bounds of the map. I can't seem to figure it out.

The code I currently have is.

_handleResponse(response) {              
     var locations = [];
     // Loop through repsone and add items to an arra for annotations
     for (var i = 0; i < response.length; i++) {
         // Get the location
         var location = response[i];
         // Parse the co ords
         var lat = parseFloat(location.Latitude);
         var lng = parseFloat(location.Longitude);
         // Add the location to array
         locations.push({
            latitude: lat,
            longitude: lng,
            title: location.Name
         });
     }

     // This calls the map set state
     this.setState({
        annotations: locations      
     });
}

and here is my view code

<View style={styles.container}>
    <MapView
      style={styles.map}
      onRegionChangeComplete={this._onRegionChangeComplete}
      annotations={this.state.annotations}
    />
  </View>

Answer:

You'll want

<MapView
  ...
  region={region}
/>

where

var region = {
  latitude,
  longitude,
  latitudeDelta,
  longitudeDelta,
};

latitude and longitude are the center of the map and the deltas are the distance (in degrees) between the minimum and maximum lat/long shown. For instance, given a certain radius in miles around a point and an aspect ratio of the map view, you could calculate region as follows:

var radiusInRad = radiusInKM / earthRadiusInKM;
var longitudeDelta = rad2deg(radiusInRad / Math.cos(deg2rad(latitude)));
var latitudeDelta = aspectRatio * rad2deg(radiusInRad);

The definitions of rad2deg, deg2rad, and earthRadiusInKM are left as an exercise to the reader.


Related:


React Native: Unwanted Black border on ipad 2 simulation


ios,xcode,react-native
I am testing a new (simple) reactive native app, choosing ipad 2 as target in the simulator. The loading screen shows full screen, but the first application screen (by react native) shows a big black border around the content. I created a completely new project, but it has the same...

Can I use Backbone with React Native?


javascript,ios,backbone.js,reactjs,react-native
I have found several different examples of integrating React (View) with Backbone on the web, but not any to do the same with React Native. I was wondering if this was possible and also if there were any samples to play with. This (https://github.com/magalhas/backbone-react-component) also seemed a good starting point,...

Hybrid (React and ReactNative)


reactjs,react-native
We're planning a project that targets both iOS and Browser, and are curious to how we can share as much as possible between the two, using React. Can we build the project in (normal) React and somehow switch to React-native when building for iOS (and later Android)?...

promise – can't find variable process


javascript,promise,react-native,es6-promise
for my (first) react-native project I use the Node module react-native-refreshable-listview requiring a CommonJS/A+ promise method to display an indicator. However, everytime the promise's then method is invoked by the consumer (for example this.doSomething().then(function() { ... })) I get the following error: Error: Can't find variable: process stack: requestFlush index.ios.bundle:43767...

React-native app and Facebook SDK


ios,facebook,facebook-graph-api,facebook-javascript-sdk,react-native
I successfully managed to create a native component that successfully logins a user into Facebook. So, in my react-native app, I've got the access token and the userId. Now, I'd like to use Facebook SDK (for example, the Graph API) to access to some basic infos (profile name, profile picture,...

React Native fetch is not a function


fetch,react-native
I'm trying to use react native for a simple app. I want to download a json array from a page and display it as a listview. I'm doing this var listApp = React.createClass({ fetchData : function() { fetch(requestURL) .then((response) => response.json()) .then((responseData) => { console.log(responseData); }) .done(); }, componentDidMount: function()...

React Native Inspect Element


react-native
In a previous example project I was able to type command+D in the simulator and the menu had an option to "Inspect Element" but for some reason my new project doesn't have that option. How can I get the inspect element option in my current project?

ListView not updating – error in ListViewDataSource.js


reactjs,react-native
I'm currently displaying an iOS application using the React Native framework. For allowing the user to choose an available Bluetooth LE device I use a RefreshableListView (NPM package: react-native-refreshable-listview) component which uses the ListView component supplied by React. As I use the list a second time (my application has an...

How do I implement firebase using React native?


firebase,react-native
When I try to use npm install to use firebase with React native, I am getting errors. Then when I try to use require for the firebase module, it says that the document can't be found. Is there a way to utilize the firebase API with React native instead?...

React Native (IOS), how to create a view that scrolls?


ios,reactjs,react-native,react-jsx
I'm trying to make a simple app that simply lists a bunch of information on the screen. Right now the app is just made up of a container View and then Views and Texts inside of it. Once there is enough info on the screen that it fills up the...

Unable to display image with React Native with uri


javascript,react-native
I'm tinkering with React Native and am trying to simply display an image with the image library from a URL. When I run this, all that is shown is the 'React Native' text, but no image. What am I doing wrong? 'use strict'; var React = require('react-native'); var { AppRegistry,...

How do you mask a react-native with any shape?


react-native
It seems that all components in react-native are rectangles or rounded-rectangles (which can also represent a circle). How do you mask a <View /> with an arbitrary shape like a hexagon?...

What does this mean in React Native?


javascript,reactjs,react-native
How could this statement assigns? var { AppRegistry, View, StyleSheet, ListView } = React; ...

React Native: How to disable scrolling in ListView?


react-native
Is it possible to disable scrolling of ListView? I've tried noScroll: <ListView noScroll={true}> </ListView> But it doesn't seem to make any difference. ...

How do i use the iOS shake gesture with react native?


react-native
I'd like to use the shake gesture with React Native. Its currently used for the debug menu and i'm not sure how to override it. Does anyone know if this is possible?

Attempted to assign to readonly property ECMAScript React Native


ecmascript-6,react-native
I am trying to assign a value to an array declared in my Component. Unfortunately, exception is thrown. TypeError: Attempted to assign to readonly property Even if I remove strict mode, still exception is being raised. Can please someone guide me how can I make a variable both readable and...

TouchableHighlight won't accept press events while keyboard is open


javascript,reactjs,react-native
I have a component which contains a TextInput and a TouchableHighlight side by side. You tap on the textbox, type what you want, then tap the add button to save it. Now the problem is the keyboard open from typing, you need to dismiss it, otherwise the button won't respond....

React Native - Image Require Module using Dynamic Names


react-native
I'm currently building a test app using React Native. The Image module, thus far has been working fine. For example, if I had an image named avatar, the below code snippet works fine. <Image source={require('image!avatar')}/> But but if I change it to a dynamic string, I get <Image source={require('image!' +...

Hide/Show components in react native


javascript,react-native
Im really new to React Native and I'm wondering how can I hide/show a component. Here's my test case: <TextInput onFocus={this.showCancel()} onChangeText={(text) => this.doSearch({input: text})} /> <TouchableHighlight onPress={this.hideCancel()}> <View> <Text style={styles.cancelButtonText}>Cancel</Text> </View> </TouchableHighlight> I have a TextInput component, what I want is to show the TouchableHighlight when the input gets...

React Native - why is so few apps in AppStore?


react-native
I am learning React Native and considering developing IOS apps for my clients in it. I'd like to see some sample apps in AppStore, but there is just one. Why is that? I see so much hype about this technology, but it looks like almost nobody uses it. Or is...

How to hide React Native NavigationBar


navigationbar,react-native
I have NavigatorIOS under Navigator and would like to hide Navigator's NavigationBar to use NavigatorIOS's bar. Is there any way to do this? This is screenshot that I've seen. I need backend of NavigatorIOS.. The structure that I want to build is the following: ├── NavigatorRoute1 │   ├── NavigatorIOSRoute1 │  ...

React native flexible header


react-native
I'd like to have a header with a headline on the left and a menue on the right. Between is a text with different length. Now I want the text cut, if it is too long. <View style={styles.header}> <View style={styles.headline}> <Text style={styles.headlineFluorine}>{"Fluorine "}</Text> <Text style={styles.headlinePath}>{this.props.text}</Text> </View> <View ref="navi" style={styles.nav}> <NavButton...

ES6 features in React Native


reactjs,react-native
Where could I find the list of ES6 features taht are ready to use in React Native? Eg Object.assign()....

React Native and Flexbox Views


css,flexbox,react-native
I'm trying to have a TouchableHighlight + View above this list of generated comments. I can't seem to bring the start of the comments closer up to where the TouchableHighlight ends (it ends right after the text, no padding/margin below). Here's the relevant JSX: renderListView: function() { return ( <View...

CSS Triangles in React Native


reactjs,stylesheet,react-native
I'm working on an app that uses triangles that overlay other containers/divs. Had that solved with CSS before: .triangle:after { content: ""; display: block; position: absolute; top: 15px; left: -15px; width: 0; border-width: 0px 0px 15px 15px; border-style: solid; } but that doesn't work in React any more. What's...

React Native and Firebase


firebase,reactjs,react-native
I just started to play around with Firebase and React Native, and I noticed 2 major problems: React Native seems to break debugging in Chrome I get a Network error when tyring to use the createUser call. Otherwise the integration seems to be awesome! ...

Javascript :? operator


javascript,flow,react-native
I can't figure out what this does or even is. Would someone please be so kind to point me what to research? circle: (null : ?{ setNativeProps(props: Object): void }), It's part of a React Native example and is part of a React Native class definition. The outer parts are...

No transports available


sockets,firebase,react-native
I recently was trying to upgrade my react-native app to use react-native 0.5.0 and firebase. According to this article the react-native sockets are working and the full firebase sdk should be available. I was previously using firebase-debug and @badfortrains react-native fork with success following the example project https://github.com/badfortrains/wsExample. Since upgrading...

React Native: Chain Async Calls. e.g to AsyncStorage?


javascript,promise,react-native
I'm trying to chain several calls to AsyncStorage.getItem() but cannot seem to get the calls to trigger in the correct order. I seem to manage to drop out of the loop with the last item completed before earlier items. It appears that React uses a different syntax for promises than...

Using React Native within existing iOS app for some views only


react-native
Is it possible to use React Native only for one view within the project? I've successfully added React view for particular iOS app screen (using instructions from "Integration with existing iOS project" docs), but i don't know how to get data from that screen and call other (objective-c) code. For...

How to use Firebase Twitter Authentication with React Native?


twitter,firebase,react-native
How to use Firebase Twitter Authentication with React Native? I tried both of the code below in reference to https://www.firebase.com/docs/web/guide/login/twitter.html var Firebase = require("firebase"); var App = React.createClass({ render: function() { return ( <View> <Text onPress={this._handlePress}> Twitter login </Text> </View> ); }, _handlePress: function () { var myApp = new...

Change view in Navigator in React Native


react-native
I'm new to react native. I was using NavigatorIOS but it was too limiting so I'm trying to use Navigator. In NavigatorIOS I can change a view by calling this.props.navigator.push() but it doesn't work in Navigator, it seems to be structured differently. How do I change views in using Navigator?...

React-native how to move screen up on textinput


react-native
I have a login screen created using react-native. How can I shift my screen up when the user is typing in the textInput? Do I listen to the onFocus() event and use css styling to change the style of the view? ...

React-native tabbarIosItem


react-native
How do I allow tabbarIOS.item to use my image? Here's my code I have an image called itemSelected <TabBarIOS.Item selected={this.state.selectedTab === 'Item'} icon={require('image!itemNotSelected')} selectedIcon={require('image!itemSelected')} title="Item" onPress={() => { this.setState({ selectedTab: 'Item', }); }}> However, I can only see a square box being loaded from react-native in my tabbar. ...

React Native - React.createElement is Not a Function


javascript,ios,facebook,react-native
Figured I would see what React Native is all about, so I followed the instructions here and can't even get the out of the box project to run correctly. Chrome dev tools throws all sorts of errors. Here is the stack trace shown in the simulator, anybody else run into...

What is the difference between using constructor vs getInitialState in React / React Native?


reactjs,react-native
I've seen both used interchangeably in some of the code I've been reading when building React components. What are the main use cases for both, are there any advantages / disadvantages, or is one or the other not a good practice?

Set the bounds of a mapView


react-native
I have an app that calls an api and returns a list of locations. Once the data is returned, I convert the JSON to map points for annotations. These get added to the ma with no problem. The problem I am running into is setting the bounds of the map....

How to post a form using fetch in react native?


javascript,reactjs,react-native
I'm trying to post the form containing the first_name, last_name, email, password and password_confirmation using react-native fetch api. fetch('http://localhost:3000/auth', { method: 'post', body: JSON.stringify({ config_name: 'default', first_name: this.state.first_name, last_name: this.state.last_name, email: this.state.email, password: this.state.password, password_confirmation: this.state.password_confirmation, }) }) Output in Rails console Parameters:...

React Native writing to Styles


css,react-native
quick question. Is it possible to change the value of an already defined style? such as: styles.container.backgroundColor? I get an 'Attempt to write to readonly property' error but this seems crazy that I couldn't change background colors on the fly. Is there a best practice way of doing this that...

React Native Infinite Scroll


javascript,reactjs,react-native
I've tried to get a minimal example of infinite scroll. So I have this: var React = require('react-native'); var { StyleSheet, View, Image, ListView, } = React; var data = [ { "id": 1, "profile_picture": { "href": "//like1.r.worldssl.net/ui_big/1305634.jpg" } }, { "id": 2, "profile_picture": { "href": "//like1.r.worldssl.net/ui_big/1305634.jpg" } }, {...

React Native Change State With Unexpected Logging


javascript,state,react-native
For context, I am working on this React Native Tutorial The way this logs confuses me. The following is the console output when I changed an empty input field by typing "a" then "b". Here's my SearchPage class. Why does console.log('searchString = ' + this.state.searchString); show the previous value for...

React Native AnimationExperimental callback?


javascript,react-native
I've been playing around with react native and animations and would like to run animations in serial or chain animations together. Is there a promise or a callback that fires when the animation is finished? This is what I have so far: AnimationExperimental.startAnimation({ node: this.refs['this'], duration: 500, easing: 'easeInOutCubic', property:...

Checking for nil parameter and if that parameter is an empty string in Swift


swift,react-native
There may or may not be an easier way to write this, but I feel like being a novice at Swift, I am probably missing something. I have a parameter (fileName) for a method that is an optional String? I need to check if it is nil, or if it...

react-native this.setState not working


reactjs,react-native
I know there's already a similar question but there's no code shared in there. Under navbarChanged() > if condition, I'm doing a this.setState. This is of type HomeTab but setState doesn't seem to be working. Any clues/pointers? class HomeTab extends React.Component { constructor() { super() this.setState({ isNavBarHidden: false }); }...

React-native upload image to amazons s3


javascript,file-upload,amazon-s3,fetch,react-native
I want to upload images from my app to S3 server. I have all data and codes calculated (tested using curl on computer) but I can't figure out how to call 'fetch' correctly. I'm getting response: 'At least one of the pre-conditions you specified did not hold. Condition: Bucket POST...

React Native code hot load


react-native
App store prohibits downloading remote code with the sole exception of WebKit + JS: 3.3.2 An Application may not download or install executable code. Interpreted code may only be used in an Application if all scripts, code and interpreters are packaged in the Application and not downloaded. The only exception...

React Native global styles


react-native
I'm new with React and I understand the benefits of the component based, inline styles. But I'm wondering if there is a decent way to have some sort of global style. For instance, I'd like to use the same Text and Button coloring throughout my app. Rather than repeat in...

Using ObjectiveC Library in React Native


javascript,chromecast,react-native
I'm trying to build a Chromecast App with React Native, and my options for the Chromecast library are either an ObjectiveC version. With React Native, how would I get the ObjectiveC library into my React Native App?...

React Native - Navigator Recursive Children Crashes


ios,react-native,navigator
I am having a look at navigator component in React-Native but cannot get it to accept a child node that is already in the stack. E.g. if we take the facebook app for example. A user could search for a user, then click friends, then click another user. This crashes...

Can i build and compile react native via terminal?


react-native
Is there any way to compile and build my REACT native application via PHP code, there is the opportunity? Thanks in advance!...