Summary: This fixes a crash for the case when we try to drop a view that has already been dropped. **The Problem** We got reports of a crash (t12912526) that occurs when the resolveViewManager method can't resolve a ViewManager for a View being dropped. Investigating this, one thing in common between all the stack traces for this is that dropView is called from line 210 of FlatNativeViewHierarchyManager. This part of the code is specifically the part we added to remove strong references to any clipped children (from views that have subview clipping enabled). So this is a problem specifically with Nodes and clipSubviews, which brings up some questions: **when can this happen?** The only situation this can possibly happen is when we drop a child (which is clipped) followed by dropping its parent in the same cycle. Consider a tree where each view only has one child, such as: A - B - C - D. This crash would happen if D is clipped, and we removed it, followed by removing any of its parents in the same frame. **if the removes happen in different frames, does this bug occur?** No - the reason is that before we execute the DropView operations, we run through StateBuilder, which traverses the shadow tree and marks updates, thus removing the view going away (such that the delete in the next frame doesn't try to re-delete it). So why doesn't this happen when we're dropping in the same frame? The reason is that manageChildren (where this all starts) asks to remove some views. We handle this by removing said Nodes and their children from the shadow tree. Consequently, when StateBuilder iterates over the shadow tree, it can't do the right thing because said nodes no longer exist. As a more concrete example, consider A - B - C - D again, and consider that both D and B are removed. StateBuilder only sees A, and realizes that it now has 0 children (whereas before it has 1), so it removes B from its children. However, this process isn't recursive, so C never gets cleaned up. **why doesn't this happen with Nodes without clipping containers?** The answer to this is that NativeViewHierarchyManager's dropView method checks the existance of each child before deeply dropping that child and its subtree. So in this case, we drop D and all its children, and when we come to drop B, we try to drop C (which exists) and then its children (D, which doesn't exist because we already dropped it, so we ignore it). **why doesn't this happen with non-Nodes?** The reason is that non-Nodes handles removes differently - every remove is enqueued in a call to NativeViewHierarchy's manageChildren, which explicitly asks the parent to remove said child. Consequently, we never try to remove a child that is already removed. **Fix** The initial fix was to check whether or not the view exists, but this updated patch just does the right thing at drop time - i.e. whenever a view is dropped, we notify the parent of this fact so that it can clear the reference from clipped views. **One last Note** There are two reasons for switching `super.dropView` to `dropView` - first, the comment is only partially correct - calling `super.dropView` will avoid looking at clipped children (as an aside, that could cause a leak in the case of nested clipping subviews), but will look at clipped grandchildren, because of the super class's iteration across the set of children. Reviewed By: astreet Differential Revision: D3815485
React Native
![npm version](https://badge.fury.io/js/react-native.svg)
React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about - learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.
Supported operating systems are >= Android 4.1 (API 16) and >= iOS 8.0.
- Getting Started
- Getting Help
- Documentation
- Examples
- Extending React Native
- Upgrading
- Opening Issues
- Contributing
- License
Introduction
See the official React Native website for an introduction to React Native.
Getting Started
- Follow the Getting Started guide to install React Native and its dependencies.
- Check out this tutorial to walk through your first project that fetches real data and displays it in a list.
- Open the UIExplorer example project to see a list of components that ship with React Native.
- Install the React Developer Tools for Chrome or Firefox for better debugging (read more).
- Try out apps from the Showcase to see what React Native is capable of!
Getting Help
Please use these community resources for getting help. We use the GitHub issues for tracking bugs and feature requests and have limited bandwidth to address them.
- Ask a question on StackOverflow and tag it with
react-native
- Chat with us on Reactiflux in #react-native
- Articulate your feature request or upvote existing ones on Product Pains
- Start a thread on the React Discussion Board
- Join #reactnative on IRC: chat.freenode.net
- If it turns out that you may have found a bug, please open an issue
Documentation
The website’s documentation is divided into multiple sections.
- There are Guides that discuss topics like debugging, integrating with existing apps, and the gesture responder system.
- The Components section covers React components such as
View
andNavigator
. - The APIs section covers other libraries like Animated and StyleSheet that aren’t React components themselves.
- Finally, React Native provides a small number of Polyfills that offer web-like APIs.
Another great way to learn more about the components and APIs included with React Native is to read their source. Look under the Libraries
directory for components like ScrollView
and Navigator
, for example. The UIExplorer example is also here to demonstrate some of the ways to use these components. From the source you can get an accurate understanding of each component’s behavior and API.
The React Native documentation only discusses the components, APIs and topics specific to React Native (React on iOS and Android). For further documentation on the React API that is shared between React Native and React DOM, refer to the React documentation.
Examples
git clone https://github.com/facebook/react-native.git
cd react-native && npm install
Running the examples on iOS
Now open any example (the .xcodeproj
file in each of the Examples
subdirectories) and hit Run in Xcode.
Running the examples on Android
Note that you'll need the Android NDK installed, see prerequisites.
./gradlew :Examples:Movies:android:app:installDebug
# Start the packager in a separate shell (make sure you ran npm install):
./packager/packager.sh
# Open the Movies app in your emulator
Extending React Native
- Looking for a component? JS.coach
- Fellow developers write and publish React Native modules to npm and open source them on GitHub.
- Making modules helps grow the React Native ecosystem and community. We recommend writing modules for your use cases and sharing them on npm.
- Read the guides on Native Modules (iOS, Android) and Native UI Components (iOS, Android) if you are interested in extending native functionality.
Upgrading
React Native is under active development. See the guide on upgrading React Native to keep your project up-to-date.
Opening Issues
If you encounter a bug with React Native we would like to hear about it. Search the existing issues and try to make sure your problem doesn’t already exist before opening a new issue. It’s helpful if you include the version of React Native and OS you’re using. Please include a stack trace and reduced repro case when appropriate, too.
The GitHub issues are intended for bug reports and feature requests. For help and questions with using React Native please make use of the resources listed in the Getting Help section. Product Pains in particular is a good way to signal your interest in a feature or issue. There are limited resources available for handling issues and by keeping the list of open issues lean we can respond in a timely manner.
Contributing
For more information about contributing PRs and issues, see our Contribution Guidelines.
Good First Task is a great starting point for PRs.
We encourage the community to ask and answer questions on Stack Overflow with the react-native tag. It's a great way to help out and be involved!
License
React is BSD licensed. We also provide an additional patent grant.
React documentation is Creative Commons licensed.
Examples provided in this repository and in the documentation are separately licensed, as are some of the custom components.