FAQ Database Discussion Community


React native icons

react-native
Somebody try to use react-native-icons? I follow this steps: npm install [email protected] --save In XCode, in the project navigator right click Libraries ➜ Add Files to [your project's name] Go to node_modules ➜ react-native-icons➜ ios and add ReactNativeIcons.xcodeproj Add libReactNativeIcons.a (from 'Products' under ReactNativeIcons.xcodeproj) to your project's Build Phases ➜...

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 centralize text in textinput

javascript,react-native
One short question. Is there a way to centralize text in react-native Textinput? Here is the markup in jsx: <TextInput style={styles.input} placeholder="Your Account" /> In styles.input, just try to add textAlign:"center", it's not working. And same as add alignAlign to the markup as an attribute. Could anybody do me a...

Component not updating on props update

javascript,reactjs,react-native
I am trying to re-render a component based on update to the props from its parent. But unless I use forceUpdate() I cant get the component to re-render on its own. This is the component where I am updating the component and passing it to the child component: var StoryContainer...

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

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?

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

What is different between navigator and navigatorIOS in react-native?

react-native
Just look through fb's document. What is different between navigator and navigatorIOS in react-native?...

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

Storing UserPreferences with a React Native App

react-native
Im trying to run a few examples using react-native and was curious to see how to store User Preferences using NSUserDefaults with React Native. Would we have to implement a module that exports the NSUserDefaults method as mentioned here...

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

ReactNative Integration with Existing App not RCT_EXPORT_METHOD macro

ios,react-native
Integration with Existing App There is not RCT_EXPORT_METHOD macro in RCTBridgeModule.h file and RCT_EXPORT macro exited. How can I update? In my podfile: pod 'React' pod 'React/RCTText' ...

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

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

How to repeat styles in React-native

react-native
I have a row of controls/buttons, and each will have the same style. Is there a more efficient way (or in other words, a way to use less code) to apply the styles without having to use the style attribute on every component? <View> <TouchableHighlight style={styles.control}> <Text style={styles.text}>Left</Text> </TouchableHighlight> <TouchableHighlight...

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

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

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?

What does this mean in React Native?

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

Getting 'npm start' error when trying to build React Native app on iphone?

ios,node.js,react-native
When I do a build to my iphone 6 I get the following error on my device with the red screen: "Could not connect to development server. Ensure node server is running - run 'npm start' from React root The operation couldn't be completed. (NSURLErrorDomain error - 1004)" And im...

Reload ListView not Working React Native

listview,datasource,ecmascript-6,react-native
Re-phrasing my Question... (Tested with separate class) I am trying to reload listview with random array on a button press. But it's not working! Trying to do refresh datasource this with following LOC: _buttonPressed() { this.setState({ dataSource: this.state.dataSource.cloneWithRows(this._randomArray()), }); } _randomArray() { var jsonRes; switch(this.getRandomInt()) // number returned is valid....

How to concatenate JSX components in React Native

jsx,react-native
For example, I wanna show a list of names. So I wanted to do something like this: var returnValue; for (eachName of _names) { returnValue += ( <TouchableHighlight onPress={() => this._onPressButton}> <Text> {eachName} </Text> </TouchableHighlight>); } return returnValue; However, that is not valid. Which brings me to my question: How...

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

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

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

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

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

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

Refresh On IPhone Device Using React-Native Tools

react-native
Im playing with React Native, and have deployed to my IPhone device (using 'option 1 in appdelegate with correct localhost) I assume that I should be able to make changes to views in my text editor and have them 'refresh' on the phone (same as the simulator). There seems no...

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

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

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

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

undefined is not an object (evaluating 'this.props.navigator.push')

reactjs,react-native
Can't make this work, have cross checked all the references, but it isn't helping. Here is all the code for the view. I am not sure what I am missing, have required all the dependencies. var React = require('react-native'); var Delivery = require('./Delivery'); var { View, Text, StyleSheet, TouchableHighlight, }...

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

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

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

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

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

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

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 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 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 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" } }, {...

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

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

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?

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

React Native with CSS Framework?

css,react-native
I'm newbie for React Native and trying to use CSS Framework listed in the following link: http://react.rocks/tag/CSSFramework I just follow README for React but it has error on terminal saying:- Error: Cannot find package main file for package: /Users/kamesho/git/Chifan/node_modules/reactify/node_modules/react-tools/src at DependecyGraph.resolveDependency (/Users/kamesho/git/Chifan/node_modules/react-native/packager/react-packager/src/DependencyResolver/haste/DependencyGraph/index.js:229:13) at...

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

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

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

Styles not updating inside Component

javascript,reactjs,react-native
I have a react-native component with PanResponder. I want to drag the entire container and specify the required styles. But I can see for a fact that the styles are not getting updated; the view is not getting refreshed. Even if I use the componentDidMount() method and do change of...

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