react-native/RNTester
Mats Byrkeland 253b29dbd8 Add accessibilityHint for iOS (#18093)
Summary:
This adds the accessibilityHint for View, Text and Touchable* on iOS.
The accessibilityHint provides some more information about an element
when the accessibilityLabel is not enough.

The accessibilityHint is a core accessibility property on iOS.

From https://developer.apple.com/documentation/objectivec/nsobject/1615093-accessibilityhint:
> An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not obvious from the accessibility label.

Related issue: https://github.com/facebook/react-native/issues/14706

The npm scripts `test`, `flow`, `lint` and `prettier` are satisfied.

I added a couple of examples to the RNTester app. The Accessibility Inspector on Mac helps debugging accessibility stuff on a simulator, but it does not show the accessibilityHint. Therefore I tested the RNTester app on an iPhone 8 device using VoiceOver to verify the hint functionality. It works fine, and I've tested disabling and enabling "read hints" in the VoiceOver settings on the phone.

https://github.com/facebook/react-native-website/pull/222

[IOS][FEATURE][Accessibility] - Add accessibilityHint for View, Text, Touchable* on iOS
Closes https://github.com/facebook/react-native/pull/18093

Reviewed By: hramos

Differential Revision: D7230780

Pulled By: ziqichen6

fbshipit-source-id: 172ad28dc9ae2b67ea256100f6acb939f2466d0b
2018-07-25 17:47:42 -07:00
..
RNTester Update license headers for MIT license 2018-02-16 18:31:53 -08:00
RNTester-tvOS
RNTester.xcodeproj Update Xcode projects (#19574) 2018-06-19 23:48:12 -07:00
RNTesterIntegrationTests RN: Disable testImageCachePolicyTest 2018-05-04 10:58:46 -07:00
RNTesterPods.xcodeproj Update Xcode projects (#19574) 2018-06-19 23:48:12 -07:00
RNTesterUnitTests iOS OSS: deployment target 8.0 => 9.0 2018-05-22 01:16:45 -07:00
android/app android targetSdkVersion is 26 (#19944) 2018-06-28 11:49:32 -07:00
js Add accessibilityHint for iOS (#18093) 2018-07-25 17:47:42 -07:00
.gitignore iOS OSS: check in the Podfile.lock 2018-04-13 17:33:23 -07:00
Podfile iOS OSS cocoapods: removed deps on RCTFabric for now 2018-05-24 14:57:55 -07:00
Podfile.lock iOS OSS cocoapods: removed deps on RCTFabric for now 2018-05-24 14:57:55 -07:00
README.md iOS OSS: added CocoaPods setup to RNTester and fix up the podspecs 2018-04-12 16:11:33 -07:00

README.md

RNTester

The RNTester showcases React Native views and modules.

Running this app

Before running the app, make sure you ran:

git clone https://github.com/facebook/react-native.git
cd react-native
npm install

Running on iOS

Mac OS and Xcode are required.

  • Open RNTester/RNTester.xcodeproj in Xcode
  • Hit the Run button

See Running on device if you want to use a physical device.

Running on iOS with CocoaPods

Similar to above, you can build the app via Xcode with help of CocoaPods.

  • Install CocoaPods
  • Run cd RNTester; pod install
  • Open the generated RNTesterPods.xcworkspace (this is not checked in). Do not open RNTesterPods.xcodeproj directly.

Running on Android

You'll need to have all the prerequisites (SDK, NDK) for Building React Native installed.

Start an Android emulator (Genymotion is recommended).

cd react-native
./gradlew :RNTester:android:app:installDebug
./scripts/packager.sh

Note: Building for the first time can take a while.

Open the RNTester app in your emulator.

See Running on Device in case you want to use a physical device.

Running with Buck

Follow the same setup as running with gradle.

Install Buck from here.

Run the following commands from the react-native folder:

./gradlew :ReactAndroid:packageReactNdkLibsForBuck
buck fetch rntester
buck install -r rntester
./scripts/packager.sh

Note: The native libs are still built using gradle. Full build with buck is coming soon(tm).

Built from source

Building the app on both iOS and Android means building the React Native framework from source. This way you're running the latest native and JS code the way you see it in your clone of the github repo.

This is different from apps created using react-native init which have a dependency on a specific version of React Native JS and native code, declared in a package.json file (and build.gradle for Android apps).