react-native , Set the bounds of a mapView

Set the bounds of a mapView


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
            latitude: lat,
            longitude: lng,
            title: location.Name

     // This calls the map set state
        annotations: locations      

and here is my view code

<View style={styles.container}>


You'll want



var region = {

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.


CSS Triangles in 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: Chain Async Calls. e.g to AsyncStorage?

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...

What does this mean in React Native?

How could this statement assigns? var { AppRegistry, View, StyleSheet, ListView } = React; ...

React-native tabbarIosItem

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 this.setState not working

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 }); }...

Attempted to assign to readonly property ECMAScript 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...

Can I use Backbone with 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 ( also seemed a good starting point,...

ES6 features in React Native

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

React native flexible header

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...

How to hide React Native NavigationBar

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 and Flexbox Views

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...

Javascript :? operator

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...

TouchableHighlight won't accept press events while keyboard is open

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....

Hide/Show components in 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 Change State With Unexpected Logging

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 Inspect Element

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?

React-native upload image to amazons s3

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 - React.createElement is Not a Function

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...

Unable to display image with React Native with uri

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,...

Set the bounds of a mapView

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....

React Native fetch is not a function

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 (IOS), how to create a view that scrolls?

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...

How do I implement firebase using 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?...

promise – can't find variable process

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 and Firebase

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! ...

Can i build and compile react native via terminal?

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

React Native AnimationExperimental callback?

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:...

Hybrid (React and ReactNative)

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)?...

React Native code hot load

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 Infinite Scroll

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": "//" } }, { "id": 2, "profile_picture": { "href": "//" } }, {...

React Native global styles

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...

How to use Firebase Twitter Authentication with React Native?

How to use Firebase Twitter Authentication with React Native? I tried both of the code below in reference to 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...

ListView not updating – error in ListViewDataSource.js

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...

React-native how to move screen up on textinput

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? ...

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

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?...

React Native - why is so few apps in AppStore?

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 do i use the iOS shake gesture with 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?

React Native: How to disable scrolling in ListView?

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. ...

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

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: Unwanted Black border on ipad 2 simulation

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...

No transports available

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 Since upgrading...

Using ObjectiveC Library in 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

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...

What is the difference between using constructor vs getInitialState in React / 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?

Using React Native within existing iOS app for some views only

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...

React Native writing to Styles

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 - Image Require Module using Dynamic Names

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!' +...

React-native app and Facebook SDK

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,...

How to post a form using fetch in 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:, password: this.state.password, password_confirmation: this.state.password_confirmation, }) }) Output in Rails console Parameters:...

Change view in Navigator in 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?...