Compare commits

..
27 Commits
Author SHA1 Message Date
James Ide afdd0d5d93 [0.49.3] Bump version numbers 2017-10-09 02:03:33 -07:00
Brian Vaughn 4cb4a71656 Fixed runtime error with ProgressBarAndroid
Reviewed By: yungsters

Differential Revision: D5857305

fbshipit-source-id: 2fc20a848fa4dce5c1ac3fb7e986536618e25548
2017-10-09 02:03:04 -07:00
James Ide 7b7b491e50 [0.49.2] Bump version numbers 2017-10-07 02:58:14 -07:00
Naman Goel 45a48271b1 Fix Flow errors in ListViewData source.
Differential Revision: D5839414

fbshipit-source-id: 7a0c7b3d27be728c74e08d3a8209deb3ca68dd63
2017-10-07 02:56:55 -07:00
James Ide cd81eff5b8 [0.49.1] Bump version numbers 2017-10-03 19:08:02 -07:00
James Ide 6f232424e6 Set fishhook's header_dir to "fishhook"
Summary:
This lets us import fishhook like `<fishhook/fishhook.h>`.
Closes https://github.com/facebook/react-native/pull/16192

Differential Revision: D5971639

Pulled By: shergin

fbshipit-source-id: c46503953a08a74bdd10ed35cbd30029f1666c7d
2017-10-03 19:07:10 -07:00
Mike Grabowski 35717c773a [0.49.0] Bump version numbers 2017-10-03 17:42:52 +02:00
James Ide af89654699 [0.49.0-rc.6] Bump version numbers 2017-09-28 00:37:17 -07:00
Janic Duplessis 776bd34eb3 Validate that JS and Native code versions match for RN releases
Summary:
Basic implementation of the proposal in #15271

Note that this should not affect facebook internally since they are not using OSS releases.

Points to consider:
- How strict should the version match be, right now I just match exact versions.
- Wasn't able to use haste for ReactNativeVersion because I was getting duplicate module provider caused by the template file in scripts/versiontemplates. I tried adding the scripts folder to modulePathIgnorePatterns in package.json but that didn't help.
- Redscreen vs. warning, I think warning is useless because if the app crashes you won't have time to see the warning.
- Should the check and native modules be __DEV__ only?

**Test plan**
Tested that it works when version match and that it redscreens when versions don't before getting other errors on Android and iOS.
Closes https://github.com/facebook/react-native/pull/15518

Differential Revision: D5813551

Pulled By: hramos

fbshipit-source-id: 901757e25724b0f22bf39de172b56309d0dd5a95
2017-09-27 22:28:43 -07:00
James Ide ac4a214eeb [0.49.0-rc.5] Bump version numbers 2017-09-18 22:59:03 -07:00
Tim Wang 1f85e21464 Add BlobModule native module mock to jest setup
Summary:
React Native v0.48.0 shipped `WebSocketModule` support with `BlobModule` as dependency. But `BlobModule` is not mocked in jest which will cause render tests failed.

