A framework for building native apps with React. http://facebook.github.io/react-native/
Go to file
rxb dcf245a9a2 Definable distance pagination for ScrollView
Summary: This is an enhancement for ScrollView that adds the ability to paginate based on a width other than the width of the ScrollView itself. This is a fairly common pattern used on apps like Facebook, App Store, and Twitter to scroll through a horizontal set of cards or icons:

![img_8726 2](https://cloud.githubusercontent.com/assets/451050/8017899/39f9f47c-0bd2-11e5-9c1d-889452f20cf7.PNG) ![img_8727 2](https://cloud.githubusercontent.com/assets/451050/8017898/39f962dc-0bd2-11e5-98b4-461ac0f7f21b.PNG)  ![img_8728 2](https://cloud.githubusercontent.com/assets/451050/8017900/39fd91a4-0bd2-11e5-8786-4cf0316295a0.PNG)

After trying to accomplish this only with JS, it appears that attempting to take over an in-progress native scroll animation with JS is always going to result in some amount of jankiness and jumping.

This pull request uses `scrollViewWillEndDragging` in RCTScrollView.m to adjust `targetContentOffset` based on two new optional props added to ScrollView. `snapToInterval` sets the multiple that the
Closes https://github.com/facebook/react-native/pull/1532

Reviewed By: @​svcscm, @​trunkagent

Differential Revision: D2443701

Pulled By: @vjeux
2015-09-23 11:47:25 -07:00
Examples Delete ResponderExample.js 2015-09-23 10:18:05 -07:00
IntegrationTests/IntegrationTests.xcodeproj/xcshareddata/xcschemes [ReactNative] Merge IntegrationTest into UIExplorer tests 2015-06-06 13:38:35 -08:00
JSCLegacyProfiler Automatically save and convert JavaScript profile to chrome format 2015-09-11 06:40:26 -07:00
Libraries Definable distance pagination for ScrollView 2015-09-23 11:47:25 -07:00
React Definable distance pagination for ScrollView 2015-09-23 11:47:25 -07:00
ReactAndroid stub Java QPL for OSS 2015-09-23 10:30:28 -07:00
docs Fix misspelling 2015-09-20 13:48:27 -07:00
gradle/wrapper Release React Native for Android 2015-09-14 18:13:39 +01:00
jestSupport Don't transform node_modules in open source 2015-09-22 12:13:38 -07:00
local-cli Bump flow version 2015-09-18 19:28:38 -07:00
packager Remove use of const from packager and add systrace internally 2015-09-23 10:56:31 -07:00
private-cli Introduce react native CLI 2015-09-22 09:02:32 -07:00
react-native-cli [cli] don't swallow require(local_cli) errors 2015-09-16 17:17:13 +01:00
react-native-gradle Release React Native for Android 2015-09-14 18:13:39 +01:00
scripts [Travis] Update CI to run with Xcode 6.4 2015-09-04 02:39:37 -07:00
website Merge pull request #2937 from unknownexception/patch-2 2015-09-22 15:52:12 -07:00
.eslintignore [ReactNative] clean lint in all of Libraries/ 2015-05-19 13:47:04 -08:00
.eslintrc Fix lint warnings when adding a new js file 2015-09-22 13:05:43 -07:00
.flowconfig Deploy to fbobjc 2015-09-18 14:25:27 -07:00
.gitignore Revert "ignore npm-debug.log" 2015-09-15 21:11:10 -07:00
.travis.yml [Travis] Use Xcode 7 image, remove brew update, install nvm directly 2015-09-22 22:41:12 -07:00
CONTRIBUTING.md [README] Added note about squashing commits to the Contributing page 2015-09-07 23:32:31 -07:00
LICENSE Update license 2015-03-23 10:48:39 -07:00
LICENSE-CustomComponents Add CustomComponents license 2015-03-26 11:03:30 -07:00
LICENSE-docs More licenses 2015-03-24 19:59:10 -07:00
LICENSE-examples More licenses 2015-03-24 19:59:10 -07:00
PATENTS Update Patent Grant 2015-04-10 12:14:22 -07:00
README.md Fix sync 2015-09-18 12:12:53 -07:00
React.podspec Get back 100% in sync with fb codebase 2015-09-16 10:30:53 -07:00
build.gradle Export latest Android changes 2015-09-17 14:33:28 +01:00
cli.js Simplify cli.js 2015-04-07 12:17:52 -07:00
gradlew Release React Native for Android 2015-09-14 18:13:39 +01:00
gradlew.bat Release React Native for Android 2015-09-14 18:13:39 +01:00
npm-shrinkwrap.json Add `temp` node dependency 2015-09-21 17:49:37 -07:00
package.json Temp dependency should be a dev one 2015-09-22 18:24:26 -07:00
runXcodeTests.sh tweak build script. 2015-03-26 09:17:17 -07:00
settings.gradle Release React Native for Android 2015-09-14 18:13:39 +01:00

README.md

React Native Build Status npm version

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

Introduction

See the official React Native website for an introduction to React Native.

Getting Started

Getting Help

Documentation

The websites documentation divided into multiple sections.

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 components 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? react.parts
  • 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.

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 doesnt already exist before opening a new issue. Its helpful if you include the version of React Native and OS youre 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. 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.

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.