e4c53c28ae
Summary: public React Native currently exposes the iOS layer shadow properties more-or-less directly, however there are a number of problems with this: 1) Performance when using these properties is poor by default. That's because iOS calculates the shadow by getting the exact pixel mask of the view, including any tranlucent content, and all of its subviews, which is very CPU and GPU-intensive. 2) The iOS shadow properties do not match the syntax or semantics of the CSS box-shadow standard, and are unlikely to be possible to implement on Android. 3) We don't expose the `layer.shadowPath` property, which is crucial to getting good performance out of layer shadows. This diff solves problem number 1) by implementing a default `shadowPath` that matches the view border for views with an opaque background. This improves the performance of shadows by optimizing for the common usage case. I've also reinstated background color propagation for views which have shadow props - this should help ensure that this best-case scenario occurs more often. For views with an explicit transparent background, the shadow will continue to work as it did before ( `shadowPath` will be left unset, and the shadow will be derived exactly from the pixels of the view and its subviews). This is the worst-case path for performance, however, so you should avoid it unless absolutely necessary. **Support for this may be disabled by default in future, or dropped altogether.** For translucent images, it is suggested that you bake the shadow into the image itself, or use another mechanism to pre-generate the shadow. For text shadows, you should use the textShadow properties, which work cross-platform and have much better performance. Problem number 2) will be solved in a future diff, possibly by renaming the iOS shadowXXX properties to boxShadowXXX, and changing the syntax and semantics to match the CSS standards. Problem number 3) is now mostly moot, since we generate the shadowPath automatically. In future, we may provide an iOS-specific prop to set the path explicitly if there's a demand for more precise control of the shadow. Reviewed By: weicool Differential Revision: D2827581 fb-gh-sync-id: 853aa018e1d61d5f88304c6fc1b78f9d7e739804 |
||
|---|---|---|
| .. | ||
| AnimatedGratuitousApp | ||
| Navigator | ||
| Thumbnails | ||
| UIExplorer | ||
| UIExplorer.xcodeproj | ||
| UIExplorerIntegrationTests | ||
| UIExplorerUnitTests | ||
| android/app | ||
| AccessibilityAndroidExample.android.js | ||
| AccessibilityIOSExample.js | ||
| ActionSheetIOSExample.js | ||
| ActivityIndicatorIOSExample.js | ||
| AdSupportIOSExample.js | ||
| AlertExample.js | ||
| AlertIOSExample.js | ||
| AnimatedExample.js | ||
| AppStateIOSExample.js | ||
| AssetScaledImageExample.js | ||
| AsyncStorageExample.js | ||
| BorderExample.js | ||
| BoxShadowExample.js | ||
| CameraRollExample.js | ||
| CameraRollView.js | ||
| ClipboardExample.js | ||
| DatePickerIOSExample.js | ||
| ExampleTypes.js | ||
| GeolocationExample.js | ||
| ImageCapInsetsExample.js | ||
| ImageEditingExample.js | ||
| ImageExample.js | ||
| IntentAndroidExample.android.js | ||
| LayoutEventsExample.js | ||
| LayoutExample.js | ||
| ListViewExample.js | ||
| ListViewGridLayoutExample.js | ||
| ListViewPagingExample.js | ||
| MapViewExample.js | ||
| ModalExample.js | ||
| NavigatorIOSColorsExample.js | ||
| NavigatorIOSExample.js | ||
| NetInfoExample.js | ||
| PanResponderExample.js | ||
| PickerIOSExample.js | ||
| PointerEventsExample.js | ||
| ProgressBarAndroidExample.android.js | ||
| ProgressViewIOSExample.js | ||
| PullToRefreshViewAndroidExample.android.js | ||
| PushNotificationIOSExample.js | ||
| RCTRootViewIOSExample.js | ||
| README.md | ||
| RefreshControlExample.js | ||
| ScrollViewExample.js | ||
| ScrollViewSimpleExample.js | ||
| SegmentedControlIOSExample.js | ||
| SetPropertiesExampleApp.js | ||
| SliderIOSExample.js | ||
| StatusBarIOSExample.js | ||
| SwitchExample.js | ||
| TabBarIOSExample.js | ||
| TextExample.android.js | ||
| TextExample.ios.js | ||
| TextInputExample.android.js | ||
| TextInputExample.ios.js | ||
| TimerExample.js | ||
| ToastAndroidExample.android.js | ||
| ToolbarAndroidExample.android.js | ||
| TouchableExample.js | ||
| TransformExample.js | ||
| TransparentHitTestExample.js | ||
| UIExplorerApp.android.js | ||
| UIExplorerApp.ios.js | ||
| UIExplorerBlock.js | ||
| UIExplorerButton.js | ||
| UIExplorerList.android.js | ||
| UIExplorerList.ios.js | ||
| UIExplorerListBase.js | ||
| UIExplorerPage.js | ||
| UIExplorerTitle.js | ||
| VibrationIOSExample.js | ||
| ViewExample.js | ||
| ViewPagerAndroidExample.android.js | ||
| WebViewExample.js | ||
| XHRExample.android.js | ||
| XHRExample.ios.js | ||
| XHRExampleCookies.js | ||
| XHRExampleFetch.js | ||
| XHRExampleHeaders.js | ||
| bunny.png | ||
| createExamplePage.js | ||
| flux@3x.png | ||
| hawk.png | ||
| slider-left.png | ||
| slider-left@2x.png | ||
| slider-right.png | ||
| slider-right@2x.png | ||
| slider.png | ||
| slider@2x.png | ||
| uie_thumb_big.png | ||
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.xcodeprojin 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.
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).