Coder Social home page Coder Social logo

facebook / react-native Goto Github PK

View Code? Open in Web Editor NEW
105.1K 3.7K 21.5K 836.58 MB

A framework for building native applications using React

Home Page:

License: MIT License

Objective-C 9.07% JavaScript 38.01% Shell 0.54% HTML 0.01% Ruby 1.53% C 0.10% Objective-C++ 6.71% Makefile 0.04% Java 20.83% C++ 18.81% Assembly 0.08% Batchfile 0.01% CMake 0.38% Kotlin 1.06% Starlark 2.40% XSLT 0.01% TypeScript 0.40%

react-native's Introduction

React Native

Learn once, write anywhere:
Build mobile apps with React.

React Native is released under the MIT license. Current CircleCI build status. Current npm package version. PRs welcome! Follow @reactnative

Getting Started · Learn the Basics · Showcase · Contribute · Community · Support

React Native brings React's declarative UI framework to iOS and Android. With React Native, you use native UI controls and have full access to the native platform.

  • Declarative. React makes it painless to create interactive UIs. Declarative views make your code more predictable and easier to debug.
  • Component-Based. Build encapsulated components that manage their state, then compose them to make complex UIs.
  • Developer Velocity. See local changes in seconds. Changes to JavaScript code can be live reloaded without rebuilding the native app.
  • Portability. Reuse code across iOS, Android, and other platforms.

React Native is developed and supported by many companies and individual core contributors. Find out more in our ecosystem overview.


📋 Requirements

React Native apps may target iOS 12.4 and Android 5.0 (API 21) or newer. You may use Windows, macOS, or Linux as your development operating system, though building and running iOS apps is limited to macOS. Tools like Expo can be used to work around this.

🎉 Building your first React Native app

Follow the Getting Started guide. The recommended way to install React Native depends on your project. Here you can find short guides for the most common scenarios:

📖 Documentation

The full documentation for React Native can be found on our website.

The React Native documentation discusses components, APIs, and topics that are specific to React Native. For further documentation on the React API that is shared between React Native and React DOM, refer to the React documentation.

The source for the React Native documentation and website is hosted on a separate repo, @facebook/react-native-website.

🚀 Upgrading

Upgrading to new versions of React Native may give you access to more APIs, views, developer tools, and other goodies. See the Upgrading Guide for instructions.

React Native releases are discussed in this discussion repo.

👏 How to Contribute

The main purpose of this repository is to continue evolving React Native core. We want to make contributing to this project as easy and transparent as possible, and we are grateful to the community for contributing bug fixes and improvements. Read below to learn how you can take part in improving React Native.

Code of Conduct

Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.

Contributing Guide

Read our Contributing Guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to React Native.

Open Source Roadmap

You can learn more about our vision for React Native in the Roadmap.

Good First Issues

We have a list of good first issues that contain bugs which have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with our contribution process.


Larger discussions and proposals are discussed in @react-native-community/discussions-and-proposals.

📄 License

React Native is MIT licensed, as found in the LICENSE file.

React Native documentation is Creative Commons licensed, as found in the LICENSE-docs file.

react-native's People


shergin avatar mdvacca avatar JoshuaGross avatar sammy-SC avatar RSNara avatar javache avatar hramos avatar davidaurelio avatar sahrens avatar vjeux avatar yungsters avatar fkgozali avatar nicklockwood avatar TheSavior avatar tadeuzagallo avatar rickhanlonii avatar cpojer avatar janicduplessis avatar cortinico avatar frantic avatar lunaleaps avatar bestander avatar ide avatar martinbigio avatar mkonicek avatar mhorowitz avatar PeteTheHeat avatar AaaChiuuu avatar astreet avatar dulmandakh avatar


