react-native/Examples/UIExplorer
Andrei Coman f07ca31303 Listen to device orientation changes
Summary:
Similar to iOS, send device orientation changes events. This does not have the
`getCurrentOrientation` method, because it's not used. If necessary, we'll
add it separately.
This also adds a simple example for testing.

We listen to orientation changes in `onGlobalLayout`, and check if the rotation of the device has changed. If it has, we emit the event.
But:
- `onGlobalLayout` (and `onConfigurationChanged` - which is the method usually used for checking for device orientation changes) is *not* called when the device goes from landscape
  to reverse landscape (same with portrait), as that is not a relayout / configuration change. We could detect if this happens with the help of an `OrientationEventListener`. However, this listener notifies you if the degree
  of the phone changes by a single degree, which means that you need to know by how many degrees the phone needs to change in order for the orientation to change. I haven't looked into how accurate this could be, but I suspect that in practice it would cause a lot of bugs. A simple `abgs` and google search reveals that everybody uses a different margin for detecting a rotation change (from 30 to 45 degrees), so I suspect that this won't work
  as expected in practice. Therefore, we're not using this here, and we're sticking to what android provides via `onConfigurationChanged`. If we find that we have issues because users need to know when the user goes
  from landscape to reverse landscape, then we'll have to revisit this.

Reviewed By: foghina

Differential Revision: D3797521

fbshipit-source-id: 62508efd342a9a4b41b42b6138c73553cfdefebc
2016-09-06 03:59:01 -07:00
..
UIExplorer Support bundle argument for image loading 2016-08-31 17:43:49 -07:00
UIExplorer.xcodeproj Update React Native minimum OS version to iOS8 2016-09-01 19:43:47 -07:00
UIExplorerIntegrationTests Fix snapshottests under iOS10 2016-08-17 10:44:01 -07:00
UIExplorerUnitTests Support sync method calls in the objc bridge 2016-09-05 07:44:00 -07:00
android/app Listen to device orientation changes 2016-09-06 03:59:01 -07:00
js Listen to device orientation changes 2016-09-06 03:59:01 -07:00
README.md Allow building UIExplorer with Buck 2016-04-12 13:05:24 -07:00

README.md

UIExplorer

The UIExplorer is a sample app that 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 Examples/UIExplorer/UIExplorer.xcodeproj in Xcode
  • Hit the Run button

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

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 :Examples:UIExplorer:android:app:installDebug
./packager/packager.sh

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

Open the UIExplorer 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 uiexplorer
buck install -r uiexplorer
./packager/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).