Reference implantation: [BlobModule.java](https://github.com/facebook/react-native/blob/ed903099b42259958d8a6eb3af1a6460c1bc8b2c/ReactAndroid/src/main/java/com/facebook/react/modules/blob/BlobModule.java)

Related PR: #11417
Related issue: #15810

Passed CI tests.
Need render a component in jest with WebSocketModule as dependency.
Closes https://github.com/facebook/react-native/pull/15843

Differential Revision: D5783263

Pulled By: shergin

fbshipit-source-id: 2386692f4a644796da2fd66b3135da9f5911663e
2017-09-18 22:55:36 -07:00
James Ide a41995ff5c [0.49.0-rc.4] Bump version numbers 2017-09-14 12:11:13 -07:00
Ben Roth 6d64892c8a Fix crash when trying to load photo library assets with nil image url
Summary:
This avoids a crash when we try to load a PHAsset with nil image url. Specifically, the following condition evaluates to true when `imageURL` is nil:

```objc
if ([imageURL.scheme caseInsensitiveCompare:@"assets-library"] == NSOrderedSame) {
    assetID = [imageURL absoluteString];
    results = [PHAsset fetchAssetsWithALAssetURLs:@[imageURL] options:nil];
}
```

The crash will be "attempt to insert nil object from objects[0]" when we build the `@[imageURL]` array literal.

We've seen this emerge as a very common crash among Expo users, so I wanted to at least provide a clear error message instead of terminating the app.

Load an image from the photo library with a nil request url.
Closes https://github.com/facebook/react-native/pull/15952

Differential Revision: D5835219

Pulled By: ericnakagawa

fbshipit-source-id: 7be00a15e674a0905cf5c27c526ce9085d1b308f
2017-09-14 12:10:14 -07:00
Adam Miskiewicz 5d95e9950c Refactor how symlinks are discovered in local-cli, support scoped modules
Summary:
This PR refactors the symlink finding logic in local-cli in order to support nested symlinked modules as well as symlinked scoped NPM modules.

Run tests, or try project with `npm link`'ed or `yarn link`'ed dependencies.
Closes https://github.com/facebook/react-native/pull/15776

Reviewed By: cpojer

Differential Revision: D5823008

Pulled By: jeanlauliac

fbshipit-source-id: f2daeceef37bed2f8a136a0a5918730f9832884c
2017-09-14 12:10:02 -07:00
Andrew Jack 6b39d644ea Android Oreo (8.0) Support
Summary:
Apps targeting Android 8.0 (API level 26) cannot use `TYPE_SYSTEM_OVERLAY ` and `TYPE_SYSTEM_OVERLAY `. Targeting 26 will cause the app to crash when in `DEV_MODE`.

https://developer.android.com/about/versions/oreo/android-8.0-changes.html#cwt

This PR replaces uses of these overlay flags with the new `TYPE_APPLICATION_OVERLAY` when running on a device with Android 8.0 or later.

When using `TYPE_APPLICATION_OVERLAY` it still requires the `SYSTEM_ALERT_WINDOW` permission, just like previous android versions.
https://developer.android.com/reference/android/view/WindowManager.LayoutParams.html#TYPE_APPLICATION_OVERLAY

https://github.com/AndrewJack/react-native-android-oreo tested here
Closes https://github.com/facebook/react-native/pull/15601

Reviewed By: achen1

Differential Revision: D5801619

Pulled By: shergin

fbshipit-source-id: 27d1b9bb64018e7f12f9c3d3d222f1fda468b124
2017-09-14 11:06:29 -07:00
James Ide dff572c174 [0.49.0-rc.3] Bump version numbers 2017-09-11 15:27:51 -07:00
Pieter De Baets af3e1d4a86 Improve RCTCxxBridge invalidation
Reviewed By: fromcelticpark

Differential Revision: D5536063

fbshipit-source-id: b0f19bebea839c7da84890c338ad4d38293bc99c
2017-09-11 15:23:48 -07:00
Mike Grabowski 897a3a5d5e [0.49.0-rc.2] Bump version numbers 2017-09-08 11:37:01 +02:00
Héctor Ramos 0fea3515a1 Comment out failing buck install command
Summary:
Workaround for #15726.
Closes https://github.com/facebook/react-native/pull/15817

Differential Revision: D5767831

Pulled By: hramos

fbshipit-source-id: f0324ed4052007648ac23f9015069a97f005d19b
2017-09-08 00:04:35 -07:00
Héctor Ramos 80e8efe8e7 Comment out Flow tests
Summary:
Commenting these out until we can stop breaking the OSS builds.
Closes https://github.com/facebook/react-native/pull/15859

Differential Revision: D5789816

Pulled By: hramos

fbshipit-source-id: f3b2ecd0cbcb4dbe5e35697a925b2a8bd8397afe
2017-09-08 00:03:35 -07:00
James Ide d1888650c5 [0.49.0-rc.1] Bump version numbers 2017-09-07 14:49:21 -07:00
James Ide f65b9e883a Change intValue -> integerValue in RCTMultipartStreamReader
Summary:
We assign the value to an NSInteger so we should convert the NSString to an NSInteger instead of an int.

Build the app in Xcode and run it.
Closes https://github.com/facebook/react-native/pull/15806

Differential Revision: D5767118

Pulled By: shergin

fbshipit-source-id: b310511f13f5f4026d595a219d69811801d313c2
2017-09-07 14:17:01 -07:00
Gilad Novik aa0b2ad1cd Fix unrecognized selector error
Summary:
Fixes "[NSTaggedPointerString unsignedIntValue]: unrecognized selector" error
Closes https://github.com/facebook/react-native/pull/15755

Differential Revision: D5763628

Pulled By: shergin

fbshipit-source-id: 6e1d1b1ae6bc63e07112b9dddcdf8e6f812a7f51
2017-09-07 14:16:54 -07:00
Neo 0a319978ff fix fontWeight regression
Summary:
fix the regression I mentioned in https://github.com/facebook/react-native/pull/15162#issuecomment-319696706

as no one is working on this, I take the step, although I know nothing about Objective C

I find the key point is that the keys in `NSDictionary` are not ordered as presented, it's a hash table, so no grantee on keys order, so I create a new array to do that, then it will check `ultralight` before `light` and `semibold` before `bold`
Closes https://github.com/facebook/react-native/pull/15825

Differential Revision: D5782142

Pulled By: shergin

fbshipit-source-id: 5346b0cb263e535c0b445e7a2912c452573248a5
2017-09-07 14:16:44 -07:00
Janic Duplessis 29e5deb85f Fix scroll events getting skipped on Android
Summary:
This code related to velocity would cause some scroll events to be skipped and caused some jitter for sticky headers. Not sure if there is a better fix but removing this does fix missing events and the velocity calculation still seems to be working.

**Test plan**
Tested that sticky headers now work properly on Android, tested that velocity calculation still seem to work.
Closes https://github.com/facebook/react-native/pull/15761

Differential Revision: D5760820

Pulled By: sahrens

fbshipit-source-id: 562b5f606bdc5452ca3d85efb5e0e3e7db224891
2017-09-07 14:16:38 -07:00
Héctor Ramos 031feb6942 Update IntegrationWithExistingApps.md 2017-09-05 10:22:45 -07:00
Mike Grabowski d82138ff91 [0.49.0-rc.0] Bump version numbers 2017-09-01 17:28:27 +02:00
1779 changed files with 68936 additions and 84109 deletions
-5
View File
@@ -1,5 +0,0 @@
# Circle CI
This directory is home to the Circle CI configuration file. Circle is our continuous integration service provider. You can see the overall status of React Native's builds at https://circleci.com/gh/facebook/react-native
You may also see an individual PR's build status by scrolling down to the Checks section in the PR.
-616
View File
@@ -1,616 +0,0 @@
aliases:
# Cache Management
- &restore-yarn-cache
keys:
- v1-yarn-{{ arch }}-{{ checksum "package.json" }}
# Fallback in case checksum fails
- v1-yarn-{{ arch }}-
- &save-yarn-cache
paths:
- node_modules
- ~/.cache/yarn
key: v1-yarn-{{ arch }}-{{ checksum "package.json" }}
- &restore-cache-analysis
keys:
- v1-analysis-dependencies-{{ arch }}-{{ checksum "package.json" }}{{ checksum "bots/package.json" }}
# Fallback in case checksum fails
- v1-analysis-dependencies-{{ arch }}-
- &save-cache-analysis
paths:
- bots/node_modules
- node_modules
key: v1-analysis-dependencies-{{ arch }}-{{ checksum "package.json" }}{{ checksum "bots/package.json" }}
- &restore-cache-android-packages
keys:
- v1-android-sdkmanager-packages-{{ arch }}-api-26-alpha-{{ checksum "scripts/circle-ci-android-setup.sh" }}
# Fallback in case checksum fails
- v1-android-sdkmanager-packages-{{ arch }}-api-26-alpha-
- &save-cache-android-packages
paths:
- /opt/android/sdk
key: v1-android-sdkmanager-packages-{{ arch }}-api-26-alpha-{{ checksum "scripts/circle-ci-android-setup.sh" }}
- &restore-cache-ndk
keys:
- v2-android-ndk-{{ arch }}-r10e-32-64
- &save-cache-ndk
paths:
- /opt/ndk
key: v2-android-ndk-{{ arch }}-r10e-32-64
- &restore-cache-buck
keys:
- v2-buck-{{ arch }}-v2017.11.16.01
- &save-cache-buck
paths:
- ~/buck
key: v2-buck-{{ arch }}-v2017.11.16.01
- &restore-cache-watchman
keys:
- v1-watchman-{{ arch }}-v4.9.0
- &save-cache-watchman
paths:
- ~/watchman
key: v1-watchman-{{ arch }}-v4.9.0
# Branch Filtering
- &filter-only-master-stable
branches:
only:
- /.*-stable/
- master
- &filter-only-stable
branches:
only:
- /.*-stable/
- &filter-ignore-gh-pages
branches:
ignore: gh-pages
- &filter-ignore-master-stable
branches:
ignore:
- master
- /.*-stable/
- gh-pages
# Dependency Management
- &install-ndk
|
source scripts/circle-ci-android-setup.sh && getAndroidNDK
- &yarn
|
yarn install --non-interactive --cache-folder ~/.cache/yarn
- &install-yarn
|
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn
- &install-node-dependencies
|
npm install --no-package-lock --no-spin --no-progress
- &install-buck
|
if [[ ! -e ~/buck ]]; then
git clone https://github.com/facebook/buck.git ~/buck --branch v2017.11.16.01 --depth=1
fi
cd ~/buck && ant
buck --version
- &install-node
|
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs
- &create-ndk-directory
name: Create Android NDK Directory
command: |
if [[ ! -e /opt/ndk ]]; then
sudo mkdir /opt/ndk
fi
sudo chown ${USER:=$(/usr/bin/id -run)}:$USER /opt/ndk
# CircleCI does not support interpolating env variables in the environment
# https://circleci.com/docs/2.0/env-vars/#interpolating-environment-variables-to-set-other-environment-variables
- &configure-android-path
name: Configure Environment Variables
command: |
echo 'export PATH=${ANDROID_NDK}:~/react-native/gradle-2.9/bin:~/buck/bin:$PATH' >> $BASH_ENV
source $BASH_ENV
- &install-android-packages
|
source scripts/circle-ci-android-setup.sh && getAndroidSDK
- &install-android-build-dependencies
name: Install Android Build Dependencies
command: |
sudo apt-get update -y
sudo apt-get install ant autoconf automake g++ gcc libqt5widgets5 lib32z1 lib32stdc++6 make maven python-dev python3-dev qml-module-qtquick-controls qtdeclarative5-dev file -y
# Test Definitions
- &run-js-tests
name: JavaScript Test Suite
command: yarn test-ci
- &run-lint-checks
name: Lint code
command: yarn lint --format junit -o ~/react-native/reports/junit/js-lint-results.xml
when: always
- &run-flow-checks
name: Check for errors in code using Flow
command: yarn flow check
when: always
- &build-android-app
name: Build Android App
command: |
buck build ReactAndroid/src/main/java/com/facebook/react
buck build ReactAndroid/src/main/java/com/facebook/react/shell
- &create-avd
name: Create Android Virtual Device
command: source scripts/circle-ci-android-setup.sh && createAVD
- &launch-avd
name: Launch Android Virtual Device in Background
command: source scripts/circle-ci-android-setup.sh && launchAVD
background: true
- &wait-for-avd
name: Wait for Android Virtual Device
command: source scripts/circle-ci-android-setup.sh && waitForAVD
- &build-js-bundle
name: Build JavaScript Bundle
command: node local-cli/cli.js bundle --max-workers 2 --platform android --dev true --entry-file ReactAndroid/src/androidTest/js/TestBundle.js --bundle-output ReactAndroid/src/androidTest/assets/AndroidTestBundle.js
- &compile-native-libs
name: Compile Native Libs for Unit and Integration Tests
command: ./gradlew :ReactAndroid:packageReactNdkLibsForBuck -Pjobs=$BUILD_THREADS -Pcom.android.build.threadPoolSize=1
no_output_timeout: 6m
- &run-android-unit-tests
name: Run Unit Tests
command: buck test ReactAndroid/src/test/... --config build.threads=$BUILD_THREADS
- &run-android-instrumentation-tests
name: Run Instrumentation Tests
command: |
if [[ ! -e ReactAndroid/src/androidTest/assets/AndroidTestBundle.js ]]; then
echo "JavaScript bundle missing, cannot run instrumentation tests. Verify build-js-bundle step completed successfully."; exit 1;
fi
source scripts/circle-ci-android-setup.sh && NO_BUCKD=1 retry3 buck install ReactAndroid/src/androidTest/buck-runner:instrumentation-tests --config build.threads=$BUILD_THREADS
- &collect-android-test-results
name: Collect Test Results
command: |
find . -type f -regex ".*/build/test-results/debug/.*xml" -exec cp {} ~/react-native/reports/junit/ \;
find . -type f -regex ".*/outputs/androidTest-results/connected/.*xml" -exec cp {} ~/react-native/reports/junit/ \;
find . -type f -regex ".*/buck-out/gen/ReactAndroid/src/test/.*/.*xml" -exec cp {} ~/react-native/reports/junit/ \;
when: always
- &setup-artifacts
name: Initial Setup
command: |
mkdir -p ~/react-native/reports/junit/
- &run-objc_ios-tests
name: Objective-C iOS Test Suite
command: ./scripts/objc-test-ios.sh
- &run-objc-tvos-tests
name: Objective-C tvOS Test Suite
command: ./scripts/objc-test-tvos.sh
- &run-objc-ios-e2e-tests
name: Objective-C iOS End-to-End Test Suite
command: node ./scripts/run-ci-e2e-tests.js --ios --js --retries 3;
- &run-objc-tvos-e2e-tests
name: Objective-C tvOS End-to-End Test Suite
command: node ./scripts/run-ci-e2e-tests.js --tvos --js --retries 3;
defaults: &defaults
working_directory: ~/react-native
js_defaults: &js_defaults
<<: *defaults
docker:
- image: circleci/node:8
android_defaults: &android_defaults
<<: *defaults
docker:
- image: circleci/android:api-26-alpha
resource_class: "large"
environment:
- TERM: "dumb"
- ADB_INSTALL_TIMEOUT: 10
- _JAVA_OPTIONS: "-XX:+UnlockExperimentalVMOptions -XX:+UseCGroupMemoryLimitForHeap"
- GRADLE_OPTS: '-Dorg.gradle.daemon=false -Dorg.gradle.jvmargs="-XX:+HeapDumpOnOutOfMemoryError"'
- ANDROID_NDK: '/opt/ndk/android-ndk-r10e'
- BUILD_THREADS: 2
macos_defaults: &macos_defaults
<<: *defaults
macos:
xcode: "9.0"
version: 2
jobs:
# Set up a Node environment for downstream jobs
checkout_code:
<<: *js_defaults
steps:
- checkout
- run: *setup-artifacts
- restore-cache: *restore-yarn-cache
- run: *yarn
- save-cache: *save-yarn-cache
- persist_to_workspace:
root: .
paths: .
# Runs JavaScript lint and flow checks.
# Currently will fail a PR if lint/flow raises issues.
js_checks:
<<: *js_defaults
steps:
- attach_workspace:
at: ~/react-native
- run: *run-lint-checks
- run: *run-flow-checks
- store_test_results:
path: ~/react-native/reports/junit
- store_artifacts:
path: ~/react-native/reports/junit
- store_artifacts:
path: ~/react-native/yarn.lock
# Runs JavaScript tests on Node 8
test_javascript:
<<: *js_defaults
steps:
- attach_workspace:
at: ~/react-native
- run: *run-js-tests
- store_test_results:
path: ~/react-native/reports/junit
- store_artifacts:
path: ~/react-native/reports/junit
# Runs JavaScript tests on Node 6
test_javascript_node6_compatibility:
<<: *defaults
docker:
- image: circleci/node:6
steps:
- checkout
- run: *setup-artifacts
- restore-cache: *restore-yarn-cache
- run: *yarn
- save-cache: *save-yarn-cache
- run: *run-js-tests
- store_test_results:
path: ~/react-native/reports/junit
- store_artifacts:
path: ~/react-native/reports/junit
# Runs unit tests on iOS devices
test_objc_ios:
<<: *macos_defaults
dependencies:
pre:
- xcrun instruments -w "iPhone 5s (10.3.1)" || true
steps:
- attach_workspace:
at: ~/react-native
- run: *run-objc_ios-tests
- store_test_results:
path: ~/react-native/reports/junit
- store_artifacts:
path: ~/react-native/reports/junit
# Runs unit tests on tvOS devices
test_objc_tvos:
<<: *macos_defaults
dependencies:
pre:
- xcrun instruments -w "Apple TV 1080p (10.0)" || true
steps:
- attach_workspace:
at: ~/react-native
- run: *run-objc-tvos-tests
- store_test_results:
path: ~/react-native/reports/junit
- store_artifacts:
path: ~/react-native/reports/junit
# Runs end to end tests
test_objc_ios_e2e:
<<: *macos_defaults
dependencies:
pre:
- xcrun instruments -w "iPhone 5s (10.3.1)" || true
steps:
- attach_workspace:
at: ~/react-native
- run: *run-objc-ios-e2e-tests
- store_test_results:
path: ~/react-native/reports/junit
- store_artifacts:
path: ~/react-native/reports/junit
# Checks podspec
test_podspec:
<<: *defaults
macos:
xcode: "9.0"
steps:
- attach_workspace:
at: ~/react-native
- run: ./scripts/process-podspecs.sh
# Publishes new version onto npm
publish_npm_package:
<<: *android_defaults
steps:
# Checkout code so that we can work with `git` in publish.js
- checkout
- attach_workspace:
at: ~/react-native
# Configure Android SDK and related dependencies
- run: *configure-android-path
- run: *install-android-build-dependencies
- restore-cache: *restore-cache-android-packages
- run: *install-android-packages
- save-cache: *save-cache-android-packages
# Install Android NDK
- run: *create-ndk-directory
- restore-cache: *restore-cache-ndk
- run: *install-ndk
- save-cache: *save-cache-ndk
# Fetch dependencies using BUCK
- restore-cache: *restore-cache-buck
- run: *install-buck
- save-cache: *save-cache-buck
- run: buck fetch ReactAndroid/src/test/java/com/facebook/react/modules
- run: buck fetch ReactAndroid/src/main/java/com/facebook/react
- run: buck fetch ReactAndroid/src/main/java/com/facebook/react/shell
- run: buck fetch ReactAndroid/src/test/...
- run: buck fetch ReactAndroid/src/androidTest/...
- run: ./gradlew :ReactAndroid:downloadBoost :ReactAndroid:downloadDoubleConversion :ReactAndroid:downloadFolly :ReactAndroid:downloadGlog :ReactAndroid:downloadJSCHeaders
- run: *install-node
- run: *install-yarn
- restore-cache: *restore-yarn-cache
- run: *yarn
- save-cache: *save-yarn-cache
- run:
name: Publish React Native Package
command: |
if [ -z "$CIRCLE_PULL_REQUEST" ]; then
echo "//registry.npmjs.org/:_authToken=${CIRCLE_NPM_TOKEN}" > ~/.npmrc
git config --global user.email "reactjs-bot@users.noreply.github.com"
git config --global user.name "npm Deployment Script"
echo "machine github.com login reactjs-bot password $GITHUB_TOKEN" > ~/.netrc
node ./scripts/publish-npm.js
else
echo "Skipping deploy."
fi
# Set up an Android environment for downstream jobs
test_android:
<<: *android_defaults
steps:
- attach_workspace:
at: ~/react-native
# Configure Android SDK and related dependencies
- run: *configure-android-path
- run: *install-android-build-dependencies
- restore-cache: *restore-cache-android-packages
- run: *install-android-packages
- save-cache: *save-cache-android-packages
# Starting emulator in advance as it takes some time to boot.
- run: *create-avd
- run: *launch-avd
# Keep configuring Android dependencies while AVD boots up
# Install Android NDK
- run: *create-ndk-directory
- restore-cache: *restore-cache-ndk
- run: *install-ndk
- save-cache: *save-cache-ndk
# Fetch dependencies using BUCK
- restore-cache: *restore-cache-buck
- run: *install-buck
- save-cache: *save-cache-buck
- run: buck fetch ReactAndroid/src/test/java/com/facebook/react/modules
- run: buck fetch ReactAndroid/src/main/java/com/facebook/react
- run: buck fetch ReactAndroid/src/main/java/com/facebook/react/shell
- run: buck fetch ReactAndroid/src/test/...
- run: buck fetch ReactAndroid/src/androidTest/...
- run: ./gradlew :ReactAndroid:downloadBoost :ReactAndroid:downloadDoubleConversion :ReactAndroid:downloadFolly :ReactAndroid:downloadGlog :ReactAndroid:downloadJSCHeaders
# Build and compile
- run: *build-android-app
- run: *compile-native-libs
# Build JavaScript Bundle for instrumentation tests
- run: *install-node
- run: *build-js-bundle
# Wait for AVD to finish booting before running tests
- run: *wait-for-avd
# Test Suite
- run: *run-android-unit-tests
- run: *run-android-instrumentation-tests
# post (always runs)
- run: *collect-android-test-results
- store_test_results:
path: ~/react-native/reports/junit
- store_artifacts:
path: ~/react-native/reports/junit
# Analyze pull request and raise any lint/flow issues.
# Issues will be posted to the PR itself via GitHub bots.
# This workflow should only fail if the bots fail to run.
analyze_pr:
<<: *js_defaults
steps:
- attach_workspace:
at: ~/react-native
- restore-cache: *restore-cache-analysis
- run: *yarn
- run:
name: Install Additional Dependencies
command: |
if [ -n "$CIRCLE_PR_NUMBER" ]; then
yarn add github@0.2.4
cd bots
yarn install --non-interactive --cache-folder ~/.cache/yarn
else
echo "Skipping dependency installation."
fi
- save-cache: *save-cache-analysis
- run:
name: Analyze Pull Request
command: |
if [ -n "$CIRCLE_PR_NUMBER" ]; then
cd bots && DANGER_GITHUB_API_TOKEN="e622517d9f1136ea8900""07c6373666312cdfaa69" yarn danger
else
echo "Skipping pull request analysis."
fi
when: always
- run:
name: Analyze Code
command: |
if [ -n "$CIRCLE_PR_NUMBER" ]; then
cat <(echo eslint; yarn --silent lint --format=json; echo flow; yarn --silent flow check --json) | GITHUB_TOKEN="af6ef0d15709bc91d""06a6217a5a826a226fb57b7" CI_USER=$CIRCLE_PROJECT_USERNAME CI_REPO=$CIRCLE_PROJECT_REPONAME PULL_REQUEST_NUMBER=$CIRCLE_PR_NUMBER node bots/code-analysis-bot.js
else
echo "Skipping code analysis."
fi
when: always
# Workflows enables us to run multiple jobs in parallel
workflows:
version: 2
test:
jobs:
# Checkout repo and run Yarn
- checkout_code:
filters: *filter-ignore-gh-pages
# Run lint and flow checks
- js_checks:
filters: *filter-ignore-gh-pages
requires:
- checkout_code
# Test JavaScript
- test_javascript:
filters: *filter-ignore-gh-pages
requires:
- checkout_code
# Test JavaScript using Node 6, the minimum supported version
- test_javascript_node6_compatibility:
filters: *filter-ignore-gh-pages
# Test Android
- test_android:
filters: *filter-ignore-gh-pages
requires:
- checkout_code
# Test iOS & tvOS
- test_objc_ios:
filters: *filter-ignore-gh-pages
requires:
- checkout_code
- test_objc_tvos:
filters: *filter-ignore-gh-pages
requires:
- checkout_code
# End-to-end tests
- test_objc_ios_e2e:
filters: *filter-ignore-gh-pages
requires:
- checkout_code
# Only runs on PRs
analyze:
jobs:
# Checkout repo and run Yarn
- checkout_code:
filters: *filter-ignore-master-stable
# Run code checks
- analyze_pr:
filters: *filter-ignore-master-stable
requires:
- checkout_code
# Only runs on NN-stable branches
deploy:
jobs:
# Checkout repo and run Yarn
- checkout_code:
filters: *filter-only-stable
# If we are on a stable branch, wait for approval to deploy to npm
- approve_publish_npm_package:
filters: *filter-only-stable
type: approval
- publish_npm_package:
requires:
- checkout_code
- approve_publish_npm_package
+5
View File
@@ -4,7 +4,12 @@
**/main.js
Libraries/vendor/**/*
Libraries/Renderer/*
website/node_modules
pr-inactivity-bookmarklet.js
question-bookmarklet.js
flow/
website/core/metadata.js
website/core/metadata-blog.js
website/src/react-native/docs/
website/src/react-native/blog/
danger/
+19 -32
View File
@@ -3,17 +3,19 @@
"parser": "babel-eslint",
"ecmaFeatures": {
"jsx": true
},
"env": {
"es6": true,
"jest": true,
"jasmine": true,
},
"plugins": [
"eslint-comments",
"flowtype",
"prettier",
"react",
"jest"
"react"
],
// Map from global var to bool specifying if it can be redefined
@@ -55,6 +57,11 @@
},
"rules": {
// Flow Plugin
// The following rules are made available via `eslint-plugin-flowtype`
"flowtype/define-flow-type": 1,
"flowtype/use-flow-type": 1,
// General
// This must be disallowed in this repo because the minimum supported
@@ -74,7 +81,7 @@
"no-constant-condition": 0, // disallow use of constant expressions in conditions
"no-control-regex": 1, // disallow control characters in regular expressions
"no-debugger": 1, // disallow use of debugger
"no-dupe-keys": 2, // disallow duplicate keys when creating object literals
"no-dupe-keys": 1, // disallow duplicate keys when creating object literals
"no-empty": 0, // disallow empty statements
"no-ex-assign": 1, // disallow assigning to the exception in a catch block
"no-extra-boolean-cast": 1, // disallow double-negation boolean casts in a boolean context
@@ -88,7 +95,7 @@
"no-regex-spaces": 1, // disallow multiple spaces in a regular expression literal
"no-reserved-keys": 0, // disallow reserved words being used as object literal keys (off by default)
"no-sparse-arrays": 1, // disallow sparse arrays
"no-unreachable": 2, // disallow unreachable statements after a return, throw, continue, or break statement
"no-unreachable": 1, // disallow unreachable statements after a return, throw, continue, or break statement
"use-isnan": 1, // disallow comparisons with the value NaN
"valid-jsdoc": 0, // Ensure JSDoc comments are valid (off by default)
"valid-typeof": 1, // Ensure that the results of typeof are compared against a valid string
@@ -109,7 +116,7 @@
"no-div-regex": 1, // disallow division operators explicitly at beginning of regular expression (off by default)
"no-else-return": 0, // disallow else after a return in an if (off by default)
"no-eq-null": 0, // disallow comparisons to null without a type-checking operator (off by default)
"no-eval": 2, // disallow use of eval()
"no-eval": 1, // disallow use of eval()
"no-extend-native": 1, // disallow adding to native types
"no-extra-bind": 1, // disallow unnecessary function binding
"no-fallthrough": 1, // disallow fallthrough of case statements
@@ -122,7 +129,7 @@
"no-multi-str": 0, // disallow use of multiline strings
"no-native-reassign": 0, // disallow reassignments of native objects
"no-new": 1, // disallow use of new operator when not part of the assignment or comparison
"no-new-func": 2, // disallow use of new operator for Function object
"no-new-func": 1, // disallow use of new operator for Function object
"no-new-wrappers": 1, // disallows creating new instances of String,Number, and Boolean
"no-octal": 1, // disallow use of octal literals
"no-octal-escape": 1, // disallow use of octal escape sequences in string literals, such as var foo = "Copyright \251";
@@ -167,18 +174,6 @@
"no-restricted-modules": 1, // restrict usage of specified node modules (off by default)
"no-sync": 0, // disallow use of synchronous methods (off by default)
// ESLint Comments Plugin
// The following rules are made available via `eslint-plugin-eslint-comments`
'eslint-comments/no-aggregating-enable': 1, // disallows eslint-enable comments for multiple eslint-disable comments
'eslint-comments/no-unlimited-disable': 1, // disallows eslint-disable comments without rule names
'eslint-comments/no-unused-disable': 1, // disallow disables that don't cover any errors
'eslint-comments/no-unused-enable': 1, // // disallow enables that don't enable anything or enable rules that weren't disabled
// Flow Plugin
// The following rules are made available via `eslint-plugin-flowtype`
"flowtype/define-flow-type": 1,
"flowtype/use-flow-type": 1,
// Prettier Plugin
// https://github.com/prettier/eslint-plugin-prettier
"prettier/prettier": [2, "fb", "@format"],
@@ -188,12 +183,12 @@
"key-spacing": 0,
"keyword-spacing": 1, // enforce spacing before and after keywords
"jsx-quotes": [1, "prefer-double"], // enforces the usage of double quotes for all JSX attribute values which doesnt contain a double quote
"jsx-quotes": [1, "prefer-double"],
"comma-spacing": 0,
"no-multi-spaces": 0,
"brace-style": 0, // enforce one true brace style (off by default)
"camelcase": 0, // require camel case names
"consistent-this": 1, // enforces consistent naming when capturing the current execution context (off by default)
"consistent-this": [1, "self"], // enforces consistent naming when capturing the current execution context (off by default)
"eol-last": 1, // enforce newline at the end of file, with no multiple empty lines
"func-names": 0, // require function expressions to have a name (off by default)
"func-style": 0, // enforces use of function declarations or expressions (off by default)
@@ -201,7 +196,6 @@
"new-parens": 1, // disallow the omission of parentheses when invoking a constructor with no arguments
"no-nested-ternary": 0, // disallow nested ternary expressions (off by default)
"no-array-constructor": 1, // disallow use of the Array constructor
'no-empty-character-class': 1, // disallow the use of empty character classes in regular expressions
"no-lonely-if": 0, // disallow if as the only statement in an else block (off by default)
"no-new-object": 1, // disallow use of the Object constructor
"no-spaced-func": 1, // disallow space between function identifier and application
@@ -238,7 +232,7 @@
"react/jsx-boolean-value": 0,
"react/jsx-no-comment-textnodes": 1,
"react/jsx-no-duplicate-props": 2,
"react/jsx-no-undef": 2,
"react/jsx-no-undef": 1,
"react/jsx-sort-props": 0,
"react/jsx-uses-react": 1,
"react/jsx-uses-vars": 1,
@@ -250,13 +244,6 @@
"react/prop-types": 0,
"react/react-in-jsx-scope": 1,
"react/self-closing-comp": 1,
"react/wrap-multilines": 0,
// Jest Plugin
// The following rules are made available via `eslint-plugin-jest`.
"jest/no-disabled-tests": 1,
"jest/no-focused-tests": 1,
"jest/no-identical-title": 1,
"jest/valid-expect": 1,
"react/wrap-multilines": 0
}
}
+10 -8
View File
@@ -5,8 +5,11 @@
; Ignore templates for 'react-native init'
.*/local-cli/templates/.*
; Ignore the website subdir
<PROJECT_ROOT>/website/.*
; Ignore the Dangerfile
<PROJECT_ROOT>/bots/dangerfile.js
<PROJECT_ROOT>/danger/dangerfile.js
; Ignore "BUCK" generated dirs
<PROJECT_ROOT>/\.buckd/
@@ -22,15 +25,11 @@
; Ignore polyfills
.*/Libraries/polyfills/.*
; Ignore metro
.*/node_modules/metro/.*
[include]
[libs]
Libraries/react-native/react-native-interface.js
flow/
flow-github/
[options]
emoji=true
@@ -45,11 +44,14 @@ suppress_type=$FlowIssue
suppress_type=$FlowFixMe
suppress_type=$FlowFixMeProps
suppress_type=$FlowFixMeState
suppress_type=$FixMe
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*[react_native_oss|react_native_fb][a-z,_]*\\)?)\\)
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*[react_native_oss|react_native_fb][a-z,_]*\\)?)\\)?:? #[0-9]+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(5[0-3]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(5[0-3]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)?:? #[0-9]+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
unsafe.enable_getters_and_setters=true
[version]
^0.65.0
^0.53.0
+5 -1
View File
@@ -1,3 +1,5 @@
docs/* @hramos
blog/* @hramos
Libraries/Animated/* @janicduplessis
Libraries/NativeAnimation/* @janicduplessis
Libraries/Image/* @shergin
@@ -7,8 +9,10 @@ React/Views/* @shergin
React/Modules/* @shergin
React/CxxBridge/* @mhorowitz
ReactAndroid/src/main/java/com/facebook/react/animated/* @janicduplessis
**/*.md @hramos
website/* @hramos
website/showcase.json @hramos
package.json @hramos
website/package.json @hramos
local-cli/core/* @grabbou @kureev
local-cli/link/* @grabbou @kureev
local-cli/unlink/* @grabbou @kureev
+18 -22
View File
@@ -16,7 +16,7 @@
If you answered "No":
We use GitHub Issues exclusively for tracking bugs in React Native. If you're looking for help,
the Community page at http://facebook.github.io/react-native/help.html list various resources
the Community page at http://facebook.github.io/react-native/support.html list various resources
that should help you get started.
Now scroll below!
@@ -29,29 +29,25 @@
### Environment
<!--
In your terminal run `react-native info` and paste its contents here. Next, specify your target platform, like this:
Environment:
OS: macOS Sierra 10.12.6
Node: 8.4.0
Yarn: 0.27.5
npm: 5.4.0
Watchman: 4.7.0
Xcode: Xcode 8.3.3 Build version 8E3004b
Android Studio: 2.3 AI-162.4069837
Packages: (wanted => installed)
react-native: 0.48.1 => 0.48.1
react: 16.0.0-alpha.12 => 16.0.0-alpha.12
Target Platform: iOS (10.3)
***Make sure you are on v0.48.0 or greater of react-native, otherwise you may get this error:
Unrecognized command 'info'
Run react-native --help to see list of all available commands
Please fill in all the relevant fields by running these commands in terminal.
-->
1. `react-native -v`:
2. `node -v`:
3. `npm -v`:
4. `yarn --version`<!-- (if you use Yarn) -->:
Then, specify:
<!-- (What platform are you building for? Choose any from iOS, Android, AppleTV.) -->
- Target Platform:
<!-- Which operating system are you using? Specify macOS, Windows, or Linux, along with specific release versions -->
- Development Operating System:
<!-- Include any additional relevant information. Are you using Xcode or Android Studio to build native code? Is the issue specific to a particular iOS or Android SDK? -->
- Build tools:
### Steps to Reproduce
<!--
-34
View File
@@ -9,42 +9,8 @@ Happy contributing!
-->
## Motivation
(Write your motivation here.)
## Test Plan
(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work. Bonus points for screenshots and videos!)
## Related PRs
(If this PR adds or changes functionality, please take some time to update the docs at https://github.com/facebook/react-native-website, and link to your PR here.)
## Release Notes
<!--
Help reviewers and the release process by writing your own release notes
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [-{Component}-]
[ INTERNAL ] [ ENHANCEMENT ] [ {File} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
[CATEGORY] [TYPE] [LOCATION] - MESSAGE
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
-9
View File
@@ -1,9 +0,0 @@
# Configuration for probot-no-response - https://github.com/probot/no-response
# Number of days of inactivity before an Issue is closed for lack of response
daysUntilClose: 14
# Label requiring a response
responseRequiredLabel: Needs more information
# Comment to post when closing an Issue for lack of response. Set to `false` to disable
closeComment: >
Closing this issue as more information is needed to debug this and we have not heard back from the author.
-20
View File
@@ -1,20 +0,0 @@
# Number of days of inactivity before an issue becomes stale
daysUntilStale: 60
# Number of days of inactivity before a stale issue is closed
daysUntilClose: 7
# Issues with these labels will never be considered stale
exemptLabels:
- Good first issue
- For Discussion
- Core Team
# Label to use when marking an issue as stale
staleLabel: Stale
# Comment to post when marking an issue as stale. Set to `false` to disable
markComment: >
This issue has been automatically marked as stale because it has not had
recent activity. It will be closed if no further activity occurs.
Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people.
If you think this issue should definitely remain open, please let us know why.
Thank you for your contributions.
# Comment to post when closing a stale issue. Set to `false` to disable
closeComment: false
+1 -8
View File
@@ -36,9 +36,6 @@ buck-out
/ReactAndroid/src/main/jni/prebuilt/lib/x86/
/ReactAndroid/src/main/gen
# Watchman
.watchmanconfig
# Android
.idea
.gradle
@@ -50,11 +47,7 @@ local.properties
node_modules
*.log
.nvm
/bots/node_modules/
# TODO: Check in yarn.lock in open source. Right now we need to keep it out
# from the GitHub repo as importing it might conflict with internal workspaces
*/**/yarn.lock
/danger/node_modules/
# OS X
.DS_Store
+49
View File
@@ -0,0 +1,49 @@
language: objective-c
osx_image: xcode8.3
install:
- nvm install 7
- rm -Rf "${TMPDIR}/jest_preprocess_cache"
- brew install yarn --ignore-dependencies
- brew install watchman
- yarn install
script:
- if [[ "$TEST_TYPE" = objc-ios ]]; then travis_retry travis_wait 30 ./scripts/objc-test-ios.sh test; fi
- if [[ "$TEST_TYPE" = objc-tvos ]]; then travis_retry travis_wait 30 ./scripts/objc-test-tvos.sh; fi
- if [[ "$TEST_TYPE" = e2e-objc ]]; then node ./scripts/run-ci-e2e-tests.js --ios --js --retries 3; fi
- if [[ ( "$TEST_TYPE" = podspecs ) && ( "$TRAVIS_PULL_REQUEST" = "false" ) ]]; then gem install cocoapods && travis_wait 30 ./scripts/process-podspecs.sh; fi
cache:
- cocoapods
- yarn
matrix:
- fast_finish: true # Fail the whole build as soon as one test type fails. Should help with Travis capacity issues (very long queues).
# The order of these tests says which are more likely to run first and fail the whole build fast.
env:
- TEST_TYPE=objc-ios
- TEST_TYPE=podspecs
- TEST_TYPE=e2e-objc
- TEST_TYPE=objc-tvos
branches:
only:
- master
- /^.*-stable$/
notifications:
email:
recipients:
- douglowder@mac.com # Doug Lowder built and maintains Apple TV specific code and wants to be notified about tvOS failures.
- eloy@artsy.net # Eloy Durán maintains the podspecs test and wants to be notified about failures.
on_failure: change
on_success: change
slack:
secure: oQL2C966v7/DtxNqfM7WowjY0R5mgLHR2qHkoucwK5iVrmaptnHr8fq01xlj7VT0kDwNLqT3n4+gtCviGw89lq71m3W76c8Pms/10jpjw+LwAfQPVizNw/Bx8MFNNmjDauK/auFxaybiLZupi7zd4xFGOZvScmFdfD4CAAp2OOA=
on_pull_requests: false
on_failure: change
on_success: change
webhooks: https://code.facebook.com/travis/webhook/
-43
View File
@@ -1,43 +0,0 @@
# [Open Source Code of Conduct](https://code.facebook.com/codeofconduct)
This code of conduct outlines our expectations for participants within the **Facebook Open Source** community, as well as steps to reporting unacceptable behavior. We are committed to providing a welcoming and inspiring community for all and expect our code of conduct to be honored. Anyone who violates this code of conduct may be banned from the community.
Our open source community strives to:
* **Be friendly and patient.**
* **Be welcoming:** We strive to be a community that welcomes and supports people of all backgrounds and identities. This includes, but is not limited to members of any race, ethnicity, culture, national origin, colour, immigration status, social and economic class, educational level, sex, sexual orientation, gender identity and expression, age, size, family status, political belief, religion, and mental and physical ability.
* **Be considerate:** Your work will be used by other people, and you in turn will depend on the work of others. Any decision you take will affect users and colleagues, and you should take those consequences into account when making decisions. Remember that were a world-wide community, so you might not be communicating in someone elses primary language.
* **Be respectful:** Not all of us will agree all the time, but disagreement is no excuse for poor behavior and poor manners. We might all experience some frustration now and then, but we cannot allow that frustration to turn into a personal attack. Its important to remember that a community where people feel uncomfortable or threatened is not a productive one.
* **Be careful in the words that you choose:** we are a community of professionals, and we conduct ourselves professionally. Be kind to others. Do not insult or put down other participants. Harassment and other exclusionary behavior arent acceptable. This includes, but is not limited to:
* Violent threats or language directed against another person.
* Discriminatory jokes and language.
* Posting sexually explicit or violent material.
* Posting (or threatening to post) other peoples personally identifying information (“doxing”).
* Personal insults, especially those using racist or sexist terms.
* Unwelcome sexual attention.
* Advocating for, or encouraging, any of the above behavior.
* Repeated harassment of others. In general, if someone asks you to stop, then stop.
* **When we disagree, try to understand why:** Disagreements, both social and technical, happen all the time. It is important that we resolve disagreements and differing views constructively.
* **Remember that were different.** The strength of our community comes from its diversity, people from a wide range of backgrounds. Different people have different perspectives on issues. Being unable to understand why someone holds a viewpoint doesnt mean that theyre wrong. Dont forget that it is human to err and blaming each other doesnt get us anywhere. Instead, focus on helping to resolve issues and learning from mistakes.
This code is not exhaustive or complete. It serves to distill our common understanding of a collaborative, shared environment, and goals. We expect it to be followed in spirit as much as in the letter.
## Diversity Statement
We encourage everyone to participate and are committed to building a community for all. Although we may not be able to satisfy everyone, we all agree that everyone is equal. Whenever a participant has made a mistake, we expect them to take responsibility for it. If someone has been harmed or offended, it is our responsibility to listen carefully and respectfully, and do our best to right the wrong.
Although this list cannot be exhaustive, we explicitly honor diversity in age, gender, gender identity or expression, culture, ethnicity, language, national origin, political beliefs, profession, race, religion, sexual orientation, socioeconomic status, and technical ability. We will not tolerate discrimination based on any of the protected characteristics above, including participants with disabilities.
## Reporting Issues
If you experience or witness unacceptable behavior—or have any other concerns—please report it by contacting us via opensource@fb.com. All reports will be handled with discretion. In your report please include:
* Your contact information.
* Names (real, nicknames, or pseudonyms) of any individuals involved. If there are additional witnesses, please include them as well. Your account of what occurred, and if you believe the incident is ongoing. If there is a publicly available record (e.g. a mailing list archive or a public IRC logger), please include a link.
* Any additional information that may be helpful.
After filing a report, a representative will contact you personally. If the person who is harassing you is part of the response team, they will recuse themselves from handling your incident. A representative will then review the incident, follow up with any additional questions, and make a decision as to how to respond. We will respect confidentiality requests for the purpose of protecting victims of abuse.
Anyone asked to stop unacceptable behavior is expected to comply immediately. If an individual engages in unacceptable behavior, the representative may take any action they deem appropriate, up to and including a permanent ban from our community without warning.
_This Code Of Conduct follows the [template](http://todogroup.org/opencodeofconduct/) established by the [TODO Group](http://todogroup.org/)._
+22 -19
View File
@@ -11,10 +11,10 @@ Facebook has adopted a Code of Conduct that we expect project participants to ad
There are many ways to contribute to React Native, and many of them do not involve writing any code. Here's a few ideas to get started:
* Simply start using React Native. Go through the [Getting Started](https://facebook.github.io/react-native/docs/getting-started.html) guide. Does everything work as expected? If not, we're always looking for improvements. Let us know by [opening an issue](https://facebook.github.io/react-native/docs/contributing.html#reporting-new-issues).
* Look through the [open issues](https://github.com/facebook/react-native/issues). Provide workarounds, ask for clarification, or suggest labels. Help [triage issues](https://facebook.github.io/react-native/docs/contributing.html#triaging-issues-and-pull-requests).
* If you find an issue you would like to fix, [open a pull request](https://facebook.github.io/react-native/docs/contributing.html#your-first-pull-request). Issues tagged as [_Good first issue_](https://github.com/facebook/react-native/labels/Good%20first%20issue) are a good place to get started.
* Read through the [React Native docs](https://facebook.github.io/react-native/docs/getting-started.html). If you find anything that is confusing or can be improved, you can make edits by clicking the "EDIT" button in the top-right corner of most docs.
* Simply start using React Native. Go through the [Getting Started](http://facebook.github.io/react-native/docs/getting-started.html) guide. Does everything work as expected? If not, we're always looking for improvements. Let us know by [opening an issue](http://facebook.github.io/react-native/docs/contributing.html#reporting-new-issues).
* Look through the [open issues](https://github.com/facebook/react-native/issues). Provide workarounds, ask for clarification, or suggest labels. Help [triage issues](http://facebook.github.io/react-native/docs/contributing.html#triaging-issues-and-pull-requests).
* If you find an issue you would like to fix, [open a pull request](http://facebook.github.io/react-native/docs/contributing.html#your-first-pull-request). Issues tagged as [_Good First Task_](https://github.com/facebook/react-native/labels/Good%20First%20Task) are a good place to get started.
* Read through the [React Native docs](http://facebook.github.io/react-native/docs). If you find anything that is confusing or can be improved, you can make edits by clicking "Improve this page" at the bottom of most docs.
* Browse [Stack Overflow](https://stackoverflow.com/questions/tagged/react-native) and answer questions. This will help you get familiarized with common pitfalls or misunderstandings, which can be useful when contributing updates to the documentation.
* Take a look at the [features requested](https://react-native.canny.io/feature-requests) by others in the community and consider opening a pull request if you see something you want to work on.
@@ -43,13 +43,13 @@ When a change made on GitHub is approved, it will first be imported into Faceboo
We will do our best to keep `master` in good shape, with tests passing at all times. But in order to move fast, we will make API changes that your application might not be compatible with. We will do our best to [communicate these changes](https://github.com/facebook/react-native/releases) and version appropriately so you can lock into a specific version if need be.
To see what changes are coming and provide better feedback to React Native contributors, use the [latest release candidate](https://facebook.github.io/react-native/versions.html) when possible. By the time a release candidate is released, the changes it contains will have been shipped in production Facebook apps for over two weeks.
To see what changes are coming and provide better feedback to React Native contributors, use the [latest release candidate](http://facebook.github.io/react-native/versions.html) when possible. By the time a release candidate is released, the changes it contains will have been shipped in production Facebook apps for over two weeks.
## Bugs
We use [GitHub Issues](https://github.com/facebook/react-native/issues) for our public bugs. If you would like to report a problem, take a look around and see if someone already opened an issue about it. If you a are certain this is a new, unreported bug, you can submit a [bug report](https://facebook.github.io/react-native/docs/contributing.html#reporting-new-issues).
We use [GitHub Issues](https://github.com/facebook/react-native/issues) for our public bugs. If you would like to report a problem, take a look around and see if someone already opened an issue about it. If you a are certain this is a new, unreported bug, you can submit a [bug report](http://facebook.github.io/react-native/docs/contributing.html#reporting-new-issues).
If you have questions about using React Native, the [Community page](https://facebook.github.io/react-native/help.html) list various resources that should help you get started.
If you have questions about using React Native, the [Community page](http://facebook.github.io/react-native/support.html) list various resources that should help you get started.
We also have a [place where you can request features or enhancements](https://react-native.canny.io/feature-requests). If you see anything you'd like to be implemented, vote it up and explain your use case.
@@ -60,9 +60,9 @@ When [opening a new issue](https://github.com/facebook/react-native/issues/new),
* **One issue, one bug:** Please report a single bug per issue.
* **Provide a Snack:** The best way to get attention on your issue is to provide a reduced test case. You can use [Snack](https://snack.expo.io/) to demonstrate the issue.
* **Provide reproduction steps:** List all the steps necessary to reproduce the issue. Provide a Snack or upload a sample project to GitHub. The person reading your bug report should be able to follow these steps to reproduce your issue with minimal effort.
* **Try out the latest version:** Verify that the issue can be reproduced locally by updating your project to use [React Native from `master`](https://facebook.github.io/react-native/versions.html). The bug may have already been fixed!
* **Try out the latest version:** Verify that the issue can be reproduced locally by updating your project to use [React Native from `master`](http://facebook.github.io/react-native/versions.html). The bug may have already been fixed!
We're not able to provide support through GitHub Issues. If you're looking for help with your code, consider asking on [Stack Overflow](https://stackoverflow.com/questions/tagged/react-native) or reaching out to the community through [other channels](https://facebook.github.io/react-native/support.html).
We're not able to provide support through GitHub Issues. If you're looking for help with your code, consider asking on [Stack Overflow](http://stackoverflow.com/questions/tagged/react-native) or reaching out to the community through [other channels](https://facebook.github.io/react-native/support.html).
### Security bugs
@@ -78,7 +78,7 @@ Working on your first Pull Request? You can learn how from this free video serie
[**How to Contribute to an Open Source Project on GitHub**](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)
We have a list of [beginner friendly issues](https://github.com/facebook/react-native/labels/Good%20first%20issue) to help you get your feet wet in the React Native codebase and familiar with our contribution process. This is a great place to get started.
We have a list of [beginner friendly issues](https://github.com/facebook/react-native/labels/Good%20First%20Task) to help you get your feet wet in the React Native codebase and familiar with our contribution process. This is a great place to get started.
### Proposing a change
@@ -92,32 +92,35 @@ If you're only fixing a bug, it's fine to submit a pull request right away but w
Small pull requests are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.
Please make sure the following is done when submitting a pull request:
**Before submitting a pull request**, please make sure the following is done:
1. Fork [the repository](https://github.com/facebook/react-native) and create your branch from `master`.
2. Add the copyright notice to the top of any new files you've added.
3. Describe your [**test plan**](https://facebook.github.io/react-native/docs/contributing.html#test-plan) in your pull request description. Make sure to [test your changes](https://facebook.github.io/react-native/docs/testing.html)!
4. Make sure your code lints (`npm run lint`).
5. If you haven't already, [sign the CLA](https://code.facebook.com/cla).
3. Describe your [**test plan**](https://facebook.github.io/react-native/docs/contributing.html#test-plan) in your commit.
4. Ensure [**tests pass**](https://facebook.github.io/react-native/docs/contributing.html#contrinuous-integration-tests) on both Travis and Circle CI.
5. Make sure your code lints (`npm run lint`).
6. If you haven't already, [sign the CLA](https://code.facebook.com/cla).
All pull requests should be opened against the `master` branch. After opening your pull request, ensure [**all tests pass**](https://facebook.github.io/react-native/docs/contributing.html#contrinuous-integration-tests) on Circle CI. If a test fails and you believe it is unrelated to your change, leave a comment on the pull request explaining why.
All pull requests should be opened against the `master` branch.
> **Note:** It is not necessary to keep clicking `Merge master to your branch` on the PR page. You would want to merge master if there are conflicts or tests are failing. The Facebook-GitHub-Bot ultimately squashes all commits to a single one before merging your PR.
#### Test plan
A good test plan has the exact commands you ran and their output, provides screenshots or videos if the pull request changes UI.
A good test plan has the exact commands you ran and their output, provides screenshots or videos if the pull request changes UI or updates the website.
* If you've added code that should be tested, add tests!
* If you've changed APIs, update the documentation.
* If you've updated the docs, verify the website locally and submit screenshots if applicable (see [website/README.md](https://github.com/facebook/react-native/blob/master/website/README.md))
See [What is a Test Plan?](https://medium.com/@martinkonicek/what-is-a-test-plan-8bfc840ec171#.y9lcuqqi9) to learn more.
#### Continuous integration tests
Make sure all **tests pass** on [Circle CI][circle]. PRs that break tests are unlikely to be merged. Learn more about [testing your changes here](https://facebook.github.io/react-native/docs/testing.html).
Make sure all **tests pass** on both [Travis][travis] and [Circle CI][circle]. PRs that break tests are unlikely to be merged. Learn more about [testing your changes here](https://facebook.github.io/react-native/docs/testing.html).
[circle]: https://circleci.com/gh/facebook/react-native
[travis]: https://travis-ci.org/facebook/react-native
[circle]: http://circleci.com/gh/facebook/react-native
#### Breaking changes
@@ -177,7 +180,7 @@ However, there are still some styles that the linter cannot pick up.
#### JavaScript
* Use semicolons;
* ES6 standards
* `'use strict';`
* Prefer `'` over `"`
* Do not use the optional parameters of `setTimeout` and `setInterval`
* 80 character line length
+6 -2
View File
@@ -1,7 +1,7 @@
FROM hramos/android-base:latest
FROM containership/android-base:latest
# set default environment variables
ENV GRADLE_OPTS="-Dorg.gradle.daemon=false -Dorg.gradle.jvmargs=\"-Xmx512m -XX:+HeapDumpOnOutOfMemoryError\""
ENV GRADLE_OPTS="-Dorg.gradle.jvmargs=\"-Xmx512m -XX:+HeapDumpOnOutOfMemoryError\""
ENV JAVA_TOOL_OPTIONS="-Dfile.encoding=UTF8"
# add ReactAndroid directory
@@ -46,5 +46,9 @@ RUN cd $(npm root -g)/npm && npm install fs-extra && sed -i -e s/graceful-fs/fs-
# build node dependencies
RUN npm install
RUN npm install github@0.2.4
WORKDIR /app/website
RUN npm install
WORKDIR /app
+36 -12
View File
@@ -1,8 +1,8 @@
FROM library/ubuntu:16.04
# set default build arguments
ARG ANDROID_TOOLS_VERSION=25.2.5
ARG BUCK_VERSION=v2017.11.16.01
ARG ANDROID_VERSION=25.2.3
ARG BUCK_VERSION=f3452a6a7ab15a60e94c962e686293acbe677473
ARG NDK_VERSION=10e
ARG NODE_VERSION=6.2.0
ARG WATCHMAN_VERSION=4.7.0
@@ -12,7 +12,7 @@ ENV ADB_INSTALL_TIMEOUT=10
ENV PATH=${PATH}:/opt/buck/bin/
ENV ANDROID_HOME=/opt/android
ENV ANDROID_SDK_HOME=${ANDROID_HOME}
ENV PATH=${PATH}:${ANDROID_HOME}/tools:${ANDROID_HOME}/tools/bin:${ANDROID_HOME}/platform-tools
ENV PATH=${PATH}:${ANDROID_HOME}/tools:${ANDROID_HOME}/platform-tools
ENV ANDROID_NDK=/opt/ndk/android-ndk-r$NDK_VERSION
ENV PATH=${PATH}:${ANDROID_NDK}
@@ -28,8 +28,9 @@ RUN npm install n -g
RUN n $NODE_VERSION
# download buck
RUN git clone https://github.com/facebook/buck.git /opt/buck --branch $BUCK_VERSION --depth=1
RUN git clone https://github.com/facebook/buck.git /opt/buck
WORKDIR /opt/buck
RUN git checkout $BUCK_VERSION
# build buck
RUN ant
@@ -45,11 +46,10 @@ RUN ./configure
RUN make
RUN make install
# Full reference at https://dl.google.com/android/repository/repository2-1.xml
# download and unpack android
RUN mkdir /opt/android
WORKDIR /opt/android
RUN curl --silent https://dl.google.com/android/repository/tools_r$ANDROID_TOOLS_VERSION-linux.zip > android.zip
RUN curl --silent https://dl.google.com/android/repository/tools_r$ANDROID_VERSION-linux.zip > android.zip
RUN unzip android.zip
RUN rm android.zip
@@ -63,15 +63,39 @@ RUN unzip ndk.zip
RUN rm ndk.zip
# Add android SDK tools
RUN echo "y" | sdkmanager "system-images;android-19;google_apis;armeabi-v7a"
RUN echo "y" | sdkmanager "platforms;android-23"
RUN echo "y" | sdkmanager "platforms;android-19"
RUN echo "y" | sdkmanager "build-tools;23.0.1"
RUN echo "y" | sdkmanager "add-ons;addon-google_apis-google-23"
RUN echo "y" | sdkmanager "extras;android;m2repository"
# Android SDK Platform-tools, revision 25.0.4
RUN echo "y" | android update sdk -u -a -t $(android list sdk -a | grep "Android SDK Platform-tools, revision 25.0.4" | awk '{ print $1 }' | sed 's/.$//')
# Android SDK Build-tools, revision 23.0.1
RUN echo "y" | android update sdk -u -a -t $(android list sdk -a | grep "Android SDK Build-tools, revision 23.0.1" | awk '{ print $1 }' | sed 's/.$//')
# SDK Platform Android 6.0, API 23, revision 3
RUN echo "y" | android update sdk -u -a -t $(android list sdk -a | grep "SDK Platform Android 6.0, API 23" | awk '{ print $1 }' | sed 's/.$//')
# SDK Platform Android 4.4.2, API 19, revision 4
RUN echo "y" | android update sdk -u -a -t $(android list sdk -a | grep "SDK Platform Android 4.4.2, API 19, revision 4" | awk '{ print $1 }' | sed 's/.$//')
# ARM EABI v7a System Image, Android API 19, revision 5
RUN echo "y" | android update sdk -u -a -t $(android list sdk -a | grep "ARM EABI v7a System Image, Android API 19, revision 5" | awk '{ print $1 }' | sed 's/.$//')
# Intel x86 Atom System Image, Android API 19, revision 5
RUN echo "y" | android update sdk -u -a -t $(android list sdk -a | grep "Intel x86 Atom System Image, Android API 19, revision 5" | awk '{ print $1 }' | sed 's/.$//')
# Google APIs, Android API 23, revision 1
RUN echo "y" | android update sdk -u -a -t $(android list sdk -a | grep "Google APIs, Android API 23, revision 1" | awk '{ print $1 }' | sed 's/.$//')
# Android Support Repository, revision 45
RUN echo "y" | android update sdk -u -a -t $(android list sdk -a | grep "Android Support Repository" | awk '{ print $1 }' | sed 's/.$//')
# Link adb executable
RUN ln -s /opt/android/platform-tools/adb /usr/bin/adb
# Install google-chrome
RUN curl -fsSL https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
&& echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google-chrome.list \
&& apt-get update \
&& apt-get install -y google-chrome-stable
# clean up unnecessary directories
RUN rm -rf /opt/android/system-images/android-19/default/x86
@@ -20,6 +20,7 @@
* --package - com.facebook.react.tests
* --retries [num] - how many times to retry possible flaky commands: npm install and running tests, default 1
*/
/*eslint-disable no-undef */
const argv = require('yargs').argv;
const async = require('async');
@@ -44,7 +45,7 @@ const test_opts = {
OFFSET: argv.offset,
COUNT: argv.count
};
}
let max_test_class_length = Number.NEGATIVE_INFINITY;
@@ -84,14 +85,14 @@ if (test_opts.COUNT != null && test_opts.OFFSET != null) {
}
return async.mapSeries(testClasses, (clazz, callback) => {
if (clazz.length > max_test_class_length) {
if(clazz.length > max_test_class_length) {
max_test_class_length = clazz.length;
}
return async.retry(test_opts.RETRIES, (retryCb) => {
const test_process = child_process.spawn('./ContainerShip/scripts/run-instrumentation-tests-via-adb-shell.sh', [test_opts.PACKAGE, clazz], {
stdio: 'inherit'
});
})
const timeout = setTimeout(() => {
test_process.kill();
@@ -105,7 +106,7 @@ return async.mapSeries(testClasses, (clazz, callback) => {
test_process.on('exit', (code) => {
clearTimeout(timeout);
if (code !== 0) {
if(code !== 0) {
return retryCb(new Error(`Process exited with code: ${code}`));
}
@@ -137,16 +138,16 @@ function print_test_suite_results(results) {
function pad_output(num_chars) {
let i = 0;
while (i < num_chars) {
while(i < num_chars) {
process.stdout.write(' ');
i++;
}
}
results.forEach((test) => {
if (test.status === 'success') {
if(test.status === 'success') {
color = colors.GREEN;
passing_suites++;
} else if (test.status === 'failure') {
} else if(test.status === 'failure') {
color = colors.RED;
failing_suites++;
}
@@ -29,7 +29,7 @@ def update():
# prevent CircleCI from killing the process for inactivity
while not done:
time.sleep(5)
print "Running in background. Waiting for 'adb' command response..."
print "Running in background. Waiting for 'adb' command reponse..."
t = threading.Thread(target=update)
t.dameon = True
+2 -6
View File
@@ -155,7 +155,7 @@ function testOptimizedMultiGet() {
let keys = batch.map(([key, value]) => key);
AsyncStorage.multiSet(batch, (err1) => {
// yes, twice on purpose
[1, 2].forEach((i) => {
;[1, 2].forEach((i) => {
expectAsyncNoError(`${i} testOptimizedMultiGet/multiSet`, err1);
AsyncStorage.multiGet(keys, (err2, result) => {
expectAsyncNoError(`${i} testOptimizedMultiGet/multiGet`, err2);
@@ -189,11 +189,7 @@ class AsyncStorageTest extends React.Component<{}, $FlowFixMeState> {
return (
<View style={{backgroundColor: 'white', padding: 40}}>
<Text>
{
/* $FlowFixMe(>=0.54.0 site=react_native_fb,react_native_oss) This
* comment suppresses an error found when Flow v0.54 was deployed.
* To see the error delete this comment and run Flow. */
this.constructor.displayName + ': '}
{this.constructor.displayName + ': '}
{this.state.done ? 'Done' : 'Testing...'}
{'\n\n' + this.state.messages}
</Text>
+5 -5
View File
@@ -48,7 +48,7 @@ class ImageCachePolicyTest extends React.Component<Props, $FlowFixMeState> {
const results: Array<?boolean> = TESTS.map(x => nextState[x]);
if (!results.includes(undefined)) {
const result: boolean = results.reduce((x,y) => x === y === true, true);
const result: boolean = results.reduce((x,y) => x === y === true, true)
TestModule.markTestPassed(result);
}
@@ -65,7 +65,7 @@ class ImageCachePolicyTest extends React.Component<Props, $FlowFixMeState> {
<Text>Hello</Text>
<Image
source={{
uri: 'https://facebook.github.io/react-native/img/favicon.png?cacheBust=notinCache' + Date.now(),
uri: 'https://facebook.github.io/react/img/logo_small_2x.png?cacheBust=notinCache' + Date.now(),
cache: 'only-if-cached'
}}
onLoad={() => this.testComplete('only-if-cached', false)}
@@ -74,7 +74,7 @@ class ImageCachePolicyTest extends React.Component<Props, $FlowFixMeState> {
/>
<Image
source={{
uri: 'https://facebook.github.io/react-native/img/favicon.png?cacheBust=notinCache' + Date.now(),
uri: 'https://facebook.github.io/react/img/logo_small_2x.png?cacheBust=notinCache' + Date.now(),
cache: 'default'
}}
onLoad={() => this.testComplete('default', true)}
@@ -83,7 +83,7 @@ class ImageCachePolicyTest extends React.Component<Props, $FlowFixMeState> {
/>
<Image
source={{
uri: 'https://facebook.github.io/react-native/img/favicon.png?cacheBust=notinCache' + Date.now(),
uri: 'https://facebook.github.io/react/img/logo_small_2x.png?cacheBust=notinCache' + Date.now(),
cache: 'reload'
}}
onLoad={() => this.testComplete('reload', true)}
@@ -92,7 +92,7 @@ class ImageCachePolicyTest extends React.Component<Props, $FlowFixMeState> {
/>
<Image
source={{
uri: 'https://facebook.github.io/react-native/img/favicon.png?cacheBust=notinCache' + Date.now(),
uri: 'https://facebook.github.io/react/img/logo_small_2x.png?cacheBust=notinCache' + Date.now(),
cache: 'force-cache'
}}
onLoad={() => this.testComplete('force-cache', true)}
@@ -11,9 +11,6 @@
*/
'use strict';
/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
* found when Flow v0.54 was deployed. To see the error delete this comment and
* run Flow. */
var requestAnimationFrame = require('fbjs/lib/requestAnimationFrame');
var React = require('react');
var PropTypes = require('prop-types');
@@ -63,11 +60,7 @@ class IntegrationTestHarnessTest extends React.Component<{
return (
<View style={{backgroundColor: 'white', padding: 40}}>
<Text>
{
/* $FlowFixMe(>=0.54.0 site=react_native_fb,react_native_oss) This
* comment suppresses an error found when Flow v0.54 was deployed.
* To see the error delete this comment and run Flow. */
this.constructor.displayName + ': '}
{this.constructor.displayName + ': '}
{this.state.done ? 'Done' : 'Testing...'}
</Text>
</View>
-3
View File
@@ -40,9 +40,6 @@ var TESTS = [
];
TESTS.forEach(
/* $FlowFixMe(>=0.54.0 site=react_native_fb,react_native_oss) This comment
* suppresses an error found when Flow v0.54 was deployed. To see the error
* delete this comment and run Flow. */
(test) => AppRegistry.registerComponent(test.displayName, () => test)
);
+11 -1
View File
@@ -29,7 +29,17 @@ function debug(...args) {
// console.log.apply(null, arguments);
}
import type {Layout, LayoutEvent} from 'CoreEventTypes';
type Layout = {
x: number;
y: number;
width: number;
height: number;
};
type LayoutEvent = {
nativeEvent: {
layout: Layout;
};
};
type Style = {
margin?: number,
padding?: number,
@@ -30,7 +30,7 @@ var ReactContentSizeUpdateTest = createReactClass({
mixins: [Subscribable.Mixin,
TimerMixin],
UNSAFE_componentWillMount: function() {
componentWillMount: function() {
this.addListenerOn(
RCTNativeAppEventEmitter,
'rootViewDidChangeIntrinsicSize',
-3
View File
@@ -13,9 +13,6 @@
var React = require('react');
var ReactNative = require('react-native');
/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
* found when Flow v0.54 was deployed. To see the error delete this comment and
* run Flow. */
var requestAnimationFrame = require('fbjs/lib/requestAnimationFrame');
var {
@@ -27,7 +27,7 @@ var SizeFlexibilityUpdateTest = createReactClass({
displayName: 'SizeFlexibilityUpdateTest',
mixins: [Subscribable.Mixin],
UNSAFE_componentWillMount: function() {
componentWillMount: function() {
this.addListenerOn(
RCTNativeAppEventEmitter,
'rootViewDidChangeIntrinsicSize',
-3
View File
@@ -14,9 +14,6 @@
var React = require('react');
var createReactClass = require('create-react-class');
var ReactNative = require('react-native');
/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
* found when Flow v0.54 was deployed. To see the error delete this comment and
* run Flow. */
var TimerMixin = require('react-timer-mixin');
var {
@@ -15,9 +15,6 @@
/* eslint-env node */
/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
* found when Flow v0.54 was deployed. To see the error delete this comment and
* run Flow. */
const WebSocket = require('ws');
console.log(`\
+5 -9
View File
@@ -15,15 +15,6 @@
@implementation ARTSurfaceView
- (instancetype)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) {
self.opaque = NO;
}
return self;
}
- (void)insertReactSubview:(UIView *)subview atIndex:(NSInteger)atIndex
{
[super insertReactSubview:subview atIndex:atIndex];
@@ -55,4 +46,9 @@
}
}
- (void)reactSetInheritedBackgroundColor:(UIColor *)inheritedBackgroundColor
{
self.backgroundColor = inheritedBackgroundColor;
}
@end
+6 -6
View File
@@ -51,7 +51,7 @@
CGPathAddArc(path, NULL, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE == 0);
break;
default:
RCTLogError(@"Invalid CGPath type %llu at element %llu of %@", (unsigned long long)type, (unsigned long long)i, arr);
RCTLogError(@"Invalid CGPath type %zd at element %zd of %@", type, i, arr);
CGPathRelease(path);
return NULL;
}
@@ -158,7 +158,7 @@ RCT_ENUM_CONVERTER(CTTextAlignment, (@{
case 3: // pattern
return [[ARTPattern alloc] initWithArray:arr];
default:
RCTLogError(@"Unknown brush type: %llu", (unsigned long long)type);
RCTLogError(@"Unknown brush type: %zd", type);
return nil;
}
}
@@ -167,7 +167,7 @@ RCT_ENUM_CONVERTER(CTTextAlignment, (@{
{
NSArray *arr = [self NSArray:json];
if (arr.count < offset + 2) {
RCTLogError(@"Too few elements in array (expected at least %llu): %@", (unsigned long long)(2 + offset), arr);
RCTLogError(@"Too few elements in array (expected at least %zd): %@", 2 + offset, arr);
return CGPointZero;
}
return (CGPoint){
@@ -180,7 +180,7 @@ RCT_ENUM_CONVERTER(CTTextAlignment, (@{
{
NSArray *arr = [self NSArray:json];
if (arr.count < offset + 4) {
RCTLogError(@"Too few elements in array (expected at least %llu): %@", (unsigned long long)(4 + offset), arr);
RCTLogError(@"Too few elements in array (expected at least %zd): %@", 4 + offset, arr);
return CGRectZero;
}
return (CGRect){
@@ -193,7 +193,7 @@ RCT_ENUM_CONVERTER(CTTextAlignment, (@{
{
NSArray *arr = [self NSArray:json];
if (arr.count < offset + 4) {
RCTLogError(@"Too few elements in array (expected at least %llu): %@", (unsigned long long)(4 + offset), arr);
RCTLogError(@"Too few elements in array (expected at least %zd): %@", 4 + offset, arr);
return NULL;
}
return [self CGColor:[arr subarrayWithRange:(NSRange){offset, 4}]];
@@ -203,7 +203,7 @@ RCT_ENUM_CONVERTER(CTTextAlignment, (@{
{
NSArray *arr = [self NSArray:json];
if (arr.count < offset) {
RCTLogError(@"Too few elements in array (expected at least %llu): %@", (unsigned long long)offset, arr);
RCTLogError(@"Too few elements in array (expected at least %zd): %@", offset, arr);
return NULL;
}
arr = [arr subarrayWithRange:(NSRange){offset, arr.count - offset}];
+16 -20
View File
@@ -101,29 +101,25 @@ var TextAttributes = merge(RenderableAttributes, {
// Native Components
var NativeSurfaceView = createReactNativeComponentClass('ARTSurfaceView',
() => ({
validAttributes: SurfaceViewAttributes,
uiViewClassName: 'ARTSurfaceView',
}));
var NativeSurfaceView = createReactNativeComponentClass({
validAttributes: SurfaceViewAttributes,
uiViewClassName: 'ARTSurfaceView',
});
var NativeGroup = createReactNativeComponentClass('ARTGroup',
() => ({
validAttributes: GroupAttributes,
uiViewClassName: 'ARTGroup',
}));
var NativeGroup = createReactNativeComponentClass({
validAttributes: GroupAttributes,
uiViewClassName: 'ARTGroup',
});
var NativeShape = createReactNativeComponentClass('ARTShape',
() => ({
validAttributes: ShapeAttributes,
uiViewClassName: 'ARTShape',
}));
var NativeShape = createReactNativeComponentClass({
validAttributes: ShapeAttributes,
uiViewClassName: 'ARTShape',
});
var NativeText = createReactNativeComponentClass('ARTText',
() => ({
validAttributes: TextAttributes,
uiViewClassName: 'ARTText',
}));
var NativeText = createReactNativeComponentClass({
validAttributes: TextAttributes,
uiViewClassName: 'ARTText',
});
// Utilities
+23 -53
View File
@@ -8,58 +8,37 @@
*
* @providesModule ActionSheetIOS
* @flow
* @format
*/
'use strict';
const RCTActionSheetManager = require('NativeModules').ActionSheetManager;
var RCTActionSheetManager = require('NativeModules').ActionSheetManager;
const invariant = require('fbjs/lib/invariant');
const processColor = require('processColor');
var invariant = require('fbjs/lib/invariant');
var processColor = require('processColor');
/**
* Display action sheets and share sheets on iOS.
*
* See http://facebook.github.io/react-native/docs/actionsheetios.html
*/
const ActionSheetIOS = {
var ActionSheetIOS = {
/**
* Display an iOS action sheet.
*
* The `options` object must contain one or more of:
* Display an iOS action sheet. The `options` object must contain one or more
* of:
*
* - `options` (array of strings) - a list of button titles (required)
* - `cancelButtonIndex` (int) - index of cancel button in `options`
* - `destructiveButtonIndex` (int) - index of destructive button in `options`
* - `title` (string) - a title to show above the action sheet
* - `message` (string) - a message to show below the title
*
* The 'callback' function takes one parameter, the zero-based index
* of the selected item.
*
* See http://facebook.github.io/react-native/docs/actionsheetios.html#showactionsheetwithoptions
*/
showActionSheetWithOptions(
options: {|
+title?: ?string,
+message?: ?string,
+options: Array<string>,
+destructiveButtonIndex?: ?number,
+cancelButtonIndex?: ?number,
+anchor?: ?number,
+tintColor?: number | string,
|},
callback: (buttonIndex: number) => void,
) {
showActionSheetWithOptions(options: Object, callback: Function) {
invariant(
typeof options === 'object' && options !== null,
'Options must be a valid object',
'Options must be a valid object'
);
invariant(
typeof callback === 'function',
'Must provide a valid callback'
);
invariant(typeof callback === 'function', 'Must provide a valid callback');
RCTActionSheetManager.showActionSheetWithOptions(
{...options, tintColor: processColor(options.tintColor)},
callback,
callback
);
},
@@ -71,44 +50,35 @@ const ActionSheetIOS = {
* - `url` (string) - a URL to share
* - `message` (string) - a message to share
* - `subject` (string) - a subject for the message
* - `excludedActivityTypes` (array) - the activities to exclude from
* the ActionSheet
* - `tintColor` (color) - tint color of the buttons
* - `excludedActivityTypes` (array) - the activities to exclude from the ActionSheet
*
* The 'failureCallback' function takes one parameter, an error object.
* The only property defined on this object is an optional `stack` property
* of type `string`.
*
* The 'successCallback' function takes two parameters:
*
* - a boolean value signifying success or failure
* - a string that, in the case of success, indicates the method of sharing
*
* See http://facebook.github.io/react-native/docs/actionsheetios.html#showshareactionsheetwithoptions
* NOTE: if `url` points to a local file, or is a base64-encoded
* uri, the file it points to will be loaded and shared directly.
* In this way, you can share images, videos, PDF files, etc.
*/
showShareActionSheetWithOptions(
options: Object,
failureCallback: Function,
successCallback: Function,
successCallback: Function
) {
invariant(
typeof options === 'object' && options !== null,
'Options must be a valid object',
'Options must be a valid object'
);
invariant(
typeof failureCallback === 'function',
'Must provide a valid failureCallback',
'Must provide a valid failureCallback'
);
invariant(
typeof successCallback === 'function',
'Must provide a valid successCallback',
'Must provide a valid successCallback'
);
RCTActionSheetManager.showShareActionSheetWithOptions(
{...options, tintColor: processColor(options.tintColor)},
failureCallback,
successCallback,
successCallback
);
},
}
};
module.exports = ActionSheetIOS;
+46 -8
View File
@@ -17,7 +17,7 @@ const Platform = require('Platform');
import type { AlertType, AlertButtonStyle } from 'AlertIOS';
export type Buttons = Array<{
type Buttons = Array<{
text?: string,
onPress?: ?Function,
style?: AlertButtonStyle,
@@ -30,16 +30,54 @@ type Options = {
/**
* Launches an alert dialog with the specified title and message.
*
* See http://facebook.github.io/react-native/docs/alert.html
*
* Optionally provide a list of buttons. Tapping any button will fire the
* respective onPress callback and dismiss the alert. By default, the only
* button will be an 'OK' button.
*
* This is an API that works both on iOS and Android and can show static
* alerts. To show an alert that prompts the user to enter some information,
* see `AlertIOS`; entering text in an alert is common on iOS only.
*
* ## iOS
*
* On iOS you can specify any number of buttons. Each button can optionally
* specify a style, which is one of 'default', 'cancel' or 'destructive'.
*
* ## Android
*
* On Android at most three buttons can be specified. Android has a concept
* of a neutral, negative and a positive button:
*
* - If you specify one button, it will be the 'positive' one (such as 'OK')
* - Two buttons mean 'negative', 'positive' (such as 'Cancel', 'OK')
* - Three buttons mean 'neutral', 'negative', 'positive' (such as 'Later', 'Cancel', 'OK')
*
* By default alerts on Android can be dismissed by tapping outside of the alert
* box. This event can be handled by providing an optional `options` parameter,
* with an `onDismiss` callback property `{ onDismiss: () => {} }`.
*
* Alternatively, the dismissing behavior can be disabled altogether by providing
* an optional `options` parameter with the `cancelable` property set to `false`
* i.e. `{ cancelable: false }`
*
* Example usage:
* ```
* // Works on both iOS and Android
* Alert.alert(
* 'Alert Title',
* 'My Alert Msg',
* [
* {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
* {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
* {text: 'OK', onPress: () => console.log('OK Pressed')},
* ],
* { cancelable: false }
* )
* ```
*/
class Alert {
/**
* Launches an alert dialog with the specified title and message.
*
* See http://facebook.github.io/react-native/docs/alert.html#alert
*/
static alert(
title: ?string,
message?: ?string,
+94 -7
View File
@@ -77,15 +77,62 @@ export type ButtonsArray = Array<{
}>;
/**
* Use `AlertIOS` to display an alert dialog with a message or to create a prompt for user input on iOS. If you don't need to prompt for user input, we recommend using `Alert.alert() for cross-platform support.
* @description
* `AlertIOS` provides functionality to create an iOS alert dialog with a
* message or create a prompt for user input.
*
* Creating an iOS alert:
*
* ```
* AlertIOS.alert(
* 'Sync Complete',
* 'All your data are belong to us.'
* );
* ```
*
* Creating an iOS prompt:
*
* ```
* AlertIOS.prompt(
* 'Enter a value',
* null,
* text => console.log("You entered "+text)
* );
* ```
*
* We recommend using the [`Alert.alert`](docs/alert.html) method for
* cross-platform support if you don't need to create iOS-only prompts.
*
* See http://facebook.github.io/react-native/docs/alertios.html
*/
class AlertIOS {
/**
* Create and display a popup alert.
* @static
* @method alert
* @param title The dialog's title.
*
* See http://facebook.github.io/react-native/docs/alertios.html#alert
* An empty string hides the title.
* @param message An optional message that appears below
* the dialog's title.
* @param callbackOrButtons This optional argument should
* be either a single-argument function or an array of buttons. If passed
* a function, it will be called when the user taps 'OK'.
*
* If passed an array of button configurations, each button should include
* a `text` key, as well as optional `onPress` and `style` keys. `style`
* should be one of 'default', 'cancel' or 'destructive'.
* @param type Deprecated, do not use.
*
* @example <caption>Example with custom buttons</caption>
*
* AlertIOS.alert(
* 'Update available',
* 'Keep your app up to date to enjoy the latest features',
* [
* {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
* {text: 'Install', onPress: () => console.log('Install Pressed')},
* ],
* );
*/
static alert(
title: ?string,
@@ -103,8 +150,48 @@ class AlertIOS {
/**
* Create and display a prompt to enter some text.
*
* See http://facebook.github.io/react-native/docs/alertios.html#prompt
* @static
* @method prompt
* @param title The dialog's title.
* @param message An optional message that appears above the text
* input.
* @param callbackOrButtons This optional argument should
* be either a single-argument function or an array of buttons. If passed
* a function, it will be called with the prompt's value when the user
* taps 'OK'.
*
* If passed an array of button configurations, each button should include
* a `text` key, as well as optional `onPress` and `style` keys (see
* example). `style` should be one of 'default', 'cancel' or 'destructive'.
* @param type This configures the text input. One of 'plain-text',
* 'secure-text' or 'login-password'.
* @param defaultValue The default text in text input.
* @param keyboardType The keyboard type of first text field(if exists).
* One of 'default', 'email-address', 'numeric', 'phone-pad',
* 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad',
* 'name-phone-pad', 'decimal-pad', 'twitter' or 'web-search'.
*
* @example <caption>Example with custom buttons</caption>
*
* AlertIOS.prompt(
* 'Enter password',
* 'Enter your password to claim your $1.5B in lottery winnings',
* [
* {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
* {text: 'OK', onPress: password => console.log('OK Pressed, password: ' + password)},
* ],
* 'secure-text'
* );
*
* @example <caption>Example with the default button and a custom callback</caption>
*
* AlertIOS.prompt(
* 'Update username',
* null,
* text => console.log("Your username is "+text),
* null,
* 'default'
* );
*/
static prompt(
title: ?string,
@@ -124,7 +211,7 @@ class AlertIOS {
var callback = type;
var defaultValue = message;
RCTAlertManager.alertWithArgs({
title: title || '',
title: title,
type: 'plain-text',
defaultValue,
}, (id, value) => {
@@ -157,7 +244,7 @@ class AlertIOS {
}
RCTAlertManager.alertWithArgs({
title: title || '',
title: title,
message: message || undefined,
buttons,
type: type || undefined,
+220 -56
View File
@@ -510,33 +510,183 @@ const event = function(argMapping: Array<?Mapping>, config?: EventConfig): any {
* between inputs and outputs, with configurable transforms in between, and
* simple `start`/`stop` methods to control time-based animation execution.
*
* See http://facebook.github.io/react-native/docs/animated.html
* The simplest workflow for creating an animation is to create an
* `Animated.Value`, hook it up to one or more style attributes of an animated
* component, and then drive updates via animations using `Animated.timing()`:
*
* ```javascript
* Animated.timing( // Animate value over time
* this.state.fadeAnim, // The value to drive
* {
* toValue: 1, // Animate to final value of 1
* }
* ).start(); // Start the animation
* ```
*
* Refer to the [Animations](docs/animations.html#animated-api) guide to see
* additional examples of `Animated` in action.
*
* ## Overview
*
* There are two value types you can use with `Animated`:
*
* - [`Animated.Value()`](docs/animated.html#value) for single values
* - [`Animated.ValueXY()`](docs/animated.html#valuexy) for vectors
*
* `Animated.Value` can bind to style properties or other props, and can be
* interpolated as well. A single `Animated.Value` can drive any number of
* properties.
*
* ### Configuring animations
*
* `Animated` provides three types of animation types. Each animation type
* provides a particular animation curve that controls how your values animate
* from their initial value to the final value:
*
* - [`Animated.decay()`](docs/animated.html#decay) starts with an initial
* velocity and gradually slows to a stop.
* - [`Animated.spring()`](docs/animated.html#spring) provides a simple
* spring physics model.
* - [`Animated.timing()`](docs/animated.html#timing) animates a value over time
* using [easing functions](docs/easing.html).
*
* In most cases, you will be using `timing()`. By default, it uses a symmetric
* easeInOut curve that conveys the gradual acceleration of an object to full
* speed and concludes by gradually decelerating to a stop.
*
* ### Working with animations
*
* Animations are started by calling `start()` on your animation. `start()`
* takes a completion callback that will be called when the animation is done.
* If the animation finished running normally, the completion callback will be
* invoked with `{finished: true}`. If the animation is done because `stop()`
* was called on it before it could finish (e.g. because it was interrupted by a
* gesture or another animation), then it will receive `{finished: false}`.
*
* ### Using the native driver
*
* By using the native driver, we send everything about the animation to native
* before starting the animation, allowing native code to perform the animation
* on the UI thread without having to go through the bridge on every frame.
* Once the animation has started, the JS thread can be blocked without
* affecting the animation.
*
* You can use the native driver by specifying `useNativeDriver: true` in your
* animation configuration. See the
* [Animations](docs/animations.html#using-the-native-driver) guide to learn
* more.
*
* ### Animatable components
*
* Only animatable components can be animated. These special components do the
* magic of binding the animated values to the properties, and do targeted
* native updates to avoid the cost of the react render and reconciliation
* process on every frame. They also handle cleanup on unmount so they are safe
* by default.
*
* - [`createAnimatedComponent()`](docs/animated.html#createanimatedcomponent)
* can be used to make a component animatable.
*
* `Animated` exports the following animatable components using the above
* wrapper:
*
* - `Animated.Image`
* - `Animated.ScrollView`
* - `Animated.Text`
* - `Animated.View`
*
* ### Composing animations
*
* Animations can also be combined in complex ways using composition functions:
*
* - [`Animated.delay()`](docs/animated.html#delay) starts an animation after
* a given delay.
* - [`Animated.parallel()`](docs/animated.html#parallel) starts a number of
* animations at the same time.
* - [`Animated.sequence()`](docs/animated.html#sequence) starts the animations
* in order, waiting for each to complete before starting the next.
* - [`Animated.stagger()`](docs/animated.html#stagger) starts animations in
* order and in parallel, but with successive delays.
*
* Animations can also be chained together simply by setting the `toValue` of
* one animation to be another `Animated.Value`. See
* [Tracking dynamic values](docs/animations.html#tracking-dynamic-values) in
* the Animations guide.
*
* By default, if one animation is stopped or interrupted, then all other
* animations in the group are also stopped.
*
* ### Combining animated values
*
* You can combine two animated values via addition, multiplication, division,
* or modulo to make a new animated value:
*
* - [`Animated.add()`](docs/animated.html#add)
* - [`Animated.divide()`](docs/animated.html#divide)
* - [`Animated.modulo()`](docs/animated.html#modulo)
* - [`Animated.multiply()`](docs/animated.html#multiply)
*
* ### Interpolation
*
* The `interpolate()` function allows input ranges to map to different output
* ranges. By default, it will extrapolate the curve beyond the ranges given,
* but you can also have it clamp the output value. It uses lineal interpolation
* by default but also supports easing functions.
*
* - [`interpolate()`](docs/animated.html#interpolate)
*
* Read more about interpolation in the
* [Animation](docs/animations.html#interpolation) guide.
*
* ### Handling gestures and other events
*
* Gestures, like panning or scrolling, and other events can map directly to
* animated values using `Animated.event()`. This is done with a structured map
* syntax so that values can be extracted from complex event objects. The first
* level is an array to allow mapping across multiple args, and that array
* contains nested objects.
*
* - [`Animated.event()`](docs/animated.html#event)
*
* For example, when working with horizontal scrolling gestures, you would do
* the following in order to map `event.nativeEvent.contentOffset.x` to
* `scrollX` (an `Animated.Value`):
*
* ```javascript
* onScroll={Animated.event(
* // scrollX = e.nativeEvent.contentOffset.x
* [{ nativeEvent: {
* contentOffset: {
* x: scrollX
* }
* }
* }]
* )}
* ```
*
*/
module.exports = {
/**
* Standard value class for driving animations. Typically initialized with
* `new Animated.Value(0);`
*
* See http://facebook.github.io/react-native/docs/animated.html#value
* See also [`AnimatedValue`](docs/animated.html#animatedvalue).
*/
Value: AnimatedValue,
/**
* 2D value class for driving 2D animations, such as pan gestures.
*
* See https://facebook.github.io/react-native/releases/next/docs/animatedvaluexy.html
* See also [`AnimatedValueXY`](docs/animated.html#animatedvaluexy).
*/
ValueXY: AnimatedValueXY,
/**
* Exported to use the Interpolation type in flow.
* exported to use the Interpolation type in flow
*
* See http://facebook.github.io/react-native/docs/animated.html#interpolation
* See also [`AnimatedInterpolation`](docs/animated.html#animatedinterpolation).
*/
Interpolation: AnimatedInterpolation,
/**
* Exported for ease of type checking. All animated values derive from this
* class.
*
* See http://facebook.github.io/react-native/docs/animated.html#node
* Exported for ease of type checking. All animated values derive from this class.
*/
Node: AnimatedNode,
@@ -544,130 +694,144 @@ module.exports = {
* Animates a value from an initial velocity to zero based on a decay
* coefficient.
*
* See http://facebook.github.io/react-native/docs/animated.html#decay
* Config is an object that may have the following options:
*
* - `velocity`: Initial velocity. Required.
* - `deceleration`: Rate of decay. Default 0.997.
* - `useNativeDriver`: Uses the native driver when true. Default false.
*/
decay,
/**
* Animates a value along a timed easing curve. The Easing module has tons of
* predefined curves, or you can use your own function.
* Animates a value along a timed easing curve. The
* [`Easing`](docs/easing.html) module has tons of predefined curves, or you
* can use your own function.
*
* See http://facebook.github.io/react-native/docs/animated.html#timing
* Config is an object that may have the following options:
*
* - `duration`: Length of animation (milliseconds). Default 500.
* - `easing`: Easing function to define curve.
* Default is `Easing.inOut(Easing.ease)`.
* - `delay`: Start the animation after delay (milliseconds). Default 0.
* - `useNativeDriver`: Uses the native driver when true. Default false.
*/
timing,
/**
* Animates a value according to an analytical spring model based on
* damped harmonic oscillation.
* Spring animation based on Rebound and
* [Origami](https://facebook.github.io/origami/). Tracks velocity state to
* create fluid motions as the `toValue` updates, and can be chained together.
*
* See http://facebook.github.io/react-native/docs/animated.html#spring
* Config is an object that may have the following options. Note that you can
* only define bounciness/speed or tension/friction but not both:
*
* - `friction`: Controls "bounciness"/overshoot. Default 7.
* - `tension`: Controls speed. Default 40.
* - `speed`: Controls speed of the animation. Default 12.
* - `bounciness`: Controls bounciness. Default 8.
* - `useNativeDriver`: Uses the native driver when true. Default false.
*/
spring,
/**
* Creates a new Animated value composed from two Animated values added
* together.
*
* See http://facebook.github.io/react-native/docs/animated.html#add
*/
add,
/**
* Creates a new Animated value composed by dividing the first Animated value
* by the second Animated value.
*
* See http://facebook.github.io/react-native/docs/animated.html#divide
*/
divide,
/**
* Creates a new Animated value composed from two Animated values multiplied
* together.
*
* See http://facebook.github.io/react-native/docs/animated.html#multiply
*/
multiply,
/**
* Creates a new Animated value that is the (non-negative) modulo of the
* provided Animated value.
*
* See http://facebook.github.io/react-native/docs/animated.html#modulo
* provided Animated value
*/
modulo,
/**
* Create a new Animated value that is limited between 2 values. It uses the
* difference between the last value so even if the value is far from the
* bounds it will start changing when the value starts getting closer again.
* difference between the last value so even if the value is far from the bounds
* it will start changing when the value starts getting closer again.
* (`value = clamp(value + diff, min, max)`).
*
* See http://facebook.github.io/react-native/docs/animated.html#diffclamp
* This is useful with scroll events, for example, to show the navbar when
* scrolling up and to hide it when scrolling down.
*/
diffClamp,
/**
* Starts an animation after the given delay.
*
* See http://facebook.github.io/react-native/docs/animated.html#delay
*/
delay,
/**
* Starts an array of animations in order, waiting for each to complete
* before starting the next. If the current running animation is stopped, no
* before starting the next. If the current running animation is stopped, no
* following animations will be started.
*
* See http://facebook.github.io/react-native/docs/animated.html#sequence
*/
sequence,
/**
* Starts an array of animations all at the same time. By default, if one
* of the animations is stopped, they will all be stopped. You can override
* Starts an array of animations all at the same time. By default, if one
* of the animations is stopped, they will all be stopped. You can override
* this with the `stopTogether` flag.
*
* See http://facebook.github.io/react-native/docs/animated.html#parallel
*/
parallel,
/**
* Array of animations may run in parallel (overlap), but are started in
* sequence with successive delays. Nice for doing trailing effects.
*
* See http://facebook.github.io/react-native/docs/animated.html#stagger
*/
stagger,
/**
* Loops a given animation continuously, so that each time it reaches the
* end, it resets and begins again from the start.
*
* See http://facebook.github.io/react-native/docs/animated.html#loop
*/
* Loops a given animation continuously, so that each time it reaches the
* end, it resets and begins again from the start. Can specify number of
* times to loop using the key 'iterations' in the config. Will loop without
* blocking the UI thread if the child animation is set to 'useNativeDriver'.
*/
loop,
/**
* Takes an array of mappings and extracts values from each arg accordingly,
* then calls `setValue` on the mapped outputs.
* then calls `setValue` on the mapped outputs. e.g.
*
* See http://facebook.github.io/react-native/docs/animated.html#event
*```javascript
* onScroll={Animated.event(
* [{nativeEvent: {contentOffset: {x: this._scrollX}}}],
* {listener}, // Optional async listener
* )}
* ...
* onPanResponderMove: Animated.event([
* null, // raw event arg ignored
* {dx: this._panX}, // gestureState arg
* ]),
*```
*
* Config is an object that may have the following options:
*
* - `listener`: Optional async listener.
* - `useNativeDriver`: Uses the native driver when true. Default false.
*/
event,
/**
* Make any React component Animatable. Used to create `Animated.View`, etc.
*
* See http://facebook.github.io/react-native/docs/animated.html#createanimatedcomponent
*/
createAnimatedComponent,
/**
* Imperative API to attach an animated value to an event on a view. Prefer
* using `Animated.event` with `useNativeDrive: true` if possible.
*
* See http://facebook.github.io/react-native/docs/animated.html#attachnativeevent
* Imperative API to attach an animated value to an event on a view. Prefer using
* `Animated.event` with `useNativeDrive: true` if possible.
*/
attachNativeEvent,
/**
* Advanced imperative API for snooping on animated events that are passed in
* through props. Use values directly where possible.
*
* See http://facebook.github.io/react-native/docs/animated.html#forkevent
* Advanced imperative API for snooping on animated events that are passed in through props. Use
* values directly where possible.
*/
forkEvent,
unforkEvent,
+15 -10
View File
@@ -62,14 +62,14 @@ class Easing {
/**
* A stepping function, returns 1 for any positive value of `n`.
*/
static step0(n: number) {
static step0(n) {
return n > 0 ? 1 : 0;
}
/**
* A stepping function, returns 1 if `n` is greater than or equal to 1.
*/
static step1(n: number) {
static step1(n) {
return n >= 1 ? 1 : 0;
}
@@ -79,7 +79,7 @@ class Easing {
*
* http://cubic-bezier.com/#0,0,1,1
*/
static linear(t: number) {
static linear(t) {
return t;
}
@@ -102,7 +102,7 @@ class Easing {
*
* http://easings.net/#easeInQuad
*/
static quad(t: number) {
static quad(t) {
return t * t;
}
@@ -112,7 +112,7 @@ class Easing {
*
* http://easings.net/#easeInCubic
*/
static cubic(t: number) {
static cubic(t) {
return t * t * t;
}
@@ -122,8 +122,8 @@ class Easing {
* n = 4: http://easings.net/#easeInQuart
* n = 5: http://easings.net/#easeInQuint
*/
static poly(n: number) {
return (t: number) => Math.pow(t, n);
static poly(n) {
return (t) => Math.pow(t, n);
}
/**
@@ -131,7 +131,7 @@ class Easing {
*
* http://easings.net/#easeInSine
*/
static sin(t: number) {
static sin(t) {
return 1 - Math.cos(t * Math.PI / 2);
}
@@ -140,7 +140,7 @@ class Easing {
*
* http://easings.net/#easeInCirc
*/
static circle(t: number) {
static circle(t) {
return 1 - Math.sqrt(1 - t * t);
}
@@ -149,7 +149,7 @@ class Easing {
*
* http://easings.net/#easeInExpo
*/
static exp(t: number) {
static exp(t) {
return Math.pow(2, 10 * (t - 1));
}
@@ -162,6 +162,11 @@ class Easing {
* times.
*
* http://easings.net/#easeInElastic
*
* Wolfram Plots:
*
* - http://tiny.cc/elastic_b_1 (bounciness = 1, default)
* - http://tiny.cc/elastic_b_3 (bounciness = 3)
*/
static elastic(bounciness: number = 1): (t: number) => number {
const p = bounciness * Math.PI;
+8 -29
View File
@@ -147,9 +147,6 @@ const API = {
const STYLES_WHITELIST = {
opacity: true,
transform: true,
/* ios styles */
shadowOpacity: true,
shadowRadius: true,
/* legacy android transform properties */
scaleX: true,
scaleY: true,
@@ -169,33 +166,11 @@ const TRANSFORM_WHITELIST = {
perspective: true,
};
const SUPPORTED_INTERPOLATION_PARAMS = {
inputRange: true,
outputRange: true,
extrapolate: true,
extrapolateRight: true,
extrapolateLeft: true,
};
function addWhitelistedStyleProp(prop: string): void {
STYLES_WHITELIST[prop] = true;
}
function addWhitelistedTransformProp(prop: string): void {
TRANSFORM_WHITELIST[prop] = true;
}
function addWhitelistedInterpolationParam(param: string): void {
SUPPORTED_INTERPOLATION_PARAMS[param] = true;
}
function validateTransform(configs: Array<Object>): void {
configs.forEach(config => {
if (!TRANSFORM_WHITELIST.hasOwnProperty(config.property)) {
throw new Error(
`Property '${
config.property
}' is not supported by native animated module`,
`Property '${config.property}' is not supported by native animated module`,
);
}
});
@@ -212,6 +187,13 @@ function validateStyles(styles: Object): void {
}
function validateInterpolation(config: Object): void {
var SUPPORTED_INTERPOLATION_PARAMS = {
inputRange: true,
outputRange: true,
extrapolate: true,
extrapolateRight: true,
extrapolateLeft: true,
};
for (var key in config) {
if (!SUPPORTED_INTERPOLATION_PARAMS.hasOwnProperty(key)) {
throw new Error(
@@ -255,9 +237,6 @@ function shouldUseNativeDriver(config: AnimationConfig | EventConfig): boolean {
module.exports = {
API,
addWhitelistedStyleProp,
addWhitelistedTransformProp,
addWhitelistedInterpolationParam,
validateStyles,
validateTransform,
validateInterpolation,
+8 -8
View File
@@ -13,15 +13,15 @@
'use strict';
type SpringConfigType = {
stiffness: number,
damping: number,
tension: number,
friction: number,
};
function stiffnessFromOrigamiValue(oValue) {
function tensionFromOrigamiValue(oValue) {
return (oValue - 30) * 3.62 + 194;
}
function dampingFromOrigamiValue(oValue) {
function frictionFromOrigamiValue(oValue) {
return (oValue - 8) * 3 + 25;
}
@@ -30,8 +30,8 @@ function fromOrigamiTensionAndFriction(
friction: number,
): SpringConfigType {
return {
stiffness: stiffnessFromOrigamiValue(tension),
damping: dampingFromOrigamiValue(friction),
tension: tensionFromOrigamiValue(tension),
friction: frictionFromOrigamiValue(friction)
};
}
@@ -91,8 +91,8 @@ function fromBouncinessAndSpeed(
);
return {
stiffness: stiffnessFromOrigamiValue(bouncyTension),
damping: dampingFromOrigamiValue(bouncyFriction),
tension: tensionFromOrigamiValue(bouncyTension),
friction: frictionFromOrigamiValue(bouncyFriction)
};
}
@@ -5,8 +5,6 @@
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @emails oncall+react_native
*/
'use strict';
@@ -94,11 +92,11 @@ describe('Animated tests', () => {
opacity: anim,
},
};
c.UNSAFE_componentWillMount();
c.componentWillMount();
expect(anim.__detach).not.toBeCalled();
c._component = {};
c.UNSAFE_componentWillReceiveProps({
c.componentWillReceiveProps({
style: {
opacity: anim,
},
@@ -120,7 +118,7 @@ describe('Animated tests', () => {
opacity: anim,
},
};
c.UNSAFE_componentWillMount();
c.componentWillMount();
Animated.timing(anim, {toValue: 10, duration: 1000}).start(callback);
c._component = {};
@@ -137,7 +135,7 @@ describe('Animated tests', () => {
expect(callback).toBeCalled();
});
it('send toValue when an underdamped spring stops', () => {
it('send toValue when a spring stops', () => {
var anim = new Animated.Value(0);
var listener = jest.fn();
anim.addListener(listener);
@@ -149,18 +147,6 @@ describe('Animated tests', () => {
expect(anim.__getValue()).toBe(15);
});
it('send toValue when a critically damped spring stops', () => {
var anim = new Animated.Value(0);
var listener = jest.fn();
anim.addListener(listener);
Animated.spring(anim, {stiffness: 8000, damping: 2000, toValue: 15}).start();
jest.runAllTimers();
var lastValue = listener.mock.calls[listener.mock.calls.length - 2][0].value;
expect(lastValue).not.toBe(15);
expect(lastValue).toBeCloseTo(15);
expect(anim.__getValue()).toBe(15);
});
it('convert to JSON', () => {
expect(JSON.stringify(new Animated.Value(10))).toBe('10');
});
@@ -371,7 +357,7 @@ describe('Animated tests', () => {
loop.start(cb);
expect(animation.start).not.toBeCalled();
expect(cb).toBeCalledWith({finished: true});
expect(cb).toBeCalledWith({ finished: true });
});
it('supports interrupting an indefinite loop', () => {
@@ -5,13 +5,10 @@
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @emails oncall+react_native
*/
'use strict';
jest
.clearAllMocks()
.setMock('Text', {})
.setMock('View', {})
.setMock('Image', {})
@@ -29,7 +26,7 @@ const NativeAnimatedHelper = require('NativeAnimatedHelper');
function createAndMountComponent(ComponentClass, props) {
const component = new ComponentClass();
component.props = props;
component.UNSAFE_componentWillMount();
component.componentWillMount();
// Simulate that refs were set.
component._component = {};
component.componentDidMount();
@@ -80,7 +77,7 @@ describe('Native Animated', () => {
anim.setValue(0.5);
expect(nativeAnimatedModule.setAnimatedNodeValue).toBeCalledWith(expect.any(Number), 0.5);
expect(nativeAnimatedModule.setAnimatedNodeValue).toBeCalledWith(jasmine.any(Number), 0.5);
expect(c.refs.node.setNativeProps).not.toHaveBeenCalled();
});
@@ -95,12 +92,12 @@ describe('Native Animated', () => {
});
expect(nativeAnimatedModule.createAnimatedNode).toBeCalledWith(
expect.any(Number),
jasmine.any(Number),
{type: 'value', value: 0, offset: 10},
);
anim.setOffset(20);
expect(nativeAnimatedModule.setAnimatedNodeOffset)
.toBeCalledWith(expect.any(Number), 20);
.toBeCalledWith(jasmine.any(Number), 20);
});
it('should flatten offset', () => {
@@ -113,12 +110,12 @@ describe('Native Animated', () => {
});
expect(nativeAnimatedModule.createAnimatedNode).toBeCalledWith(
expect.any(Number),
jasmine.any(Number),
{type: 'value', value: 0, offset: 0},
);
anim.flattenOffset();
expect(nativeAnimatedModule.flattenAnimatedNodeOffset)
.toBeCalledWith(expect.any(Number));
.toBeCalledWith(jasmine.any(Number));
});
it('should extract offset', () => {
@@ -131,12 +128,12 @@ describe('Native Animated', () => {
});
expect(nativeAnimatedModule.createAnimatedNode).toBeCalledWith(
expect.any(Number),
jasmine.any(Number),
{type: 'value', value: 0, offset: 0},
);
anim.extractOffset();
expect(nativeAnimatedModule.extractAnimatedNodeOffset)
.toBeCalledWith(expect.any(Number));
.toBeCalledWith(jasmine.any(Number));
});
});
@@ -214,14 +211,14 @@ describe('Native Animated', () => {
);
const c = createAndMountComponent(Animated.View, {onTouchMove: event});
expect(nativeAnimatedModule.addAnimatedEventToView).toBeCalledWith(
expect.any(Number),
jasmine.any(Number),
'onTouchMove',
{nativeEventPath: ['state', 'foo'], animatedValueTag: value.__getNativeTag()},
);
c.componentWillUnmount();
expect(nativeAnimatedModule.removeAnimatedEventFromView).toBeCalledWith(
expect.any(Number),
jasmine.any(Number),
'onTouchMove',
value.__getNativeTag(),
);
@@ -271,10 +268,10 @@ describe('Native Animated', () => {
expect(nativeAnimatedModule.connectAnimatedNodes).toHaveBeenCalledTimes(2);
expect(nativeAnimatedModule.startAnimatingNode).toBeCalledWith(
expect.any(Number),
expect.any(Number),
{type: 'frames', frames: expect.any(Array), toValue: expect.any(Number), iterations: 1},
expect.any(Function)
jasmine.any(Number),
jasmine.any(Number),
{type: 'frames', frames: jasmine.any(Array), toValue: jasmine.any(Number), iterations: 1},
jasmine.any(Function)
);
expect(nativeAnimatedModule.disconnectAnimatedNodes).toHaveBeenCalledTimes(2);
@@ -292,11 +289,11 @@ describe('Native Animated', () => {
Animated.timing(anim, {toValue: 10, duration: 1000, useNativeDriver: true}).start();
expect(nativeAnimatedModule.createAnimatedNode)
.toBeCalledWith(expect.any(Number), {type: 'value', value: 0, offset: 0});
.toBeCalledWith(jasmine.any(Number), {type: 'value', value: 0, offset: 0});
expect(nativeAnimatedModule.createAnimatedNode)
.toBeCalledWith(expect.any(Number), {type: 'style', style: {opacity: expect.any(Number)}});
.toBeCalledWith(jasmine.any(Number), {type: 'style', style: {opacity: jasmine.any(Number)}});
expect(nativeAnimatedModule.createAnimatedNode)
.toBeCalledWith(expect.any(Number), {type: 'props', props: {style: expect.any(Number)}});
.toBeCalledWith(jasmine.any(Number), {type: 'props', props: {style: jasmine.any(Number)}});
});
it('sends a valid graph description for Animated.add nodes', () => {
@@ -312,8 +309,8 @@ describe('Native Animated', () => {
});
expect(nativeAnimatedModule.createAnimatedNode).toBeCalledWith(
expect.any(Number),
{type: 'addition', input: expect.any(Array)},
jasmine.any(Number),
{type: 'addition', input: jasmine.any(Array)},
);
const additionCalls = nativeAnimatedModule.createAnimatedNode.mock.calls.filter(
(call) => call[1].type === 'addition'
@@ -344,8 +341,8 @@ describe('Native Animated', () => {
});
expect(nativeAnimatedModule.createAnimatedNode).toBeCalledWith(
expect.any(Number),
{type: 'multiplication', input: expect.any(Array)},
jasmine.any(Number),
{type: 'multiplication', input: jasmine.any(Array)},
);
const multiplicationCalls = nativeAnimatedModule.createAnimatedNode.mock.calls.filter(
(call) => call[1].type === 'multiplication'
@@ -376,7 +373,7 @@ describe('Native Animated', () => {
});
expect(nativeAnimatedModule.createAnimatedNode)
.toBeCalledWith(expect.any(Number), {type: 'division', input: expect.any(Array)});
.toBeCalledWith(jasmine.any(Number), {type: 'division', input: jasmine.any(Array)});
const divisionCalls = nativeAnimatedModule.createAnimatedNode.mock.calls.filter(
(call) => call[1].type === 'division'
);
@@ -404,8 +401,8 @@ describe('Native Animated', () => {
});
expect(nativeAnimatedModule.createAnimatedNode).toBeCalledWith(
expect.any(Number),
{type: 'modulus', modulus: 4, input: expect.any(Number)},
jasmine.any(Number),
{type: 'modulus', modulus: 4, input: jasmine.any(Number)},
);
const moduloCalls = nativeAnimatedModule.createAnimatedNode.mock.calls.filter(
(call) => call[1].type === 'modulus'
@@ -435,11 +432,11 @@ describe('Native Animated', () => {
});
expect(nativeAnimatedModule.createAnimatedNode).toBeCalledWith(
expect.any(Number),
jasmine.any(Number),
{type: 'value', value: 10, offset: 0}
);
expect(nativeAnimatedModule.createAnimatedNode)
.toBeCalledWith(expect.any(Number), {
.toBeCalledWith(jasmine.any(Number), {
type: 'interpolation',
inputRange: [10, 20],
outputRange: [0, 1],
@@ -466,11 +463,11 @@ describe('Native Animated', () => {
});
expect(nativeAnimatedModule.createAnimatedNode).toBeCalledWith(
expect.any(Number),
jasmine.any(Number),
{
type: 'transform',
transforms: [{
nodeTag: expect.any(Number),
nodeTag: jasmine.any(Number),
property: 'translateX',
type: 'animated',
}, {
@@ -493,8 +490,8 @@ describe('Native Animated', () => {
});
expect(nativeAnimatedModule.createAnimatedNode).toBeCalledWith(
expect.any(Number),
{type: 'diffclamp', input: expect.any(Number), max: 20, min: 0},
jasmine.any(Number),
{type: 'diffclamp', input: jasmine.any(Number), max: 20, min: 0},
);
const diffClampCalls = nativeAnimatedModule.createAnimatedNode.mock.calls.filter(
(call) => call[1].type === 'diffclamp'
@@ -570,9 +567,9 @@ describe('Native Animated', () => {
});
expect(nativeAnimatedModule.createAnimatedNode)
.toBeCalledWith(expect.any(Number), { type: 'style', style: { opacity: expect.any(Number) }});
.toBeCalledWith(jasmine.any(Number), { type: 'style', style: { opacity: jasmine.any(Number) }});
expect(nativeAnimatedModule.createAnimatedNode)
.toBeCalledWith(expect.any(Number), { type: 'props', props: { style: expect.any(Number) }});
.toBeCalledWith(jasmine.any(Number), { type: 'props', props: { style: jasmine.any(Number) }});
});
});
@@ -582,10 +579,10 @@ describe('Native Animated', () => {
Animated.timing(anim, {toValue: 10, duration: 1000, useNativeDriver: true}).start();
expect(nativeAnimatedModule.startAnimatingNode).toBeCalledWith(
expect.any(Number),
expect.any(Number),
{type: 'frames', frames: expect.any(Array), toValue: expect.any(Number), iterations: 1},
expect.any(Function)
jasmine.any(Number),
jasmine.any(Number),
{type: 'frames', frames: jasmine.any(Array), toValue: jasmine.any(Number), iterations: 1},
jasmine.any(Function)
);
});
@@ -593,65 +590,38 @@ describe('Native Animated', () => {
const anim = new Animated.Value(0);
Animated.spring(anim, {toValue: 10, friction: 5, tension: 164, useNativeDriver: true}).start();
expect(nativeAnimatedModule.startAnimatingNode).toBeCalledWith(
expect.any(Number),
expect.any(Number),
jasmine.any(Number),
jasmine.any(Number),
{
type: 'spring',
stiffness: 679.08,
damping: 16,
mass: 1,
friction: 16,
initialVelocity: 0,
overshootClamping: false,
restDisplacementThreshold: 0.001,
restSpeedThreshold: 0.001,
tension: 679.08,
toValue: 10,
iterations: 1,
},
expect.any(Function)
);
Animated.spring(anim, {
toValue: 10,
stiffness: 1000,
damping: 500,
mass: 3,
useNativeDriver: true
}).start();
expect(nativeAnimatedModule.startAnimatingNode).toBeCalledWith(
expect.any(Number),
expect.any(Number),
{
type: 'spring',
stiffness: 1000,
damping: 500,
mass: 3,
initialVelocity: 0,
overshootClamping: false,
restDisplacementThreshold: 0.001,
restSpeedThreshold: 0.001,
toValue: 10,
iterations: 1,
},
expect.any(Function)
jasmine.any(Function)
);
Animated.spring(anim, {toValue: 10, bounciness: 8, speed: 10, useNativeDriver: true}).start();
expect(nativeAnimatedModule.startAnimatingNode).toBeCalledWith(
expect.any(Number),
expect.any(Number),
jasmine.any(Number),
jasmine.any(Number),
{
type: 'spring',
damping: 23.05223140901191,
friction: 23.05223140901191,
initialVelocity: 0,
overshootClamping: false,
restDisplacementThreshold: 0.001,
restSpeedThreshold: 0.001,
stiffness: 299.61882352941177,
mass: 1,
tension: 299.61882352941177,
toValue: 10,
iterations: 1,
},
expect.any(Function)
jasmine.any(Function)
);
});
@@ -660,10 +630,10 @@ describe('Native Animated', () => {
Animated.decay(anim, {velocity: 10, deceleration: 0.1, useNativeDriver: true}).start();
expect(nativeAnimatedModule.startAnimatingNode).toBeCalledWith(
expect.any(Number),
expect.any(Number),
jasmine.any(Number),
jasmine.any(Number),
{type: 'decay', deceleration: 0.1, velocity: 10, iterations: 1},
expect.any(Function)
jasmine.any(Function)
);
});
@@ -675,10 +645,10 @@ describe('Native Animated', () => {
).start();
expect(nativeAnimatedModule.startAnimatingNode).toBeCalledWith(
expect.any(Number),
expect.any(Number),
jasmine.any(Number),
jasmine.any(Number),
{type: 'decay', deceleration: 0.1, velocity: 10, iterations: 10},
expect.any(Function)
jasmine.any(Function)
);
});
@@ -688,10 +658,10 @@ describe('Native Animated', () => {
animation.start();
expect(nativeAnimatedModule.startAnimatingNode).toBeCalledWith(
expect.any(Number),
expect.any(Number),
{type: 'frames', frames: expect.any(Array), toValue: expect.any(Number), iterations: 1},
expect.any(Function)
jasmine.any(Number),
jasmine.any(Number),
{type: 'frames', frames: jasmine.any(Array), toValue: jasmine.any(Number), iterations: 1},
jasmine.any(Function)
);
const animationId = nativeAnimatedModule.startAnimatingNode.mock.calls[0][0];
@@ -5,8 +5,6 @@
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @emails oncall+react_native
*/
'use strict';
@@ -5,8 +5,6 @@
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @emails oncall+react_native
*/
'use strict';
+43 -76
View File
@@ -2,135 +2,102 @@
* BezierEasing - use bezier curve for transition easing function
* https://github.com/gre/bezier-easing
*
* @copyright 2014-2015 Gaetan Renaudeau. MIT License.
* @copyright 2014-2015 Gaëtan Renaudeau. MIT License.
* @noflow
* @emails oncall+react_native
* @format
*/
/* eslint-disable */
'use strict';
var bezier = require('bezier');
var identity = function(x) {
return x;
};
var identity = function (x) { return x; };
function assertClose(a, b, precision = 3) {
function assertClose (a, b, precision = 3) {
expect(a).toBeCloseTo(b, precision);
}
function makeAssertCloseWithPrecision(precision) {
return function(a, b) {
function makeAssertCloseWithPrecision (precision) {
return function (a, b) {
assertClose(a, b, precision);
};
}
function allEquals(be1, be2, samples, assertion) {
if (!assertion) {
assertion = assertClose;
}
for (var i = 0; i <= samples; ++i) {
function allEquals (be1, be2, samples, assertion) {
if (!assertion) assertion = assertClose;
for (var i=0; i<=samples; ++i) {
var x = i / samples;
assertion(be1(x), be2(x));
}
}
function repeat(n) {
return function(f) {
for (var i = 0; i < n; ++i) {
f(i);
}
function repeat (n) {
return function (f) {
for (var i=0; i<n; ++i) f(i);
};
}
describe('bezier', function() {
it('should be a function', function() {
describe('bezier', function(){
it('should be a function', function(){
expect(typeof bezier === 'function').toBe(true);
});
it('should creates an object', function() {
it('should creates an object', function(){
expect(typeof bezier(0, 0, 1, 1) === 'function').toBe(true);
});
it('should fail with wrong arguments', function() {
expect(function() {
bezier(0.5, 0.5, -5, 0.5);
}).toThrow();
expect(function() {
bezier(0.5, 0.5, 5, 0.5);
}).toThrow();
expect(function() {
bezier(-2, 0.5, 0.5, 0.5);
}).toThrow();
expect(function() {
bezier(2, 0.5, 0.5, 0.5);
}).toThrow();
it('should fail with wrong arguments', function () {
expect(function () { bezier(0.5, 0.5, -5, 0.5); }).toThrow();
expect(function () { bezier(0.5, 0.5, 5, 0.5); }).toThrow();
expect(function () { bezier(-2, 0.5, 0.5, 0.5); }).toThrow();
expect(function () { bezier(2, 0.5, 0.5, 0.5); }).toThrow();
});
describe('linear curves', function() {
it('should be linear', function() {
describe('linear curves', function () {
it('should be linear', function () {
allEquals(bezier(0, 0, 1, 1), bezier(1, 1, 0, 0), 100);
allEquals(bezier(0, 0, 1, 1), identity, 100);
});
});
describe('common properties', function() {
it('should be the right value at extremes', function() {
repeat(10)(function() {
var a = Math.random(),
b = 2 * Math.random() - 0.5,
c = Math.random(),
d = 2 * Math.random() - 0.5;
describe('common properties', function () {
it('should be the right value at extremes', function () {
repeat(10)(function () {
var a = Math.random(), b = 2*Math.random()-0.5, c = Math.random(), d = 2*Math.random()-0.5;
var easing = bezier(a, b, c, d);
expect(easing(0)).toBe(0);
expect(easing(1)).toBe(1);
});
});
it('should approach the projected value of its x=y projected curve', function() {
repeat(10)(function() {
var a = Math.random(),
b = Math.random(),
c = Math.random(),
d = Math.random();
it('should approach the projected value of its x=y projected curve', function () {
repeat(10)(function () {
var a = Math.random(), b = Math.random(), c = Math.random(), d = Math.random();
var easing = bezier(a, b, c, d);
var projected = bezier(b, a, d, c);
var composed = function(x) {
return projected(easing(x));
};
var composed = function (x) { return projected(easing(x)); };
allEquals(identity, composed, 100, makeAssertCloseWithPrecision(2));
});
});
});
describe('two same instances', function() {
it('should be strictly equals', function() {
repeat(10)(function() {
var a = Math.random(),
b = 2 * Math.random() - 0.5,
c = Math.random(),
d = 2 * Math.random() - 0.5;
describe('two same instances', function () {
it('should be strictly equals', function () {
repeat(10)(function () {
var a = Math.random(), b = 2*Math.random()-0.5, c = Math.random(), d = 2*Math.random()-0.5;
allEquals(bezier(a, b, c, d), bezier(a, b, c, d), 100, 0);
});
});
});
describe('symetric curves', function() {
it('should have a central value y~=0.5 at x=0.5', function() {
repeat(10)(function() {
var a = Math.random(),
b = 2 * Math.random() - 0.5,
c = 1 - a,
d = 1 - b;
describe('symetric curves', function () {
it('should have a central value y~=0.5 at x=0.5', function () {
repeat(10)(function () {
var a = Math.random(), b = 2*Math.random()-0.5, c = 1-a, d = 1-b;
var easing = bezier(a, b, c, d);
assertClose(easing(0.5), 0.5, 2);
});
});
it('should be symmetrical', function() {
repeat(10)(function() {
var a = Math.random(),
b = 2 * Math.random() - 0.5,
c = 1 - a,
d = 1 - b;
it('should be symetrical', function () {
repeat(10)(function () {
var a = Math.random(), b = 2*Math.random()-0.5, c = 1-a, d = 1-b;
var easing = bezier(a, b, c, d);
var sym = function(x) {
return 1 - easing(1 - x);
};
var sym = function (x) { return 1 - easing(1-x); };
allEquals(easing, sym, 100, makeAssertCloseWithPrecision(2));
});
});
@@ -32,9 +32,6 @@ export type SpringAnimationConfig = AnimationConfig & {
speed?: number,
tension?: number,
friction?: number,
stiffness?: number,
damping?: number,
mass?: number,
delay?: number,
};
@@ -48,9 +45,6 @@ export type SpringAnimationConfigSingle = AnimationConfig & {
speed?: number,
tension?: number,
friction?: number,
stiffness?: number,
damping?: number,
mass?: number,
delay?: number,
};
@@ -65,20 +59,17 @@ class SpringAnimation extends Animation {
_overshootClamping: boolean;
_restDisplacementThreshold: number;
_restSpeedThreshold: number;
_initialVelocity: ?number;
_lastVelocity: number;
_startPosition: number;
_lastPosition: number;
_fromValue: number;
_toValue: any;
_stiffness: number;
_damping: number;
_mass: number;
_initialVelocity: number;
_tension: number;
_friction: number;
_delay: number;
_timeout: any;
_startTime: number;
_lastTime: number;
_frameTime: number;
_onUpdate: (value: number) => void;
_animationFrame: any;
_useNativeDriver: boolean;
@@ -92,7 +83,7 @@ class SpringAnimation extends Animation {
0.001,
);
this._restSpeedThreshold = withDefault(config.restSpeedThreshold, 0.001);
this._initialVelocity = withDefault(config.velocity, 0);
this._initialVelocity = config.velocity;
this._lastVelocity = withDefault(config.velocity, 0);
this._toValue = config.toValue;
this._delay = withDefault(config.delay, 0);
@@ -101,54 +92,24 @@ class SpringAnimation extends Animation {
config.isInteraction !== undefined ? config.isInteraction : true;
this.__iterations = config.iterations !== undefined ? config.iterations : 1;
if (
config.stiffness !== undefined ||
config.damping !== undefined ||
config.mass !== undefined
) {
let springConfig;
if (config.bounciness !== undefined || config.speed !== undefined) {
invariant(
config.bounciness === undefined &&
config.speed === undefined &&
config.tension === undefined &&
config.friction === undefined,
'You can define one of bounciness/speed, tension/friction, or stiffness/damping/mass, but not more than one',
config.tension === undefined && config.friction === undefined,
'You can only define bounciness/speed or tension/friction but not both',
);
this._stiffness = withDefault(config.stiffness, 100);
this._damping = withDefault(config.damping, 10);
this._mass = withDefault(config.mass, 1);
} else if (config.bounciness !== undefined || config.speed !== undefined) {
// Convert the origami bounciness/speed values to stiffness/damping
// We assume mass is 1.
invariant(
config.tension === undefined &&
config.friction === undefined &&
config.stiffness === undefined &&
config.damping === undefined &&
config.mass === undefined,
'You can define one of bounciness/speed, tension/friction, or stiffness/damping/mass, but not more than one',
);
const springConfig = SpringConfig.fromBouncinessAndSpeed(
springConfig = SpringConfig.fromBouncinessAndSpeed(
withDefault(config.bounciness, 8),
withDefault(config.speed, 12),
);
this._stiffness = springConfig.stiffness;
this._damping = springConfig.damping;
this._mass = 1;
} else {
// Convert the origami tension/friction values to stiffness/damping
// We assume mass is 1.
const springConfig = SpringConfig.fromOrigamiTensionAndFriction(
springConfig = SpringConfig.fromOrigamiTensionAndFriction(
withDefault(config.tension, 40),
withDefault(config.friction, 7),
);
this._stiffness = springConfig.stiffness;
this._damping = springConfig.damping;
this._mass = 1;
}
invariant(this._stiffness > 0, 'Stiffness value must be greater than 0');
invariant(this._damping > 0, 'Damping value must be greater than 0');
invariant(this._mass > 0, 'Mass value must be greater than 0');
this._tension = springConfig.tension;
this._friction = springConfig.friction;
}
__getNativeAnimationConfig() {
@@ -157,9 +118,8 @@ class SpringAnimation extends Animation {
overshootClamping: this._overshootClamping,
restDisplacementThreshold: this._restDisplacementThreshold,
restSpeedThreshold: this._restSpeedThreshold,
stiffness: this._stiffness,
damping: this._damping,
mass: this._mass,
tension: this._tension,
friction: this._friction,
initialVelocity: withDefault(this._initialVelocity, this._lastVelocity),
toValue: this._toValue,
iterations: this.__iterations,
@@ -180,16 +140,16 @@ class SpringAnimation extends Animation {
this._onUpdate = onUpdate;
this.__onEnd = onEnd;
this._lastTime = Date.now();
this._frameTime = 0.0;
if (previousAnimation instanceof SpringAnimation) {
const internalState = previousAnimation.getInternalState();
this._lastPosition = internalState.lastPosition;
this._lastVelocity = internalState.lastVelocity;
// Set the initial velocity to the last velocity
this._initialVelocity = this._lastVelocity;
this._lastTime = internalState.lastTime;
}
if (this._initialVelocity !== undefined && this._initialVelocity !== null) {
this._lastVelocity = this._initialVelocity;
}
const start = () => {
if (this._useNativeDriver) {
@@ -215,28 +175,13 @@ class SpringAnimation extends Animation {
};
}
/**
* This spring model is based off of a damped harmonic oscillator
* (https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator).
*
* We use the closed form of the second order differential equation:
*
* x'' + (2ζ_0)x' + ^2x = 0
*
* where
* _0 = (k / m) (undamped angular frequency of the oscillator),
* ζ = c / 2mk (damping ratio),
* c = damping constant
* k = stiffness
* m = mass
*
* The derivation of the closed form is described in detail here:
* http://planetmath.org/sites/default/files/texpdf/39745.pdf
*
* This algorithm happens to match the algorithm used by CASpringAnimation,
* a QuartzCore (iOS) API that creates spring animations.
*/
onUpdate(): void {
let position = this._lastPosition;
let velocity = this._lastVelocity;
let tempPosition = this._lastPosition;
let tempVelocity = this._lastVelocity;
// If for some reason we lost a lot of frames (e.g. process large payload or
// stopped in the debugger), we only advance by 4 frames worth of
// computation and will continue on the next frame. It's better to have it
@@ -247,47 +192,53 @@ class SpringAnimation extends Animation {
now = this._lastTime + MAX_STEPS;
}
const deltaTime = (now - this._lastTime) / 1000;
this._frameTime += deltaTime;
// We are using a fixed time step and a maximum number of iterations.
// The following post provides a lot of thoughts into how to build this
// loop: http://gafferongames.com/game-physics/fix-your-timestep/
const TIMESTEP_MSEC = 1;
const numSteps = Math.floor((now - this._lastTime) / TIMESTEP_MSEC);
const c: number = this._damping;
const m: number = this._mass;
const k: number = this._stiffness;
const v0: number = -this._initialVelocity;
for (let i = 0; i < numSteps; ++i) {
// Velocity is based on seconds instead of milliseconds
const step = TIMESTEP_MSEC / 1000;
const zeta = c / (2 * Math.sqrt(k * m)); // damping ratio
const omega0 = Math.sqrt(k / m); // undamped angular frequency of the oscillator (rad/ms)
const omega1 = omega0 * Math.sqrt(1.0 - zeta * zeta); // exponential decay
const x0 = this._toValue - this._startPosition; // calculate the oscillation from x0 = 1 to x = 0
// This is using RK4. A good blog post to understand how it works:
// http://gafferongames.com/game-physics/integration-basics/
const aVelocity = velocity;
const aAcceleration =
this._tension * (this._toValue - tempPosition) -
this._friction * tempVelocity;
tempPosition = position + aVelocity * step / 2;
tempVelocity = velocity + aAcceleration * step / 2;
let position = 0.0;
let velocity = 0.0;
const t = this._frameTime;
if (zeta < 1) {
// Under damped
const envelope = Math.exp(-zeta * omega0 * t);
position =
this._toValue -
envelope *
((v0 + zeta * omega0 * x0) / omega1 * Math.sin(omega1 * t) +
x0 * Math.cos(omega1 * t));
// This looks crazy -- it's actually just the derivative of the
// oscillation function
velocity =
zeta *
omega0 *
envelope *
(Math.sin(omega1 * t) * (v0 + zeta * omega0 * x0) / omega1 +
x0 * Math.cos(omega1 * t)) -
envelope *
(Math.cos(omega1 * t) * (v0 + zeta * omega0 * x0) -
omega1 * x0 * Math.sin(omega1 * t));
} else {
// Critically damped
const envelope = Math.exp(-omega0 * t);
position = this._toValue - envelope * (x0 + (v0 + omega0 * x0) * t);
velocity =
envelope * (v0 * (t * omega0 - 1) + t * x0 * (omega0 * omega0));
const bVelocity = tempVelocity;
const bAcceleration =
this._tension * (this._toValue - tempPosition) -
this._friction * tempVelocity;
tempPosition = position + bVelocity * step / 2;
tempVelocity = velocity + bAcceleration * step / 2;
const cVelocity = tempVelocity;
const cAcceleration =
this._tension * (this._toValue - tempPosition) -
this._friction * tempVelocity;
tempPosition = position + cVelocity * step / 2;
tempVelocity = velocity + cAcceleration * step / 2;
const dVelocity = tempVelocity;
const dAcceleration =
this._tension * (this._toValue - tempPosition) -
this._friction * tempVelocity;
tempPosition = position + cVelocity * step / 2;
tempVelocity = velocity + cAcceleration * step / 2;
const dxdt = (aVelocity + 2 * (bVelocity + cVelocity) + dVelocity) / 6;
const dvdt =
(aAcceleration + 2 * (bAcceleration + cAcceleration) + dAcceleration) /
6;
position += dxdt * step;
velocity += dvdt * step;
}
this._lastTime = now;
@@ -302,7 +253,7 @@ class SpringAnimation extends Animation {
// Conditions for stopping the spring animation
let isOvershooting = false;
if (this._overshootClamping && this._stiffness !== 0) {
if (this._overshootClamping && this._tension !== 0) {
if (this._startPosition < this._toValue) {
isOvershooting = position > this._toValue;
} else {
@@ -311,16 +262,14 @@ class SpringAnimation extends Animation {
}
const isVelocity = Math.abs(velocity) <= this._restSpeedThreshold;
let isDisplacement = true;
if (this._stiffness !== 0) {
if (this._tension !== 0) {
isDisplacement =
Math.abs(this._toValue - position) <= this._restDisplacementThreshold;
}
if (isOvershooting || (isVelocity && isDisplacement)) {
if (this._stiffness !== 0) {
if (this._tension !== 0) {
// Ensure that we end up with a round value
this._lastPosition = this._toValue;
this._lastVelocity = 0;
this._onUpdate(this._toValue);
}
@@ -20,7 +20,6 @@ const ViewStylePropTypes = require('ViewStylePropTypes');
function createAnimatedComponent(Component: any): any {
class AnimatedComponent extends React.Component<Object> {
_component: any;
_invokeAnimatedPropsCallbackOnMount: boolean = false;
_prevComponent: any;
_propsAnimated: AnimatedProps;
_eventDetachers: Array<Function> = [];
@@ -42,16 +41,11 @@ function createAnimatedComponent(Component: any): any {
this._component.setNativeProps(props);
}
UNSAFE_componentWillMount() {
componentWillMount() {
this._attachProps(this.props);
}
componentDidMount() {
if (this._invokeAnimatedPropsCallbackOnMount) {
this._invokeAnimatedPropsCallbackOnMount = false;
this._animatedPropsCallback();
}
this._propsAnimated.setNativeView(this._component);
this._attachNativeEvents();
}
@@ -77,44 +71,37 @@ function createAnimatedComponent(Component: any): any {
this._eventDetachers = [];
}
// The system is best designed when setNativeProps is implemented. It is
// able to avoid re-rendering and directly set the attributes that changed.
// However, setNativeProps can only be implemented on leaf native
// components. If you want to animate a composite component, you need to
// re-render it. In this case, we have a fallback that uses forceUpdate.
_animatedPropsCallback = () => {
if (this._component == null) {
// AnimatedProps is created in will-mount because it's used in render.
// But this callback may be invoked before mount in async mode,
// In which case we should defer the setNativeProps() call.
// React may throw away uncommitted work in async mode,
// So a deferred call won't always be invoked.
this._invokeAnimatedPropsCallbackOnMount = true;
} else if (
AnimatedComponent.__skipSetNativeProps_FOR_TESTS_ONLY ||
typeof this._component.setNativeProps !== 'function'
) {
this.forceUpdate();
} else if (!this._propsAnimated.__isNative) {
this._component.setNativeProps(
this._propsAnimated.__getAnimatedValue(),
);
} else {
throw new Error(
'Attempting to run JS driven animation on animated ' +
'node that has been moved to "native" earlier by starting an ' +
'animation with `useNativeDriver: true`',
);
}
};
_attachProps(nextProps) {
const oldPropsAnimated = this._propsAnimated;
this._propsAnimated = new AnimatedProps(
nextProps,
this._animatedPropsCallback,
);
// The system is best designed when setNativeProps is implemented. It is
// able to avoid re-rendering and directly set the attributes that
// changed. However, setNativeProps can only be implemented on leaf
// native components. If you want to animate a composite component, you
// need to re-render it. In this case, we have a fallback that uses
// forceUpdate.
const callback = () => {
if (
!AnimatedComponent.__skipSetNativeProps_FOR_TESTS_ONLY &&
this._component.setNativeProps
) {
if (!this._propsAnimated.__isNative) {
this._component.setNativeProps(
this._propsAnimated.__getAnimatedValue(),
);
} else {
throw new Error(
'Attempting to run JS driven animation on animated ' +
'node that has been moved to "native" earlier by starting an ' +
'animation with `useNativeDriver: true`',
);
}
} else {
this.forceUpdate();
}
};
this._propsAnimated = new AnimatedProps(nextProps, callback);
// When you call detach, it removes the element from the parent list
// of children. If it goes to 0, then the parent also detaches itself
@@ -127,7 +114,7 @@ function createAnimatedComponent(Component: any): any {
oldPropsAnimated && oldPropsAnimated.__detach();
}
UNSAFE_componentWillReceiveProps(newProps) {
componentWillReceiveProps(newProps) {
this._attachProps(newProps);
}
@@ -149,7 +136,7 @@ function createAnimatedComponent(Component: any): any {
ref={this._setComponentRef}
// The native driver updates views directly through the UI thread so we
// have to make sure the view doesn't get optimized away because it cannot
// go through the NativeViewHierarchyManager since it operates on the shadow
// go through the NativeViewHierachyManager since it operates on the shadow
// thread.
collapsable={
this._propsAnimated.__isNative ? false : props.collapsable
@@ -170,7 +157,13 @@ function createAnimatedComponent(Component: any): any {
}
}
const propTypes = Component.propTypes;
// ReactNative `View.propTypes` have been deprecated in favor of
// `ViewPropTypes`. In their place a temporary getter has been added with a
// deprecated warning message. Avoid triggering that warning here by using
// temporary workaround, __propTypesSecretDontUseThesePlease.
// TODO (bvaughn) Revert this particular change any time after April 1
const propTypes =
Component.__propTypesSecretDontUseThesePlease || Component.propTypes;
AnimatedComponent.propTypes = {
style: function(props, propName, componentName) {
@@ -374,7 +374,7 @@ class AnimatedInterpolation extends AnimatedWithChildren {
return {
inputRange: this._config.inputRange,
// Only the `outputRange` can contain strings so we don't need to transform `inputRange` here
// Only the `outputRange` can contain strings so we don't need to tranform `inputRange` here
outputRange: this.__transformDataType(this._config.outputRange),
extrapolateLeft:
this._config.extrapolateLeft || this._config.extrapolate || 'extend',
+3 -32
View File
@@ -68,8 +68,6 @@ function _flush(rootNode: AnimatedValue): void {
* multiple properties in a synchronized fashion, but can only be driven by one
* mechanism at a time. Using a new mechanism (e.g. starting a new animation,
* or calling `setValue`) will stop any previous ones.
*
* See http://facebook.github.io/react-native/docs/animatedvalue.html
*/
class AnimatedValue extends AnimatedWithChildren {
_value: number;
@@ -108,8 +106,6 @@ class AnimatedValue extends AnimatedWithChildren {
/**
* Directly set the value. This will stop any animations running on the value
* and update all the bound properties.
*
* See http://facebook.github.io/react-native/docs/animatedvalue.html#setvalue
*/
setValue(value: number): void {
if (this._animation) {
@@ -129,8 +125,6 @@ class AnimatedValue extends AnimatedWithChildren {
* Sets an offset that is applied on top of whatever value is set, whether via
* `setValue`, an animation, or `Animated.event`. Useful for compensating
* things like the start of a pan gesture.
*
* See http://facebook.github.io/react-native/docs/animatedvalue.html#setoffset
*/
setOffset(offset: number): void {
this._offset = offset;
@@ -142,8 +136,6 @@ class AnimatedValue extends AnimatedWithChildren {
/**
* Merges the offset value into the base value and resets the offset to zero.
* The final output of the value is unchanged.
*
* See http://facebook.github.io/react-native/docs/animatedvalue.html#flattenoffset
*/
flattenOffset(): void {
this._value += this._offset;
@@ -156,8 +148,6 @@ class AnimatedValue extends AnimatedWithChildren {
/**
* Sets the offset value to the base value, and resets the base value to zero.
* The final output of the value is unchanged.
*
* See http://facebook.github.io/react-native/docs/animatedvalue.html#extractoffset
*/
extractOffset(): void {
this._offset += this._value;
@@ -171,8 +161,6 @@ class AnimatedValue extends AnimatedWithChildren {
* Adds an asynchronous listener to the value so you can observe updates from
* animations. This is useful because there is no way to
* synchronously read the value because it might be driven natively.
*
* See http://facebook.github.io/react-native/docs/animatedvalue.html#addlistener
*/
addListener(callback: ValueListenerCallback): string {
const id = String(_uniqueId++);
@@ -183,12 +171,6 @@ class AnimatedValue extends AnimatedWithChildren {
return id;
}
/**
* Unregister a listener. The `id` param shall match the identifier
* previously returned by `addListener()`.
*
* See http://facebook.github.io/react-native/docs/animatedvalue.html#removelistener
*/
removeListener(id: string): void {
delete this._listeners[id];
if (this.__isNative && Object.keys(this._listeners).length === 0) {
@@ -196,11 +178,6 @@ class AnimatedValue extends AnimatedWithChildren {
}
}
/**
* Remove all registered listeners.
*
* See http://facebook.github.io/react-native/docs/animatedvalue.html#removealllisteners
*/
removeAllListeners(): void {
this._listeners = {};
if (this.__isNative) {
@@ -236,11 +213,9 @@ class AnimatedValue extends AnimatedWithChildren {
}
/**
* Stops any running animation or tracking. `callback` is invoked with the
* Stops any running animation or tracking. `callback` is invoked with the
* final value after stopping the animation, which is useful for updating
* state to match the animation position with layout.
*
* See http://facebook.github.io/react-native/docs/animatedvalue.html#stopanimation
*/
stopAnimation(callback?: ?(value: number) => void): void {
this.stopTracking();
@@ -250,10 +225,8 @@ class AnimatedValue extends AnimatedWithChildren {
}
/**
* Stops any animation and resets the value to its original.
*
* See http://facebook.github.io/react-native/docs/animatedvalue.html#resetanimation
*/
* Stops any animation and resets the value to its original
*/
resetAnimation(callback?: ?(value: number) => void): void {
this.stopAnimation(callback);
this._value = this._startingValue;
@@ -270,8 +243,6 @@ class AnimatedValue extends AnimatedWithChildren {
/**
* Typically only used internally, but could be used by a custom Animation
* class.
*
* See http://facebook.github.io/react-native/docs/animatedvalue.html#animate
*/
animate(animation: Animation, callback: ?EndCallback): void {
let handle = null;
+49 -66
View File
@@ -22,10 +22,44 @@ type ValueXYListenerCallback = (value: {x: number, y: number}) => void;
let _uniqueId = 1;
/**
* 2D Value for driving 2D animations, such as pan gestures. Almost identical
* API to normal `Animated.Value`, but multiplexed.
* 2D Value for driving 2D animations, such as pan gestures. Almost identical
* API to normal `Animated.Value`, but multiplexed. Contains two regular
* `Animated.Value`s under the hood.
*
* See http://facebook.github.io/react-native/docs/animatedvaluexy.html
* #### Example
*
*```javascript
* class DraggableView extends React.Component {
* constructor(props) {
* super(props);
* this.state = {
* pan: new Animated.ValueXY(), // inits to zero
* };
* this.state.panResponder = PanResponder.create({
* onStartShouldSetPanResponder: () => true,
* onPanResponderMove: Animated.event([null, {
* dx: this.state.pan.x, // x,y are Animated.Value
* dy: this.state.pan.y,
* }]),
* onPanResponderRelease: () => {
* Animated.spring(
* this.state.pan, // Auto-multiplexed
* {toValue: {x: 0, y: 0}} // Back to zero
* ).start();
* },
* });
* }
* render() {
* return (
* <Animated.View
* {...this.state.panResponder.panHandlers}
* style={this.state.pan.getLayout()}>
* {this.props.children}
* </Animated.View>
* );
* }
* }
*```
*/
class AnimatedValueXY extends AnimatedWithChildren {
x: AnimatedValue;
@@ -33,7 +67,7 @@ class AnimatedValueXY extends AnimatedWithChildren {
_listeners: {[key: string]: {x: string, y: string}};
constructor(
valueIn?: ?{+x: number | AnimatedValue, +y: number | AnimatedValue},
valueIn?: ?{x: number | AnimatedValue, y: number | AnimatedValue},
) {
super();
const value: any = valueIn || {x: 0, y: 0}; // @flowfixme: shouldn't need `: any`
@@ -43,7 +77,7 @@ class AnimatedValueXY extends AnimatedWithChildren {
} else {
invariant(
value.x instanceof AnimatedValue && value.y instanceof AnimatedValue,
'AnimatedValueXY must be initialized with an object of numbers or ' +
'AnimatedValueXY must be initalized with an object of numbers or ' +
'AnimatedValues.',
);
this.x = value.x;
@@ -52,46 +86,21 @@ class AnimatedValueXY extends AnimatedWithChildren {
this._listeners = {};
}
/**
* Directly set the value. This will stop any animations running on the value
* and update all the bound properties.
*
* See http://facebook.github.io/react-native/docs/animatedvaluexy.html#setvalue
*/
setValue(value: {x: number, y: number}) {
this.x.setValue(value.x);
this.y.setValue(value.y);
}
/**
* Sets an offset that is applied on top of whatever value is set, whether
* via `setValue`, an animation, or `Animated.event`. Useful for compensating
* things like the start of a pan gesture.
*
* See http://facebook.github.io/react-native/docs/animatedvaluexy.html#setoffset
*/
setOffset(offset: {x: number, y: number}) {
this.x.setOffset(offset.x);
this.y.setOffset(offset.y);
}
/**
* Merges the offset value into the base value and resets the offset to zero.
* The final output of the value is unchanged.
*
* See http://facebook.github.io/react-native/docs/animatedvaluexy.html#flattenoffset
*/
flattenOffset(): void {
this.x.flattenOffset();
this.y.flattenOffset();
}
/**
* Sets the offset value to the base value, and resets the base value to
* zero. The final output of the value is unchanged.
*
* See http://facebook.github.io/react-native/docs/animatedvaluexy.html#extractoffset
*/
extractOffset(): void {
this.x.extractOffset();
this.y.extractOffset();
@@ -104,39 +113,18 @@ class AnimatedValueXY extends AnimatedWithChildren {
};
}
/**
* Stops any animation and resets the value to its original.
*
* See http://facebook.github.io/react-native/docs/animatedvaluexy.html#resetanimation
*/
resetAnimation(callback?: (value: {x: number, y: number}) => void): void {
this.x.resetAnimation();
this.y.resetAnimation();
callback && callback(this.__getValue());
}
/**
* Stops any running animation or tracking. `callback` is invoked with the
* final value after stopping the animation, which is useful for updating
* state to match the animation position with layout.
*
* See http://facebook.github.io/react-native/docs/animatedvaluexy.html#stopanimation
*/
stopAnimation(callback?: (value: {x: number, y: number}) => void): void {
this.x.stopAnimation();
this.y.stopAnimation();
callback && callback(this.__getValue());
}
/**
* Adds an asynchronous listener to the value so you can observe updates from
* animations. This is useful because there is no way to synchronously read
* the value because it might be driven natively.
*
* Returns a string that serves as an identifier for the listener.
*
* See http://facebook.github.io/react-native/docs/animatedvaluexy.html#addlistener
*/
addListener(callback: ValueXYListenerCallback): string {
const id = String(_uniqueId++);
const jointCallback = ({value: number}) => {
@@ -149,23 +137,12 @@ class AnimatedValueXY extends AnimatedWithChildren {
return id;
}
/**
* Unregister a listener. The `id` param shall match the identifier
* previously returned by `addListener()`.
*
* See http://facebook.github.io/react-native/docs/animatedvaluexy.html#removelistener
*/
removeListener(id: string): void {
this.x.removeListener(this._listeners[id].x);
this.y.removeListener(this._listeners[id].y);
delete this._listeners[id];
}
/**
* Remove all registered listeners.
*
* See http://facebook.github.io/react-native/docs/animatedvaluexy.html#removealllisteners
*/
removeAllListeners(): void {
this.x.removeAllListeners();
this.y.removeAllListeners();
@@ -173,9 +150,11 @@ class AnimatedValueXY extends AnimatedWithChildren {
}
/**
* Converts `{x, y}` into `{left, top}` for use in style.
* Converts `{x, y}` into `{left, top}` for use in style, e.g.
*
* See http://facebook.github.io/react-native/docs/animatedvaluexy.html#getlayout
*```javascript
* style={this.state.anim.getLayout()}
*```
*/
getLayout(): {[key: string]: AnimatedValue} {
return {
@@ -185,9 +164,13 @@ class AnimatedValueXY extends AnimatedWithChildren {
}
/**
* Converts `{x, y}` into a useable translation transform.
* Converts `{x, y}` into a useable translation transform, e.g.
*
* See http://facebook.github.io/react-native/docs/animatedvaluexy.html#gettranslatetransform
*```javascript
* style={{
* transform: this.state.anim.getTranslateTransform()
* }}
*```
*/
getTranslateTransform(): Array<{[key: string]: AnimatedValue}> {
return [{translateX: this.x}, {translateY: this.y}];
+77 -23
View File
@@ -23,8 +23,66 @@ const invariant = require('fbjs/lib/invariant');
* `AppState` can tell you if the app is in the foreground or background,
* and notify you when the state changes.
*
* See http://facebook.github.io/react-native/docs/appstate.html
* AppState is frequently used to determine the intent and proper behavior when
* handling push notifications.
*
* ### App States
*
* - `active` - The app is running in the foreground
* - `background` - The app is running in the background. The user is either
* in another app or on the home screen
* - `inactive` - This is a state that occurs when transitioning between
* foreground & background, and during periods of inactivity such as
* entering the Multitasking view or in the event of an incoming call
*
* For more information, see
* [Apple's documentation](https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/TheAppLifeCycle/TheAppLifeCycle.html)
*
* ### Basic Usage
*
* To see the current state, you can check `AppState.currentState`, which
* will be kept up-to-date. However, `currentState` will be null at launch
* while `AppState` retrieves it over the bridge.
*
* ```
* import React, {Component} from 'react'
* import {AppState, Text} from 'react-native'
*
* class AppStateExample extends Component {
*
* state = {
* appState: AppState.currentState
* }
*
* componentDidMount() {
* AppState.addEventListener('change', this._handleAppStateChange);
* }
*
* componentWillUnmount() {
* AppState.removeEventListener('change', this._handleAppStateChange);
* }
*
* _handleAppStateChange = (nextAppState) => {
* if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
* console.log('App has come to the foreground!')
* }
* this.setState({appState: nextAppState});
* }
*
* render() {
* return (
* <Text>Current state is: {this.state.appState}</Text>
* );
* }
*
* }
* ```
*
* This example will only ever appear to say "Current state is: active" because
* the app is only visible to the user when in the `active` state, and the null
* state will happen only momentarily.
*/
class AppState extends NativeEventEmitter {
_eventHandlers: Object;
@@ -46,10 +104,10 @@ class AppState extends NativeEventEmitter {
let eventUpdated = false;
// TODO: this is a terrible solution - in order to ensure `currentState`
// prop is up to date, we have to register an observer that updates it
// whenever the state changes, even if nobody cares. We should just
// deprecate the `currentState` property and get rid of this.
// TODO: this is a terrible solution - in order to ensure `currentState` prop
// is up to date, we have to register an observer that updates it whenever
// the state changes, even if nobody cares. We should just deprecate the
// `currentState` property and get rid of this.
this.addListener(
'appStateDidChange',
(appStateData) => {
@@ -59,8 +117,8 @@ class AppState extends NativeEventEmitter {
);
// TODO: see above - this request just populates the value of `currentState`
// when the module is first initialized. Would be better to get rid of the
// prop and expose `getCurrentAppState` method directly.
// when the module is first initialized. Would be better to get rid of the prop
// and expose `getCurrentAppState` method directly.
RCTAppState.getCurrentAppState(
(appStateData) => {
if (!eventUpdated) {
@@ -71,16 +129,15 @@ class AppState extends NativeEventEmitter {
);
}
// TODO: now that AppState is a subclass of NativeEventEmitter, we could
// deprecate `addEventListener` and `removeEventListener` and just use
// addListener` and `listener.remove()` directly. That will be a breaking
// change though, as both the method and event names are different
// (addListener events are currently required to be globally unique).
/**
/**
* Add a handler to AppState changes by listening to the `change` event type
* and providing the handler.
*
* See http://facebook.github.io/react-native/docs/appstate.html#addeventlistener
* and providing the handler
*
* TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate
* `addEventListener` and `removeEventListener` and just use `addListener` and
* `listener.remove()` directly. That will be a breaking change though, as both
* the method and event names are different (addListener events are currently
* required to be globally unique).
*/
addEventListener(
type: string,
@@ -106,9 +163,7 @@ class AppState extends NativeEventEmitter {
}
/**
* Remove a handler by passing the `change` event type and the handler.
*
* See http://facebook.github.io/react-native/docs/appstate.html#removeeventlistener
* Remove a handler by passing the `change` event type and the handler
*/
removeEventListener(
type: string,
@@ -145,10 +200,9 @@ if (__DEV__ && !RCTAppState) {
}
}
// This module depends on the native `RCTAppState` module. If you don't
// include it, `AppState.isAvailable` will return `false`, and any method
// calls will throw. We reassign the class variable to keep the autodoc
// generator happy.
// This module depends on the native `RCTAppState` module. If you don't include it,
// `AppState.isAvailable` will return `false`, and any method calls will throw.
// We reassign the class variable to keep the autodoc generator happy.
AppState = new MissingNativeAppStateShim();
} else {
AppState = new AppState();
+2 -14
View File
@@ -8,25 +8,13 @@
*
* @providesModule BatchedBridge
* @flow
* @format
*/
'use strict';
const MessageQueue = require('MessageQueue');
// MessageQueue can install a global handler to catch all exceptions where JS users can register their own behavior
// This handler makes all exceptions to be handled inside MessageQueue rather than by the VM at its origin
// This makes stacktraces to be placed at MessageQueue rather than at where they were launched
// The parameter __fbUninstallRNGlobalErrorHandler is passed to MessageQueue to prevent the handler from being installed
//
// __fbUninstallRNGlobalErrorHandler is conditionally set by the Inspector while the VM is paused for initialization
// If the Inspector isn't present it defaults to undefined and the global error handler is installed
// The Inspector can still call MessageQueue#uninstallGlobalErrorHandler to uninstalled on attach
const BatchedBridge = new MessageQueue(
// $FlowFixMe
typeof __fbUninstallRNGlobalErrorHandler !== 'undefined' &&
__fbUninstallRNGlobalErrorHandler === true, // eslint-disable-line no-undef
);
const BatchedBridge = new MessageQueue();
// Wire up the batched bridge on the global object so that we can call into it.
// Ideally, this would be the inverse relationship. I.e. the native environment
+120 -115
View File
@@ -11,6 +11,8 @@
* @format
*/
/*eslint no-bitwise: 0*/
'use strict';
const ErrorUtils = require('ErrorUtils');
@@ -24,7 +26,11 @@ export type SpyData = {
type: number,
module: ?string,
method: string | number,
args: any[],
isSync: boolean,
successCbId: number,
failCbId: number,
args: Array<any>,
returnValue?: any,
};
const TO_JS = 0;
@@ -35,33 +41,30 @@ const METHOD_IDS = 1;
const PARAMS = 2;
const MIN_TIME_BETWEEN_FLUSHES_MS = 5;
// eslint-disable-next-line no-bitwise
const TRACE_TAG_REACT_APPS = 1 << 17;
const DEBUG_INFO_LIMIT = 32;
const DEBUG_INFO_LIMIT = 64;
// Work around an initialization order issue
let JSTimers = null;
class MessageQueue {
_lazyCallableModules: {[key: string]: (void) => Object};
_queue: [number[], number[], any[], number];
_successCallbacks: (?Function)[];
_failureCallbacks: (?Function)[];
_queue: [Array<number>, Array<number>, Array<any>, number];
_successCallbacks: Array<?Function>;
_failureCallbacks: Array<?Function>;
_callID: number;
_inCall: number;
_lastFlush: number;
_eventLoopStartTime: number;
_debugInfo: {[number]: [number, number]};
_remoteModuleTable: {[number]: string};
_remoteMethodTable: {[number]: string[]};
_debugInfo: Object;
_remoteModuleTable: Object;
_remoteMethodTable: Object;
__spy: ?(data: SpyData) => void;
__guard: (() => void) => void;
constructor(shouldUninstallGlobalErrorHandler: boolean = false) {
constructor() {
this._lazyCallableModules = {};
this._queue = [[], [], [], 0];
this._successCallbacks = [];
@@ -69,34 +72,17 @@ class MessageQueue {
this._callID = 0;
this._lastFlush = 0;
this._eventLoopStartTime = new Date().getTime();
if (shouldUninstallGlobalErrorHandler) {
this.uninstallGlobalErrorHandler();
} else {
this.installGlobalErrorHandler();
}
if (__DEV__) {
this._debugInfo = {};
this._remoteModuleTable = {};
this._remoteMethodTable = {};
}
(this: any).callFunctionReturnFlushedQueue = this.callFunctionReturnFlushedQueue.bind(
this,
);
(this: any).callFunctionReturnResultAndFlushedQueue = this.callFunctionReturnResultAndFlushedQueue.bind(
this,
);
(this: any).flushedQueue = this.flushedQueue.bind(this);
(this: any).invokeCallbackAndReturnFlushedQueue = this.invokeCallbackAndReturnFlushedQueue.bind(
this,
);
}
/**
* Public APIs
*/
static spy(spyOrToggle: boolean | ((data: SpyData) => void)) {
if (spyOrToggle === true) {
MessageQueue.prototype.__spy = info => {
@@ -113,36 +99,40 @@ class MessageQueue {
}
}
callFunctionReturnFlushedQueue(module: string, method: string, args: any[]) {
callFunctionReturnFlushedQueue = (
module: string,
method: string,
args: Array<any>,
) => {
this.__guard(() => {
this.__callFunction(module, method, args);
});
return this.flushedQueue();
}
};
callFunctionReturnResultAndFlushedQueue(
callFunctionReturnResultAndFlushedQueue = (
module: string,
method: string,
args: any[],
) {
args: Array<any>,
) => {
let result;
this.__guard(() => {
result = this.__callFunction(module, method, args);
});
return [result, this.flushedQueue()];
}
};
invokeCallbackAndReturnFlushedQueue(cbID: number, args: any[]) {
invokeCallbackAndReturnFlushedQueue = (cbID: number, args: Array<any>) => {
this.__guard(() => {
this.__invokeCallback(cbID, args);
});
return this.flushedQueue();
}
};
flushedQueue() {
flushedQueue = () => {
this.__guard(() => {
this.__callImmediates();
});
@@ -150,7 +140,7 @@ class MessageQueue {
const queue = this._queue;
this._queue = [[], [], [], this._callID];
return queue[0].length ? queue : null;
}
};
getEventLoopRunningTime() {
return new Date().getTime() - this._eventLoopStartTime;
@@ -180,7 +170,7 @@ class MessageQueue {
enqueueNativeCall(
moduleID: number,
methodID: number,
params: any[],
params: Array<any>,
onFail: ?Function,
onSucc: ?Function,
) {
@@ -193,9 +183,7 @@ class MessageQueue {
}
// Encode callIDs into pairs of callback identifiers by shifting left and using the rightmost bit
// to indicate fail (0) or success (1)
// eslint-disable-next-line no-bitwise
onFail && params.push(this._callID << 1);
// eslint-disable-next-line no-bitwise
onSucc && params.push((this._callID << 1) | 1);
this._successCallbacks[this._callID] = onSucc;
this._failureCallbacks[this._callID] = onFail;
@@ -215,40 +203,8 @@ class MessageQueue {
this._queue[METHOD_IDS].push(methodID);
if (__DEV__) {
// Validate that parameters passed over the bridge are
// folly-convertible. As a special case, if a prop value is a
// function it is permitted here, and special-cased in the
// conversion.
const isValidArgument = val => {
const t = typeof val;
if (
t === 'undefined' ||
t === 'null' ||
t === 'boolean' ||
t === 'number' ||
t === 'string'
) {
return true;
}
if (t === 'function' || t !== 'object') {
return false;
}
if (Array.isArray(val)) {
return val.every(isValidArgument);
}
for (const k in val) {
if (typeof val[k] !== 'function' && !isValidArgument(val[k])) {
return false;
}
}
return true;
};
invariant(
isValidArgument(params),
'%s is not usable as a native method argument',
params,
);
// Any params sent over the bridge should be encodable as JSON
JSON.stringify(params);
// The params object should not be mutated after being queued
deepFreezeAndThrowOnMutationInDev((params: any));
@@ -267,50 +223,47 @@ class MessageQueue {
global.nativeFlushQueueImmediate(queue);
}
Systrace.counterEvent('pending_js_to_native_queue', this._queue[0].length);
if (__DEV__ && this.__spy && isFinite(moduleID)) {
this.__spy({
type: TO_NATIVE,
module: this._remoteModuleTable[moduleID],
method: this._remoteMethodTable[moduleID][methodID],
args: params,
});
} else if (this.__spy) {
this.__spy({
type: TO_NATIVE,
module: moduleID + '',
method: methodID,
args: params,
if (this.__spy) {
this.__spyNativeCall(moduleID, methodID, params, {
failCbId: onFail ? params[params.length - 2] : -1,
successCbId: onSucc ? params[params.length - 1] : -1,
});
}
}
createDebugLookup(moduleID: number, name: string, methods: string[]) {
callSyncHook(moduleID: number, methodID: number, args: Array<any>) {
if (__DEV__) {
invariant(
global.nativeCallSyncHook,
'Calling synchronous methods on native ' +
'modules is not supported in Chrome.\n\n Consider providing alternative ' +
'methods to expose this method in debug mode, e.g. by exposing constants ' +
'ahead-of-time.',
);
}
const returnValue = global.nativeCallSyncHook(moduleID, methodID, args);
if (this.__spy) {
this.__spyNativeCall(moduleID, methodID, args, {
isSync: true,
returnValue,
});
}
return returnValue;
}
createDebugLookup(moduleID: number, name: string, methods: Array<string>) {
if (__DEV__) {
this._remoteModuleTable[moduleID] = name;
this._remoteMethodTable[moduleID] = methods;
}
}
uninstallGlobalErrorHandler() {
this.__guard = this.__guardUnsafe;
}
installGlobalErrorHandler() {
this.__guard = this.__guardSafe;
}
/**
* Private methods
*/
// Lets exceptions propagate to be handled by the VM at the origin
__guardUnsafe(fn: () => void) {
this._inCall++;
fn();
this._inCall--;
}
__guardSafe(fn: () => void) {
__guard(fn: () => void) {
this._inCall++;
try {
fn();
@@ -330,12 +283,12 @@ class MessageQueue {
Systrace.endEvent();
}
__callFunction(module: string, method: string, args: any[]): any {
__callFunction(module: string, method: string, args: Array<any>) {
this._lastFlush = new Date().getTime();
this._eventLoopStartTime = this._lastFlush;
Systrace.beginEvent(`${module}.${method}()`);
if (this.__spy) {
this.__spy({type: TO_JS, module, method, args});
this.__spyJSCall(module, method, args);
}
const moduleMethods = this.getCallableModule(module);
invariant(
@@ -355,14 +308,12 @@ class MessageQueue {
return result;
}
__invokeCallback(cbID: number, args: any[]) {
__invokeCallback(cbID: number, args: Array<any>) {
this._lastFlush = new Date().getTime();
this._eventLoopStartTime = this._lastFlush;
// The rightmost bit of cbID indicates fail (0) or success (1), the other bits are the callID shifted left.
// eslint-disable-next-line no-bitwise
const callID = cbID >>> 1;
// eslint-disable-next-line no-bitwise
const isSuccess = cbID & 1;
const callback = isSuccess
? this._successCallbacks[callID]
@@ -383,9 +334,12 @@ class MessageQueue {
}
const profileName = debug
? '<callback for ' + module + '.' + method + '>'
: cbID;
if (callback && this.__spy) {
this.__spy({type: TO_JS, module: null, method: profileName, args});
: cbID + '';
if (this.__spy) {
this.__spyJSCall(null, profileName, args, {
failCbId: isSuccess ? -1 : cbID,
successCbId: isSuccess ? cbID : -1,
});
}
Systrace.beginEvent(
`MessageQueue.invokeCallback(${profileName}, ${stringifySafe(args)})`,
@@ -397,12 +351,63 @@ class MessageQueue {
}
this._successCallbacks[callID] = this._failureCallbacks[callID] = null;
callback(...args);
callback.apply(null, args);
if (__DEV__) {
Systrace.endEvent();
}
}
__spyJSCall(
module: ?string,
method: string,
methodArgs: Array<any>,
params: any,
) {
if (!this.__spy) {
return;
}
this.__spy({
type: TO_JS,
isSync: false,
module,
method,
failCbId: -1,
successCbId: -1,
args: methodArgs,
...params,
});
}
__spyNativeCall(
moduleID: number,
methodID: number,
methodArgs: Array<any>,
params: any,
) {
const spy = this.__spy;
if (!spy) {
return;
}
let moduleName = moduleID + '';
let methodName = methodID;
if (__DEV__ && isFinite(moduleID)) {
moduleName = this._remoteModuleTable[moduleID];
methodName = this._remoteMethodTable[moduleID][methodID];
}
spy({
type: TO_NATIVE,
isSync: false,
module: moduleName,
method: methodName,
failCbId: -1,
successCbId: -1,
args: methodArgs,
...params,
});
}
}
module.exports = MessageQueue;
+1 -7
View File
@@ -82,13 +82,7 @@ function genMethod(moduleID: number, methodID: number, type: MethodType) {
};
} else if (type === 'sync') {
fn = function(...args: Array<any>) {
if (__DEV__) {
invariant(global.nativeCallSyncHook, 'Calling synchronous methods on native ' +
'modules is not supported in Chrome.\n\n Consider providing alternative ' +
'methods to expose this method in debug mode, e.g. by exposing constants ' +
'ahead-of-time.');
}
return global.nativeCallSyncHook(moduleID, methodID, args);
return BatchedBridge.callSyncHook(moduleID, methodID, args);
};
} else {
fn = function(...args: Array<any>) {
@@ -6,8 +6,6 @@
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @emails oncall+react_native
* @format
*/
'use strict';
@@ -39,12 +37,10 @@ describe('MessageQueue', function() {
queue = new MessageQueue();
queue.registerCallableModule(
'MessageQueueTestModule',
MessageQueueTestModule,
MessageQueueTestModule
);
queue.createDebugLookup(0, 'MessageQueueTestModule', [
'testHook1',
'testHook2',
]);
queue.createDebugLookup(0, 'MessageQueueTestModule',
['testHook1', 'testHook2']);
});
it('should enqueue native calls', () => {
@@ -54,10 +50,10 @@ describe('MessageQueue', function() {
});
it('should call a local function with the function name', () => {
MessageQueueTestModule.testHook2 = jest.fn();
expect(MessageQueueTestModule.testHook2.mock.calls.length).toEqual(0);
MessageQueueTestModule.testHook2 = jasmine.createSpy();
expect(MessageQueueTestModule.testHook2.calls.count()).toEqual(0);
queue.__callFunction('MessageQueueTestModule', 'testHook2', [2]);
expect(MessageQueueTestModule.testHook2.mock.calls.length).toEqual(1);
expect(MessageQueueTestModule.testHook2.calls.count()).toEqual(1);
});
it('should store callbacks', () => {
@@ -68,118 +64,50 @@ describe('MessageQueue', function() {
it('should call the stored callback', () => {
let done = false;
queue.enqueueNativeCall(
0,
1,
[],
() => {},
() => {
done = true;
},
);
queue.__invokeCallback(1, []);
queue.enqueueNativeCall(0, 1, [], () => {}, () => { done = true; });
queue.__invokeCallback(1);
expect(done).toEqual(true);
});
it('should throw when calling the same callback twice', () => {
queue.enqueueNativeCall(0, 1, [], () => {}, () => {});
queue.__invokeCallback(1, []);
expect(() => queue.__invokeCallback(1, [])).toThrow();
queue.__invokeCallback(1);
expect(() => queue.__invokeCallback(1)).toThrow();
});
it('should throw when calling both success and failure callback', () => {
queue.enqueueNativeCall(0, 1, [], () => {}, () => {});
queue.__invokeCallback(1, []);
expect(() => queue.__invokeCallback(0, [])).toThrow();
queue.__invokeCallback(1);
expect(() => queue.__invokeCallback(0)).toThrow();
});
it('should throw when calling with unknown module', () => {
const unknownModule = 'UnknownModule',
unknownMethod = 'UnknownMethod';
const unknownModule = 'UnknownModule', unknownMethod = 'UnknownMethod';
expect(() => queue.__callFunction(unknownModule, unknownMethod)).toThrow(
`Module ${unknownModule} is not a registered callable module (calling ${unknownMethod})`,
);
});
it('should return lazily registered module', () => {
const dummyModule = {},
name = 'modulesName';
const dummyModule = {}, name = 'modulesName';
queue.registerLazyCallableModule(name, () => dummyModule);
expect(queue.getCallableModule(name)).toEqual(dummyModule);
});
it('should not initialize lazily registered module before it was used for the first time', () => {
const dummyModule = {},
name = 'modulesName';
const dummyModule = {}, name = 'modulesName';
const factory = jest.fn(() => dummyModule);
queue.registerLazyCallableModule(name, factory);
expect(factory).not.toHaveBeenCalled();
});
it('should initialize lazily registered module only once', () => {
const dummyModule = {},
name = 'modulesName';
const dummyModule = {}, name = 'modulesName';
const factory = jest.fn(() => dummyModule);
queue.registerLazyCallableModule(name, factory);
queue.getCallableModule(name);
queue.getCallableModule(name);
expect(factory).toHaveBeenCalledTimes(1);
});
it('should catch all exceptions if the global error handler is installed', () => {
const errorMessage = 'intentional error';
const errorModule = {
explode: function() {
throw new Error(errorMessage);
},
};
const name = 'errorModuleName';
const factory = jest.fn(() => errorModule);
queue.__guardSafe = jest.fn(() => {});
queue.__guardUnsafe = jest.fn(() => {});
queue.installGlobalErrorHandler();
queue.registerLazyCallableModule(name, factory);
queue.callFunctionReturnFlushedQueue(name, 'explode', []);
expect(queue.__guardUnsafe).toHaveBeenCalledTimes(0);
expect(queue.__guardSafe).toHaveBeenCalledTimes(2);
});
it('should propagate exceptions if the global error handler is uninstalled', () => {
queue.uninstallGlobalErrorHandler();
const errorMessage = 'intentional error';
const errorModule = {
explode: function() {
throw new Error(errorMessage);
},
};
const name = 'errorModuleName';
const factory = jest.fn(() => errorModule);
queue.__guardUnsafe = jest.fn(() => {});
queue.__guardSafe = jest.fn(() => {});
queue.registerLazyCallableModule(name, factory);
queue.uninstallGlobalErrorHandler();
queue.callFunctionReturnFlushedQueue(name, 'explode');
expect(queue.__guardUnsafe).toHaveBeenCalledTimes(2);
expect(queue.__guardSafe).toHaveBeenCalledTimes(0);
});
it('should catch all exceptions if the global error handler is re-installed', () => {
const errorMessage = 'intentional error';
const errorModule = {
explode: function() {
throw new Error(errorMessage);
},
};
const name = 'errorModuleName';
const factory = jest.fn(() => errorModule);
queue.__guardUnsafe = jest.fn(() => {});
queue.__guardSafe = jest.fn(() => {});
queue.registerLazyCallableModule(name, factory);
queue.uninstallGlobalErrorHandler();
queue.installGlobalErrorHandler();
queue.callFunctionReturnFlushedQueue(name, 'explode');
expect(queue.__guardUnsafe).toHaveBeenCalledTimes(0);
expect(queue.__guardSafe).toHaveBeenCalledTimes(2);
});
});
@@ -6,7 +6,6 @@
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @emails oncall+react_native
*/
'use strict';
@@ -57,8 +56,8 @@ describe('MessageQueue', function() {
});
it('should make round trip and clear memory', function() {
const onFail = jest.fn();
const onSucc = jest.fn();
const onFail = jasmine.createSpy();
const onSucc = jasmine.createSpy();
// Perform communication
NativeModules.RemoteModule1.promiseMethod('paloAlto', 'menloPark', onFail, onSucc);
@@ -98,8 +97,8 @@ describe('MessageQueue', function() {
expect(function() {
BatchedBridge.__invokeCallback(firstSuccCBID, ['firstSucc']);
}).toThrow();
expect(onFail.mock.calls.length).toBe(1);
expect(onSucc.mock.calls.length).toBe(0);
expect(onFail.calls.count()).toBe(1);
expect(onSucc.calls.count()).toBe(0);
// Handle the second remote invocation by signaling success.
BatchedBridge.__invokeCallback(secondSuccCBID, ['secondSucc']);
@@ -107,7 +106,7 @@ describe('MessageQueue', function() {
expect(function() {
BatchedBridge.__invokeCallback(secondFailCBID, ['secondFail']);
}).toThrow();
expect(onFail.mock.calls.length).toBe(1);
expect(onSucc.mock.calls.length).toBe(1);
expect(onFail.calls.count()).toBe(1);
expect(onSucc.calls.count()).toBe(1);
});
});
+50 -41
View File
@@ -8,12 +8,16 @@
*
* @providesModule Blob
* @flow
* @format
*/
'use strict';
import type {BlobData, BlobOptions} from 'BlobTypes';
const invariant = require('fbjs/lib/invariant');
const uuid = require('uuid');
const { BlobModule } = require('NativeModules');
import type { BlobProps } from 'BlobTypes';
/**
* Opaque JS representation of some binary data in native.
@@ -53,16 +57,51 @@ import type {BlobData, BlobOptions} from 'BlobTypes';
* Reference: https://developer.mozilla.org/en-US/docs/Web/API/Blob
*/
class Blob {
_data: ?BlobData;
/**
* Size of the data contained in the Blob object, in bytes.
*/
size: number;
/*
* String indicating the MIME type of the data contained in the Blob.
* If the type is unknown, this string is empty.
*/
type: string;
/*
* Unique id to identify the blob on native side (non-standard)
*/
blobId: string;
/*
* Offset to indicate part of blob, used when sliced (non-standard)
*/
offset: number;
/**
* Construct blob instance from blob data from native.
* Used internally by modules like XHR, WebSocket, etc.
*/
static create(props: BlobProps): Blob {
return Object.assign(Object.create(Blob.prototype), props);
}
/**
* Constructor for JS consumers.
* Currently we only support creating Blobs from other Blobs.
* Reference: https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob
*/
constructor(parts: Array<Blob | string> = [], options?: BlobOptions) {
const BlobManager = require('BlobManager');
this.data = BlobManager.createFromParts(parts, options).data;
constructor(parts: Array<Blob>, options: any) {
const blobId = uuid();
let size = 0;
parts.forEach((part) => {
invariant(part instanceof Blob, 'Can currently only create a Blob from other Blobs');
size += part.size;
});
BlobModule.createFromParts(parts, blobId);
return Blob.create({
blobId,
offset: 0,
size,
});
}
/*
@@ -70,22 +109,9 @@ class Blob {
* the data in the specified range of bytes of the source Blob.
* Reference: https://developer.mozilla.org/en-US/docs/Web/API/Blob/slice
*/
set data(data: ?BlobData) {
this._data = data;
}
get data(): BlobData {
if (!this._data) {
throw new Error('Blob has been closed and is no longer available');
}
return this._data;
}
slice(start?: number, end?: number): Blob {
const BlobManager = require('BlobManager');
let {offset, size} = this.data;
let offset = this.offset;
let size = this.size;
if (typeof start === 'number') {
if (start > size) {
start = size;
@@ -100,8 +126,8 @@ class Blob {
size = end - start;
}
}
return BlobManager.createFromOptions({
blobId: this.data.blobId,
return Blob.create({
blobId: this.blobId,
offset,
size,
});
@@ -120,24 +146,7 @@ class Blob {
* `new Blob([blob, ...])` actually copies the data in memory.
*/
close() {
const BlobManager = require('BlobManager');
BlobManager.release(this.data.blobId);
this.data = null;
}
/**
* Size of the data contained in the Blob object, in bytes.
*/
get size(): number {
return this.data.size;
}
/*
* String indicating the MIME type of the data contained in the Blob.
* If the type is unknown, this string is empty.
*/
get type(): string {
return this.data.type || '';
BlobModule.release(this.blobId);
}
}
-146
View File
@@ -1,146 +0,0 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule BlobManager
* @flow
* @format
*/
'use strict';
const Blob = require('Blob');
const BlobRegistry = require('BlobRegistry');
const {BlobModule} = require('NativeModules');
import type {BlobData, BlobOptions} from 'BlobTypes';
/*eslint-disable no-bitwise */
/*eslint-disable eqeqeq */
/**
* Based on the rfc4122-compliant solution posted at
* http://stackoverflow.com/questions/105034
*/
function uuidv4(): string {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
const r = (Math.random() * 16) | 0,
v = c == 'x' ? r : (r & 0x3) | 0x8;
return v.toString(16);
});
}
/**
* Module to manage blobs. Wrapper around the native blob module.
*/
class BlobManager {
/**
* If the native blob module is available.
*/
static isAvailable = !!BlobModule;
/**
* Create blob from existing array of blobs.
*/
static createFromParts(
parts: Array<Blob | string>,
options?: BlobOptions,
): Blob {
const blobId = uuidv4();
const items = parts.map(part => {
if (
part instanceof ArrayBuffer ||
(global.ArrayBufferView && part instanceof global.ArrayBufferView)
) {
throw new Error(
"Creating blobs from 'ArrayBuffer' and 'ArrayBufferView' are not supported",
);
}
if (part instanceof Blob) {
return {
data: part.data,
type: 'blob',
};
} else {
return {
data: String(part),
type: 'string',
};
}
});
const size = items.reduce((acc, curr) => {
if (curr.type === 'string') {
return acc + global.unescape(encodeURI(curr.data)).length;
} else {
return acc + curr.data.size;
}
}, 0);
BlobModule.createFromParts(items, blobId);
return BlobManager.createFromOptions({
blobId,
offset: 0,
size,
type: options ? options.type : '',
lastModified: options ? options.lastModified : Date.now(),
});
}
/**
* Create blob instance from blob data from native.
* Used internally by modules like XHR, WebSocket, etc.
*/
static createFromOptions(options: BlobData): Blob {
BlobRegistry.register(options.blobId);
return Object.assign(Object.create(Blob.prototype), {data: options});
}
/**
* Deallocate resources for a blob.
*/
static release(blobId: string): void {
BlobRegistry.unregister(blobId);
if (BlobRegistry.has(blobId)) {
return;
}
BlobModule.release(blobId);
}
/**
* Inject the blob content handler in the networking module to support blob
* requests and responses.
*/
static addNetworkingHandler(): void {
BlobModule.addNetworkingHandler();
}
/**
* Indicate the websocket should return a blob for incoming binary
* messages.
*/
static addWebSocketHandler(socketId: number): void {
BlobModule.addWebSocketHandler(socketId);
}
/**
* Indicate the websocket should no longer return a blob for incoming
* binary messages.
*/
static removeWebSocketHandler(socketId: number): void {
BlobModule.removeWebSocketHandler(socketId);
}
/**
* Send a blob message to a websocket.
*/
static sendOverSocket(blob: Blob, socketId: number): void {
BlobModule.sendOverSocket(blob.data, socketId);
}
}
module.exports = BlobManager;
-41
View File
@@ -1,41 +0,0 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule BlobRegistry
* @flow
* @format
*/
const registry: {[key: string]: number} = {};
const register = (id: string) => {
if (registry[id]) {
registry[id]++;
} else {
registry[id] = 1;
}
};
const unregister = (id: string) => {
if (registry[id]) {
registry[id]--;
if (registry[id] <= 0) {
delete registry[id];
}
}
};
const has = (id: string) => {
return registry[id] && registry[id] > 0;
};
module.exports = {
register,
unregister,
has,
};
+3 -6
View File
@@ -8,21 +8,18 @@
*
* @providesModule BlobTypes
* @flow
* @format
*/
'use strict';
export type BlobData = {
export type BlobProps = {
blobId: string,
offset: number,
size: number,
name?: string,
type?: string,
lastModified?: number,
};
export type BlobOptions = {
type: string,
export type FileProps = BlobProps & {
name: string,
lastModified: number,
};
-58
View File
@@ -1,58 +0,0 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule File
* @flow
* @format
*/
'use strict';
const Blob = require('Blob');
const invariant = require('fbjs/lib/invariant');
import type {BlobOptions} from 'BlobTypes';
/**
* The File interface provides information about files.
*/
class File extends Blob {
/**
* Constructor for JS consumers.
*/
constructor(
parts: Array<Blob | string>,
name: string,
options?: BlobOptions,
) {
invariant(
parts != null && name != null,
'Failed to construct `File`: Must pass both `parts` and `name` arguments.',
);
super(parts, options);
this.data.name = name;
}
/**
* Name of the file.
*/
get name(): string {
invariant(this.data.name != null, 'Files must have a name set.');
return this.data.name;
}
/*
* Last modified time of the file.
*/
get lastModified(): number {
return this.data.lastModified || 0;
}
}
module.exports = File;
-156
View File
@@ -1,156 +0,0 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule FileReader
* @flow
* @format
*/
'use strict';
const EventTarget = require('event-target-shim');
const Blob = require('Blob');
const {FileReaderModule} = require('NativeModules');
type ReadyState =
| 0 // EMPTY
| 1 // LOADING
| 2; // DONE
type ReaderResult = string | ArrayBuffer;
const READER_EVENTS = [
'abort',
'error',
'load',
'loadstart',
'loadend',
'progress',
];
const EMPTY = 0;
const LOADING = 1;
const DONE = 2;
class FileReader extends EventTarget(...READER_EVENTS) {
static EMPTY = EMPTY;
static LOADING = LOADING;
static DONE = DONE;
EMPTY = EMPTY;
LOADING = LOADING;
DONE = DONE;
_readyState: ReadyState;
_error: ?Error;
_result: ?ReaderResult;
_aborted: boolean = false;
_subscriptions: Array<*> = [];
constructor() {
super();
this._reset();
}
_reset(): void {
this._readyState = EMPTY;
this._error = null;
this._result = null;
}
_clearSubscriptions(): void {
this._subscriptions.forEach(sub => sub.remove());
this._subscriptions = [];
}
_setReadyState(newState: ReadyState) {
this._readyState = newState;
this.dispatchEvent({type: 'readystatechange'});
if (newState === DONE) {
if (this._aborted) {
this.dispatchEvent({type: 'abort'});
} else if (this._error) {
this.dispatchEvent({type: 'error'});
} else {
this.dispatchEvent({type: 'load'});
}
this.dispatchEvent({type: 'loadend'});
}
}
readAsArrayBuffer() {
throw new Error('FileReader.readAsArrayBuffer is not implemented');
}
readAsDataURL(blob: Blob) {
this._aborted = false;
FileReaderModule.readAsDataURL(blob.data).then(
(text: string) => {
if (this._aborted) {
return;
}
this._result = text;
this._setReadyState(DONE);
},
error => {
if (this._aborted) {
return;
}
this._error = error;
this._setReadyState(DONE);
},
);
}
readAsText(blob: Blob, encoding: string = 'UTF-8') {
this._aborted = false;
FileReaderModule.readAsText(blob.data, encoding).then(
(text: string) => {
if (this._aborted) {
return;
}
this._result = text;
this._setReadyState(DONE);
},
error => {
if (this._aborted) {
return;
}
this._error = error;
this._setReadyState(DONE);
},
);
}
abort() {
this._aborted = true;
// only call onreadystatechange if there is something to abort, as per spec
if (this._readyState !== EMPTY && this._readyState !== DONE) {
this._reset();
this._setReadyState(DONE);
}
// Reset again after, in case modified in handler
this._reset();
}
get readyState(): ReadyState {
return this._readyState;
}
get error(): ?Error {
return this._error;
}
get result(): ?ReaderResult {
return this._result;
}
}
module.exports = FileReader;
@@ -7,18 +7,12 @@
objects = {
/* Begin PBXBuildFile section */
19BA88FE1F84391700741C5A /* RCTFileReaderModule.h in Copy Headers */ = {isa = PBXBuildFile; fileRef = ADDFBA6A1F33455F0064C998 /* RCTFileReaderModule.h */; };
19BA88FF1F84392900741C5A /* RCTFileReaderModule.h in Headers */ = {isa = PBXBuildFile; fileRef = ADDFBA6A1F33455F0064C998 /* RCTFileReaderModule.h */; };
19BA89001F84392F00741C5A /* RCTFileReaderModule.h in Copy Headers */ = {isa = PBXBuildFile; fileRef = ADDFBA6A1F33455F0064C998 /* RCTFileReaderModule.h */; };
19BA89011F84393D00741C5A /* RCTFileReaderModule.m in Sources */ = {isa = PBXBuildFile; fileRef = ADDFBA6B1F33455F0064C998 /* RCTFileReaderModule.m */; };
AD0871131E215B28007D136D /* RCTBlobManager.h in Copy Headers */ = {isa = PBXBuildFile; fileRef = AD9A43C11DFC7126008DC588 /* RCTBlobManager.h */; };
AD0871161E215EC9007D136D /* RCTBlobManager.h in Headers */ = {isa = PBXBuildFile; fileRef = AD9A43C11DFC7126008DC588 /* RCTBlobManager.h */; };
AD0871181E215ED1007D136D /* RCTBlobManager.h in Headers */ = {isa = PBXBuildFile; fileRef = AD9A43C11DFC7126008DC588 /* RCTBlobManager.h */; };
AD08711A1E2162C8007D136D /* RCTBlobManager.h in Copy Headers */ = {isa = PBXBuildFile; fileRef = AD9A43C11DFC7126008DC588 /* RCTBlobManager.h */; };
AD9A43C31DFC7126008DC588 /* RCTBlobManager.mm in Sources */ = {isa = PBXBuildFile; fileRef = AD9A43C21DFC7126008DC588 /* RCTBlobManager.mm */; };
ADD01A711E09404A00F6D226 /* RCTBlobManager.mm in Sources */ = {isa = PBXBuildFile; fileRef = AD9A43C21DFC7126008DC588 /* RCTBlobManager.mm */; };
ADDFBA6C1F33455F0064C998 /* RCTFileReaderModule.h in Headers */ = {isa = PBXBuildFile; fileRef = ADDFBA6A1F33455F0064C998 /* RCTFileReaderModule.h */; };
ADDFBA6D1F33455F0064C998 /* RCTFileReaderModule.m in Sources */ = {isa = PBXBuildFile; fileRef = ADDFBA6B1F33455F0064C998 /* RCTFileReaderModule.m */; };
AD9A43C31DFC7126008DC588 /* RCTBlobManager.m in Sources */ = {isa = PBXBuildFile; fileRef = AD9A43C21DFC7126008DC588 /* RCTBlobManager.m */; };
ADD01A711E09404A00F6D226 /* RCTBlobManager.m in Sources */ = {isa = PBXBuildFile; fileRef = AD9A43C21DFC7126008DC588 /* RCTBlobManager.m */; };
/* End PBXBuildFile section */
/* Begin PBXCopyFilesBuildPhase section */
@@ -28,7 +22,6 @@
dstPath = include/RCTBlob;
dstSubfolderSpec = 16;
files = (
19BA88FE1F84391700741C5A /* RCTFileReaderModule.h in Copy Headers */,
AD08711A1E2162C8007D136D /* RCTBlobManager.h in Copy Headers */,
);
name = "Copy Headers";
@@ -40,7 +33,6 @@
dstPath = include/RCTBlob;
dstSubfolderSpec = 16;
files = (
19BA89001F84392F00741C5A /* RCTFileReaderModule.h in Copy Headers */,
AD0871131E215B28007D136D /* RCTBlobManager.h in Copy Headers */,
);
name = "Copy Headers";
@@ -50,21 +42,17 @@
/* Begin PBXFileReference section */
358F4ED71D1E81A9004DF814 /* libRCTBlob.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = libRCTBlob.a; sourceTree = BUILT_PRODUCTS_DIR; };
AD9A43C11DFC7126008DC588 /* RCTBlobManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; lineEnding = 0; path = RCTBlobManager.h; sourceTree = "<group>"; };
AD9A43C21DFC7126008DC588 /* RCTBlobManager.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; path = RCTBlobManager.mm; sourceTree = "<group>"; };
AD9A43C11DFC7126008DC588 /* RCTBlobManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTBlobManager.h; sourceTree = "<group>"; };
AD9A43C21DFC7126008DC588 /* RCTBlobManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTBlobManager.m; sourceTree = "<group>"; };
ADD01A681E09402E00F6D226 /* libRCTBlob-tvOS.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libRCTBlob-tvOS.a"; sourceTree = BUILT_PRODUCTS_DIR; };
ADDFBA6A1F33455F0064C998 /* RCTFileReaderModule.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; lineEnding = 0; path = RCTFileReaderModule.h; sourceTree = "<group>"; };
ADDFBA6B1F33455F0064C998 /* RCTFileReaderModule.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTFileReaderModule.m; sourceTree = "<group>"; };
/* End PBXFileReference section */
/* Begin PBXGroup section */
358F4ECE1D1E81A9004DF814 = {
isa = PBXGroup;
children = (
ADDFBA6A1F33455F0064C998 /* RCTFileReaderModule.h */,
ADDFBA6B1F33455F0064C998 /* RCTFileReaderModule.m */,
AD9A43C11DFC7126008DC588 /* RCTBlobManager.h */,
AD9A43C21DFC7126008DC588 /* RCTBlobManager.mm */,
AD9A43C21DFC7126008DC588 /* RCTBlobManager.m */,
358F4ED81D1E81A9004DF814 /* Products */,
);
indentWidth = 2;
@@ -89,7 +77,6 @@
buildActionMask = 2147483647;
files = (
AD0871161E215EC9007D136D /* RCTBlobManager.h in Headers */,
ADDFBA6C1F33455F0064C998 /* RCTFileReaderModule.h in Headers */,
);
runOnlyForDeploymentPostprocessing = 0;
};
@@ -97,7 +84,6 @@
isa = PBXHeadersBuildPhase;
buildActionMask = 2147483647;
files = (
19BA88FF1F84392900741C5A /* RCTFileReaderModule.h in Headers */,
AD0871181E215ED1007D136D /* RCTBlobManager.h in Headers */,
);
runOnlyForDeploymentPostprocessing = 0;
@@ -146,7 +132,7 @@
isa = PBXProject;
attributes = {
LastUpgradeCheck = 0730;
ORGANIZATIONNAME = Facebook;
ORGANIZATIONNAME = "Silk Labs";
TargetAttributes = {
358F4ED61D1E81A9004DF814 = {
CreatedOnToolsVersion = 7.3;
@@ -180,8 +166,7 @@
isa = PBXSourcesBuildPhase;
buildActionMask = 2147483647;
files = (
ADDFBA6D1F33455F0064C998 /* RCTFileReaderModule.m in Sources */,
AD9A43C31DFC7126008DC588 /* RCTBlobManager.mm in Sources */,
AD9A43C31DFC7126008DC588 /* RCTBlobManager.m in Sources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
@@ -189,8 +174,7 @@
isa = PBXSourcesBuildPhase;
buildActionMask = 2147483647;
files = (
19BA89011F84393D00741C5A /* RCTFileReaderModule.m in Sources */,
ADD01A711E09404A00F6D226 /* RCTBlobManager.mm in Sources */,
ADD01A711E09404A00F6D226 /* RCTBlobManager.m in Sources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
-14
View File
@@ -13,18 +13,4 @@
@interface RCTBlobManager : NSObject <RCTBridgeModule, RCTURLRequestHandler>
- (NSString *)store:(NSData *)data;
- (void)store:(NSData *)data withId:(NSString *)blobId;
- (NSData *)resolve:(NSDictionary<NSString *, id> *)blob;
- (NSData *)resolve:(NSString *)blobId offset:(NSInteger)offset size:(NSInteger)size;
- (NSData *)resolveURL:(NSURL *)url;
- (void)remove:(NSString *)blobId;
- (void)createFromParts:(NSArray<NSDictionary<NSString *, id> *> *)parts withId:(NSString *)blobId;
@end
+218
View File
@@ -0,0 +1,218 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "RCTBlobManager.h"
#import <React/RCTConvert.h>
#import <React/RCTWebSocketModule.h>
static NSString *const kBlobUriScheme = @"blob";
@interface _RCTBlobContentHandler : NSObject <RCTWebSocketContentHandler>
- (instancetype)initWithBlobManager:(RCTBlobManager *)blobManager;
@end
@implementation RCTBlobManager
{
NSMutableDictionary<NSString *, NSData *> *_blobs;
_RCTBlobContentHandler *_contentHandler;
NSOperationQueue *_queue;
}
RCT_EXPORT_MODULE(BlobModule)
@synthesize bridge = _bridge;
+ (BOOL)requiresMainQueueSetup
{
return NO;
}
- (NSDictionary<NSString *, id> *)constantsToExport
{
return @{
@"BLOB_URI_SCHEME": kBlobUriScheme,
@"BLOB_URI_HOST": [NSNull null],
};
}
- (dispatch_queue_t)methodQueue
{
return [[_bridge webSocketModule] methodQueue];
}
- (NSString *)store:(NSData *)data
{
NSString *blobId = [NSUUID UUID].UUIDString;
[self store:data withId:blobId];
return blobId;
}
- (void)store:(NSData *)data withId:(NSString *)blobId
{
if (!_blobs) {
_blobs = [NSMutableDictionary new];
}
_blobs[blobId] = data;
}
- (NSData *)resolve:(NSDictionary<NSString *, id> *)blob
{
NSString *blobId = [RCTConvert NSString:blob[@"blobId"]];
NSNumber *offset = [RCTConvert NSNumber:blob[@"offset"]];
NSNumber *size = [RCTConvert NSNumber:blob[@"size"]];
return [self resolve:blobId
offset:offset ? [offset integerValue] : 0
size:size ? [size integerValue] : -1];
}
- (NSData *)resolve:(NSString *)blobId offset:(NSInteger)offset size:(NSInteger)size
{
NSData *data = _blobs[blobId];
if (!data) {
return nil;
}
if (offset != 0 || (size != -1 && size != data.length)) {
data = [data subdataWithRange:NSMakeRange(offset, size)];
}
return data;
}
RCT_EXPORT_METHOD(enableBlobSupport:(nonnull NSNumber *)socketID)
{
if (!_contentHandler) {
_contentHandler = [[_RCTBlobContentHandler alloc] initWithBlobManager:self];
}
[[_bridge webSocketModule] setContentHandler:_contentHandler forSocketID:socketID];
}
RCT_EXPORT_METHOD(disableBlobSupport:(nonnull NSNumber *)socketID)
{
[[_bridge webSocketModule] setContentHandler:nil forSocketID:socketID];
}
RCT_EXPORT_METHOD(sendBlob:(NSDictionary *)blob socketID:(nonnull NSNumber *)socketID)
{
[[_bridge webSocketModule] sendData:[self resolve:blob] forSocketID:socketID];
}
RCT_EXPORT_METHOD(createFromParts:(NSArray<NSDictionary<NSString *, id> *> *)parts withId:(NSString *)blobId)
{
NSMutableData *data = [NSMutableData new];
for (NSDictionary<NSString *, id> *part in parts) {
NSData *partData = [self resolve:part];
[data appendData:partData];
}
[self store:data withId:blobId];
}
RCT_EXPORT_METHOD(release:(NSString *)blobId)
{
[_blobs removeObjectForKey:blobId];
}
#pragma mark - RCTURLRequestHandler methods
- (BOOL)canHandleRequest:(NSURLRequest *)request
{
return [request.URL.scheme caseInsensitiveCompare:kBlobUriScheme] == NSOrderedSame;
}
- (id)sendRequest:(NSURLRequest *)request withDelegate:(id<RCTURLRequestDelegate>)delegate
{
// Lazy setup
if (!_queue) {
_queue = [NSOperationQueue new];
_queue.maxConcurrentOperationCount = 2;
}
__weak __block NSBlockOperation *weakOp;
__block NSBlockOperation *op = [NSBlockOperation blockOperationWithBlock:^{
NSURLResponse *response = [[NSURLResponse alloc] initWithURL:request.URL
MIMEType:nil
expectedContentLength:-1
textEncodingName:nil];
[delegate URLRequest:weakOp didReceiveResponse:response];
NSURLComponents *components = [[NSURLComponents alloc] initWithURL:request.URL resolvingAgainstBaseURL:NO];
NSString *blobId = components.path;
NSInteger offset = 0;
NSInteger size = -1;
if (components.queryItems) {
for (NSURLQueryItem *queryItem in components.queryItems) {
if ([queryItem.name isEqualToString:@"offset"]) {
offset = [queryItem.value integerValue];
}
if ([queryItem.name isEqualToString:@"size"]) {
size = [queryItem.value integerValue];
}
}
}
NSData *data;
if (blobId) {
data = [self resolve:blobId offset:offset size:size];
}
NSError *error;
if (data) {
[delegate URLRequest:weakOp didReceiveData:data];
} else {
error = [[NSError alloc] initWithDomain:NSURLErrorDomain code:NSURLErrorBadURL userInfo:nil];
}
[delegate URLRequest:weakOp didCompleteWithError:error];
}];
weakOp = op;
[_queue addOperation:op];
return op;
}
- (void)cancelRequest:(NSOperation *)op
{
[op cancel];
}
@end
@implementation _RCTBlobContentHandler {
__weak RCTBlobManager *_blobManager;
}
- (instancetype)initWithBlobManager:(RCTBlobManager *)blobManager
{
if (self = [super init]) {
_blobManager = blobManager;
}
return self;
}
- (id)processMessage:(id)message forSocketID:(NSNumber *)socketID withType:(NSString *__autoreleasing _Nonnull *)type
{
if (![message isKindOfClass:[NSData class]]) {
*type = @"text";
return message;
}
*type = @"blob";
return @{
@"blobId": [_blobManager store:message],
@"offset": @0,
@"size": @(((NSData *)message).length),
};
}
@end
-291
View File
@@ -1,291 +0,0 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "RCTBlobManager.h"
#import <mutex>
#import <React/RCTConvert.h>
#import <React/RCTNetworking.h>
#import <React/RCTUtils.h>
#import <React/RCTWebSocketModule.h>
static NSString *const kBlobURIScheme = @"blob";
@interface RCTBlobManager () <RCTNetworkingRequestHandler, RCTNetworkingResponseHandler, RCTWebSocketContentHandler>
@end
@implementation RCTBlobManager
{
// Blobs should be thread safe since they are used from the websocket and networking module,
// make sure to use proper locking when accessing this.
NSMutableDictionary<NSString *, NSData *> *_blobs;
std::mutex _blobsMutex;
NSOperationQueue *_queue;
}
RCT_EXPORT_MODULE(BlobModule)
@synthesize bridge = _bridge;
- (void)setBridge:(RCTBridge *)bridge
{
_bridge = bridge;
std::lock_guard<std::mutex> lock(_blobsMutex);
_blobs = [NSMutableDictionary new];
}
+ (BOOL)requiresMainQueueSetup
{
return NO;
}
- (NSDictionary<NSString *, id> *)constantsToExport
{
return @{
@"BLOB_URI_SCHEME": kBlobURIScheme,
@"BLOB_URI_HOST": [NSNull null],
};
}
- (NSString *)store:(NSData *)data
{
NSString *blobId = [NSUUID UUID].UUIDString;
[self store:data withId:blobId];
return blobId;
}
- (void)store:(NSData *)data withId:(NSString *)blobId
{
std::lock_guard<std::mutex> lock(_blobsMutex);
_blobs[blobId] = data;
}
- (NSData *)resolve:(NSDictionary<NSString *, id> *)blob
{
NSString *blobId = [RCTConvert NSString:blob[@"blobId"]];
NSNumber *offset = [RCTConvert NSNumber:blob[@"offset"]];
NSNumber *size = [RCTConvert NSNumber:blob[@"size"]];
return [self resolve:blobId
offset:offset ? [offset integerValue] : 0
size:size ? [size integerValue] : -1];
}
- (NSData *)resolve:(NSString *)blobId offset:(NSInteger)offset size:(NSInteger)size
{
NSData *data;
{
std::lock_guard<std::mutex> lock(_blobsMutex);
data = _blobs[blobId];
}
if (!data) {
return nil;
}
if (offset != 0 || (size != -1 && size != data.length)) {
data = [data subdataWithRange:NSMakeRange(offset, size)];
}
return data;
}
- (NSData *)resolveURL:(NSURL *)url
{
NSURLComponents *components = [[NSURLComponents alloc] initWithURL:url resolvingAgainstBaseURL:NO];
NSString *blobId = components.path;
NSInteger offset = 0;
NSInteger size = -1;
if (components.queryItems) {
for (NSURLQueryItem *queryItem in components.queryItems) {
if ([queryItem.name isEqualToString:@"offset"]) {
offset = [queryItem.value integerValue];
}
if ([queryItem.name isEqualToString:@"size"]) {
size = [queryItem.value integerValue];
}
}
}
if (blobId) {
return [self resolve:blobId offset:offset size:size];
}
return nil;
}
- (void)remove:(NSString *)blobId
{
std::lock_guard<std::mutex> lock(_blobsMutex);
[_blobs removeObjectForKey:blobId];
}
RCT_EXPORT_METHOD(addNetworkingHandler)
{
dispatch_async(_bridge.networking.methodQueue, ^{
[self->_bridge.networking addRequestHandler:self];
[self->_bridge.networking addResponseHandler:self];
});
}
RCT_EXPORT_METHOD(addWebSocketHandler:(nonnull NSNumber *)socketID)
{
dispatch_async(_bridge.webSocketModule.methodQueue, ^{
[self->_bridge.webSocketModule setContentHandler:self forSocketID:socketID];
});
}
RCT_EXPORT_METHOD(removeWebSocketHandler:(nonnull NSNumber *)socketID)
{
dispatch_async(_bridge.webSocketModule.methodQueue, ^{
[self->_bridge.webSocketModule setContentHandler:nil forSocketID:socketID];
});
}
// @lint-ignore FBOBJCUNTYPEDCOLLECTION1
RCT_EXPORT_METHOD(sendOverSocket:(NSDictionary *)blob socketID:(nonnull NSNumber *)socketID)
{
dispatch_async(_bridge.webSocketModule.methodQueue, ^{
[self->_bridge.webSocketModule sendData:[self resolve:blob] forSocketID:socketID];
});
}
RCT_EXPORT_METHOD(createFromParts:(NSArray<NSDictionary<NSString *, id> *> *)parts withId:(NSString *)blobId)
{
NSMutableData *data = [NSMutableData new];
for (NSDictionary<NSString *, id> *part in parts) {
NSString *type = [RCTConvert NSString:part[@"type"]];
if ([type isEqualToString:@"blob"]) {
NSData *partData = [self resolve:part[@"data"]];
[data appendData:partData];
} else if ([type isEqualToString:@"string"]) {
NSData *partData = [[RCTConvert NSString:part[@"data"]] dataUsingEncoding:NSUTF8StringEncoding];
[data appendData:partData];
} else {
[NSException raise:@"Invalid type for blob" format:@"%@ is invalid", type];
}
}
[self store:data withId:blobId];
}
RCT_EXPORT_METHOD(release:(NSString *)blobId)
{
[self remove:blobId];
}
#pragma mark - RCTURLRequestHandler methods
- (BOOL)canHandleRequest:(NSURLRequest *)request
{
return [request.URL.scheme caseInsensitiveCompare:kBlobURIScheme] == NSOrderedSame;
}
- (id)sendRequest:(NSURLRequest *)request withDelegate:(id<RCTURLRequestDelegate>)delegate
{
// Lazy setup
if (!_queue) {
_queue = [NSOperationQueue new];
_queue.maxConcurrentOperationCount = 2;
}
__weak __typeof(self) weakSelf = self;
__weak __block NSBlockOperation *weakOp;
__block NSBlockOperation *op = [NSBlockOperation blockOperationWithBlock:^{
__typeof(self) strongSelf = weakSelf;
if (!strongSelf) {
return;
}
NSURLResponse *response = [[NSURLResponse alloc] initWithURL:request.URL
MIMEType:nil
expectedContentLength:-1
textEncodingName:nil];
[delegate URLRequest:weakOp didReceiveResponse:response];
NSData *data = [strongSelf resolveURL:response.URL];
NSError *error;
if (data) {
[delegate URLRequest:weakOp didReceiveData:data];
} else {
error = [[NSError alloc] initWithDomain:NSURLErrorDomain code:NSURLErrorBadURL userInfo:nil];
}
[delegate URLRequest:weakOp didCompleteWithError:error];
}];
weakOp = op;
[_queue addOperation:op];
return op;
}
- (void)cancelRequest:(NSOperation *)op
{
[op cancel];
}
#pragma mark - RCTNetworkingRequestHandler methods
// @lint-ignore FBOBJCUNTYPEDCOLLECTION1
- (BOOL)canHandleNetworkingRequest:(NSDictionary *)data
{
return data[@"blob"] != nil;
}
// @lint-ignore FBOBJCUNTYPEDCOLLECTION1
- (NSDictionary *)handleNetworkingRequest:(NSDictionary *)data
{
// @lint-ignore FBOBJCUNTYPEDCOLLECTION1
NSDictionary *blob = [RCTConvert NSDictionary:data[@"blob"]];
NSString *contentType = @"application/octet-stream";
NSString *blobType = [RCTConvert NSString:blob[@"type"]];
if (blobType != nil && blobType.length > 0) {
contentType = blob[@"type"];
}
return @{@"body": [self resolve:blob], @"contentType": contentType};
}
- (BOOL)canHandleNetworkingResponse:(NSString *)responseType
{
return [responseType isEqualToString:@"blob"];
}
- (id)handleNetworkingResponse:(NSURLResponse *)response data:(NSData *)data
{
return @{
@"blobId": [self store:data],
@"offset": @0,
@"size": @(data.length),
@"name": RCTNullIfNil([response suggestedFilename]),
@"type": RCTNullIfNil([response MIMEType]),
};
}
#pragma mark - RCTWebSocketContentHandler methods
- (id)processWebsocketMessage:(id)message
forSocketID:(NSNumber *)socketID
withType:(NSString *__autoreleasing _Nonnull *)type
{
if (![message isKindOfClass:[NSData class]]) {
*type = @"text";
return message;
}
*type = @"blob";
return @{
@"blobId": [self store:message],
@"offset": @0,
@"size": @(((NSData *)message).length),
};
}
@end
-71
View File
@@ -1,71 +0,0 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "RCTFileReaderModule.h"
#import <React/RCTBridge.h>
#import <React/RCTConvert.h>
#import "RCTBlobManager.h"
@implementation RCTFileReaderModule
RCT_EXPORT_MODULE(FileReaderModule)
@synthesize bridge = _bridge;
RCT_EXPORT_METHOD(readAsText:(NSDictionary<NSString *, id> *)blob
encoding:(NSString *)encoding
resolve:(RCTPromiseResolveBlock)resolve
reject:(RCTPromiseRejectBlock)reject)
{
RCTBlobManager *blobManager = [[self bridge] moduleForClass:[RCTBlobManager class]];
NSData *data = [blobManager resolve:blob];
if (data == nil) {
reject(RCTErrorUnspecified,
[NSString stringWithFormat:@"Unable to resolve data for blob: %@", [RCTConvert NSString:blob[@"blobId"]]], nil);
} else {
NSStringEncoding stringEncoding;
if (encoding == nil) {
stringEncoding = NSUTF8StringEncoding;
} else {
stringEncoding = CFStringConvertEncodingToNSStringEncoding(CFStringConvertIANACharSetNameToEncoding((CFStringRef) encoding));
}
NSString *text = [[NSString alloc] initWithData:data encoding:stringEncoding];
resolve(text);
}
}
RCT_EXPORT_METHOD(readAsDataURL:(NSDictionary<NSString *, id> *)blob
resolve:(RCTPromiseResolveBlock)resolve
reject:(RCTPromiseRejectBlock)reject)
{
RCTBlobManager *blobManager = [[self bridge] moduleForClass:[RCTBlobManager class]];
NSData *data = [blobManager resolve:blob];
if (data == nil) {
reject(RCTErrorUnspecified,
[NSString stringWithFormat:@"Unable to resolve data for blob: %@", [RCTConvert NSString:blob[@"blobId"]]], nil);
} else {
NSString *type = [RCTConvert NSString:blob[@"type"]];
NSString *text = [NSString stringWithFormat:@"data:%@;base64,%@",
type != nil && [type length] > 0 ? type : @"application/octet-stream",
[data base64EncodedStringWithOptions:0]];
resolve(text);
}
}
@end
+2 -4
View File
@@ -52,16 +52,14 @@ if (BlobModule && typeof BlobModule.BLOB_URI_SCHEME === 'string') {
*/
class URL {
constructor() {
throw new Error('Creating URL objects is not supported yet.');
throw new Error('Creating BlobURL objects is not supported yet.');
}
static createObjectURL(blob: Blob) {
if (BLOB_URL_PREFIX === null) {
throw new Error('Cannot create URL for blob!');
}
return `${BLOB_URL_PREFIX}${blob.data.blobId}?offset=${
blob.data.offset
}&size=${blob.size}`;
return `${BLOB_URL_PREFIX}${blob.blobId}?offset=${blob.offset}&size=${blob.size}`;
}
static revokeObjectURL(url: string) {
-17
View File
@@ -1,17 +0,0 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @flow
* @format
*/
const BlobModule = {
createFromParts() {},
release() {},
};
module.exports = BlobModule;
@@ -1,21 +0,0 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @flow
* @format
*/
const FileReaderModule = {
async readAsText() {
return '';
},
async readAsDataURL() {
return 'data:text/plain;base64,NDI=';
},
};
module.exports = FileReaderModule;
-84
View File
@@ -1,84 +0,0 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @format
* @emails oncall+react_native
*/
'use strict';
jest.setMock('NativeModules', {
BlobModule: require('../__mocks__/BlobModule'),
});
var Blob = require('Blob');
describe('Blob', function() {
it('should create empty blob', () => {
const blob = new Blob();
expect(blob).toBeInstanceOf(Blob);
expect(blob.data.offset).toBe(0);
expect(blob.data.size).toBe(0);
expect(blob.size).toBe(0);
expect(blob.type).toBe('');
});
it('should create blob from other blobs and strings', () => {
const blobA = new Blob();
const blobB = new Blob();
const textA = 'i \u2665 dogs';
const textB = '\uD800\uDC00';
const textC =
'Z\u0351\u036B\u0343\u036A\u0302\u036B\u033D\u034F\u0334\u0319\u0324' +
'\u031E\u0349\u035A\u032F\u031E\u0320\u034DA\u036B\u0357\u0334\u0362' +
'\u0335\u031C\u0330\u0354L\u0368\u0367\u0369\u0358\u0320G\u0311\u0357' +
'\u030E\u0305\u035B\u0341\u0334\u033B\u0348\u034D\u0354\u0339O\u0342' +
'\u030C\u030C\u0358\u0328\u0335\u0339\u033B\u031D\u0333!\u033F\u030B' +
'\u0365\u0365\u0302\u0363\u0310\u0301\u0301\u035E\u035C\u0356\u032C' +
'\u0330\u0319\u0317';
blobA.data.size = 34540;
blobB.data.size = 65452;
const blob = new Blob([blobA, blobB, textA, textB, textC]);
expect(blob.size).toBe(
blobA.size +
blobB.size +
global.Buffer.byteLength(textA, 'UTF-8') +
global.Buffer.byteLength(textB, 'UTF-8') +
global.Buffer.byteLength(textC, 'UTF-8'),
);
expect(blob.type).toBe('');
});
it('should slice a blob', () => {
const blob = new Blob();
blob.data.size = 34546;
const sliceA = blob.slice(0, 2354);
expect(sliceA.data.offset).toBe(0);
expect(sliceA.size).toBe(2354);
expect(sliceA.type).toBe('');
const sliceB = blob.slice(2384, 7621);
expect(sliceB.data.offset).toBe(2384);
expect(sliceB.size).toBe(7621 - 2384);
expect(sliceB.type).toBe('');
});
it('should close a blob', () => {
const blob = new Blob();
blob.close();
expect(() => blob.size).toThrow();
});
});
@@ -1,27 +0,0 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @format
* @emails oncall+react_native
*/
'use strict';
jest.setMock('NativeModules', {
BlobModule: require('../__mocks__/BlobModule'),
});
var Blob = require('Blob');
var BlobManager = require('BlobManager');
describe('BlobManager', function() {
it('should create blob from parts', () => {
const blob = BlobManager.createFromParts([], {type: 'text/html'});
expect(blob).toBeInstanceOf(Blob);
expect(blob.type).toBe('text/html');
});
});
-46
View File
@@ -1,46 +0,0 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @format
* @emails oncall+react_native
*/
'use strict';
jest.setMock('NativeModules', {
BlobModule: require('../__mocks__/BlobModule'),
});
const File = require('File');
describe('File', function() {
it('should create empty file', () => {
const file = new File([], 'test.jpg');
expect(file).toBeInstanceOf(File);
expect(file.data.offset).toBe(0);
expect(file.data.size).toBe(0);
expect(file.size).toBe(0);
expect(file.type).toBe('');
expect(file.name).toBe('test.jpg');
expect(file.lastModified).toEqual(expect.any(Number));
});
it('should create empty file with type', () => {
const file = new File([], 'test.jpg', {type: 'image/jpeg'});
expect(file.type).toBe('image/jpeg');
});
it('should create empty file with lastModified', () => {
const file = new File([], 'test.jpg', {lastModified: 1337});
expect(file.lastModified).toBe(1337);
});
it('should throw on invalid arguments', () => {
expect(() => new File()).toThrow();
expect(() => new File([])).toThrow();
});
});
@@ -1,42 +0,0 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @format
* @emails oncall+react_native
*/
'use strict';
jest.unmock('event-target-shim').setMock('NativeModules', {
BlobModule: require('../__mocks__/BlobModule'),
FileReaderModule: require('../__mocks__/FileReaderModule'),
});
var Blob = require('Blob');
var FileReader = require('FileReader');
describe('FileReader', function() {
it('should read blob as text', async () => {
const e = await new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = resolve;
reader.onerror = reject;
reader.readAsText(new Blob());
});
expect(e.target.result).toBe('');
});
it('should read blob as data URL', async () => {
const e = await new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = resolve;
reader.onerror = reject;
reader.readAsDataURL(new Blob());
});
expect(e.target.result).toBe('data:text/plain;base64,NDI=');
});
});
-11
View File
@@ -35,7 +35,6 @@ class BugReporting {
static _extraSources: Map<string, SourceCallback> = new Map();
static _fileSources: Map<string, SourceCallback> = new Map();
static _subscription: ?EmitterSubscription = null;
static _redboxSubscription: ?EmitterSubscription = null;
static _maybeInit() {
if (!BugReporting._subscription) {
@@ -43,11 +42,6 @@ class BugReporting {
.addListener('collectBugExtraData', BugReporting.collectExtraData, null);
defaultExtras();
}
if (!BugReporting._redboxSubscription) {
BugReporting._redboxSubscription = RCTDeviceEventEmitter
.addListener('collectRedBoxExtraData', BugReporting.collectExtraData, null);
}
}
/**
@@ -104,11 +98,6 @@ class BugReporting {
BugReportingNativeModule.setExtraData &&
BugReportingNativeModule.setExtraData(extraData, fileData);
const RedBoxNativeModule = require('NativeModules').RedBox;
RedBoxNativeModule &&
RedBoxNativeModule.setExtraData &&
RedBoxNativeModule.setExtraData(extraData, 'From BugReporting.js');
return { extras: extraData, files: fileData };
}
}
+67 -54
View File
@@ -35,15 +35,6 @@ const ASSET_TYPE_OPTIONS = {
Photos: 'Photos',
};
type GetPhotosParams = {
first: number,
after?: string,
groupTypes?: $Keys<typeof GROUP_TYPES_OPTIONS>,
groupName?: string,
assetType?: $Keys<typeof ASSET_TYPE_OPTIONS>,
mimeTypes?: Array<string>,
};
/**
* Shape of the param arg for the `getPhotos` function.
*/
@@ -72,8 +63,8 @@ const getPhotosParamChecker = createStrictShapeTypeChecker({
groupName: PropTypes.string,
/**
* Specifies filter on asset type
*/
* Specifies filter on asset type
*/
assetType: PropTypes.oneOf(Object.keys(ASSET_TYPE_OPTIONS)),
/**
@@ -82,35 +73,6 @@ const getPhotosParamChecker = createStrictShapeTypeChecker({
mimeTypes: PropTypes.arrayOf(PropTypes.string),
});
type GetPhotosReturn = Promise<{
edges: Array<{
node: {
type: string,
group_name: string,
image: {
uri: string,
height: number,
width: number,
isStored?: boolean,
playableDuration: number,
},
timestamp: number,
location?: {
latitude?: number,
longitude?: number,
altitude?: number,
heading?: number,
speed?: number,
},
},
}>,
page_info: {
has_next_page: boolean,
start_cursor?: string,
end_cursor?: string,
},
}>;
/**
* Shape of the return value of the `getPhotos` function.
*/
@@ -147,9 +109,15 @@ const getPhotosReturnChecker = createStrictShapeTypeChecker({
});
/**
* `CameraRoll` provides access to the local camera roll or photo library.
* `CameraRoll` provides access to the local camera roll / gallery.
* Before using this you must link the `RCTCameraRoll` library.
* You can refer to [Linking](docs/linking-libraries-ios.html) for help.
*
* ### Permissions
* The user's permission is required in order to access the Camera Roll on devices running iOS 10 or later.
* Add the `NSPhotoLibraryUsageDescription` key in your `Info.plist` with a string that describes how your
* app will use this data. This key will appear as `Privacy - Photo Library Usage Description` in Xcode.
*
* See https://facebook.github.io/react-native/docs/cameraroll.html
*/
class CameraRoll {
static GroupTypesOptions: Object = GROUP_TYPES_OPTIONS;
@@ -158,26 +126,31 @@ class CameraRoll {
/**
* `CameraRoll.saveImageWithTag()` is deprecated. Use `CameraRoll.saveToCameraRoll()` instead.
*/
static saveImageWithTag(tag: string): Promise<string> {
static saveImageWithTag(tag: string): Promise<Object> {
console.warn(
'`CameraRoll.saveImageWithTag()` is deprecated. Use `CameraRoll.saveToCameraRoll()` instead.',
);
return this.saveToCameraRoll(tag, 'photo');
}
static deletePhotos(photos: Array<string>) {
return RCTCameraRollManager.deletePhotos(photos);
}
/**
* Saves the photo or video to the camera roll or photo library.
* Saves the photo or video to the camera roll / gallery.
*
* See https://facebook.github.io/react-native/docs/cameraroll.html#savetocameraroll
* On Android, the tag must be a local image or video URI, such as `"file:///sdcard/img.png"`.
*
* On iOS, the tag can be any image URI (including local, remote asset-library and base64 data URIs)
* or a local video file URI (remote or data URIs are not supported for saving video at this time).
*
* If the tag has a file extension of .mov or .mp4, it will be inferred as a video. Otherwise
* it will be treated as a photo. To override the automatic choice, you can pass an optional
* `type` parameter that must be one of 'photo' or 'video'.
*
* Returns a Promise which will resolve with the new URI.
*/
static saveToCameraRoll(
tag: string,
type?: 'photo' | 'video',
): Promise<string> {
): Promise<Object> {
invariant(
typeof tag === 'string',
'CameraRoll.saveToCameraRoll must be a valid string.',
@@ -185,8 +158,8 @@ class CameraRoll {
invariant(
type === 'photo' || type === 'video' || type === undefined,
`The second argument to saveToCameraRoll must be 'photo' or 'video'. You passed ${type ||
'unknown'}`,
// $FlowFixMe(>=0.28.0)
`The second argument to saveToCameraRoll must be 'photo' or 'video'. You passed ${type}`,
);
let mediaType = 'photo';
@@ -203,9 +176,49 @@ class CameraRoll {
* Returns a Promise with photo identifier objects from the local camera
* roll of the device matching shape defined by `getPhotosReturnChecker`.
*
* See https://facebook.github.io/react-native/docs/cameraroll.html#getphotos
* Expects a params object of the following shape:
*
* - `first` : {number} : The number of photos wanted in reverse order of the photo application (i.e. most recent first for SavedPhotos).
* - `after` : {string} : A cursor that matches `page_info { end_cursor }` returned from a previous call to `getPhotos`.
* - `groupTypes` : {string} : Specifies which group types to filter the results to. Valid values are:
* - `Album`
* - `All`
* - `Event`
* - `Faces`
* - `Library`
* - `PhotoStream`
* - `SavedPhotos` // default
* - `groupName` : {string} : Specifies filter on group names, like 'Recent Photos' or custom album titles.
* - `assetType` : {string} : Specifies filter on asset type. Valid values are:
* - `All`
* - `Videos`
* - `Photos` // default
* - `mimeTypes` : {string} : Filter by mimetype (e.g. image/jpeg).
*
* Returns a Promise which when resolved will be of the following shape:
*
* - `edges` : {Array<node>} An array of node objects
* - `node`: {object} An object with the following shape:
* - `type`: {string}
* - `group_name`: {string}
* - `image`: {object} : An object with the following shape:
* - `uri`: {string}
* - `height`: {number}
* - `width`: {number}
* - `isStored`: {boolean}
* - `timestamp`: {number}
* - `location`: {object} : An object with the following shape:
* - `latitude`: {number}
* - `longitude`: {number}
* - `altitude`: {number}
* - `heading`: {number}
* - `speed`: {number}
* - `page_info` : {object} : An object with the following shape:
* - `has_next_page`: {boolean}
* - `start_cursor`: {boolean}
* - `end_cursor`: {boolean}
*/
static getPhotos(params: GetPhotosParams): GetPhotosReturn {
static getPhotos(params) {
if (__DEV__) {
checkPropTypes(
{params: getPhotosParamChecker},
+1 -23
View File
@@ -12,7 +12,6 @@
#import <CoreLocation/CoreLocation.h>
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
#import <Photos/Photos.h>
#import <React/RCTBridge.h>
#import <React/RCTConvert.h>
@@ -199,7 +198,7 @@ RCT_EXPORT_METHOD(getPhotos:(NSDictionary *)params
@"group_name": [group valueForProperty:ALAssetsGroupPropertyName],
@"image": @{
@"uri": uri,
@"filename" : filename ?: [NSNull null],
@"filename" : filename,
@"height": @(dimensions.height),
@"width": @(dimensions.width),
@"isStored": @YES,
@@ -235,27 +234,6 @@ RCT_EXPORT_METHOD(getPhotos:(NSDictionary *)params
}];
}
RCT_EXPORT_METHOD(deletePhotos:(NSArray<NSString *>*)assets
resolve:(RCTPromiseResolveBlock)resolve
reject:(RCTPromiseRejectBlock)reject)
{
NSArray<NSURL *> *assets_ = [RCTConvert NSURLArray:assets];
[[PHPhotoLibrary sharedPhotoLibrary] performChanges:^{
PHFetchResult<PHAsset *> *fetched =
[PHAsset fetchAssetsWithALAssetURLs:assets_ options:nil];
[PHAssetChangeRequest deleteAssets:fetched];
}
completionHandler:^(BOOL success, NSError *error) {
if (success == YES) {
resolve(@(success));
}
else {
reject(@"Couldn't delete", @"Couldn't delete assets", error);
}
}
];
}
static void checkPhotoLibraryConfig()
{
#if RCT_DEV
@@ -24,16 +24,6 @@ type ChangeEventName = $Enum<{
var _subscriptions = new Map();
/**
* Sometimes it's useful to know whether or not the device has a screen reader
* that is currently active. The `AccessibilityInfo` API is designed for this
* purpose. You can use it to query the current state of the screen reader as
* well as to register to be notified when the state of the screen reader
* changes.
*
* See http://facebook.github.io/react-native/docs/accessibilityinfo.html
*/
var AccessibilityInfo = {
fetch: function(): Promise {
@@ -28,23 +28,61 @@ type ChangeEventName = $Enum<{
var _subscriptions = new Map();
/**
* Sometimes it's useful to know whether or not the device has a screen reader
* that is currently active. The `AccessibilityInfo` API is designed for this
* purpose. You can use it to query the current state of the screen reader as
* well as to register to be notified when the state of the screen reader
* changes.
* Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The
* `AccessibilityInfo` API is designed for this purpose. You can use it to query the current state of the
* screen reader as well as to register to be notified when the state of the screen reader changes.
*
* See http://facebook.github.io/react-native/docs/accessibilityinfo.html
* Here's a small example illustrating how to use `AccessibilityInfo`:
*
* ```javascript
* class ScreenReaderStatusExample extends React.Component {
* state = {
* screenReaderEnabled: false,
* }
*
* componentDidMount() {
* AccessibilityInfo.addEventListener(
* 'change',
* this._handleScreenReaderToggled
* );
* AccessibilityInfo.fetch().done((isEnabled) => {
* this.setState({
* screenReaderEnabled: isEnabled
* });
* });
* }
*
* componentWillUnmount() {
* AccessibilityInfo.removeEventListener(
* 'change',
* this._handleScreenReaderToggled
* );
* }
*
* _handleScreenReaderToggled = (isEnabled) => {
* this.setState({
* screenReaderEnabled: isEnabled,
* });
* }
*
* render() {
* return (
* <View>
* <Text>
* The screen reader is {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}.
* </Text>
* </View>
* );
* }
* }
* ```
*/
var AccessibilityInfo = {
/**
* Query whether a screen reader is currently enabled.
*
* Returns a promise which resolves to a boolean.
* The result is `true` when a screen reader is enabledand `false` otherwise.
*
* See http://facebook.github.io/react-native/docs/accessibilityinfo.html#fetch
* Query whether a screen reader is currently enabled. Returns a promise which
* resolves to a boolean. The result is `true` when a screen reader is enabled
* and `false` otherwise.
*/
fetch: function(): Promise {
return new Promise((resolve, reject) => {
@@ -62,13 +100,10 @@ var AccessibilityInfo = {
* to the event handler is a boolean. The boolean is `true` when a screen
* reader is enabled and `false` otherwise.
* - `announcementFinished`: iOS-only event. Fires when the screen reader has
* finished making an announcement. The argument to the event handler is a
* dictionary with these keys:
* finished making an announcement. The argument to the event handler is a dictionary
* with these keys:
* - `announcement`: The string announced by the screen reader.
* - `success`: A boolean indicating whether the announcement was
* successfully made.
*
* See http://facebook.github.io/react-native/docs/accessibilityinfo.html#addeventlistener
* - `success`: A boolean indicating whether the announcement was successfully made.
*/
addEventListener: function (
eventName: ChangeEventName,
@@ -95,11 +130,7 @@ var AccessibilityInfo = {
},
/**
* Set accessibility focus to a react component.
*
* @platform ios
*
* See http://facebook.github.io/react-native/docs/accessibilityinfo.html#setaccessibilityfocus
* iOS-Only. Set accessibility focus to a react component.
*/
setAccessibilityFocus: function(
reactTag: number
@@ -108,11 +139,7 @@ var AccessibilityInfo = {
},
/**
* Post a string to be announced by the screen reader.
*
* @platform ios
*
* See http://facebook.github.io/react-native/docs/accessibilityinfo.html#announceforaccessibility
* iOS-Only. Post a string to be announced by the screen reader.
*/
announceForAccessibility: function(
announcement: string
@@ -122,8 +149,6 @@ var AccessibilityInfo = {
/**
* Remove an event handler.
*
* See http://facebook.github.io/react-native/docs/accessibilityinfo.html#removeeventlistener
*/
removeEventListener: function(
eventName: ChangeEventName,
@@ -14,9 +14,8 @@
const ColorPropType = require('ColorPropType');
const NativeMethodsMixin = require('NativeMethodsMixin');
const Platform = require('Platform');
const ProgressBarAndroid = require('ProgressBarAndroid');
const PropTypes = require('prop-types');
const React = require('React');
const PropTypes = require('prop-types');
const StyleSheet = require('StyleSheet');
const View = require('View');
const ViewPropTypes = require('ViewPropTypes');
@@ -37,9 +36,10 @@ type DefaultProps = {
/**
* Displays a circular loading indicator.
*
* See http://facebook.github.io/react-native/docs/activityindicator.html
*/
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
* suppresses an error when upgrading Flow's support for React. To see the
* error delete this comment and run Flow. */
const ActivityIndicator = createReactClass({
displayName: 'ActivityIndicator',
mixins: [NativeMethodsMixin],
@@ -48,21 +48,15 @@ const ActivityIndicator = createReactClass({
...ViewPropTypes,
/**
* Whether to show the indicator (true, the default) or hide it (false).
*
* See http://facebook.github.io/react-native/docs/activityindicator.html#animating
*/
animating: PropTypes.bool,
/**
* The foreground color of the spinner (default is gray).
*
* See http://facebook.github.io/react-native/docs/activityindicator.html#color
*/
color: ColorPropType,
/**
* Size of the indicator (default is 'small').
* Passing a number to the size prop is only supported on Android.
*
* See http://facebook.github.io/react-native/docs/activityindicator.html#size
*/
size: PropTypes.oneOfType([
PropTypes.oneOf([ 'small', 'large' ]),
@@ -72,8 +66,6 @@ const ActivityIndicator = createReactClass({
* Whether the indicator should hide when not animating (true by default).
*
* @platform ios
*
* See http://facebook.github.io/react-native/docs/activityindicator.html#hideswhenstopped
*/
hidesWhenStopped: PropTypes.bool,
},
@@ -103,20 +95,16 @@ const ActivityIndicator = createReactClass({
break;
}
const nativeProps = {
...props,
style: sizeStyle,
styleAttr: 'Normal',
indeterminate: true,
};
return (
<View onLayout={onLayout} style={[styles.container, style]}>
{Platform.OS === 'ios' ? (
<RCTActivityIndicator {...nativeProps} />
) : (
<ProgressBarAndroid {...nativeProps} />
)}
<View
onLayout={onLayout}
style={[styles.container, style]}>
<RCTActivityIndicator
{...props}
style={sizeStyle}
styleAttr="Normal"
indeterminate
/>
</View>
);
}
@@ -141,7 +129,18 @@ if (Platform.OS === 'ios') {
var RCTActivityIndicator = requireNativeComponent(
'RCTActivityIndicatorView',
ActivityIndicator,
{ nativeOnly: { activityIndicatorViewStyle: true } }
{nativeOnly: {activityIndicatorViewStyle: true}},
);
} else if (Platform.OS === 'android') {
var RCTActivityIndicator = requireNativeComponent(
'AndroidProgressBar',
ActivityIndicator,
// Ignore props that are specific to non inderterminate ProgressBar.
{nativeOnly: {
indeterminate: true,
progress: true,
styleAttr: true,
}},
);
}
-12
View File
@@ -38,9 +38,6 @@ const invariant = require('fbjs/lib/invariant');
* Example usage:
*
* ```
* import { Button } from 'react-native';
* ...
*
* <Button
* onPress={onPressLearnMore}
* title="Learn More"
@@ -58,7 +55,6 @@ class Button extends React.Component<{
accessibilityLabel?: ?string,
disabled?: ?boolean,
testID?: ?string,
hasTVPreferredFocus?: ?boolean,
}> {
static propTypes = {
/**
@@ -85,12 +81,6 @@ class Button extends React.Component<{
* Used to locate this view in end-to-end tests.
*/
testID: PropTypes.string,
/**
* *(Apple TV only)* TV preferred focus (see documentation for the View component).
*
* @platform ios
*/
hasTVPreferredFocus: PropTypes.bool,
};
render() {
@@ -99,7 +89,6 @@ class Button extends React.Component<{
color,
onPress,
title,
hasTVPreferredFocus,
disabled,
testID,
} = this.props;
@@ -129,7 +118,6 @@ class Button extends React.Component<{
accessibilityComponentType="button"
accessibilityLabel={accessibilityLabel}
accessibilityTraits={accessibilityTraits}
hasTVPreferredFocus={hasTVPreferredFocus}
testID={testID}
disabled={disabled}
onPress={onPress}>
@@ -1,15 +0,0 @@
/**
* Copyright (c) 2017-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule CheckBox
* @flow
* @format
*/
'use strict';
module.exports = require('UnimplementedView');
@@ -27,60 +27,17 @@ type DefaultProps = {
};
/**
* Renders a boolean input (Android only).
* Renders a boolean input.
*
* This is a controlled component that requires an `onValueChange` callback that
* updates the `value` prop in order for the component to reflect user actions.
* If the `value` prop is not updated, the component will continue to render
* the supplied `value` prop instead of the expected result of any user actions.
*
* ```
* import React from 'react';
* import { AppRegistry, StyleSheet, Text, View, CheckBox } from 'react-native';
*
* export default class App extends React.Component {
* constructor(props) {
* super(props);
* this.state = {
* checked: false
* }
* }
*
* toggle() {
* this.setState(({checked}) => {
* return {
* checked: !checked
* };
* });
* }
*
* render() {
* const {checked} = this.state;
* return (
* <View style={styles.container}>
* <Text>Checked</Text>
* <CheckBox value={checked} onChange={this.toggle.bind(this)} />
* </View>
* );
* }
* }
*
* const styles = StyleSheet.create({
* container: {
* flex: 1,
* flexDirection: 'row',
* alignItems: 'center',
* justifyContent: 'center',
* },
* });
*
* // skip this line if using Create React Native App
* AppRegistry.registerComponent('App', () => App);
* ```
*
* @keyword checkbox
* @keyword toggle
*/
// $FlowFixMe(>=0.41.0)
let CheckBox = createReactClass({
displayName: 'CheckBox',
propTypes: {
@@ -36,6 +36,7 @@ type Event = Object;
* the user's change will be reverted immediately to reflect `props.date` as the
* source of truth.
*/
// $FlowFixMe(>=0.41.0)
const DatePickerIOS = createReactClass({
displayName: 'DatePickerIOS',
// TOOD: Put a better type for _picker
@@ -78,11 +79,6 @@ const DatePickerIOS = createReactClass({
*/
mode: PropTypes.oneOf(['date', 'time', 'datetime']),
/**
* The date picker locale.
*/
locale: PropTypes.string,
/**
* The interval at which minutes can be selected.
*/
@@ -132,7 +128,6 @@ const DatePickerIOS = createReactClass({
ref={ picker => { this._picker = picker; } }
style={styles.datePickerIOS}
date={props.date.getTime()}
locale={props.locale ? props.locale : undefined}
maximumDate={
props.maximumDate ? props.maximumDate.getTime() : undefined
}
@@ -161,7 +156,6 @@ const RCTDatePickerIOS = requireNativeComponent('RCTDatePicker', {
propTypes: {
...DatePickerIOS.propTypes,
date: PropTypes.number,
locale: PropTypes.string,
minimumDate: PropTypes.number,
maximumDate: PropTypes.number,
onDateChange: () => null,
+11 -34
View File
@@ -11,7 +11,6 @@
*/
'use strict';
const LayoutAnimation = require('LayoutAnimation');
const invariant = require('fbjs/lib/invariant');
const NativeEventEmitter = require('NativeEventEmitter');
const KeyboardObserver = require('NativeModules').KeyboardObserver;
@@ -26,22 +25,20 @@ type KeyboardEventName =
| 'keyboardWillChangeFrame'
| 'keyboardDidChangeFrame';
export type KeyboardEvent = {|
+duration?: number,
+easing?: string,
+endCoordinates: {|
+width: number,
+height: number,
+screenX: number,
+screenY: number,
|},
|};
type KeyboardEventData = {
endCoordinates: {
width: number,
height: number,
screenX: number,
screenY: number,
},
};
type KeyboardEventListener = (e: KeyboardEvent) => void;
type KeyboardEventListener = (e: KeyboardEventData) => void;
// The following object exists for documentation purposes
// Actual work happens in
// https://github.com/facebook/react-native/blob/master/Libraries/EventEmitter/NativeEventEmitter.js
// https://github.com/facebook/react-native/blob/master/Libraries/vendor/emitter/NativeEventEmitter.js
/**
* `Keyboard` module to control keyboard events.
@@ -137,31 +134,11 @@ let Keyboard = {
*/
dismiss() {
invariant(false, 'Dummy method used for documentation');
},
/**
* Useful for syncing TextInput (or other keyboard accessory view) size of
* position changes with keyboard movements.
*/
scheduleLayoutAnimation(event: KeyboardEvent) {
invariant(false, 'Dummy method used for documentation');
},
}
};
// Throw away the dummy object and reassign it to original module
Keyboard = KeyboardEventEmitter;
Keyboard.dismiss = dismissKeyboard;
Keyboard.scheduleLayoutAnimation = function(event: KeyboardEvent) {
const {duration, easing} = event;
if (duration) {
LayoutAnimation.configureNext({
duration: duration,
update: {
duration: duration,
type: (easing && LayoutAnimation.Types[easing]) || 'keyboard',
},
});
}
};
module.exports = Keyboard;
@@ -17,9 +17,6 @@ const LayoutAnimation = require('LayoutAnimation');
const Platform = require('Platform');
const PropTypes = require('prop-types');
const React = require('React');
/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
* found when Flow v0.54 was deployed. To see the error delete this comment and
* run Flow. */
const TimerMixin = require('react-timer-mixin');
const View = require('View');
const ViewPropTypes = require('ViewPropTypes');
@@ -43,19 +40,16 @@ type KeyboardChangeEvent = {
const viewRef = 'VIEW';
/**
* This is a component to solve the common problem of views that need to move out of the way of the virtual keyboard.
* It can automatically adjust either its height, position or bottom padding based on the position of the keyboard.
* It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard.
* It can automatically adjust either its position or bottom padding based on the position of the keyboard.
*/
// $FlowFixMe(>=0.41.0)
const KeyboardAvoidingView = createReactClass({
displayName: 'KeyboardAvoidingView',
mixins: [TimerMixin],
propTypes: {
...ViewPropTypes,
/**
* Specify how the `KeyboardAvoidingView` will react to the presence of
* the keyboard. It can adjust the height, position or bottom padding of the view
*/
behavior: PropTypes.oneOf(['height', 'position', 'padding']),
/**
@@ -65,19 +59,13 @@ const KeyboardAvoidingView = createReactClass({
/**
* This is the distance between the top of the user screen and the react native view,
* may be non-zero in some use cases. The default value is 0.
* may be non-zero in some use cases.
*/
keyboardVerticalOffset: PropTypes.number.isRequired,
/**
* This is to allow us to manually control which KAV shuld take effect when
* having more than one KAV at the same screen
*/
enabled: PropTypes.bool.isRequired,
},
getDefaultProps() {
return {
enabled: true,
keyboardVerticalOffset: 0,
};
},
@@ -91,7 +79,7 @@ const KeyboardAvoidingView = createReactClass({
subscriptions: ([]: Array<EmitterSubscription>),
frame: (null: ?ViewLayout),
_relativeKeyboardHeight(keyboardFrame: ScreenRect): number {
relativeKeyboardHeight(keyboardFrame: ScreenRect): number {
const frame = this.frame;
if (!frame || !keyboardFrame) {
return 0;
@@ -104,18 +92,14 @@ const KeyboardAvoidingView = createReactClass({
return Math.max(frame.y + frame.height - keyboardY, 0);
},
_onKeyboardChange(event: ?KeyboardChangeEvent) {
onKeyboardChange(event: ?KeyboardChangeEvent) {
if (!event) {
this.setState({bottom: 0});
return;
}
const {duration, easing, endCoordinates} = event;
const height = this._relativeKeyboardHeight(endCoordinates);
if (this.state.bottom === height) {
return;
}
const height = this.relativeKeyboardHeight(endCoordinates);
if (duration && easing) {
LayoutAnimation.configureNext({
@@ -129,11 +113,11 @@ const KeyboardAvoidingView = createReactClass({
this.setState({bottom: height});
},
_onLayout(event: ViewLayoutEvent) {
onLayout(event: ViewLayoutEvent) {
this.frame = event.nativeEvent.layout;
},
UNSAFE_componentWillUpdate(nextProps: Object, nextState: Object, nextContext?: Object): void {
componentWillUpdate(nextProps: Object, nextState: Object, nextContext?: Object): void {
if (nextState.bottom === this.state.bottom &&
this.props.behavior === 'height' &&
nextProps.behavior === 'height') {
@@ -143,15 +127,15 @@ const KeyboardAvoidingView = createReactClass({
}
},
UNSAFE_componentWillMount() {
componentWillMount() {
if (Platform.OS === 'ios') {
this.subscriptions = [
Keyboard.addListener('keyboardWillChangeFrame', this._onKeyboardChange),
Keyboard.addListener('keyboardWillChangeFrame', this.onKeyboardChange),
];
} else {
this.subscriptions = [
Keyboard.addListener('keyboardDidHide', this._onKeyboardChange),
Keyboard.addListener('keyboardDidShow', this._onKeyboardChange),
Keyboard.addListener('keyboardDidHide', this.onKeyboardChange),
Keyboard.addListener('keyboardDidShow', this.onKeyboardChange),
];
}
},
@@ -163,7 +147,7 @@ const KeyboardAvoidingView = createReactClass({
render(): React.Element<any> {
// $FlowFixMe(>=0.41.0)
const {behavior, children, style, ...props} = this.props;
const bottomHeight = this.props.enabled ? this.state.bottom : 0;
switch (behavior) {
case 'height':
let heightStyle;
@@ -172,20 +156,20 @@ const KeyboardAvoidingView = createReactClass({
// i.e. this.state.bottom is greater than 0. If we remove that condition,
// this.frame.height will never go back to its original value.
// When height changes, we need to disable flex.
heightStyle = {height: this.frame.height - bottomHeight, flex: 0};
heightStyle = {height: this.frame.height - this.state.bottom, flex: 0};
}
return (
<View ref={viewRef} style={[style, heightStyle]} onLayout={this._onLayout} {...props}>
<View ref={viewRef} style={[style, heightStyle]} onLayout={this.onLayout} {...props}>
{children}
</View>
);
case 'position':
const positionStyle = {bottom: bottomHeight};
const positionStyle = {bottom: this.state.bottom};
const { contentContainerStyle } = this.props;
return (
<View ref={viewRef} style={style} onLayout={this._onLayout} {...props}>
<View ref={viewRef} style={style} onLayout={this.onLayout} {...props}>
<View style={[contentContainerStyle, positionStyle]}>
{children}
</View>
@@ -193,16 +177,16 @@ const KeyboardAvoidingView = createReactClass({
);
case 'padding':
const paddingStyle = {paddingBottom: bottomHeight};
const paddingStyle = {paddingBottom: this.state.bottom};
return (
<View ref={viewRef} style={[style, paddingStyle]} onLayout={this._onLayout} {...props}>
<View ref={viewRef} style={[style, paddingStyle]} onLayout={this.onLayout} {...props}>
{children}
</View>
);
default:
return (
<View ref={viewRef} onLayout={this._onLayout} style={style} {...props}>
<View ref={viewRef} onLayout={this.onLayout} style={style} {...props}>
{children}
</View>
);
+1 -1
View File
@@ -23,7 +23,7 @@ var LazyRenderer = createReactClass({
render: PropTypes.func.isRequired,
},
UNSAFE_componentWillMount: function(): void {
componentWillMount: function(): void {
this.setState({
_lazyRender : true,
});
@@ -33,12 +33,12 @@ type Props = ViewProps & {
*
* ```
* import React from 'react';
* import { MaskedViewIOS, Text, View } from 'react-native';
* import { MaskedView, Text, View } from 'react-native';
*
* class MyMaskedView extends React.Component {
* render() {
* return (
* <MaskedViewIOS
* <MaskedView
* style={{ flex: 1 }}
* maskElement={
* <View style={styles.maskContainerStyle}>
@@ -49,7 +49,7 @@ type Props = ViewProps & {
* }
* >
* <View style={{ flex: 1, backgroundColor: 'blue' }} />
* </MaskedViewIOS>
* </MaskedView>
* );
* }
* }
@@ -27,9 +27,6 @@ var createReactClass = require('create-react-class');
var invariant = require('fbjs/lib/invariant');
var requireNativeComponent = require('requireNativeComponent');
/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
* found when Flow v0.54 was deployed. To see the error delete this comment and
* run Flow. */
const keyMirror = require('fbjs/lib/keyMirror');
var TRANSITIONER_REF = 'transitionerRef';
@@ -337,7 +334,7 @@ var NavigatorIOS = createReactClass({
/**
* Use this to specify additional props to pass to the rendered
* component. `NavigatorIOS` will automatically pass in `route` and
* `navigator` props to the component.
* `navigator` props to the comoponent.
*/
passProps: PropTypes.object,
@@ -515,7 +512,7 @@ var NavigatorIOS = createReactClass({
navigator: (undefined: ?Object),
UNSAFE_componentWillMount: function() {
componentWillMount: function() {
// Precompute a pack of callbacks that's frequently generated and passed to
// instances.
this.navigator = {
@@ -66,7 +66,7 @@ class PickerAndroid extends React.Component<{
};
}
UNSAFE_componentWillReceiveProps(nextProps) {
componentWillReceiveProps(nextProps) {
this.setState(this._stateFromProps(nextProps));
}
+1 -1
View File
@@ -41,7 +41,7 @@ var PickerIOS = createReactClass({
return this._stateFromProps(this.props);
},
UNSAFE_componentWillReceiveProps: function(nextProps) {
componentWillReceiveProps: function(nextProps) {
this.setState(this._stateFromProps(nextProps));
},
@@ -10,14 +10,13 @@
*/
'use strict';
const ActivityIndicator = require('ActivityIndicator');
const ColorPropType = require('ColorPropType');
const PropTypes = require('prop-types');
const React = require('React');
const ReactNative = require('ReactNative');
const ViewPropTypes = require('ViewPropTypes');
const requireNativeComponent = require('requireNativeComponent');
const STYLE_ATTRIBUTES = [
'Horizontal',
'Normal',
@@ -79,10 +78,6 @@ class ProgressBarAndroid extends ReactNative.NativeComponent {
* - LargeInverse
*/
styleAttr: PropTypes.oneOf(STYLE_ATTRIBUTES),
/**
* Whether to show the ProgressBar (true, the default) or hide it (false).
*/
animating: PropTypes.bool,
/**
* If the progress bar will show indeterminate progress. Note that this
* can only be false if styleAttr is Horizontal.
@@ -104,23 +99,21 @@ class ProgressBarAndroid extends ReactNative.NativeComponent {
static defaultProps = {
styleAttr: 'Normal',
indeterminate: true,
animating: true,
indeterminate: true
};
componentDidMount() {
if (this.props.indeterminate && this.props.styleAttr !== 'Horizontal') {
console.warn(
'Circular indeterminate `ProgressBarAndroid`' +
'is deprecated. Use `ActivityIndicator` instead.'
);
}
}
render() {
return <AndroidProgressBar {...this.props} />;
return <ActivityIndicator {...this.props} animating={true} />;
}
}
const AndroidProgressBar = requireNativeComponent(
'AndroidProgressBar',
ProgressBarAndroid,
{
nativeOnly: {
animating: true,
},
}
);
module.exports = ProgressBarAndroid;
@@ -24,6 +24,7 @@ var requireNativeComponent = require('requireNativeComponent');
/**
* Use `ProgressViewIOS` to render a UIProgressView on iOS.
*/
// $FlowFixMe(>=0.41.0)
var ProgressViewIOS = createReactClass({
displayName: 'ProgressViewIOS',
mixins: [NativeMethodsMixin],
@@ -72,6 +72,7 @@ if (Platform.OS === 'android') {
* __Note:__ `refreshing` is a controlled prop, this is why it needs to be set to true
* in the `onRefresh` function otherwise the refresh indicator will stop immediately.
*/
// $FlowFixMe(>=0.41.0)
const RefreshControl = createReactClass({
displayName: 'RefreshControl',
statics: {
@@ -1,14 +0,0 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule SafeAreaView
* @flow
*/
'use strict';
module.exports = require('View');
@@ -1,48 +0,0 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule SafeAreaView
* @flow
* @format
*/
const React = require('React');
const ViewPropTypes = require('ViewPropTypes');
const requireNativeComponent = require('requireNativeComponent');
import type {ViewProps} from 'ViewPropTypes';
type Props = ViewProps & {
children: any,
};
/**
* Renders nested content and automatically applies paddings reflect the portion of the view
* that is not covered by navigation bars, tab bars, toolbars, and other ancestor views.
* Moreover, and most importantly, Safe Area's paddings reflect physical limitation of the screen,
* such as rounded corners or camera notches (aka sensor housing area on iPhone X).
*/
class SafeAreaView extends React.Component<Props> {
static propTypes = {
...ViewPropTypes,
};
render() {
return <RCTSafeAreaView {...this.props} />;
}
}
const RCTSafeAreaView = requireNativeComponent('RCTSafeAreaView', {
name: 'RCTSafeAreaView',
displayName: 'RCTSafeAreaView',
propTypes: {
...ViewPropTypes,
},
});
module.exports = SafeAreaView;
+35 -46
View File
@@ -11,21 +11,21 @@
*/
'use strict';
const Dimensions = require('Dimensions');
const FrameRateLogger = require('FrameRateLogger');
const Keyboard = require('Keyboard');
const ReactNative = require('ReactNative');
const Subscribable = require('Subscribable');
const TextInputState = require('TextInputState');
const UIManager = require('UIManager');
var Dimensions = require('Dimensions');
var FrameRateLogger = require('FrameRateLogger');
var Keyboard = require('Keyboard');
var ReactNative = require('ReactNative');
var Subscribable = require('Subscribable');
var TextInputState = require('TextInputState');
var UIManager = require('UIManager');
const invariant = require('fbjs/lib/invariant');
const nullthrows = require('fbjs/lib/nullthrows');
const performanceNow = require('fbjs/lib/performanceNow');
const warning = require('fbjs/lib/warning');
var invariant = require('fbjs/lib/invariant');
var nullthrows = require('fbjs/lib/nullthrows');
var performanceNow = require('fbjs/lib/performanceNow');
var warning = require('fbjs/lib/warning');
const { ScrollViewManager } = require('NativeModules');
const { getInstanceFromNode } = require('ReactNativeComponentTree');
var { ScrollViewManager } = require('NativeModules');
var { getInstanceFromNode } = require('ReactNativeComponentTree');
/**
* Mixin that can be integrated in order to handle scrolling that plays well
@@ -105,7 +105,7 @@ const { getInstanceFromNode } = require('ReactNativeComponentTree');
* this.props.onKeyboardDidHide
*/
const IS_ANIMATING_TOUCH_START_THRESHOLD_MS = 16;
var IS_ANIMATING_TOUCH_START_THRESHOLD_MS = 16;
type State = {
isTouching: boolean,
@@ -117,15 +117,15 @@ type State = {
type Event = Object;
function isTagInstanceOfTextInput(tag) {
const instance = getInstanceFromNode(tag);
var instance = getInstanceFromNode(tag);
return instance && instance.viewConfig && (
instance.viewConfig.uiViewClassName === 'AndroidTextInput' ||
instance.viewConfig.uiViewClassName === 'RCTMultilineTextInputView' ||
instance.viewConfig.uiViewClassName === 'RCTSinglelineTextInputView'
instance.viewConfig.uiViewClassName === 'RCTTextView' ||
instance.viewConfig.uiViewClassName === 'RCTTextField'
);
}
const ScrollResponderMixin = {
var ScrollResponderMixin = {
mixins: [Subscribable.Mixin],
scrollResponderMixinGetInitialState: function(): State {
return {
@@ -176,7 +176,7 @@ const ScrollResponderMixin = {
*
*/
scrollResponderHandleStartShouldSetResponder: function(e: Event): boolean {
const currentlyFocusedTextInput = TextInputState.currentlyFocusedField();
var currentlyFocusedTextInput = TextInputState.currentlyFocusedField();
if (this.props.keyboardShouldPersistTaps === 'handled' &&
currentlyFocusedTextInput != null &&
@@ -199,9 +199,9 @@ const ScrollResponderMixin = {
*/
scrollResponderHandleStartShouldSetResponderCapture: function(e: Event): boolean {
// First see if we want to eat taps while the keyboard is up
const currentlyFocusedTextInput = TextInputState.currentlyFocusedField();
const {keyboardShouldPersistTaps} = this.props;
const keyboardNeverPersistTaps = !keyboardShouldPersistTaps ||
var currentlyFocusedTextInput = TextInputState.currentlyFocusedField();
var {keyboardShouldPersistTaps} = this.props;
var keyboardNeverPersistTaps = !keyboardShouldPersistTaps ||
keyboardShouldPersistTaps === 'never';
if (keyboardNeverPersistTaps &&
currentlyFocusedTextInput != null &&
@@ -249,21 +249,11 @@ const ScrollResponderMixin = {
* @param {SyntheticEvent} e Event.
*/
scrollResponderHandleTouchEnd: function(e: Event) {
const nativeEvent = e.nativeEvent;
var nativeEvent = e.nativeEvent;
this.state.isTouching = nativeEvent.touches.length !== 0;
this.props.onTouchEnd && this.props.onTouchEnd(e);
},
/**
* Invoke this from an `onTouchCancel` event.
*
* @param {SyntheticEvent} e Event.
*/
scrollResponderHandleTouchCancel: function(e: Event) {
this.state.isTouching = false;
this.props.onTouchCancel && this.props.onTouchCancel(e);
},
/**
* Invoke this from an `onResponderRelease` event.
*/
@@ -272,7 +262,7 @@ const ScrollResponderMixin = {
// By default scroll views will unfocus a textField
// if another touch occurs outside of it
const currentlyFocusedTextInput = TextInputState.currentlyFocusedField();
var currentlyFocusedTextInput = TextInputState.currentlyFocusedField();
if (this.props.keyboardShouldPersistTaps !== true &&
this.props.keyboardShouldPersistTaps !== 'always' &&
currentlyFocusedTextInput != null &&
@@ -382,9 +372,9 @@ const ScrollResponderMixin = {
* a touch has just started or ended.
*/
scrollResponderIsAnimating: function(): boolean {
const now = performanceNow();
const timeSinceLastMomentumScrollEnd = now - this.state.lastMomentumScrollEndTime;
const isAnimating = timeSinceLastMomentumScrollEnd < IS_ANIMATING_TOUCH_START_THRESHOLD_MS ||
var now = performanceNow();
var timeSinceLastMomentumScrollEnd = now - this.state.lastMomentumScrollEndTime;
var isAnimating = timeSinceLastMomentumScrollEnd < IS_ANIMATING_TOUCH_START_THRESHOLD_MS ||
this.state.lastMomentumScrollEndTime < this.state.lastMomentumScrollBeginTime;
return isAnimating;
},
@@ -463,13 +453,12 @@ const ScrollResponderMixin = {
* @platform ios
*/
scrollResponderZoomTo: function(
rect: {| x: number, y: number, width: number, height: number, animated?: boolean |},
rect: { x: number, y: number, width: number, height: number, animated?: boolean },
animated?: boolean // deprecated, put this inside the rect argument instead
) {
invariant(ScrollViewManager && ScrollViewManager.zoomToRect, 'zoomToRect is not implemented');
if ('animated' in rect) {
animated = rect.animated;
delete rect.animated;
var { animated, ...rect } = rect;
} else if (typeof animated !== 'undefined') {
console.warn('`scrollResponderZoomTo` `animated` argument is deprecated. Use `options.animated` instead');
}
@@ -519,11 +508,11 @@ const ScrollResponderMixin = {
* @param {number} height Height of the text input.
*/
scrollResponderInputMeasureAndScrollToKeyboard: function(left: number, top: number, width: number, height: number) {
let keyboardScreenY = Dimensions.get('window').height;
var keyboardScreenY = Dimensions.get('window').height;
if (this.keyboardWillOpenTo) {
keyboardScreenY = this.keyboardWillOpenTo.endCoordinates.screenY;
}
let scrollOffsetY = top - keyboardScreenY + height + this.additionalScrollOffset;
var scrollOffsetY = top - keyboardScreenY + height + this.additionalScrollOffset;
// By default, this can scroll with negative offset, pulling the content
// down so that the target component's bottom meets the keyboard's top.
@@ -548,12 +537,12 @@ const ScrollResponderMixin = {
*
* The `keyboardWillShow` is called before input focus.
*/
UNSAFE_componentWillMount: function() {
const {keyboardShouldPersistTaps} = this.props;
componentWillMount: function() {
var {keyboardShouldPersistTaps} = this.props;
warning(
typeof keyboardShouldPersistTaps !== 'boolean',
`'keyboardShouldPersistTaps={${keyboardShouldPersistTaps}}' is deprecated. `
+ `Use 'keyboardShouldPersistTaps="${keyboardShouldPersistTaps ? 'always' : 'never'}"' instead`
+ `Use 'keyboardShouldPersistTaps="${keyboardShouldPersistTaps ? "always" : "never"}"' instead`
);
this.keyboardWillOpenTo = null;
@@ -618,7 +607,7 @@ const ScrollResponderMixin = {
};
const ScrollResponder = {
var ScrollResponder = {
Mixin: ScrollResponderMixin,
};
+64 -115
View File
@@ -33,11 +33,7 @@ const flattenStyle = require('flattenStyle');
const invariant = require('fbjs/lib/invariant');
const processDecelerationRate = require('processDecelerationRate');
const requireNativeComponent = require('requireNativeComponent');
/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
* found when Flow v0.54 was deployed. To see the error delete this comment and
* run Flow. */
const warning = require('fbjs/lib/warning');
const resolveAssetSource = require('resolveAssetSource');
import type {NativeMethodsMixinType} from 'ReactNativeTypes';
@@ -190,11 +186,6 @@ const ScrollView = createReactClass({
'black',
'white',
]),
/**
* If sticky headers should stick at the bottom instead of the top of the
* ScrollView. This is usually used with inverted ScrollViews.
*/
invertStickyHeaders: PropTypes.bool,
/**
* When true, the ScrollView will try to lock to only vertical or horizontal
* scrolling while dragging. The default value is false.
@@ -239,34 +230,6 @@ const ScrollView = createReactClass({
* - `true`, deprecated, use 'always' instead
*/
keyboardShouldPersistTaps: PropTypes.oneOf(['always', 'never', 'handled', false, true]),
/**
* When set, the scroll view will adjust the scroll position so that the first child that is
* currently visible and at or beyond `minIndexForVisible` will not change position. This is
* useful for lists that are loading content in both directions, e.g. a chat thread, where new
* messages coming in might otherwise cause the scroll position to jump. A value of 0 is common,
* but other values such as 1 can be used to skip loading spinners or other content that should
* not maintain position.
*
* The optional `autoscrollToTopThreshold` can be used to make the content automatically scroll
* to the top after making the adjustment if the user was within the threshold of the top before
* the adjustment was made. This is also useful for chat-like applications where you want to see
* new messages scroll into place, but not if the user has scrolled up a ways and it would be
* disruptive to scroll a bunch.
*
* Caveat 1: Reordering elements in the scrollview with this enabled will probably cause
* jumpiness and jank. It can be fixed, but there are currently no plans to do so. For now,
* don't re-order the content of any ScrollViews or Lists that use this feature.
*
* Caveat 2: This simply uses `contentOffset` and `frame.origin` in native code to compute
* visibility. Occlusion, transforms, and other complexity won't be taken into account as to
* whether content is "visible" or not.
*
* @platform ios
*/
maintainVisibleContentPosition: PropTypes.shape({
minIndexForVisible: PropTypes.number.isRequired,
autoscrollToTopThreshold: PropTypes.number,
}),
/**
* The maximum allowed zoom scale. The default value is 1.0.
* @platform ios
@@ -290,15 +253,6 @@ const ScrollView = createReactClass({
* events can be controlled using the `scrollEventThrottle` prop.
*/
onScroll: PropTypes.func,
/**
* Called when the user begins to drag the scroll view.
*/
onScrollBeginDrag: PropTypes.func,
/**
* Called when the user stops dragging the scroll view and it either stops
* or begins to glide.
*/
onScrollEndDrag: PropTypes.func,
/**
* Called when scrollable content view of the ScrollView changes.
*
@@ -327,7 +281,7 @@ const ScrollView = createReactClass({
* When false, the view cannot be scrolled via touch interaction.
* The default value is true.
*
* Note that the view can always be scrolled by calling `scrollTo`.
* Note that the view can be always be scrolled by calling `scrollTo`.
*/
scrollEnabled: PropTypes.bool,
/**
@@ -374,14 +328,15 @@ const ScrollView = createReactClass({
* with `horizontal={true}`.
*/
stickyHeaderIndices: PropTypes.arrayOf(PropTypes.number),
style: StyleSheetPropType(ViewStylePropTypes),
/**
* When set, causes the scroll view to stop at multiples of the value of
* `snapToInterval`. This can be used for paginating through children
* that have lengths smaller than the scroll view. Typically used in
* combination with `snapToAlignment` and `decelerationRate="fast"` on ios.
* combination with `snapToAlignment` and `decelerationRate="fast"`.
* Overrides less configurable `pagingEnabled` prop.
*
* Supported for horizontal scrollview on android.
* @platform ios
*/
snapToInterval: PropTypes.number,
/**
@@ -476,25 +431,6 @@ const ScrollView = createReactClass({
* @platform ios
*/
DEPRECATED_sendUpdatedChildFrames: PropTypes.bool,
/**
* Optionally an image can be used for the scroll bar thumb. This will
* override the color. While the image is loading or the image fails to
* load the color will be used instead. Use an alpha of 0 in the color
* to avoid seeing it while the image is loading.
*
* - `uri` - a string representing the resource identifier for the image, which
* should be either a local file path or the name of a static image resource
* - `number` - Opaque type returned by something like
* `import IMAGE from './image.jpg'`.
* @platform vr
*/
scrollBarThumbImage: PropTypes.oneOfType([
PropTypes.shape({
uri: PropTypes.string,
}),
// Opaque type returned by import IMAGE from './image.jpg'
PropTypes.number,
]),
},
mixins: [ScrollResponder.Mixin],
@@ -504,15 +440,11 @@ const ScrollView = createReactClass({
_stickyHeaderRefs: (new Map(): Map<number, ScrollViewStickyHeader>),
_headerLayoutYs: (new Map(): Map<string, number>),
getInitialState: function() {
return {
...this.scrollResponderMixinGetInitialState(),
layoutHeight: null,
};
return this.scrollResponderMixinGetInitialState();
},
UNSAFE_componentWillMount: function() {
this._scrollAnimatedValue = new Animated.Value(this.props.contentOffset ? this.props.contentOffset.y : 0);
this._scrollAnimatedValue.setOffset(this.props.contentInset ? this.props.contentInset.top : 0);
componentWillMount: function() {
this._scrollAnimatedValue = new Animated.Value(0);
this._stickyHeaderRefs = new Map();
this._headerLayoutYs = new Map();
},
@@ -616,6 +548,9 @@ const ScrollView = createReactClass({
},
_getKeyForIndex: function(index, childArray) {
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
* suppresses an error when upgrading Flow's support for React. To see the
* error delete this comment and run Flow. */
const child = childArray[index];
return child && child.key;
},
@@ -645,6 +580,9 @@ const ScrollView = createReactClass({
if (!this.props.stickyHeaderIndices) {
return;
}
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
* suppresses an error when upgrading Flow's support for React. To see the
* error delete this comment and run Flow. */
const childArray = React.Children.toArray(this.props.children);
if (key !== this._getKeyForIndex(index, childArray)) {
// ignore stale layout update
@@ -654,7 +592,13 @@ const ScrollView = createReactClass({
const layoutY = event.nativeEvent.layout.y;
this._headerLayoutYs.set(key, layoutY);
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
* suppresses an error when upgrading Flow's support for React. To see the
* error delete this comment and run Flow. */
const indexOfIndex = this.props.stickyHeaderIndices.indexOf(index);
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
* suppresses an error when upgrading Flow's support for React. To see the
* error delete this comment and run Flow. */
const previousHeaderIndex = this.props.stickyHeaderIndices[indexOfIndex - 1];
if (previousHeaderIndex != null) {
const previousHeader = this._stickyHeaderRefs.get(
@@ -667,7 +611,7 @@ const ScrollView = createReactClass({
_handleScroll: function(e: Object) {
if (__DEV__) {
if (this.props.onScroll && this.props.scrollEventThrottle == null && Platform.OS === 'ios') {
console.log(
console.log( // eslint-disable-line no-console-disallow
'You specified `onScroll` on a <ScrollView> but not ' +
'`scrollEventThrottle`. You will only receive one event. ' +
'Using `16` you get all the events but be aware that it may ' +
@@ -684,15 +628,6 @@ const ScrollView = createReactClass({
this.scrollResponderHandleScroll(e);
},
_handleLayout: function(e: Object) {
if (this.props.invertStickyHeaders) {
this.setState({ layoutHeight: e.nativeEvent.layout.height });
}
if (this.props.onLayout) {
this.props.onLayout(e);
}
},
_handleContentOnLayout: function(e: Object) {
const {width, height} = e.nativeEvent.layout;
this.props.onContentSizeChange && this.props.onContentSizeChange(width, height);
@@ -711,21 +646,20 @@ const ScrollView = createReactClass({
render: function() {
let ScrollViewClass;
let ScrollContentContainerViewClass;
if (Platform.OS === 'android') {
if (this.props.horizontal) {
ScrollViewClass = AndroidHorizontalScrollView;
ScrollContentContainerViewClass = AndroidHorizontalScrollContentView;
} else {
ScrollViewClass = AndroidScrollView;
ScrollContentContainerViewClass = View;
}
} else {
if (Platform.OS === 'ios') {
ScrollViewClass = RCTScrollView;
ScrollContentContainerViewClass = RCTScrollContentView;
warning(
!this.props.snapToInterval || !this.props.pagingEnabled,
'snapToInterval is currently ignored when pagingEnabled is true.'
);
} else if (Platform.OS === 'android') {
if (this.props.horizontal) {
ScrollViewClass = AndroidHorizontalScrollView;
} else {
ScrollViewClass = AndroidScrollView;
}
ScrollContentContainerViewClass = View;
}
invariant(
@@ -763,24 +697,38 @@ const ScrollView = createReactClass({
const {stickyHeaderIndices} = this.props;
const hasStickyHeaders = stickyHeaderIndices && stickyHeaderIndices.length > 0;
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
* suppresses an error when upgrading Flow's support for React. To see the
* error delete this comment and run Flow. */
const childArray = hasStickyHeaders && React.Children.toArray(this.props.children);
const children = hasStickyHeaders ?
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
* comment suppresses an error when upgrading Flow's support for React.
* To see the error delete this comment and run Flow. */
childArray.map((child, index) => {
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
* comment suppresses an error when upgrading Flow's support for React.
* To see the error delete this comment and run Flow. */
const indexOfIndex = child ? stickyHeaderIndices.indexOf(index) : -1;
if (indexOfIndex > -1) {
const key = child.key;
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
* comment suppresses an error when upgrading Flow's support for
* React. To see the error delete this comment and run Flow. */
const nextIndex = stickyHeaderIndices[indexOfIndex + 1];
return (
<ScrollViewStickyHeader
key={key}
ref={(ref) => this._setStickyHeaderRef(key, ref)}
nextHeaderLayoutY={
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss)
* This comment suppresses an error when upgrading Flow's
* support for React. To see the error delete this comment and
* run Flow. */
this._headerLayoutYs.get(this._getKeyForIndex(nextIndex, childArray))
}
onLayout={(event) => this._onStickyHeaderLayout(index, event, key)}
scrollAnimatedValue={this._scrollAnimatedValue}
inverted={this.props.invertStickyHeaders}
scrollViewHeight={this.state.layoutHeight}>
scrollAnimatedValue={this._scrollAnimatedValue}>
{child}
</ScrollViewStickyHeader>
);
@@ -788,10 +736,16 @@ const ScrollView = createReactClass({
return child;
}
}) :
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
* comment suppresses an error when upgrading Flow's support for React.
* To see the error delete this comment and run Flow. */
this.props.children;
const contentContainer =
<ScrollContentContainerViewClass
{...contentSizeChangeProps}
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
* comment suppresses an error when upgrading Flow's support for React.
* To see the error delete this comment and run Flow. */
ref={this._setInnerViewRef}
style={contentContainerStyle}
removeClippedSubviews={
@@ -827,12 +781,14 @@ const ScrollView = createReactClass({
// Override the onContentSizeChange from props, since this event can
// bubble up from TextInputs
onContentSizeChange: null,
onLayout: this._handleLayout,
onMomentumScrollBegin: this.scrollResponderHandleMomentumScrollBegin,
onMomentumScrollEnd: this.scrollResponderHandleMomentumScrollEnd,
onResponderGrant: this.scrollResponderHandleResponderGrant,
onResponderReject: this.scrollResponderHandleResponderReject,
onResponderRelease: this.scrollResponderHandleResponderRelease,
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
* comment suppresses an error when upgrading Flow's support for React.
* To see the error delete this comment and run Flow. */
onResponderTerminate: this.scrollResponderHandleTerminate,
onResponderTerminationRequest: this.scrollResponderHandleTerminationRequest,
onScroll: this._handleScroll,
@@ -844,8 +800,6 @@ const ScrollView = createReactClass({
onTouchEnd: this.scrollResponderHandleTouchEnd,
onTouchMove: this.scrollResponderHandleTouchMove,
onTouchStart: this.scrollResponderHandleTouchStart,
onTouchCancel: this.scrollResponderHandleTouchCancel,
scrollBarThumbImage: resolveAssetSource(this.props.scrollBarThumbImage),
scrollEventThrottle: hasStickyHeaders ? 1 : this.props.scrollEventThrottle,
sendMomentumEvents: (this.props.onMomentumScrollBegin || this.props.onMomentumScrollEnd) ?
true : false,
@@ -864,6 +818,9 @@ const ScrollView = createReactClass({
// On iOS the RefreshControl is a child of the ScrollView.
// tvOS lacks native support for RefreshControl, so don't include it in that case
return (
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
* comment suppresses an error when upgrading Flow's support for
* React. To see the error delete this comment and run Flow. */
<ScrollViewClass {...props} ref={this._setScrollViewRef}>
{Platform.isTVOS ? null : refreshControl}
{contentContainer}
@@ -879,6 +836,9 @@ const ScrollView = createReactClass({
return React.cloneElement(
refreshControl,
{style: props.style},
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
* comment suppresses an error when upgrading Flow's support for
* React. To see the error delete this comment and run Flow. */
<ScrollViewClass {...props} style={baseStyle} ref={this._setScrollViewRef}>
{contentContainer}
</ScrollViewClass>
@@ -886,6 +846,9 @@ const ScrollView = createReactClass({
}
}
return (
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
* comment suppresses an error when upgrading Flow's support for React.
* To see the error delete this comment and run Flow. */
<ScrollViewClass {...props} ref={this._setScrollViewRef}>
{contentContainer}
</ScrollViewClass>
@@ -913,7 +876,6 @@ const styles = StyleSheet.create({
let nativeOnlyProps,
AndroidScrollView,
AndroidHorizontalScrollContentView,
AndroidHorizontalScrollView,
RCTScrollView,
RCTScrollContentView;
@@ -933,9 +895,6 @@ if (Platform.OS === 'android') {
(ScrollView: React.ComponentType<any>),
nativeOnlyProps
);
AndroidHorizontalScrollContentView = requireNativeComponent(
'AndroidHorizontalScrollContentView'
);
} else if (Platform.OS === 'ios') {
nativeOnlyProps = {
nativeOnly: {
@@ -950,17 +909,7 @@ if (Platform.OS === 'android') {
(ScrollView: React.ComponentType<any>),
nativeOnlyProps,
);
RCTScrollContentView = requireNativeComponent('RCTScrollContentView', View);
} else {
nativeOnlyProps = {
nativeOnly: {
}
};
RCTScrollView = requireNativeComponent(
'RCTScrollView',
null,
nativeOnlyProps,
);
// $FlowFixMe (bvaughn) Update ComponentInterface in ViewPropTypes to include a string type (for Fiber host components) in a follow-up.
RCTScrollContentView = requireNativeComponent('RCTScrollContentView', View);
}
@@ -8,7 +8,6 @@
*
* @providesModule ScrollViewStickyHeader
* @flow
* @format
*/
'use strict';
@@ -16,40 +15,34 @@ const Animated = require('Animated');
const React = require('React');
const StyleSheet = require('StyleSheet');
import type {LayoutEvent} from 'CoreEventTypes';
type Props = {
children?: React.Element<any>,
nextHeaderLayoutY: ?number,
onLayout: (event: LayoutEvent) => void,
onLayout: (event: Object) => void,
scrollAnimatedValue: Animated.Value,
// Will cause sticky headers to stick at the bottom of the ScrollView instead
// of the top.
inverted: ?boolean,
// The height of the parent ScrollView. Currently only set when inverted.
scrollViewHeight: ?number,
};
type State = {
class ScrollViewStickyHeader extends React.Component<Props, {
measured: boolean,
layoutY: number,
layoutHeight: number,
nextHeaderLayoutY: ?number,
};
class ScrollViewStickyHeader extends React.Component<Props, State> {
state = {
measured: false,
layoutY: 0,
layoutHeight: 0,
nextHeaderLayoutY: this.props.nextHeaderLayoutY,
};
setNextHeaderY(y: number) {
this.setState({nextHeaderLayoutY: y});
}> {
constructor(props: Props, context: Object) {
super(props, context);
this.state = {
measured: false,
layoutY: 0,
layoutHeight: 0,
nextHeaderLayoutY: props.nextHeaderLayoutY,
};
}
_onLayout = event => {
setNextHeaderY(y: number) {
this.setState({ nextHeaderLayoutY: y });
}
_onLayout = (event) => {
this.setState({
measured: true,
layoutY: event.nativeEvent.layout.y,
@@ -64,70 +57,32 @@ class ScrollViewStickyHeader extends React.Component<Props, State> {
};
render() {
const {inverted, scrollViewHeight} = this.props;
const {measured, layoutHeight, layoutY, nextHeaderLayoutY} = this.state;
const inputRange: Array<number> = [-1, 0];
const outputRange: Array<number> = [0, 0];
if (measured) {
if (inverted) {
// The interpolation looks like:
// - Negative scroll: no translation
// - `stickStartPoint` is the point at which the header will start sticking.
// It is calculated using the ScrollView viewport height so it is a the bottom.
// - Headers that are in the initial viewport will never stick, `stickStartPoint`
// will be negative.
// - From 0 to `stickStartPoint` no translation. This will cause the header
// to scroll normally until it reaches the top of the scroll view.
// - From `stickStartPoint` to when the next header y hits the bottom edge of the header: translate
// equally to scroll. This will cause the header to stay at the top of the scroll view.
// - Past the collision with the next header y: no more translation. This will cause the
// header to continue scrolling up and make room for the next sticky header.
// In the case that there is no next header just translate equally to
// scroll indefinitely.
if (scrollViewHeight != null) {
const stickStartPoint = layoutY + layoutHeight - scrollViewHeight;
if (stickStartPoint > 0) {
inputRange.push(stickStartPoint);
outputRange.push(0);
inputRange.push(stickStartPoint + 1);
outputRange.push(1);
// If the next sticky header has not loaded yet (probably windowing) or is the last
// we can just keep it sticked forever.
const collisionPoint =
(nextHeaderLayoutY || 0) - layoutHeight - scrollViewHeight;
if (collisionPoint > stickStartPoint) {
inputRange.push(collisionPoint, collisionPoint + 1);
outputRange.push(
collisionPoint - stickStartPoint,
collisionPoint - stickStartPoint,
);
}
}
}
// The interpolation looks like:
// - Negative scroll: no translation
// - From 0 to the y of the header: no translation. This will cause the header
// to scroll normally until it reaches the top of the scroll view.
// - From header y to when the next header y hits the bottom edge of the header: translate
// equally to scroll. This will cause the header to stay at the top of the scroll view.
// - Past the collision with the next header y: no more translation. This will cause the
// header to continue scrolling up and make room for the next sticky header.
// In the case that there is no next header just translate equally to
// scroll indefinetly.
inputRange.push(layoutY);
outputRange.push(0);
// Sometimes headers jump around so we make sure we don't violate the monotonic inputRange
// condition.
const collisionPoint = (nextHeaderLayoutY || 0) - layoutHeight;
if (collisionPoint >= layoutY) {
inputRange.push(collisionPoint, collisionPoint + 1);
outputRange.push(collisionPoint - layoutY, collisionPoint - layoutY);
} else {
// The interpolation looks like:
// - Negative scroll: no translation
// - From 0 to the y of the header: no translation. This will cause the header
// to scroll normally until it reaches the top of the scroll view.
// - From header y to when the next header y hits the bottom edge of the header: translate
// equally to scroll. This will cause the header to stay at the top of the scroll view.
// - Past the collision with the next header y: no more translation. This will cause the
// header to continue scrolling up and make room for the next sticky header.
// In the case that there is no next header just translate equally to
// scroll indefinitely.
inputRange.push(layoutY);
outputRange.push(0);
// If the next sticky header has not loaded yet (probably windowing) or is the last
// we can just keep it sticked forever.
const collisionPoint = (nextHeaderLayoutY || 0) - layoutHeight;
if (collisionPoint >= layoutY) {
inputRange.push(collisionPoint, collisionPoint + 1);
outputRange.push(collisionPoint - layoutY, collisionPoint - layoutY);
} else {
inputRange.push(layoutY + 1);
outputRange.push(1);
}
inputRange.push(layoutY + 1);
outputRange.push(1);
}
}
@@ -8,13 +8,8 @@
*
* @flow
*/
/* eslint-env jest */
'use strict';
declare var jest: any;
const React = require('React');
const View = require('View');
@@ -22,9 +17,7 @@ const requireNativeComponent = require('requireNativeComponent');
const RCTScrollView = requireNativeComponent('RCTScrollView');
const ScrollViewComponent = jest.genMockFromModule('ScrollView');
class ScrollViewMock extends ScrollViewComponent {
class ScrollViewMock extends React.Component<$FlowFixMeProps> {
render() {
return (
<RCTScrollView {...this.props}>
@@ -35,7 +35,7 @@ type Event = Object;
* #### Programmatically changing selected index
*
* The selected index can be changed on the fly by assigning the
* selectedIndex prop to a state variable, then changing that variable.
* selectIndex prop to a state variable, then changing that variable.
* Note that the state variable would need to be updated as the user
* selects a value and changes the index, as shown in the example below.
*
@@ -49,6 +49,7 @@ type Event = Object;
* />
* ````
*/
// $FlowFixMe(>=0.41.0)
var SegmentedControlIOS = createReactClass({
displayName: 'SegmentedControlIOS',
mixins: [NativeMethodsMixin],
+1 -69
View File
@@ -28,64 +28,8 @@ type Event = Object;
/**
* A component used to select a single value from a range of values.
*
* ### Usage
*
* The example below shows how to use `Slider` to change
* a value used by `Text`. The value is stored using
* the state of the root component (`App`). The same component
* subscribes to the `onValueChange` of `Slider` and changes
* the value using `setState`.
*
*```
* import React from 'react';
* import { StyleSheet, Text, View, Slider } from 'react-native';
*
* export default class App extends React.Component {
* constructor(props) {
* super(props);
* this.state = {
* value: 50
* }
* }
*
* change(value) {
* this.setState(() => {
* return {
* value: parseFloat(value)
* };
* });
* }
*
* render() {
* const {value} = this.state;
* return (
* <View style={styles.container}>
* <Text style={styles.text}>{String(value)}</Text>
* <Slider
* step={1}
* maximumValue={100}
* onValueChange={this.change.bind(this)}
* value={value} />
* </View>
* );
* }
* }
*
* const styles = StyleSheet.create({
* container: {
* flex: 1,
* flexDirection: 'column',
* justifyContent: 'center'
* },
* text: {
* fontSize: 50,
* textAlign: 'center'
* }
* });
*```
*
*/
// $FlowFixMe(>=0.41.0)
var Slider = createReactClass({
displayName: 'Slider',
mixins: [NativeMethodsMixin],
@@ -215,14 +159,8 @@ var Slider = createReactClass({
render: function() {
const {style, onValueChange, onSlidingComplete, ...props} = this.props;
/* $FlowFixMe(>=0.54.0 site=react_native_fb,react_native_oss) This comment
* suppresses an error found when Flow v0.54 was deployed. To see the error
* delete this comment and run Flow. */
props.style = [styles.slider, style];
/* $FlowFixMe(>=0.54.0 site=react_native_fb,react_native_oss) This comment
* suppresses an error found when Flow v0.54 was deployed. To see the error
* delete this comment and run Flow. */
props.onValueChange = onValueChange && ((event: Event) => {
let userEvent = true;
if (Platform.OS === 'android') {
@@ -233,14 +171,8 @@ var Slider = createReactClass({
onValueChange && userEvent && onValueChange(event.nativeEvent.value);
});
/* $FlowFixMe(>=0.54.0 site=react_native_fb,react_native_oss) This comment
* suppresses an error found when Flow v0.54 was deployed. To see the error
* delete this comment and run Flow. */
props.onChange = props.onValueChange;
/* $FlowFixMe(>=0.54.0 site=react_native_fb,react_native_oss) This comment
* suppresses an error found when Flow v0.54 was deployed. To see the error
* delete this comment and run Flow. */
props.onSlidingComplete = onSlidingComplete && ((event: Event) => {
onSlidingComplete && onSlidingComplete(event.nativeEvent.value);
});

Some files were not shown because too many files have changed in this diff Show More