Marin Heđeš avatar Kyle Esterhuizen avatar Luis Marsiglia avatar  avatar DucAnh avatar quan.z avatar  avatar Emre Çil avatar  avatar Zafer Barış avatar kt_keke avatar fantasticit avatar  avatar Arindam Kawlas  avatar Velsun3366 avatar Sashen Jayathilaka avatar Yuki Ishikawa avatar  avatar yyshino avatar 송경환 avatar Alone avatar  avatar Rafaela Medeiros avatar Mark avatar Sindou avatar  avatar eyx avatar  avatar Sudeep Haldar avatar Browser avatar  avatar  avatar Dhiya Ulhaq Zulha Alamsyah avatar Hamdi Jomaa avatar  avatar chin avatar Maxime avatar HBO70  avatar  avatar 周神 avatar Samuel Lawrentz avatar Negin Olfat avatar  avatar 郝云鹤 avatar 陳智翔(CHEN, CHIH-HSIANG) avatar Tien Nguyen Huu avatar Igor Pancheski avatar Parth Padhiyar avatar Paulo Augusto Ribeiro avatar Gürgün Dayıoğlu avatar Dawid avatar  avatar Zibu avatar Adam avatar  avatar namelaoli avatar  avatar Huy Nguyen Quy Quang avatar Nguyen Anh Tuan avatar Kangwoo Choi avatar maidangzhu avatar Aaron (Yueh-Han) Huang avatar Madelyn Cruz avatar Orange Cheng avatar Krishna Dhakal avatar ,Y A M I avatar  avatar Luu avatar  avatar Rafael Lüder avatar Roberto - IGGY avatar Paul Valladares avatar  avatar Emmanuel Ruiz García avatar Cristian Andres Yela avatar  avatar Prajwal Vishal Jain avatar kuro avatar 鹊木 avatar MAFFEI Enzo avatar Adil Ishaq avatar JaredN avatar  avatar  avatar  avatar mc_fdc avatar avatar Juan Herrera avatar Linh Do Duy avatar  avatar Nelson II avatar Joel avatar  avatar Emanoel Silva avatar Dark Moon avatar Junior Ferreira avatar Henry avatar  avatar Storm Heg avatar Luciano Amâncio avatar


Charleno Pires avatar Tijs Teulings avatar Jose M. Carbonell avatar Jonas Grimfelt avatar Anselmo Silva avatar Dario Alves Junior avatar Yasuhito Kanayama avatar Matthew McFarling avatar arden avatar Kozo Nishida avatar satzz avatar ippa avatar Will Tew avatar Jimmy Lam avatar Ryo Tanaka avatar Chad Sakonchick avatar Chris Barna avatar kejun avatar xhlv avatar zbage avatar Fernando Kreigne avatar  avatar Alan Meira avatar Zhu Jia Cheng avatar Matthew Crutchfield avatar Gary avatar syco avatar Abhik Khanra avatar Ben Wu avatar Stone Gao avatar  avatar Kevin M. Ryan avatar Justin Brown avatar Blake Friedman avatar Howard Yeh avatar maru_cc avatar Jeff Fox avatar Federico Bucchi avatar Brian Colfer avatar Bill avatar Sebastian Markbåge avatar Panayiotis Tzagkarakis avatar Gao Yuesong avatar htang avatar Miguel avatar Marcus Sousa avatar Lars Smit avatar Jason Straughan avatar John Wehr avatar Cyril Karpenko avatar Faheem Ullah Hashmi avatar Eric avatar Michael Sparmo avatar Greco Shi avatar Alexandre Magno avatar Ashleigh Crosby avatar Nguyen Tien Si avatar Josh Peng Yu avatar Andrey Lunyov avatar Li YuBei avatar  avatar Phil Wang avatar zshuaibin avatar ROHITHA DASSANAYAKE avatar Chen, Chih Han avatar Clay Tinnell avatar geminilu avatar ningxu avatar heimo reiter avatar Tsvetan Tsvetanov avatar Edward Chen avatar Gregory Mazurek avatar Bach Quang Bao Toan avatar 淘知了 avatar supaket wongkampoo avatar darien toh avatar Juan Suarez avatar yudong22 avatar 大鼻子 avatar Taobility avatar flossy avatar ND avatar Serge Borbit avatar 黑夜路人 avatar ShyaKen avatar  avatar  avatar jean avatar Reggie Zhang avatar David Robles avatar  avatar Young O avatar Dan Cong avatar fxwan avatar Stanislav Vishnevskiy avatar Chaitanya Malla avatar Colin Song avatar evandrix avatar Raeez Lorgat avatar Tkc avatar

react-native's Issues

Carousel component

Was wondering if there was a Carousel component you guys had internally and were planning on exposing. Need it for my Weather app.

What are the guidelines for exposing native APIs?

This is not an issue per se, but something that #4 got me thinking about.

There are often many ways to expose the same native API. How opinionated does React Native want to be? For example, Xamarin mirrors all available iOS SDK but has a very specific and consistent API guidelines document that explains how native Cocoa APIs are mapped to be C#-friendly. This means that, if you know how certain API is called in Objective C, you can more or less infer what it will be in Xamarin's world without consulting the docs.

With React Native, this gets even more interesting because we may need both imperative platform-bridging API (like proposed StatusBarIOS.setStyle) as well as declarative React components sitting on top of such APIs, for example NavigatorIOS.

Are there any guidelines we want to establish for such components? Are we just trying to make the best declarative wrappers possible for every platform's native APIs? How fast are we willing to make breaking changes to them? (Unlike React, we have a lot of public API here.)

I'm sorry if this is premature talk but I'd love to get some sense of the direction of this project.

border top/left/bottom/right width not working

I have this in my render method:

    return View(
      { style: { flex: 1 } },
        { onPress: this.handlePress },
          style: {
            flex: 0,
            backgroundColor: 'gray',
            height: 50,
            alignItems: 'center',
            justifyContent: 'center',
            borderWidth: 1,
            borderColor: 'white'
        }, Text({ style: { color: 'white' }}, "^"))
        { onPress: this.handlePress },
          style: {
            flex: 0,
            backgroundColor: 'gray',
            height: 50,
            alignItems: 'center',
            justifyContent: 'center'
        }, Text({ style: { color: 'white' }}, "v"))

It renders this:

screen shot 2015-02-02 at 9 43 33 am

But if I change the borderWidth in the first component to borderBottomWidth or any of the other top/left/bottom/right methods, there is no border. There should be a white border on one side of the component:

screen shot 2015-02-02 at 9 43 40 am

`pthread.h` not found

To build on my machine (OS X 10.9.3) targeting iOS SDK 7.1 (only one available on my machine), I had to change line 7 in /ReactKit/Modules/RCTUIManager.m from #import <pthread/pthread.h> to #import <pthread.h> to get it to compile.

What components are coming?

I'd like to implement an existing IOS component inside React Native, but would prefer to pick something that isn't already implemented by Facebook. Would be great if you guys could clarify the future plans of React Native a bit more, so we could also help out :-).

Provide more descriptive error message when source file is not found

I required wrong file by mistake and got this message:

screen shot 2015-01-30 at 23 56 23

The actual message was obscured in Xcode console:

[email protected]://localhost:8081/Examples/Movies/MoviesApp.includeRequire.runModule.bundle:105:23
[email protected]://localhost:8081/Examples/Movies/MoviesApp.includeRequire.runModule.bundle:202:28
[email protected]://localhost:8081/Examples/Movies/MoviesApp.includeRequire.runModule.bundle:243:30
[email protected]://localhost:8081/Examples/Movies/MoviesApp.includeRequire.runModule.bundle:243:30
[email protected]://localhost:8081/Examples/Movies/MoviesApp.includeRequire.runModule.bundle:243:30
[email protected]://localhost:8081/Examples/Movies/MoviesApp.includeRequire.runModule.bundle:871:25
[email protected]://localhost:8081/Examples/Movies/MoviesApp.includeRequire.runModule.bundle:194:39
global [email protected]://localhost:8081/Examples/Movies/MoviesApp.includeRequire.runModule.bundle:28295:9
 URL: http://localhost:8081/Examples/Movies/MoviesApp.includeRequire.runModule.bundle
 line: 202
 message: Requiring unknown module "./test/actions/RepoActionCreators". It may not be loaded yet. Did you forget to run arc build?"

It would be nice to display the actual error.

Does even bubbling exist, or how to enable cancelsTouchesInView ?

I don't see a stopPropagation method on the Event instance we get in a touch handler. Is there a way to do the equivalent of setting cancelsTouchesInView = YES on a view so that touch events do not go to parent views?

We probably don't need something like stopPropagation because you can't really do that on iOS, but some static property to set on a View.

[Bridge] Pass __fbBatchedBridgeConfig into the bundle instead of making it global

This is to reduce globals and encourage scoping. A specific approach I have in mind is to make the bundle produce a function that takes the bridge config as an argument:

(function(batchedBridgeConfig) {
// current bundle code here
// source map stuff

And when setting up ReactKit:

// get the js context from the executor -- API for this needs to be thought out
[[context evaluateScript:bundleScriptString] invokeWithArguments:@[configObject]]

Then the global goes away and you don't need -[RCTJavaScriptExecutor injectJSONText:asGlobalObjectNamed:callback:] either!

react-native CLI?

Should react-native be exposed as a CLI after installing react-native as a module?

npm install react-native --save
react-native server // could start the development server
react-native bundle // could build a bundle for delivery to app store

How do I run the packager for a new project?

I created a brand new project, added the required files for ReactKit, and got all that working. Now I just need to run the packager. In packager/packager.js I see:

if (!options.projectRoot) {
  options.projectRoot = path.resolve(__dirname, '..');

But options is parsed from the command line arguments and I don't see the projectRoot command line arg. How do I run it, setting the path to my new project?

I temporarily fixed it by hardcoding the projectRoot to my project in there. A side issue: I was surprised to find that the bundler didn't seem to load files from that node_modules where I ran the packager (the error was pretty obscure). I needed to copy the node_modules directory into my new project also.

Support for Camera Roll

A comment in the image component references support for local assets that are part of the bundle, but also other places such as the camera roll.

* images from local disk, such as the camera roll. Example usage:

Does this mean I can feed in URL's of the scheme assets-library://, or is this not supported? As the component currently reports that the image is not found. If it isn't, would I need to implement it in RCTConvert similarly to Gif support?


  <Image style={styles.icon} source={ix('assets-library://asset/asset.JPG?id=x&ext=JPG')}  />

Can NavigatorIOS notify that a "back" happened?

Not sure if I'm missing something, but does NavigatorIOS have a way of notifying its owner that there is a new top route because the "<" back button was pressed? Otherwise, to get that functionality, the removed component would have to itself notify during componentWillUnmount, and that just feels weird.

Watcher took too long to load error message

I followed the instructions in the readme but when I run npm start I get this error message:

[Error: Watcher took too long to load.]
Error: Watcher took too long to load.
at null._onTimeout (/Users/mrscobbler/Projects/react-native/packager/react-packager/src/FileWatcher/index.js:37:16)
at Timer.listOnTimeout as ontimeout

ERROR: could not create packager - please shut down any existing instances that are already running.

I don't think I have any other existing instances running (as far as I know). I installed Watchman. When I run which watchman I see this: /usr/local/bin/watchman

Any ideas on what could be wrong?

NavigatorIOS: Accessing onRightButtonPress from within child component

I'm creating a TodoList example app using Flux. Right now I have three components: TodoListApp, TodoItems and AddItem. TodoListApp is simply a NavigatorIOS component which shows TodoItems by default and a method to push the AddItem page to the navigator stack when the user taps the '+' button.

My question is: is there a way for my AddItem component (child of NavigatorIOS) to handle the onRightButtonPress event? Right now I've had to put in a bunch of hacks to accommodate adding a todo item when the user taps the 'Save' button from the AddItem page.

How does calling from JS to Obj-C work?

I added a method to my TeapotController object:

- (void)touchHappened {
  CC3Vector pos = teapotNode_.position;
  [teapotNode_ setSizeX: 10];
  [teapotNode_ invalidateGlobalTransformMatrix];

Looking through the source, it looks like I can add RCT_EXPORT to export a method. I can then call it like this:

var controller = require('NativeModules').TeapotController;

If I just log something in touchHappened, this works. But when I try to access an instance variable like teapotNode_, nothing happens... but I don't see how this works anyway. How is it exporting a method from an instance? What I have multiple instances of TeapotController? I don't see how I could require individual instances.

How do I use superagent from react-native?

Superagent fails trying to require() what I presume to be Node modules, such as tty.

Is React Native supposed to be browserish or nodeish environment from third-party package point of view? Should React Native expose Node modules like events?

npm start -> Cannot call method 'forEach' of undefined

OS: OS X 10.10.2
npm v2.5.0
node v0.10.36
commit hash: 3e59937 (after 2015-02-09 updates)
npm global and project modules updated to the latest

Error description

When starting packager I get the following error.

$ npm start

> [email protected] start /Users/grgur/Projects/sdk/react-native
> ./packager/

 |  Running packager on port 8081.       
 |  Keep this packager running while developing on any JS         
 |  projects. Feel free to close this tab and run your own      
 |  packager instance if you prefer.                              

[TypeError: Cannot call method 'forEach' of undefined]
TypeError: Cannot call method 'forEach' of undefined
    at new Packager (/Users/grgur/Projects/sdk/react-native/packager/react-packager/src/Packager/index.js:49:30)
    at new Server (/Users/grgur/Projects/sdk/react-native/packager/react-packager/src/Server/index.js:13:20)
    at Object.exports.middleware (/Users/grgur/Projects/sdk/react-native/packager/react-packager/index.js:7:16)
    at getAppMiddleware (/Users/grgur/Projects/sdk/react-native/packager/packager.js:82:24)
    at runServer (/Users/grgur/Projects/sdk/react-native/packager/packager.js:101:10)
    at Object.<anonymous> (/Users/grgur/Projects/sdk/react-native/packager/packager.js:54:1)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)

  >>> ERROR: could not create packager - please shut down any existing instances that are already running.

The error points to

function Packager(projectConfig) {

Rolling back to d29d07e results in a successful start

Support webpack-dev-server

I want to implement support for Webpack dev server.

This is essential to my workflow as I rely on transforms such as 6to5. I also want to integrate Hot Module Replacement to React Native so that updates without losing component state or unmounting are possible.

Where should I start looking?

unrecognized selector `setReactTag`

I'm trying to integrate this into an existing project. I successfully did this with a project generated from a template from XCode, so not sure what's going on.

I added ReactKit, linked with it, and started the packager server pointing to my JS directory. The app compiles fine, but when it runs it throws an exception: "[RCTRootView setReactTag:] unrecognized selector instance sent to instance". The thing is, when I look at RCTRootView, I don't see that method implemented anywhere, but it does have self.reactTag = ... in the setUp method. See the screenshot.

Any help debugging what I'm doing wrong?

screen shot 2015-02-01 at 10 12 26 pm

EDIT: also, the only thing I added in my didFinishLaunchingWithOptions method was RCTRootView *rootView = [[RCTRootView alloc] initWithFrame:vc.view.bounds];, which triggers this.

Padding at the top of a list view

I'm rendering a ListView and it has padding at the top that I can't get rid of:

screen shot 2015-02-05 at 1 43 05 pm

My code:

    return ListView({
      style: { flex: 1, borderWidth: 1, borderColor: 'red', paddingTop: 0 },
      renderRow: this.renderRow,
      dataSource: source

Anyone else seen this?

Maintaining project outside react-native repo

All the project files are now present inside the react-native directory. This allows to build the package from the server packager.js.

Is there any option to move the app to a different directory ? Something like,

$ node ./packager/packager --source '/path/to/project/'

Auto-refresh simulator

Is it possible to have the simulator automatically refresh when a file is changed instead of Cmd-R?

[Orientation] Re-Layout on orientation change

How should I re-layout the page when the orientation of the device changes? I noticed none of the demo apps seem to support this yet. If I refresh the app in a different orientation it lays out fine though.

Native Wrapping - Geolocation API Spike

I've been messing around in my fork to try and understand the JS->Obj-C bridge, and the process for wrapping native code. I've wrapped CoreLocation in the WC3 Geolocation API as a first attempt.

I figured it would be great to get a bit of feedback on it, and some others might find it useful. It would be great if I could help document the process. I've got absolutely no Obj-C experience, so not sure if this is terrible or not.

Pull Request: JoeStanton#1


I'm sure you all have talked about this a lot, but I would like to see this open-sourced sooner rather than later. I appreciate wanting to do something for the conf attendees, and that is pretty cool, but the longer this is open-sourced the more the rest of the community will feel excluded (as more and more tweets & posts are made, etc).

I have a blog post I'm working on, for example, but I'm not going to post it until this is open-sourced because otherwise I feel like I'm rubbing my early access in other's faces.

Support require.resolve

Currently not supported, which makes it hard for me to support both React.js and React Native inside my library.

React packager failing - SyntaxError: Unexpected end of input

Unfortunately I am having issues with getting the movies example app working :-(

I have installed watchman as per the instructions, and already had node v0.10.36 installed.

On running npm start all seems well. However when I load the movies example it fails.

Testing via the URL:


Yields the following error:

{"type":"InternalError","message":"React packager has encountered an internal error, please check your terminal error output for more details"}

And here is the terminal output:

$ npm start

> [email protected] start /Users/colineberhardt/Projects/react-native
> ./packager/

 |  Running packager on port 8081.       
 |  Keep this packager running while developing on any JS         
 |  projects. Feel free to close this tab and run your own      
 |  packager instance if you prefer.                              

React packager ready.

SyntaxError: Unexpected end of input
    at Object.parse (native)
    at /Users/colineberhardt/Projects/react-native/packager/react-packager/src/DependencyResolver/haste/DependencyGraph/index.js:270:32
    at _fulfilled (/Users/colineberhardt/Projects/react-native/node_modules/q/q.js:787:54)
    at self.promiseDispatch.done (/Users/colineberhardt/Projects/react-native/node_modules/q/q.js:816:30)
    at Promise.promise.promiseDispatch (/Users/colineberhardt/Projects/react-native/node_modules/q/q.js:749:13)
    at /Users/colineberhardt/Projects/react-native/node_modules/q/q.js:557:44
    at flush (/Users/colineberhardt/Projects/react-native/node_modules/q/q.js:108:17)
    at process._tickCallback (node.js:442:13)
[17:52:41] <START> find dependencies

I've had a poke around DependencyGraph and tried to add some logging but haven't made much progress.

Has anyone else ecountered (and maybe solved!) this issue?

Using Native Popovers/Modals

I'm now trying to wrap the native Image Picker (UIImagePickerController), which is working. I'm wondering though, what is the recommended way to push and pop views on and off the screen?

My current code:

@implementation RCTPhotoManagerDelegate
  - (void) show:(RCTResponseSenderBlock)callback {
      self.done = callback;
      _picker = [[UIImagePickerController alloc] init];
      _picker.modalPresentationStyle = UIModalPresentationCurrentContext;
      _picker.delegate = self;
      _picker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
      dispatch_async(dispatch_get_main_queue(), ^{
          UIViewController *root = [[[[UIApplication sharedApplication] delegate] window] rootViewController];
          [root presentViewController:_picker animated:YES completion:nil];

   - (void) imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info {
       self.done(@[[NSString stringWithFormat:@"%@", [info valueForKey: @"UIImagePickerControllerReferenceURL"]]]);
       [self dismissViewControllerAnimated:YES completion:nil];

Currently my popover doesn't actually dismiss, and I feel like this might mess up the React rendering. Is this a bad way to do it?

Are flexbox animations from JS possible?

I'm writing another blog post about the theoretical possibility of applying React Native to the browser, running JS in a worker and using an asm.js-powered renderer on the main thread. (let's just assume that we can do text measurement and ignore a bunch of other big problems). I have an abstract question.

I know React Native handles animations, but I must be missing it in the source. I see InteractionManager which lets you schedule code to be run after animations are completed. But what is actually applying the animation?

Are we able to animate elements of a flexbox? Say we animated the width of an element from 50 to 100. If we did that, other elements with flex: 1 would need to re-adjust. Since we do the flexbox layout in the JS side (right?) we would need to perform the animation on the JS side. But that's not possible is it? Wouldn't they prone to all sorts of jank, not even from talking over the bridge but even GC stuff?

Of course native animations are supported, but I'm wondering about transitions with the flexbox layout system.

npm start fails with "Watcher took too long to load"

When I run npm start, it fails indicating a timeout. (This is on a circa-2011 Mac laptop.)

Mike-Fikess-MacBook-Pro:react-native mfikes$ npm start

> [email protected] start /Users/mfikes/Documents/Projects/react-native
> ./packager/

 |  Running packager on port 8081.       
 |  Keep this packager running while developing on any JS         
 |  projects. Feel free to close this tab and run your own      
 |  packager instance if you prefer.                              

React packager ready.

[Error: Watcher took too long to load.]
Error: Watcher took too long to load.
    at null._onTimeout (/Users/mfikes/Documents/Projects/react-native/packager/react-packager/src/FileWatcher/index.js:37:16)
    at Timer.listOnTimeout [as ontimeout] (timers.js:112:15)

  >>> ERROR: could not create packager - please shut down any existing instances that are already running.

I've rebooted just to be sure nothing else is running.

To rule out a race, I've increased the MAX_WAIT_TIME on line 21 of react-native/packager/react-packager/src/FileWatcher/index.js to as much as 2 minutes, but this doesn't resolve the issue.

I've installed node and watchman via brew:

Mike-Fikess-MacBook-Pro:~ mfikes$ brew list
node        pcre        watchman

and I'm running the latest version of OS X:

Mike-Fikess-MacBook-Pro:~ mfikes$ uname -a
Darwin Mike-Fikess-MacBook-Pro.local 14.1.0 Darwin Kernel Version 14.1.0: Mon Dec 22 23:10:38 PST 2014; root:xnu-2782.10.72~2/RELEASE_X86_64 x86_64

I have all of this running successfully on another machine, so this will probably boil down to finding out what the critical difference between the two is.

Pattern for interacting with the main thread

I exported a function on my controller:

- (void)loadMesh:(NSString *)path {
    node.mesh = [REMeshCache meshNamed:path];

This is called when selecting an item from a list:

var controller = require('NativeModules').TeapotController;

// ....

selectModel: function(file) {

I've been trying to debug why OpenGL crashes, and I finally realized that my OpenGL context doesn't exist. Which made me realize that this method in Obj-C is not running on the main thread. It's running in a different thread which all calls into Obj-C seem to run on.

I'm not familiar with iOS, so this is over my head. Is there a simple pattern I can use to interact with the main thread? How do I send a message to it?

I realize this not usually needed, and most custom native modules can probably be run standalone, but I'm basically implementing a custom view that needs to render on the main thread (not technically true, just a custom controller to a normal view, but still).

Add response headers to XMLHttpRequest

I'm trying to get superagent working for #10 but it seems XMLHttpRequest does not support response headers. getAllResponseHeaders() is currently just a stub and there is no implementation of getResponseHeader.

npm start fails with `FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-21)`

Running OS X 10.10.1
The npm install worked fine, but I can't seem to get npm start to work. It fails with a long stream of identical errors:

2015-02-02 10:56 node[24294] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-21)
2015-02-02 10:56 node[24294] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-21)
2015-02-02 10:56 node[24294] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-21)
2015-02-02 10:56 node[24294] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-21)

More info on environment:

$ npm --version

$ node --version

Seems like it might be a lower level node issue (nodejs/node-v0.x-archive#5463) though a cursory search indicates that there may be workarounds it in the app (e.g. maybe there are ways to reduce the number of files being watched?).


Is it possible to run React Native on WatchKit?

React.js + React Native: Abstracting platform differences away

Are there any plans on abstracting platform differences away?

For React.js I use React.findDOMNode, but also offsetLeft, offsetWidth, etc. Obviously these won't work inside React Native - so I was wondering if this is just how things are, or if there is some plan for abstracting this away?

Set UIStatusBarStyleLightContent

Is it possible to set the status bar to light? I'm working on a dark background.

Also, is this the right place to ask questions like this?

[ScrollView] Scrolling ends prematurely in ScrollViews embedded in a parent ScrollView

You can see this behavior in the UIExplorer app's <ScrollView> example. Fling to initiate a scroll in an inner ScrollView and fling again (before scrolling ends) to increase scroll momentum. Often times, this causes the scrolling to stop.

I haven't had gone through all of the ResponderEventPlugin code yet, but I'm seeing that when ResponderEventPlugin.extractEvents is called, the topLevelTargetID is sometimes incorrect.

The touches that unintentionally stop scrolling appear to be associated with the parent ScrollView instead of the inner ScrollView's content. I traced this down to RTCScrollView._shouldDisableScrollInteraction where [self isDescendantOfView:JSResponder] is sometimes YES. Forcing it to always return NO fixes the issue, but I'm pretty sure that's not the intention of this method :)

:active pseudo-class

I have a list view that uses TouchableHighlight for each item. I'd like to be able to customize the styles of the underlay that is active when I touch an item. Right now the only thing possible is underlayColor. What are the chances we could something like an :active pseudo-class?

In fact, how do you do pseudo-classes when you do CSS in JS anyway?

CocoaPod spec

CocoaPods is like npm for iOS and OS X. It keeps your dependencies up-to-date and sets up the Xcode workspace file so you don't have to manually drag ReactKit into the Movies project, for example. It probably makes sense to publish a CocoaPod for the public release.

There are a couple steps in this process. One thing that needs to be figured out is how to deploy the JS files under Libraries. Usually a CocoaPod will include Obj-C along with resource files inside of a bundle, but ReactKit's packager wants to bundle up both the core library files with the application JS (side note: worth thinking about changing this so apps don't need to load all the JS at boot). The right setup might be to split the project into three parts: ReactKit's native code (fetched via CocoaPods), ReactKit's core JS libraries (via npm), and react-kit-tools (packager, etc, fetched via npm). The workflow would look like:

pod try ReactKit
npm install react-kit react-kit-tools
npm start
# done!

Looking to get feedback on the overall idea or the specifics, especially because it affects both adoption of ReactKit and touches FB's syncing between the public and private repos.

Guidance for talking publically

I'm due to do a introductory React talk this Wednesday evening - I expect I'll get a few questions about the React Native announcement.

I can point to the two keynote videos and talk broadly about the concepts behind it, and obviously I wont be handing out copies of the code - but am I allowed to show a little demo myself?

I don't mind either way, but wanted to make sure I'm not over-sharing.

ScrollView onScroll only fires once

I have a component that looks something like this:

var ScrollTest = React.createClass({

  render() {
    return (
      <ScrollView onScroll={this.onScroll}>
        <View style={{ height: 2000 }} />

  onScroll: function(e) {
    console.log("Scroll", e)

Right now I'm only seeing the log message when I start a new scroll action. Is there a way to get that onScroll event to fire on every frame? I want the height of another component to depend on the scroll position of this ScrollView component. (trying to duplicate the behavior you see on the iOS Weather app when you scroll down).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.