Repository: facebookarchive/react-360 Branch: master Commit: 43d30d4b05bd Files: 667 Total size: 16.1 MB Directory structure: gitextract_38_tdv3f/ ├── .circleci/ │ └── config.yml ├── .flowconfig ├── .gitattributes ├── .github/ │ ├── ISSUE_TEMPLATE.md │ └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── LICENSE-docs ├── LICENSE-examples ├── Libraries/ │ ├── .eslintrc.js │ ├── Camera/ │ │ └── LiveEnvCamera.js │ ├── Components/ │ │ └── View/ │ │ ├── PlatformViewPropTypes.vr.js │ │ └── View.vr.js │ ├── Lights/ │ │ ├── AmbientLight.js │ │ ├── DirectionalLight.js │ │ ├── PointLight.js │ │ └── SpotLight.js │ ├── Mesh/ │ │ ├── Box.js │ │ ├── Cylinder.js │ │ ├── Entity.js │ │ ├── Model.js │ │ ├── Plane.js │ │ └── Sphere.js │ ├── Pano/ │ │ ├── Pano.js │ │ └── Prefetch.js │ ├── Scene/ │ │ └── Scene.js │ ├── Sound/ │ │ └── Sound.js │ ├── StyleSheet/ │ │ ├── LayoutAndTransformColorPropTypes.js │ │ ├── LayoutAndTransformOpacityPropTypes.js │ │ ├── LayoutAndTransformPropTypes.js │ │ ├── LayoutAndTransformTintPropTypes.js │ │ ├── LayoutPropTypes.vr.js │ │ └── ViewStylePropTypes.vr.js │ ├── Utilities/ │ │ ├── MatrixMath.vr.js │ │ ├── Platform.vr.js │ │ ├── ThreeJSConstants.js │ │ ├── VrHeadModel.js │ │ ├── VrMath.js │ │ ├── VrSoundEffects.js │ │ ├── asset.js │ │ ├── createGlyph.js │ │ ├── staticAssetURL.js │ │ └── texture.js │ ├── VRLayers/ │ │ ├── CylindricalPanel.js │ │ └── QuadPanel.js │ ├── VRModules/ │ │ ├── ControllerInfo.js │ │ ├── Environment.js │ │ ├── ExternalAssets.js │ │ ├── GlyphTextures.js │ │ ├── History.js │ │ ├── Location.js │ │ ├── ReactVRConstants.js │ │ └── VideoModule.js │ ├── VRReactOverrides/ │ │ ├── AccessibilityInfo.vr.js │ │ ├── BackHandler.vr.js │ │ ├── HMRLoadingView.vr.js │ │ ├── Image.vr.js │ │ ├── Interpolation.vr.js │ │ ├── MaskedViewIOS.vr.js │ │ ├── NetworkOverlay.vr.js │ │ ├── PlatformSpecific/ │ │ │ ├── CheckBox.vr.js │ │ │ ├── DatePickerAndroid.vr.js │ │ │ ├── DatePickerIOS.vr.js │ │ │ ├── DrawerLayoutAndroid.vr.js │ │ │ ├── NavigationExperimental.vr.js │ │ │ ├── NavigatorBreadcrumbNavigationBarStyles.vr.js │ │ │ ├── NavigatorIOS.vr.js │ │ │ ├── PickerAndroid.vr.js │ │ │ ├── PickerIOS.vr.js │ │ │ ├── ProgressBarAndroid.vr.js │ │ │ ├── ProgressViewIOS.vr.js │ │ │ ├── RecyclerViewBackedScrollview.vr.js │ │ │ ├── SafeAreaView.vr.js │ │ │ ├── SegmentedControlIOS.vr.js │ │ │ ├── SnapshotViewIOS.vr.js │ │ │ ├── StatusBarIOS.vr.js │ │ │ ├── TabBarIOS.vr.js │ │ │ ├── TimePickerAndroid.vr.js │ │ │ ├── ToastAndroid.vr.js │ │ │ ├── ToolbarAndroid.vr.js │ │ │ ├── TouchableNativeFeedback.vr.js │ │ │ ├── VibrationIOS.vr.js │ │ │ ├── ViewPagerAndroid.vr.js │ │ │ └── WebView.vr.js │ │ ├── RCTNetworking.vr.js │ │ ├── ReactNativeViewAttributes.vr.js │ │ ├── Settings.vr.js │ │ ├── TVEventHandler.vr.js │ │ ├── Text.vr.js │ │ ├── TransformPropTypes.vr.js │ │ ├── YellowBox.vr.js │ │ ├── processTransform.vr.js │ │ └── setupDevtools.vr.js │ ├── Video/ │ │ ├── MediaPlayerState.js │ │ ├── Video.js │ │ ├── VideoControl.js │ │ └── VideoUtils.js │ ├── VideoPano/ │ │ └── VideoPano.js │ ├── VrAnimated/ │ │ └── VrAnimated.js │ ├── VrButton/ │ │ └── VrButton.js │ └── react-360.js ├── OVRUI/ │ └── fonts/ │ ├── cjk_0.fnt │ ├── cjk_1.fnt │ ├── cjk_2.fnt │ ├── efigs.fnt │ ├── greek.fnt │ ├── japanese.fnt │ ├── korean.fnt │ ├── korean_0.fnt │ └── korean_1.fnt ├── README.md ├── React360/ │ ├── .npmignore │ ├── LICENSE │ ├── PATENTS │ ├── README.md │ ├── React360.js │ ├── js/ │ │ ├── Audio/ │ │ │ ├── AudioTypes.js │ │ │ ├── MediaError.js │ │ │ ├── OVRAudio.js │ │ │ ├── VRAudioBufferManager.js │ │ │ ├── VRAudioBufferSource.js │ │ │ ├── VRAudioComponent.js │ │ │ ├── VRAudioContext.js │ │ │ └── getSupportedFormats.js │ │ ├── Bridge/ │ │ │ ├── Bridge.js │ │ │ └── WebWorkerBridge.js │ │ ├── Compositor/ │ │ │ ├── Audio/ │ │ │ │ ├── AudioInstance.js │ │ │ │ ├── AudioNode.js │ │ │ │ └── Types.js │ │ │ ├── Compositor.js │ │ │ ├── Cursor.js │ │ │ ├── Environment/ │ │ │ │ ├── CubemapGeometry.js │ │ │ │ ├── Environment.js │ │ │ │ ├── EnvironmentUtils.js │ │ │ │ ├── Screen.js │ │ │ │ ├── StereoBasicTextureMaterial.js │ │ │ │ ├── StereoShaderLib.js │ │ │ │ ├── StereoTextureUniforms.js │ │ │ │ └── Types.js │ │ │ ├── Glyphs.js │ │ │ ├── Location.js │ │ │ ├── Overlay.js │ │ │ ├── Surface.js │ │ │ ├── SurfaceManager.js │ │ │ ├── VRState.js │ │ │ └── Video/ │ │ │ ├── BrowserVideoPlayer.js │ │ │ ├── Types.js │ │ │ ├── VideoPlayer.js │ │ │ └── VideoPlayerManager.js │ │ ├── Controls/ │ │ │ ├── CameraControllers/ │ │ │ │ ├── DeviceOrientationCameraController.js │ │ │ │ ├── MousePanCameraController.js │ │ │ │ ├── ScrollPanCameraController.js │ │ │ │ └── Types.js │ │ │ ├── Controls.js │ │ │ ├── InputChannels/ │ │ │ │ ├── GamepadInputChannel.js │ │ │ │ ├── KeyboardInputChannel.js │ │ │ │ ├── MouseInputChannel.js │ │ │ │ ├── TouchInputChannel.js │ │ │ │ └── Types.js │ │ │ ├── Raycasters/ │ │ │ │ ├── ControllerRaycaster.js │ │ │ │ ├── MouseRaycaster.js │ │ │ │ ├── TouchRaycaster.js │ │ │ │ └── Types.js │ │ │ ├── Types.js │ │ │ ├── Utils/ │ │ │ │ └── ControllerRenderer.js │ │ │ └── __tests__/ │ │ │ └── InputChannels-test.js │ │ ├── Events/ │ │ │ └── MediaEvent.js │ │ ├── Executor/ │ │ │ ├── NonBlobBridge.js │ │ │ ├── ReactExecutor.js │ │ │ ├── ReactExecutorIframe.js │ │ │ ├── ReactExecutorNonBlobWebWorker.js │ │ │ └── ReactExecutorWebWorker.js │ │ ├── Loaders/ │ │ │ ├── GLTF2ModelLoader.js │ │ │ ├── ModelLoaderRegistry.js │ │ │ ├── ObjModelLoader.js │ │ │ └── WavefrontOBJ/ │ │ │ ├── MTLLoader.js │ │ │ ├── MTLParser.js │ │ │ ├── OBJGroup.js │ │ │ ├── OBJLoader.js │ │ │ ├── OBJParser.js │ │ │ ├── OBJTypes.js │ │ │ ├── README.md │ │ │ └── __tests__/ │ │ │ ├── MTLParser-test.js │ │ │ ├── OBJGroup-test.js │ │ │ ├── OBJLoader-test.js │ │ │ └── OBJParser-test.js │ │ ├── Modules/ │ │ │ ├── AndroidConstants.js │ │ │ ├── AsyncLocalStorage.js │ │ │ ├── AudioModule.js │ │ │ ├── ControllerInfo.js │ │ │ ├── DeviceInfo.js │ │ │ ├── EnvironmentModule.js │ │ │ ├── ExternalAssets.js │ │ │ ├── GlyphTextures.js │ │ │ ├── History.js │ │ │ ├── LinkingManager.js │ │ │ ├── Location.js │ │ │ ├── LocationObserver.js │ │ │ ├── Module.js │ │ │ ├── Networking.js │ │ │ ├── PlatformConstants.js │ │ │ ├── RCTAudioModule.js │ │ │ ├── RCTExceptionsManager.js │ │ │ ├── RCTSourceCode.js │ │ │ ├── RCTVideoModule.js │ │ │ ├── ReactVRConstants.js │ │ │ ├── Timing.js │ │ │ ├── UIManager.js │ │ │ ├── VideoModule.js │ │ │ ├── WebSocketModule.js │ │ │ └── __tests__/ │ │ │ └── Module-test.js │ │ ├── OVRUI/ │ │ │ ├── FourByFourRect/ │ │ │ │ └── VectorGeometry.js │ │ │ ├── SDFFont/ │ │ │ │ ├── DefaultFont.js │ │ │ │ └── SDFFont.js │ │ │ └── UIView/ │ │ │ ├── GuiSys.js │ │ │ ├── GuiSysEvent.js │ │ │ ├── UIView.js │ │ │ └── UIViewUtil.js │ │ ├── ReactInstance.js │ │ ├── ReactNativeContext.js │ │ ├── Renderer/ │ │ │ ├── FlexboxImplementation.js │ │ │ └── RendererTypes.js │ │ ├── Runtime/ │ │ │ └── Runtime.js │ │ ├── Utils/ │ │ │ ├── CubePano.js │ │ │ ├── Fader.js │ │ │ ├── HPano.js │ │ │ ├── Math.js │ │ │ ├── RCTBindedResource.js │ │ │ ├── RCTHeadModel.js │ │ │ ├── RCTInputControls.js │ │ │ ├── RCTResourceManager.js │ │ │ ├── RCTVideoPlayer.js │ │ │ ├── RefCountCache.js │ │ │ ├── ResourceManager.js │ │ │ ├── StereoOffsetRepeats.js │ │ │ ├── TextureManager.js │ │ │ ├── Yoga.bundle.js │ │ │ ├── __tests__/ │ │ │ │ ├── Fader-test.js │ │ │ │ ├── RCTVideoPlayer-test.js │ │ │ │ ├── RefCountCache-test.js │ │ │ │ ├── TextureManager-test.js │ │ │ │ └── merge-test.js │ │ │ ├── createRemoteImageManager.js │ │ │ ├── extractURL.js │ │ │ ├── fetchResource.js │ │ │ ├── isPositive.js │ │ │ └── merge.js │ │ ├── Video/ │ │ │ ├── BasicVideoPlayer.js │ │ │ ├── OVRVideo.js │ │ │ ├── VRVideoComponent.js │ │ │ ├── VRVideoPlayer.js │ │ │ └── getSupportedFormats.js │ │ ├── Views/ │ │ │ ├── AmbientLight.js │ │ │ ├── BaseMesh.js │ │ │ ├── BaseView.js │ │ │ ├── Box.js │ │ │ ├── Cylinder.js │ │ │ ├── CylindricalPanel.js │ │ │ ├── DirectionalLight.js │ │ │ ├── Image.js │ │ │ ├── LiveEnvCamera.js │ │ │ ├── Model.js │ │ │ ├── Pano.js │ │ │ ├── Plane.js │ │ │ ├── PointLight.js │ │ │ ├── Prefetch.js │ │ │ ├── QuadPanel.js │ │ │ ├── RawText.js │ │ │ ├── Scene.js │ │ │ ├── Sound.js │ │ │ ├── Sphere.js │ │ │ ├── SpotLight.js │ │ │ ├── Text.js │ │ │ ├── Video.js │ │ │ ├── VideoPano.js │ │ │ ├── View.js │ │ │ └── __tests__/ │ │ │ ├── BaseMesh-test.js │ │ │ ├── BaseView-test.js │ │ │ ├── Image-test.js │ │ │ ├── Model-test.js │ │ │ ├── Text-test.js │ │ │ └── View-test.js │ │ ├── bundleFromLocation.js │ │ └── createRootView.js │ └── package.json ├── Samples/ │ ├── BasicAppTemplate/ │ │ ├── README.md │ │ ├── client.js │ │ ├── index.html │ │ ├── index.js │ │ ├── src/ │ │ │ └── components/ │ │ │ ├── BasicAppTemplateInfoButton.react.js │ │ │ └── BasicAppTemplateScenePage.react.js │ │ └── static_assets/ │ │ └── video360.webm │ ├── CustomPlayerSample/ │ │ ├── .gitignore │ │ ├── DashVideoPlayer.js │ │ ├── README.md │ │ ├── client.js │ │ ├── index.html │ │ └── index.js │ ├── HeadlockedSurfaces/ │ │ ├── client.js │ │ ├── index.html │ │ └── index.js │ ├── MediaAppTemplate/ │ │ ├── README.md │ │ ├── client.js │ │ ├── index.html │ │ ├── index.js │ │ └── src/ │ │ └── components/ │ │ ├── MediaAppTemplateInfoButton.react.js │ │ ├── MediaAppTemplateScenePage.react.js │ │ ├── MediaAppTemplateSubtitleText.react.js │ │ └── MediaAppTemplateVideoScreen.react.js │ ├── MultiRoot/ │ │ ├── CurrentPost.js │ │ ├── ModelView.js │ │ ├── README.md │ │ ├── Store.js │ │ ├── TopPosts.js │ │ ├── client.js │ │ ├── index.html │ │ └── index.js │ ├── NativeModules/ │ │ ├── BrowserInfoModule.js │ │ ├── client.js │ │ ├── index.html │ │ └── index.js │ ├── Slideshow/ │ │ ├── client.js │ │ ├── index.html │ │ └── index.js │ └── TourAppTemplate/ │ ├── RCTWorkInProgressSurface.js │ ├── README.md │ ├── client.js │ ├── index.html │ ├── index.js │ ├── src/ │ │ ├── components/ │ │ │ ├── TourCylinderHotspot.js │ │ │ ├── TourHotspot.js │ │ │ ├── TourInfoButton.react.js │ │ │ ├── TourLoadingSpinner.react.js │ │ │ ├── TourNavButton.react.js │ │ │ └── TourTooltip.react.js │ │ └── customViews/ │ │ └── WorkInProgressSurface.js │ └── static_assets/ │ ├── License.html │ ├── Three-Cocktails.webm │ └── tourOfTheChester.json ├── addons/ │ ├── react-360-cli/ │ │ ├── LICENSE │ │ ├── PATENTS │ │ ├── README.md │ │ ├── generators/ │ │ │ ├── __tests__/ │ │ │ │ └── index-test.generator.js │ │ │ ├── babelrc.generator.js │ │ │ ├── client.generator.js │ │ │ ├── flowconfig.generator.js │ │ │ ├── gitignore.generator.js │ │ │ ├── index.generator.js │ │ │ ├── index.html.generator.js │ │ │ ├── package.json.generator.js │ │ │ ├── rn-cli.config.generator.js │ │ │ └── watchmanconfig.generator.js │ │ ├── index.js │ │ ├── package.json │ │ └── src/ │ │ ├── copyAssets.js │ │ ├── copyFile.js │ │ ├── createFile.js │ │ ├── ensureDir.js │ │ ├── generateFiles.js │ │ ├── getLatestVersion.js │ │ ├── getPackager.js │ │ ├── isDirectory.js │ │ ├── listGenerators.js │ │ └── makeModulePath.js │ └── react-360-common-ui/ │ ├── LICENSE │ ├── PATENTS │ ├── README.md │ ├── index.js │ ├── package.json │ └── src/ │ ├── VideoControl.react.js │ └── VideoPlayer.react.js ├── babel.config.js ├── defs/ │ ├── chalk.js │ ├── react-360-runtime.js │ ├── react-360.js │ ├── three-gltf2-loader.js │ ├── three.js │ └── webvr.js ├── docs/ │ ├── animated.md │ ├── async-storage.md │ ├── audio.md │ ├── controller-info.md │ ├── entity.md │ ├── environment.md │ ├── example-basicapptemplate.md │ ├── example-customplayer.md │ ├── example-mediaapptemplate.md │ ├── example-multisurface.md │ ├── example-native-modules.md │ ├── example-slideshow.md │ ├── explore-code.md │ ├── from-react-vr.md │ ├── image.md │ ├── input-handling.md │ ├── integrate.md │ ├── layout.md │ ├── native-modules.md │ ├── objects.md │ ├── photos-and-videos.md │ ├── publish.md │ ├── runtime.md │ ├── setup.md │ ├── static-assets.md │ ├── surfaces.md │ ├── view.md │ ├── vr-button.md │ └── what-is.md ├── jest.config.js ├── lerna.json ├── lib-assets/ │ └── VideoControlGlyphs.js ├── package.json ├── packages/ │ ├── .gitignore │ ├── README.md │ ├── animated-react-webgl/ │ │ ├── README.md │ │ ├── createAnimatedComponent.js │ │ ├── index.js │ │ └── package.json │ ├── react-360/ │ │ ├── index.js │ │ ├── package.json │ │ └── src/ │ │ ├── Container.js │ │ ├── Glyphs.js │ │ ├── Overlay.js │ │ ├── React360.js │ │ ├── WebVRCameraController.js │ │ └── controller/ │ │ ├── ControllerModel.js │ │ ├── ControllerRaycaster.js │ │ ├── CursorModel.js │ │ ├── createControllerBeamProgram.js │ │ └── createCursorProgram.js │ ├── react-360-controls/ │ │ ├── README.md │ │ ├── index.js │ │ ├── package.json │ │ └── src/ │ │ ├── Controls.js │ │ ├── ControlsTypes.js │ │ ├── DeviceOrientationCameraController.js │ │ ├── MousePanCameraController.js │ │ ├── MouseRaycaster.js │ │ ├── R360Controls.js │ │ ├── ScrollPanCameraController.js │ │ └── TouchRaycaster.js │ ├── react-360-native-compat/ │ │ ├── README.md │ │ ├── index.js │ │ ├── package.json │ │ └── src/ │ │ ├── NativeCompat.js │ │ ├── components/ │ │ │ └── VrButton.js │ │ ├── modules/ │ │ │ ├── AsyncLocalStorage.js │ │ │ ├── AudioModule.js │ │ │ ├── ControllerInfo.js │ │ │ ├── DeviceEventEmitter.js │ │ │ ├── EnvironmentModule.js │ │ │ ├── NativeModules.js │ │ │ └── VideoModule.js │ │ └── utilities/ │ │ ├── AsyncStorage.js │ │ ├── ControllerInfo.js │ │ └── Environment.js │ ├── react-360-surfaces/ │ │ ├── README.md │ │ ├── index.js │ │ ├── package.json │ │ └── src/ │ │ ├── Environment.js │ │ ├── R360Surfaces.js │ │ ├── RingGeometry.js │ │ ├── Surface.js │ │ ├── computeCylinderIntersection.js │ │ ├── computeFlatIntersection.js │ │ ├── createEnvironmentCubemapProgram.js │ │ ├── createEnvironmentSphereProgram.js │ │ ├── createSurfaceProgram.js │ │ ├── generateCylinderSurface.js │ │ ├── generateEnvironmentSphere.js │ │ └── generateFlatSurface.js │ ├── react-webgl/ │ │ ├── LICENSE │ │ ├── PATENTS │ │ ├── README.md │ │ ├── index.js │ │ ├── package.json │ │ └── src/ │ │ ├── CanvasRoot.js │ │ ├── Elements.js │ │ ├── GLRoot.js │ │ ├── HostConfig.js │ │ ├── Pressable.react.js │ │ ├── Primitives.js │ │ ├── ReactWGL.js │ │ ├── RenderTargetRoot.js │ │ ├── StyleSheet/ │ │ │ ├── StyleSheet.js │ │ │ ├── __tests__/ │ │ │ │ ├── areStylePropsEqual-test.js │ │ │ │ └── flattenStyle-test.js │ │ │ ├── areStylePropsEqual.js │ │ │ └── flattenStyle.js │ │ ├── Video.react.js │ │ └── applyProps.js │ ├── react-webgl-video-manager/ │ │ ├── .gitignore │ │ ├── LICENSE │ │ ├── PATENTS │ │ ├── README.md │ │ ├── index.js │ │ ├── package.json │ │ └── src/ │ │ ├── RWGLVideo.js │ │ ├── VideoManager.js │ │ ├── VideoPlayer.js │ │ ├── VideoTypes.js │ │ ├── getExtension.js │ │ └── implementations/ │ │ └── BrowserVideoImplementation.js │ ├── ref-count-cache/ │ │ ├── .gitignore │ │ ├── LICENSE │ │ ├── PATENTS │ │ ├── README.md │ │ ├── index.js │ │ ├── package.json │ │ └── src/ │ │ ├── RefCountCache.js │ │ └── __tests__/ │ │ └── RefCountCache-test.js │ ├── transition-value/ │ │ ├── README.md │ │ ├── index.js │ │ ├── package.json │ │ └── src/ │ │ ├── Entry.js │ │ ├── TimingFunctions.js │ │ ├── Transition.js │ │ └── TransitionValue.js │ ├── vr-audio/ │ │ ├── README.md │ │ ├── index.js │ │ ├── package.json │ │ └── src/ │ │ ├── AudioInstance.js │ │ ├── AudioManager.js │ │ ├── AudioMath.js │ │ ├── AudioNode.js │ │ ├── AudioTypes.js │ │ └── VRAudio.js │ ├── vr-input-source/ │ │ ├── README.md │ │ ├── index.js │ │ ├── package.json │ │ └── src/ │ │ ├── GamepadState.js │ │ ├── InputEventTypes.js │ │ ├── VRInputSource.js │ │ ├── WellKnownGamepads.js │ │ ├── detectPrimaryButtons.js │ │ └── emulatePosition.js │ ├── vr-state/ │ │ ├── .gitignore │ │ ├── LICENSE │ │ ├── PATENTS │ │ ├── README.md │ │ ├── index.js │ │ ├── package.json │ │ └── src/ │ │ └── VRState.js │ ├── webgl-lite/ │ │ ├── README.md │ │ ├── index.js │ │ ├── package.json │ │ └── src/ │ │ ├── CubemapTexture.js │ │ ├── FrameBuffer.js │ │ ├── Geometry.js │ │ ├── IndexBuffer.js │ │ ├── Node.js │ │ ├── Program.js │ │ ├── ProgramManager.js │ │ ├── RenderGroup.js │ │ ├── Texture.js │ │ ├── VertexBuffer.js │ │ ├── WebGL.js │ │ ├── __tests__/ │ │ │ ├── Program-test.js │ │ │ └── ProgramManager-test.js │ │ ├── createUniformSetter.js │ │ ├── defaultValueForUniform.js │ │ └── getAttributeSizeAndType.js │ ├── webgl-lite-gltf/ │ │ ├── index.js │ │ ├── package.json │ │ └── src/ │ │ ├── BufferSource.js │ │ ├── FileTypes.js │ │ ├── GLTF.js │ │ ├── GLTFShaderAttributes.js │ │ ├── GLTFStructure.js │ │ ├── base64ToArrayBuffer.js │ │ ├── compareByteOffset.js │ │ ├── createDataView.js │ │ └── createGLTFProgram.js │ ├── webgl-ui/ │ │ ├── .gitignore │ │ ├── LICENSE │ │ ├── PATENTS │ │ ├── README.md │ │ ├── examples/ │ │ │ └── boilerplate/ │ │ │ └── index.js │ │ ├── index.js │ │ ├── package.json │ │ └── src/ │ │ ├── GLUI.js │ │ ├── Math.js │ │ ├── StackingContext.js │ │ ├── Surface.js │ │ ├── TextureManager.js │ │ ├── __tests__/ │ │ │ ├── StackingContext-test.js │ │ │ └── colorStringToARGB-test.js │ │ ├── colorStringToARGB.js │ │ ├── primitives/ │ │ │ ├── GLTexturedView.js │ │ │ ├── GLView.js │ │ │ └── SDFRectangle.js │ │ ├── recursiveLayout.js │ │ ├── setStyle.js │ │ ├── text/ │ │ │ ├── BreakIterator.js │ │ │ ├── FontGeometry.js │ │ │ ├── TextTypes.js │ │ │ ├── __tests__/ │ │ │ │ ├── BreakIterator-test.js │ │ │ │ └── wrapText-test.js │ │ │ └── wrapText.js │ │ ├── vendor/ │ │ │ └── Yoga.bundle.js │ │ └── views/ │ │ ├── Image.js │ │ ├── RawText.js │ │ ├── ShadowView.js │ │ ├── ShadowViewWebGL.js │ │ ├── SurfaceView.js │ │ ├── Text.js │ │ ├── View.js │ │ └── __tests__/ │ │ └── ShadowView-test.js │ ├── webgl-ui-sdf-font/ │ │ ├── README.md │ │ ├── index.js │ │ ├── package.json │ │ └── src/ │ │ ├── SDF.js │ │ ├── SDFDefaultFont.js │ │ ├── SDFFontGeometry.js │ │ ├── SDFTextImplementation.js │ │ └── SDFTextShaders.js │ └── webgl-ui-system-font/ │ ├── .gitignore │ ├── README.md │ ├── index.js │ ├── package.json │ └── src/ │ ├── Atlas.js │ ├── AtlasNode.js │ ├── FontImplementation.js │ ├── FontMeasure.js │ ├── SysFont.js │ └── __tests__/ │ └── AtlasNode-test.js ├── render-tests/ │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── runner-styles.css │ ├── runner.html │ ├── scripts/ │ │ └── test.js │ ├── test-utils/ │ │ ├── assertColorEqual.js │ │ └── getPixelData.js │ ├── tests/ │ │ ├── render-tests.js │ │ ├── test-basicgl.js │ │ ├── test-geometry.js │ │ ├── test-views.js │ │ └── tests.js │ └── webpack.config.js ├── scripts/ │ ├── build-packages.js │ ├── bump-versions.js │ ├── bundle.js │ ├── install-bridge.js │ ├── install-deps.js │ ├── packager.js │ └── project-paths.js ├── tools/ │ └── equirect2cubemap/ │ ├── .gitignore │ ├── CMakeLists.txt │ ├── README.md │ ├── eq2cm.cpp │ ├── stb_image.h │ └── stb_image_write.h └── website/ ├── blog/ │ └── 2018-05-02-blog-post.md ├── core/ │ └── Footer.js ├── i18n/ │ └── en.json ├── package.json ├── pages/ │ └── en/ │ ├── help.js │ ├── index.js │ └── users.js ├── sidebars.json ├── siteConfig.js └── static/ ├── css/ │ └── custom.css └── sample/ ├── client.bundle.js ├── index.bundle.js └── index.html ================================================ FILE CONTENTS ================================================ ================================================ FILE: .circleci/config.yml ================================================ version: 2 jobs: build: working_directory: ~/react-360 docker: - image: circleci/node:10 steps: - checkout - run: yarn - run: yarn build flow: working_directory: ~/react-360 docker: - image: circleci/node:10 steps: - checkout - run: yarn - run: yarn flow test-unit: working_directory: ~/react-360 docker: - image: circleci/node:10 steps: - checkout - run: yarn - run: yarn build - run: yarn test render-tests: working_directory: ~/react-360/render-tests docker: - image: circleci/node:10 steps: - checkout - run: yarn - run: yarn build workflows: version: 2 build_and_test: jobs: - build - test-unit: requires: - build - render-tests: requires: - build - flow ================================================ FILE: .flowconfig ================================================ [ignore] .*/docs/.* .*/website/.* .*/__tests__/.* /addons/.* /node_modules/.* /Libraries/.* /React360/.* [include] [libs] defs/ [options] emoji=true module.ignore_non_literal_requires=true ================================================ FILE: .gitattributes ================================================ *.sh text eol=lf ================================================ FILE: .github/ISSUE_TEMPLATE.md ================================================ We use GitHub Issues for bugs and feature requests --- Delete everything above this line before submitting your issue --- ### Description Is this a Bug or a Feature Request? For a Bug please explain below what you did, what you expected to happen, and what actually happens. #### Expected behavior #### Actual behavior ### Reproduction List all the steps required to encounter the issue you're reporting. These steps should be clear and concise. An example of your code that reliably reproduces the issue is ideal. ### Solution What needs to be done to address this issue? Ideally, provide a pull request with a fix. ### Additional Information * 'react-360' package version: [FILL THIS OUT: get this by running `npm list react-360`] * 'react-360-web' package version: [FILL THIS OUT: get this by running `npm list react-360-web`] * Operating System: [FILL THIS OUT: MacOS, Linux, or Windows?] * Browser: [FILL THIS OUT: Oculus Browser, Chrome, Edge, Safari? Which version?] * VR Device: [FILL THIS OUT: In or Out of VR? Headset? ] ================================================ FILE: .github/PULL_REQUEST_TEMPLATE.md ================================================ Thanks for submitting a PR! Please read these instructions carefully: - [ ] Explain the **motivation** for making this change. - [ ] Provide a **test plan** demonstrating that the code is solid. - [ ] Match the **code formatting** of the rest of the codebase. ## Motivation (required) What existing problem does the pull request solve? ## Test Plan (required) 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. See [What is a Test Plan?][1] to learn more. If you have added code that should be tested, add tests. ## Next Steps Sign the [CLA][2], if you haven't already. 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. Make sure all **tests pass** on [Circle CI][3]. PRs that break tests are unlikely to be merged. For more info, see the ["Pull Requests"][4] section of our "Contributing" guidelines. [1]: https://medium.com/@martinkonicek/what-is-a-test-plan-8bfc840ec171#.y9lcuqqi9 [2]: https://code.facebook.com/cla [3]: http://circleci.com/gh/facebook/react-native [4]: https://github.com/facebook/react-360/blob/master/CONTRIBUTING.md#pull-requests ================================================ FILE: .gitignore ================================================ coverage/ node_modules *~ .DS_Store *.log EndToEnd/testapp/build package_builds website/translated_docs website/build website/yarn.lock website/node_modules Samples/*/NonBlobBridge.js ================================================ FILE: CODE_OF_CONDUCT.md ================================================ # Code of Conduct Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please [read the full text](https://code.facebook.com/pages/876921332402685/open-source-code-of-conduct) so that you can understand what actions will and will not be tolerated. ================================================ FILE: CONTRIBUTING.md ================================================ # Contributing to React 360 React 360 is actively being developed by Oculus and Facebook, and is used to power a growing number of internal and external applications. We've put together this document to help make the public contribution process clearer and answer any questions you may have. ## Code of Conduct Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please [read the full text](https://code.facebook.com/pages/876921332402685/open-source-code-of-conduct) so that you can understand what actions will and will not be tolerated. ## Pull Requests Our core team will be monitoring for pull requests. New pull requests will automatically run against our continuous integration suite, which should detect the majority of formatting and testing issues. After this, one of our team members will run some Facebook-specific integration tests on it, to make sure it doesn't break any of our applications. Once that has completed, one member of the team will sign off on the changes and merge the pull request. Any API changes might require us to fix internal uses, which could cause some delay. We'll do our best to provide updates and feedback in a timely manner throughout the process. Before submitting a pull request, please make sure you have done the following: 1. Fork the repository and fork your working branch from master 2. Describe your test plan in your Pull Request - If you've added new features, cover them with tests - If you've changed APIs, update the appropriate documentation 3. Ensure all test suites pass (`npm test`) 4. Ensure the linter doesn't return any errors (`npm run lint`) 5. Ensure that Flow typechecking is sound (`npm run flow`) 6. Make sure you've completed the CLA. ## Copyright Notice for Files Copy and paste this to the top of your new files: ``` /** * 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. */ ``` ## Contributor License Agreement (CLA) In order to accept your pull request, we need you to submit a CLA. You only need to do this once, so if you've done this for another Facebook open source project, you're good to go. If you are submitting a pull request for the first time, just let us know that you have completed the CLA and we can cross-check with your GitHub username. [Complete your CLA here](https://code.facebook.com/cla) ## License By contributing to React, you agree that your contributions will be licensed under its BSD license. ================================================ FILE: LICENSE ================================================ BSD License For React 360 software Copyright (c) 2015-present, Facebook, Inc. All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. * Neither the name Facebook nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. ================================================ FILE: LICENSE-docs ================================================ Attribution 4.0 International ======================================================================= Creative Commons Corporation ("Creative Commons") is not a law firm and does not provide legal services or legal advice. Distribution of Creative Commons public licenses does not create a lawyer-client or other relationship. Creative Commons makes its licenses and related information available on an "as-is" basis. Creative Commons gives no warranties regarding its licenses, any material licensed under their terms and conditions, or any related information. Creative Commons disclaims all liability for damages resulting from their use to the fullest extent possible. Using Creative Commons Public Licenses Creative Commons public licenses provide a standard set of terms and conditions that creators and other rights holders may use to share original works of authorship and other material subject to copyright and certain other rights specified in the public license below. The following considerations are for informational purposes only, are not exhaustive, and do not form part of our licenses. Considerations for licensors: Our public licenses are intended for use by those authorized to give the public permission to use material in ways otherwise restricted by copyright and certain other rights. Our licenses are irrevocable. Licensors should read and understand the terms and conditions of the license they choose before applying it. Licensors should also secure all rights necessary before applying our licenses so that the public can reuse the material as expected. Licensors should clearly mark any material not subject to the license. This includes other CC- licensed material, or material used under an exception or limitation to copyright. More considerations for licensors: wiki.creativecommons.org/Considerations_for_licensors Considerations for the public: By using one of our public licenses, a licensor grants the public permission to use the licensed material under specified terms and conditions. If the licensor's permission is not necessary for any reason--for example, because of any applicable exception or limitation to copyright--then that use is not regulated by the license. Our licenses grant only permissions under copyright and certain other rights that a licensor has authority to grant. Use of the licensed material may still be restricted for other reasons, including because others have copyright or other rights in the material. A licensor may make special requests, such as asking that all changes be marked or described. Although not required by our licenses, you are encouraged to respect those requests where reasonable. More_considerations for the public: wiki.creativecommons.org/Considerations_for_licensees ======================================================================= Creative Commons Attribution 4.0 International Public License By exercising the Licensed Rights (defined below), You accept and agree to be bound by the terms and conditions of this Creative Commons Attribution 4.0 International Public License ("Public License"). To the extent this Public License may be interpreted as a contract, You are granted the Licensed Rights in consideration of Your acceptance of these terms and conditions, and the Licensor grants You such rights in consideration of benefits the Licensor receives from making the Licensed Material available under these terms and conditions. Section 1 -- Definitions. a. Adapted Material means material subject to Copyright and Similar Rights that is derived from or based upon the Licensed Material and in which the Licensed Material is translated, altered, arranged, transformed, or otherwise modified in a manner requiring permission under the Copyright and Similar Rights held by the Licensor. For purposes of this Public License, where the Licensed Material is a musical work, performance, or sound recording, Adapted Material is always produced where the Licensed Material is synched in timed relation with a moving image. b. Adapter's License means the license You apply to Your Copyright and Similar Rights in Your contributions to Adapted Material in accordance with the terms and conditions of this Public License. c. Copyright and Similar Rights means copyright and/or similar rights closely related to copyright including, without limitation, performance, broadcast, sound recording, and Sui Generis Database Rights, without regard to how the rights are labeled or categorized. For purposes of this Public License, the rights specified in Section 2(b)(1)-(2) are not Copyright and Similar Rights. d. Effective Technological Measures means those measures that, in the absence of proper authority, may not be circumvented under laws fulfilling obligations under Article 11 of the WIPO Copyright Treaty adopted on December 20, 1996, and/or similar international agreements. e. Exceptions and Limitations means fair use, fair dealing, and/or any other exception or limitation to Copyright and Similar Rights that applies to Your use of the Licensed Material. f. Licensed Material means the artistic or literary work, database, or other material to which the Licensor applied this Public License. g. Licensed Rights means the rights granted to You subject to the terms and conditions of this Public License, which are limited to all Copyright and Similar Rights that apply to Your use of the Licensed Material and that the Licensor has authority to license. h. Licensor means the individual(s) or entity(ies) granting rights under this Public License. i. Share means to provide material to the public by any means or process that requires permission under the Licensed Rights, such as reproduction, public display, public performance, distribution, dissemination, communication, or importation, and to make material available to the public including in ways that members of the public may access the material from a place and at a time individually chosen by them. j. Sui Generis Database Rights means rights other than copyright resulting from Directive 96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases, as amended and/or succeeded, as well as other essentially equivalent rights anywhere in the world. k. You means the individual or entity exercising the Licensed Rights under this Public License. Your has a corresponding meaning. Section 2 -- Scope. a. License grant. 1. Subject to the terms and conditions of this Public License, the Licensor hereby grants You a worldwide, royalty-free, non-sublicensable, non-exclusive, irrevocable license to exercise the Licensed Rights in the Licensed Material to: a. reproduce and Share the Licensed Material, in whole or in part; and b. produce, reproduce, and Share Adapted Material. 2. Exceptions and Limitations. For the avoidance of doubt, where Exceptions and Limitations apply to Your use, this Public License does not apply, and You do not need to comply with its terms and conditions. 3. Term. The term of this Public License is specified in Section 6(a). 4. Media and formats; technical modifications allowed. The Licensor authorizes You to exercise the Licensed Rights in all media and formats whether now known or hereafter created, and to make technical modifications necessary to do so. The Licensor waives and/or agrees not to assert any right or authority to forbid You from making technical modifications necessary to exercise the Licensed Rights, including technical modifications necessary to circumvent Effective Technological Measures. For purposes of this Public License, simply making modifications authorized by this Section 2(a) (4) never produces Adapted Material. 5. Downstream recipients. a. Offer from the Licensor -- Licensed Material. Every recipient of the Licensed Material automatically receives an offer from the Licensor to exercise the Licensed Rights under the terms and conditions of this Public License. b. No downstream restrictions. You may not offer or impose any additional or different terms or conditions on, or apply any Effective Technological Measures to, the Licensed Material if doing so restricts exercise of the Licensed Rights by any recipient of the Licensed Material. 6. No endorsement. Nothing in this Public License constitutes or may be construed as permission to assert or imply that You are, or that Your use of the Licensed Material is, connected with, or sponsored, endorsed, or granted official status by, the Licensor or others designated to receive attribution as provided in Section 3(a)(1)(A)(i). b. Other rights. 1. Moral rights, such as the right of integrity, are not licensed under this Public License, nor are publicity, privacy, and/or other similar personality rights; however, to the extent possible, the Licensor waives and/or agrees not to assert any such rights held by the Licensor to the limited extent necessary to allow You to exercise the Licensed Rights, but not otherwise. 2. Patent and trademark rights are not licensed under this Public License. 3. To the extent possible, the Licensor waives any right to collect royalties from You for the exercise of the Licensed Rights, whether directly or through a collecting society under any voluntary or waivable statutory or compulsory licensing scheme. In all other cases the Licensor expressly reserves any right to collect such royalties. Section 3 -- License Conditions. Your exercise of the Licensed Rights is expressly made subject to the following conditions. a. Attribution. 1. If You Share the Licensed Material (including in modified form), You must: a. retain the following if it is supplied by the Licensor with the Licensed Material: i. identification of the creator(s) of the Licensed Material and any others designated to receive attribution, in any reasonable manner requested by the Licensor (including by pseudonym if designated); ii. a copyright notice; iii. a notice that refers to this Public License; iv. a notice that refers to the disclaimer of warranties; v. a URI or hyperlink to the Licensed Material to the extent reasonably practicable; b. indicate if You modified the Licensed Material and retain an indication of any previous modifications; and c. indicate the Licensed Material is licensed under this Public License, and include the text of, or the URI or hyperlink to, this Public License. 2. You may satisfy the conditions in Section 3(a)(1) in any reasonable manner based on the medium, means, and context in which You Share the Licensed Material. For example, it may be reasonable to satisfy the conditions by providing a URI or hyperlink to a resource that includes the required information. 3. If requested by the Licensor, You must remove any of the information required by Section 3(a)(1)(A) to the extent reasonably practicable. 4. If You Share Adapted Material You produce, the Adapter's License You apply must not prevent recipients of the Adapted Material from complying with this Public License. Section 4 -- Sui Generis Database Rights. Where the Licensed Rights include Sui Generis Database Rights that apply to Your use of the Licensed Material: a. for the avoidance of doubt, Section 2(a)(1) grants You the right to extract, reuse, reproduce, and Share all or a substantial portion of the contents of the database; b. if You include all or a substantial portion of the database contents in a database in which You have Sui Generis Database Rights, then the database in which You have Sui Generis Database Rights (but not its individual contents) is Adapted Material; and c. You must comply with the conditions in Section 3(a) if You Share all or a substantial portion of the contents of the database. For the avoidance of doubt, this Section 4 supplements and does not replace Your obligations under this Public License where the Licensed Rights include other Copyright and Similar Rights. Section 5 -- Disclaimer of Warranties and Limitation of Liability. a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS, IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION, WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS, ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU. b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION, NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT, INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES, COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR IN PART, THIS LIMITATION MAY NOT APPLY TO YOU. c. The disclaimer of warranties and limitation of liability provided above shall be interpreted in a manner that, to the extent possible, most closely approximates an absolute disclaimer and waiver of all liability. Section 6 -- Term and Termination. a. This Public License applies for the term of the Copyright and Similar Rights licensed here. However, if You fail to comply with this Public License, then Your rights under this Public License terminate automatically. b. Where Your right to use the Licensed Material has terminated under Section 6(a), it reinstates: 1. automatically as of the date the violation is cured, provided it is cured within 30 days of Your discovery of the violation; or 2. upon express reinstatement by the Licensor. For the avoidance of doubt, this Section 6(b) does not affect any right the Licensor may have to seek remedies for Your violations of this Public License. c. For the avoidance of doubt, the Licensor may also offer the Licensed Material under separate terms or conditions or stop distributing the Licensed Material at any time; however, doing so will not terminate this Public License. d. Sections 1, 5, 6, 7, and 8 survive termination of this Public License. Section 7 -- Other Terms and Conditions. a. The Licensor shall not be bound by any additional or different terms or conditions communicated by You unless expressly agreed. b. Any arrangements, understandings, or agreements regarding the Licensed Material not stated herein are separate from and independent of the terms and conditions of this Public License. Section 8 -- Interpretation. a. For the avoidance of doubt, this Public License does not, and shall not be interpreted to, reduce, limit, restrict, or impose conditions on any use of the Licensed Material that could lawfully be made without permission under this Public License. b. To the extent possible, if any provision of this Public License is deemed unenforceable, it shall be automatically reformed to the minimum extent necessary to make it enforceable. If the provision cannot be reformed, it shall be severed from this Public License without affecting the enforceability of the remaining terms and conditions. c. No term or condition of this Public License will be waived and no failure to comply consented to unless expressly agreed to by the Licensor. d. Nothing in this Public License constitutes or may be interpreted as a limitation upon, or waiver of, any privileges and immunities that apply to the Licensor or You, including from the legal processes of any jurisdiction or authority. ======================================================================= Creative Commons is not a party to its public licenses. Notwithstanding, Creative Commons may elect to apply one of its public licenses to material it publishes and in those instances will be considered the "Licensor." Except for the limited purpose of indicating that material is shared under a Creative Commons public license or as otherwise permitted by the Creative Commons policies published at creativecommons.org/policies, Creative Commons does not authorize the use of the trademark "Creative Commons" or any other trademark or logo of Creative Commons without its prior written consent including, without limitation, in connection with any unauthorized modifications to any of its public licenses or any other arrangements, understandings, or agreements concerning use of licensed material. For the avoidance of doubt, this paragraph does not form part of the public licenses. Creative Commons may be contacted at creativecommons.org. ================================================ FILE: LICENSE-examples ================================================ The examples provided by Oculus are for non-commercial testing and evaluation purposes only. Oculus reserves all rights not expressly granted. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL OCULUS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: Libraries/.eslintrc.js ================================================ module.exports = { rules: { 'no-restricted-modules': ['error', 'three'], 'no-restricted-imports': ['error', 'three'], }, } ================================================ FILE: Libraries/Camera/LiveEnvCamera.js ================================================ /** * 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 LiveEnvCamera */ 'use strict'; const NativeMethodsMixin = require('NativeMethodsMixin'); const React = require('React'); const ReactNativeViewAttributes = require('ReactNativeViewAttributes'); const View = require('View'); const requireNativeComponent = require('requireNativeComponent'); const StyleSheetPropType = require('StyleSheetPropType'); const LayoutAndTransformPropTypes = require('LayoutAndTransformPropTypes'); const createReactClass = require('create-react-class'); /** * Displays the environment facing camera. By default the camera is position:'absolute' * `` * The camera image is displayed on geometry that is 1000m away from the viewer */ const LiveEnvCamera = createReactClass({ mixins: [NativeMethodsMixin], propTypes: { ...View.propTypes, style: StyleSheetPropType(LayoutAndTransformPropTypes), }, viewConfig: { uiViewClassName: 'LiveEnvCamera', validAttributes: { ...ReactNativeViewAttributes.RCTView, }, }, getDefaultProps: function() { return {}; }, render: function() { const props = {...this.props} || {}; props.style = props.style || {}; if (!props.style.position) { props.style.position = 'absolute'; } // default panos to being a render group if (!props.style.renderGroup) { props.style.renderGroup = true; } return ( true} onResponderTerminationRequest={() => false}> {this.props.children} ); }, }); const RKLiveEnvCamera = requireNativeComponent('LiveEnvCamera', LiveEnvCamera, { nativeOnly: {}, }); module.exports = LiveEnvCamera; ================================================ FILE: Libraries/Components/View/PlatformViewPropTypes.vr.js ================================================ /** * 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 PlatformViewPropTypes * @flow */ module.export = {}; ================================================ FILE: Libraries/Components/View/View.vr.js ================================================ /** * 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 View * @flow */ 'use strict'; const EdgeInsetsPropType = require('EdgeInsetsPropType'); const NativeMethodsMixin = require('NativeMethodsMixin'); const PropTypes = require('prop-types'); const React = require('React'); const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes'); const ReactNativeViewAttributes = require('ReactNativeViewAttributes'); const StyleSheetPropType = require('StyleSheetPropType'); const UIManager = require('UIManager'); const ViewStylePropTypes = require('ViewStylePropTypes'); const createReactClass = require('create-react-class'); const requireNativeComponent = require('requireNativeComponent'); const stylePropType = StyleSheetPropType(ViewStylePropTypes); const AccessibilityTraits = [ 'none', 'button', 'link', 'header', 'search', 'image', 'selected', 'plays', 'key', 'text', 'summary', 'disabled', 'frequentUpdates', 'startsMedia', 'adjustable', 'allowsDirectInteraction', 'pageTurn', ]; const AccessibilityComponentType = [ 'none', 'button', 'radiobutton_checked', 'radiobutton_unchecked', ]; const forceTouchAvailable = (UIManager.RCTView && UIManager.RCTView.Constants && UIManager.RCTView.Constants.forceTouchAvailable) || false; const statics = { AccessibilityTraits, AccessibilityComponentType, /** * Is 3D Touch / Force Touch available (i.e. will touch events include `force`) * @platform ios */ forceTouchAvailable, }; /** * The most fundamental component for building a UI, `View` is a container that supports layout with * [flexbox](/react-native/docs/flexbox.html), [style](/react-native/docs/style.html), * [some touch handling](/react-native/docs/handling-touches.html), and * [accessibility](/react-native/docs/accessibility.html) controls. `View` maps directly to the * native view equivalent on whatever platform React Native is running on, whether that is a * `UIView`, `
`, `android.view`, etc. * * `View` is designed to be nested inside other views and can have 0 to many children of any type. * * This example creates a `View` that wraps two colored boxes and a text component in a row with * padding. * * ```javascript * class ViewColoredBoxesWithText extends Component { * render() { * return ( * * * * Hello World! * * ); * } * } * ``` * * > `View`s are designed to be used with [`StyleSheet`](/react-native/docs/style.html) for clarity * > and performance, although inline styles are also supported. * */ const View = createReactClass({ // TODO: We should probably expose the mixins, viewConfig, and statics publicly. For example, // one of the props is of type AccessibilityComponentType. That is defined as a const[] above, // but it is not rendered by the docs, since `statics` below is not rendered. So its Possible // values had to be hardcoded. mixins: [NativeMethodsMixin], /** * `NativeMethodsMixin` will look for this when invoking `setNativeProps`. We * make `this` look like an actual native component class. */ viewConfig: { uiViewClassName: 'RCTView', validAttributes: ReactNativeViewAttributes.RCTView, }, statics: { ...statics, }, propTypes: { /** * When `true`, indicates that the view is an accessibility element. By default, * all the touchable elements are accessible. */ accessible: PropTypes.bool, /** * Overrides the text that's read by the screen reader when the user interacts * with the element. By default, the label is constructed by traversing all the * children and accumulating all the `Text` nodes separated by space. */ accessibilityLabel: PropTypes.string, /** * Indicates to accessibility services to treat UI component like a * native one. Works for Android only. * * Possible values are one of: * * - `'none'` * - `'button'` * - `'radiobutton_checked'` * - `'radiobutton_unchecked'` * * @platform android */ accessibilityComponentType: PropTypes.oneOf(AccessibilityComponentType), /** * Indicates to accessibility services whether the user should be notified * when this view changes. Works for Android API >= 19 only. * Possible values: * * - `'none'` - Accessibility services should not announce changes to this view. * - `'polite'`- Accessibility services should announce changes to this view. * - `'assertive'` - Accessibility services should interrupt ongoing speech * to immediately announce changes to this view. * * See the [Android `View` docs](http://developer.android.com/reference/android/view/View.html#attr_android:accessibilityLiveRegion) * for reference. * * @platform android */ accessibilityLiveRegion: PropTypes.oneOf(['none', 'polite', 'assertive']), /** * Controls how view is important for accessibility which is if it * fires accessibility events and if it is reported to accessibility services * that query the screen. Works for Android only. * * Possible values: * * - `'auto'` - The system determines whether the view is important for accessibility - * default (recommended). * - `'yes'` - The view is important for accessibility. * - `'no'` - The view is not important for accessibility. * - `'no-hide-descendants'` - The view is not important for accessibility, * nor are any of its descendant views. * * See the [Android `importantForAccessibility` docs](http://developer.android.com/reference/android/R.attr.html#importantForAccessibility) * for reference. * * @platform android */ importantForAccessibility: PropTypes.oneOf(['auto', 'yes', 'no', 'no-hide-descendants']), /** * Provides additional traits to screen reader. By default no traits are * provided unless specified otherwise in element. * * You can provide one trait or an array of many traits. * * Possible values for `AccessibilityTraits` are: * * - `'none'` - The element has no traits. * - `'button'` - The element should be treated as a button. * - `'link'` - The element should be treated as a link. * - `'header'` - The element is a header that divides content into sections. * - `'search'` - The element should be treated as a search field. * - `'image'` - The element should be treated as an image. * - `'selected'` - The element is selected. * - `'plays'` - The element plays sound. * - `'key'` - The element should be treated like a keyboard key. * - `'text'` - The element should be treated as text. * - `'summary'` - The element provides app summary information. * - `'disabled'` - The element is disabled. * - `'frequentUpdates'` - The element frequently changes its value. * - `'startsMedia'` - The element starts a media session. * - `'adjustable'` - The element allows adjustment over a range of values. * - `'allowsDirectInteraction'` - The element allows direct touch interaction for VoiceOver users. * - `'pageTurn'` - Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element. * * See the [Accessibility guide](/react-native/docs/accessibility.html#accessibilitytraits-ios) * for more information. * * @platform ios */ accessibilityTraits: PropTypes.oneOfType([ PropTypes.oneOf(AccessibilityTraits), PropTypes.arrayOf(PropTypes.oneOf(AccessibilityTraits)), ]), /** * When `accessible` is true, the system will try to invoke this function * when the user performs accessibility tap gesture. */ onAccessibilityTap: PropTypes.func, /** * When `accessible` is `true`, the system will invoke this function when the * user performs the magic tap gesture. */ onMagicTap: PropTypes.func, /** * Used to locate this view in end-to-end tests. * * > This disables the 'layout-only view removal' optimization for this view! */ testID: PropTypes.string, /** * For most touch interactions, you'll simply want to wrap your component in * `TouchableHighlight` or `TouchableOpacity`. Check out `Touchable.js`, * `ScrollResponder.js` and `ResponderEventPlugin.js` for more discussion. */ /** * The View is now responding for touch events. This is the time to highlight and show the user * what is happening. * * `View.props.onResponderGrant: (event) => {}`, where `event` is a synthetic touch event as * described above. */ onResponderGrant: PropTypes.func, /** * The user is moving their finger. * * `View.props.onResponderMove: (event) => {}`, where `event` is a synthetic touch event as * described above. */ onResponderMove: PropTypes.func, /** * Another responder is already active and will not release it to that `View` asking to be * the responder. * * `View.props.onResponderReject: (event) => {}`, where `event` is a synthetic touch event as * described above. */ onResponderReject: PropTypes.func, /** * Fired at the end of the touch. * * `View.props.onResponderRelease: (event) => {}`, where `event` is a synthetic touch event as * described above. */ onResponderRelease: PropTypes.func, /** * The responder has been taken from the `View`. Might be taken by other views after a call to * `onResponderTerminationRequest`, or might be taken by the OS without asking (e.g., happens * with control center/ notification center on iOS) * * `View.props.onResponderTerminate: (event) => {}`, where `event` is a synthetic touch event as * described above. */ onResponderTerminate: PropTypes.func, /** * Some other `View` wants to become responder and is asking this `View` to release its * responder. Returning `true` allows its release. * * `View.props.onResponderTerminationRequest: (event) => {}`, where `event` is a synthetic touch * event as described above. */ onResponderTerminationRequest: PropTypes.func, /** * Does this view want to become responder on the start of a touch? * * `View.props.onStartShouldSetResponder: (event) => [true | false]`, where `event` is a * synthetic touch event as described above. */ onStartShouldSetResponder: PropTypes.func, /** * If a parent `View` wants to prevent a child `View` from becoming responder on a touch start, * it should have this handler which returns `true`. * * `View.props.onStartShouldSetResponderCapture: (event) => [true | false]`, where `event` is a * synthetic touch event as described above. */ onStartShouldSetResponderCapture: PropTypes.func, /** * Does this view want to "claim" touch responsiveness? This is called for every touch move on * the `View` when it is not the responder. * * `View.props.onMoveShouldSetResponder: (event) => [true | false]`, where `event` is a * synthetic touch event as described above. */ onMoveShouldSetResponder: PropTypes.func, /** * If a parent `View` wants to prevent a child `View` from becoming responder on a move, * it should have this handler which returns `true`. * * `View.props.onMoveShouldSetResponderCapture: (event) => [true | false]`, where `event` is a * synthetic touch event as described above. */ onMoveShouldSetResponderCapture: PropTypes.func, /** * This defines how far a touch event can start away from the view. * Typical interface guidelines recommend touch targets that are at least * 30 - 40 points/density-independent pixels. * * For example, if a touchable view has a height of 20 the touchable height can be extended to * 40 with `hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}` * * > The touch area never extends past the parent view bounds and the Z-index * > of sibling views always takes precedence if a touch hits two overlapping * > views. */ hitSlop: PropTypes.oneOfType([PropTypes.number, EdgeInsetsPropType]), /** * Used when `cursorVisibility='auto'` to define how close the cursor must be to the view * before it is visible. Default is `{top: 0, bottom: 0, left: 0, right: 0}` meaning * the cursor is visible only when intersecting with the view. * * For example, to make the cursor visible when it is within 10 cm of the top or bottom of * a view: `cursorVisibilitySlop={{top: 0.10, bottom: 0.10, left: 0, right: 0}}` * */ cursorVisibilitySlop: PropTypes.oneOfType([PropTypes.number, EdgeInsetsPropType]), /** * Invoked on mount and layout changes with: * * `{nativeEvent: { layout: {x, y, width, height}}}` * * This event fires immediately once the layout has been calculated, but * the new layout may not yet be reflected on the screen at the time the * event is received, especially if a layout animation is in progress. */ onLayout: PropTypes.func, /** * Whether this view should be automatically rotated to face the screen * when running on desktop or mobile. Has no effect when in VR. * * Note that billboarding overrides any local rotations to the view that * may have been set using the `transform: [{rotate}]` style property. */ billboarding: PropTypes.oneOf(['off', 'on']), /** * Invoked when a interaction method enters a view */ onEnter: PropTypes.func, /** * Invoked when a interaction method exits a view */ onExit: PropTypes.func, /** * Invoked when a user generates input over a view */ onInput: PropTypes.func, onChange: PropTypes.func, /** * Invoked when gazing or interacting on a view, the head pose is passed to the event * * ``` * {nativeEvent: { * headMatrix: headMatrixArray, * viewMatrix: viewMatrixArray, * target: target, * source: source, * }, * ``` */ onHeadPose: PropTypes.func, onChangeCaptured: PropTypes.func, onInputCaptured: PropTypes.func, onHeadPoseCaptured: PropTypes.func, /** * Invoked on when raycast moves within the view */ onMove: PropTypes.func, /** * Controls whether the `View` can be the target of touch events. * * - `'auto'`: The View can be the target of touch events. * - `'none'`: The View is never the target of touch events. * - `'box-none'`: The View is never the target of touch events but its * subviews can be. It behaves as if the view had the following classes * in CSS: * ``` * .box-none { * pointer-events: none; * } * .box-none * { * pointer-events: all; * } * ``` * - `'box-only'`: The view can be the target of touch events but its * subviews cannot be. It behaves as if the view had the following classes * in CSS: * ``` * .box-only { * pointer-events: all; * } * .box-only * { * pointer-events: none; * } * ``` * > Since `pointerEvents` does not affect layout/appearance, and we are * > already deviating from the spec by adding additional modes, we opt to not * > include `pointerEvents` on `style`. On some platforms, we would need to * > implement it as a `className` anyways. Using `style` or not is an * > implementation detail of the platform. */ pointerEvents: PropTypes.oneOf(['box-none', 'none', 'box-only', 'auto']), style: stylePropType, /** * This is a special performance property exposed by `RCTView` and is useful * for scrolling content when there are many subviews, most of which are * offscreen. For this property to be effective, it must be applied to a * view that contains many subviews that extend outside its bound. The * subviews must also have `overflow: hidden`, as should the containing view * (or one of its superviews). */ removeClippedSubviews: PropTypes.bool, /** * Whether this `View` should render itself (and all of its children) into a * single hardware texture on the GPU. * * On Android, this is useful for animations and interactions that only * modify opacity, rotation, translation, and/or scale: in those cases, the * view doesn't have to be redrawn and display lists don't need to be * re-executed. The texture can just be re-used and re-composited with * different parameters. The downside is that this can use up limited video * memory, so this prop should be set back to false at the end of the * interaction/animation. * * @platform android */ renderToHardwareTextureAndroid: PropTypes.bool, /** * Whether this `View` should be rendered as a bitmap before compositing. * * On iOS, this is useful for animations and interactions that do not * modify this component's dimensions nor its children; for example, when * translating the position of a static view, rasterization allows the * renderer to reuse a cached bitmap of a static view and quickly composite * it during each frame. * * Rasterization incurs an off-screen drawing pass and the bitmap consumes * memory. Test and measure when using this property. * * @platform ios */ shouldRasterizeIOS: PropTypes.bool, /** * Views that are only used to layout their children or otherwise don't draw * anything may be automatically removed from the native hierarchy as an * optimization. Set this property to `false` to disable this optimization and * ensure that this `View` exists in the native view hierarchy. * * @platform android */ collapsable: PropTypes.bool, /** * Whether this `View` needs to rendered offscreen and composited with an alpha * in order to preserve 100% correct colors and blending behavior. The default * (`false`) falls back to drawing the component and its children with an alpha * applied to the paint used to draw each element instead of rendering the full * component offscreen and compositing it back with an alpha value. This default * may be noticeable and undesired in the case where the `View` you are setting * an opacity on has multiple overlapping elements (e.g. multiple overlapping * `View`s, or text and a background). * * Rendering offscreen to preserve correct alpha behavior is extremely * expensive and hard to debug for non-native developers, which is why it is * not turned on by default. If you do need to enable this property for an * animation, consider combining it with renderToHardwareTextureAndroid if the * view **contents** are static (i.e. it doesn't need to be redrawn each frame). * If that property is enabled, this View will be rendered off-screen once, * saved in a hardware texture, and then composited onto the screen with an alpha * each frame without having to switch rendering targets on the GPU. * * @platform android */ needsOffscreenAlphaCompositing: PropTypes.bool, }, render: function() { /** * by default set the renderGroup if any transform as been set */ const props = {...this.props} || {}; if (props.style && props.style['renderGroup'] === undefined && props.style.transform) { props.style.renderGroup = true; } return ; }, }); const RCTView = requireNativeComponent('RCTView', View, { nativeOnly: { nativeBackgroundAndroid: true, }, }); if (__DEV__) { const viewConfig = (UIManager.viewConfigs && UIManager.viewConfigs.RCTView) || {}; for (const prop in viewConfig.nativeProps) { const viewAny: any = View; // Appease flow if (!viewAny.propTypes[prop] && !ReactNativeStyleAttributes[prop]) { throw new Error('View is missing propType for native prop `' + prop + '`'); } } } module.exports = View; ================================================ FILE: Libraries/Lights/AmbientLight.js ================================================ /** * 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 AmbientLight */ 'use strict'; const NativeMethodsMixin = require('NativeMethodsMixin'); const PropTypes = require('prop-types'); const React = require('React'); const ReactNativeViewAttributes = require('ReactNativeViewAttributes'); const View = require('View'); const StyleSheetPropType = require('StyleSheetPropType'); const LayoutAndTransformColorPropTypes = require('LayoutAndTransformColorPropTypes'); const createReactClass = require('create-react-class'); const requireNativeComponent = require('requireNativeComponent'); /** * A light that affects all objects in the scene equally and from all directions. * * The [Wikipedia](https://en.wikipedia.org/wiki/Shading#Ambient_lighting) definition is as follows: * An ambient light source represents an omni-directional, fixed-intensity and * fixed-color light source that affects all objects in the scene equally. Upon rendering, * all objects in the scene are brightened with the specified intensity and color. * This type of light source is mainly used to provide the scene with a basic view of the * different objects in it. This is the simplest type of lighting to implement and models * how light can be scattered or reflected many times producing a uniform effect. * * Representation of * * https://threejs.org/docs/index.html#api/lights/AmbientLight */ const AmbientLight = createReactClass({ mixins: [NativeMethodsMixin], propTypes: { ...View.propTypes, style: StyleSheetPropType(LayoutAndTransformColorPropTypes), /** * Intensity of the light */ intensity: PropTypes.number, }, viewConfig: { uiViewClassName: 'AmbientLight', validAttributes: { ...ReactNativeViewAttributes.RCTView, intensity: true, }, }, getDefaultProps: function() { return {}; }, render: function() { const props = {...this.props} || {}; props.style = props.style || {}; if (!props.style.position) { props.style.position = 'absolute'; } return ( true} onResponderTerminationRequest={() => false}> {this.props.children} ); }, }); const RKAmbientLight = requireNativeComponent('AmbientLight', AmbientLight, { nativeOnly: {}, }); module.exports = AmbientLight; ================================================ FILE: Libraries/Lights/DirectionalLight.js ================================================ /** * 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 DirectionalLight */ 'use strict'; const NativeMethodsMixin = require('NativeMethodsMixin'); const PropTypes = require('prop-types'); const React = require('React'); const ReactNativeViewAttributes = require('ReactNativeViewAttributes'); const View = require('View'); const StyleSheetPropType = require('StyleSheetPropType'); const LayoutAndTransformColorPropTypes = require('LayoutAndTransformColorPropTypes'); const createReactClass = require('create-react-class'); const requireNativeComponent = require('requireNativeComponent'); /** * A light which is an infinite distance away and orientated along a particular direction. * * [Wikipedia](https://en.wikipedia.org/wiki/Shading#Directional_lighting) defines directional * lighting as a light source which illuminates all objects equally from a given direction, * like an area light of infinite size and infinite distance from the scene; there is shading, * but cannot be any distance falloff. * * Representation of * * https://threejs.org/docs/index.html#api/lights/DirectionalLight */ const DirectionalLight = createReactClass({ mixins: [NativeMethodsMixin], propTypes: { ...View.propTypes, style: StyleSheetPropType(LayoutAndTransformColorPropTypes), /** * Intensity of the light */ intensity: PropTypes.number, }, viewConfig: { uiViewClassName: 'DirectionalLight', validAttributes: { ...ReactNativeViewAttributes.RCTView, intensity: true, }, }, getDefaultProps: function() { return {}; }, render: function() { const props = {...this.props} || {}; props.style = props.style || {}; if (!props.style.position) { props.style.position = 'absolute'; } return ( true} onResponderTerminationRequest={() => false}> {this.props.children} ); }, }); const RKDirectionalLight = requireNativeComponent('DirectionalLight', DirectionalLight, { nativeOnly: {}, }); module.exports = DirectionalLight; ================================================ FILE: Libraries/Lights/PointLight.js ================================================ /** * 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 PointLight */ 'use strict'; const NativeMethodsMixin = require('NativeMethodsMixin'); const PropTypes = require('prop-types'); const React = require('React'); const ReactNativeViewAttributes = require('ReactNativeViewAttributes'); const View = require('View'); const StyleSheetPropType = require('StyleSheetPropType'); const LayoutAndTransformColorPropTypes = require('LayoutAndTransformColorPropTypes'); const createReactClass = require('create-react-class'); const requireNativeComponent = require('requireNativeComponent'); /** * Light originates from a single point, and spreads outward in all directions. * * Representation of * https://threejs.org/docs/index.html#api/lights/PointLight */ const PointLight = createReactClass({ mixins: [NativeMethodsMixin], propTypes: { ...View.propTypes, style: StyleSheetPropType(LayoutAndTransformColorPropTypes), /** * In "physically correct" mode, the product of color * intensity is * interpreted as luminous intensity measured in candela. */ intensity: PropTypes.number, /** * If non-zero, light attenuates linearly from maximum intensity at * light position down to zero at distance. */ distance: PropTypes.number, /** * The amount the light dims along the distance of the light. * In "physically correct" mode, decay = 2 leads to physically realistic light falloff. */ decay: PropTypes.number, }, viewConfig: { uiViewClassName: 'PointLight', validAttributes: { ...ReactNativeViewAttributes.RCTView, intensity: true, distance: true, decay: true, }, }, getDefaultProps: function() { return {}; }, render: function() { const props = {...this.props} || {}; props.style = props.style || {}; if (!props.style.position) { props.style.position = 'absolute'; } return ( true} onResponderTerminationRequest={() => false}> {this.props.children} ); }, }); const RKPointLight = requireNativeComponent('PointLight', PointLight, { nativeOnly: {}, }); module.exports = PointLight; ================================================ FILE: Libraries/Lights/SpotLight.js ================================================ /** * 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 SpotLight */ 'use strict'; const NativeMethodsMixin = require('NativeMethodsMixin'); const PropTypes = require('prop-types'); const React = require('React'); const ReactNativeViewAttributes = require('ReactNativeViewAttributes'); const View = require('View'); const StyleSheetPropType = require('StyleSheetPropType'); const LayoutAndTransformColorPropTypes = require('LayoutAndTransformColorPropTypes'); const createReactClass = require('create-react-class'); const requireNativeComponent = require('requireNativeComponent'); /** * Light originates from a single point, and spreads outward in a cone. * * Representation of * https://threejs.org/docs/index.html#api/lights/SpotLight */ const SpotLight = createReactClass({ mixins: [NativeMethodsMixin], propTypes: { ...View.propTypes, style: StyleSheetPropType(LayoutAndTransformColorPropTypes), /** * In "physically correct" mode, the product of color * intensity is * interpreted as luminous intensity measured in candela. */ intensity: PropTypes.number, /** * If non-zero, light attenuates linearly from maximum intensity at * light position down to zero at distance. */ distance: PropTypes.number, /** * The amount the light dims along the distance of the light. * In "physically correct" mode, decay = 2 leads to physically realistic light falloff. */ decay: PropTypes.number, /** * Maximum angle of light dispersion from its direction whose upper bound is Math.PI/2. */ angle: PropTypes.number, /** * Percent of the spotlight cone that is attenuated due to penumbra. Takes * values between zero and 100. Default is zero. */ penumbra: PropTypes.number, }, viewConfig: { uiViewClassName: 'SpotLight', validAttributes: { ...ReactNativeViewAttributes.RCTView, intensity: true, distance: true, decay: true, angle: true, penumbra: true, }, }, getDefaultProps: function() { return {}; }, render: function() { const props = {...this.props} || {}; props.style = props.style || {}; if (!props.style.position) { props.style.position = 'absolute'; } return ( true} onResponderTerminationRequest={() => false}> {this.props.children} ); }, }); const RKSpotLight = requireNativeComponent('SpotLight', SpotLight, { nativeOnly: {}, }); module.exports = SpotLight; ================================================ FILE: Libraries/Mesh/Box.js ================================================ /** * 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 Box */ 'use strict'; const NativeMethodsMixin = require('NativeMethodsMixin'); const PropTypes = require('prop-types'); const React = require('React'); const ReactNativeViewAttributes = require('ReactNativeViewAttributes'); const View = require('View'); const StyleSheetPropType = require('StyleSheetPropType'); const LayoutAndTransformColorPropTypes = require('LayoutAndTransformColorPropTypes'); const createReactClass = require('create-react-class'); const requireNativeComponent = require('requireNativeComponent'); const resolveAssetSource = require('resolveAssetSource'); /** * Box constructs a box-type 3D primitive in your scene. * * It can be sized through `dimWidth`, `dimHeight`, and `dimDepth` properties, which take * numeric values measured in meters. If one of these dimensions is not specified, * it defaults to 1. * * ``` * * ``` * * Like all 3D primitives, Box also supports the `lit`, `texture`, and `wireframe` props. * If `lit` is true, the Box's materials are affected by scene lighting. * If `wireframe` is true, the Box will render in a wireframe style. * If `texture` is specified, React VR looks up the corresponding image * and uses it to texture the Box. This can be a string, an asset() call, or a require(). * * */ const Box = createReactClass({ mixins: [NativeMethodsMixin], propTypes: { ...View.propTypes, style: StyleSheetPropType(LayoutAndTransformColorPropTypes), /** * The lit property specifies if the Model will be affected by lights placed in the scene. */ lit: PropTypes.bool, /** * The texture property specifies the url of the texture to be used for the Model. * To make texture repeat, pass an object with `repeat` property, for example: * `texture={{ ...asset('path/to/texture.jpg'), repeat: [4, 4] }}` * * First and second element in `repeat` sets how many times texture is repeated * in x and y directions. */ texture: PropTypes.oneOfType([ PropTypes.number, PropTypes.string, PropTypes.shape({ uri: PropTypes.string.isRequired, repeat: PropTypes.arrayOf(PropTypes.number), }), ]), /** * set material parameters in three.js */ materialParameters: PropTypes.object, /** * Specifying true for this property will cause the object to be displayed as a wireframe */ wireframe: PropTypes.bool, /** * width of the box in meters */ dimWidth: PropTypes.number, /** * height of the box in meters */ dimHeight: PropTypes.number, /** * depth of the box in meters */ dimDepth: PropTypes.number, }, viewConfig: { uiViewClassName: 'Box', validAttributes: { ...ReactNativeViewAttributes.RCTView, dimWidth: true, dimHeight: true, dimDepth: true, }, }, getDefaultProps() { return { dimWidth: 1, dimHeight: 1, dimDepth: 1, }; }, render() { let {texture, ...rest} = this.props; if (typeof texture === 'number') { texture = resolveAssetSource(texture); } rest.style = rest.style || {}; if (!rest.style.position) { rest.style.position = 'absolute'; } return ; }, }); const RKBox = requireNativeComponent('Box', Box, {}); module.exports = Box; ================================================ FILE: Libraries/Mesh/Cylinder.js ================================================ /** * 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 Cylinder */ 'use strict'; const NativeMethodsMixin = require('NativeMethodsMixin'); const PropTypes = require('prop-types'); const React = require('React'); const ReactNativeViewAttributes = require('ReactNativeViewAttributes'); const View = require('View'); const StyleSheetPropType = require('StyleSheetPropType'); const LayoutAndTransformColorPropTypes = require('LayoutAndTransformColorPropTypes'); const createReactClass = require('create-react-class'); const requireNativeComponent = require('requireNativeComponent'); const resolveAssetSource = require('resolveAssetSource'); /** * Cylinder constructs a cylinder-type 3D primitive in your scene. * * It can be sized through `dimHeight`, `radiusTop`, and `radiusBottom` properties, which take * numeric values measured in meters. You can also specify the number of segments * in the cylinder with the `segments` property. * * ``` * // Round cylinder * * * // Cone * * ``` * * Like all 3D primitives, Cylinder also supports the `lit`, `texture`, and `wireframe` props. * If `lit` is true, the Cylinder's materials are affected by scene lighting. * If `wireframe` is true, the Cylinder renders in a wireframe style. * If `texture` is specified, React VR looks up the corresponding image * and uses it to texture the Cylinder. This can be a string, an asset() call, or a require(). * * */ const Cylinder = createReactClass({ mixins: [NativeMethodsMixin], propTypes: { ...View.propTypes, style: StyleSheetPropType(LayoutAndTransformColorPropTypes), /** * The lit property specifies if the Model is affected by lights placed in the scene. */ lit: PropTypes.bool, /** * The texture property specifies the url of the texture to be used for the Model. * To make texture repeat, pass an object with `repeat` property, for example: * `texture={{ ...asset('path/to/texture.jpg'), repeat: [4, 4] }}` * * First and second element in `repeat` sets how many times texture is repeated * in x and y directions. */ texture: PropTypes.oneOfType([ PropTypes.number, PropTypes.string, PropTypes.shape({ uri: PropTypes.string.isRequired, repeat: PropTypes.arrayOf(PropTypes.number), }), ]), /** * Specifying true for this property causes the object to be displayed as a wireframe */ wireframe: PropTypes.bool, /** * Radius of the cylinder top in meters */ radiusTop: PropTypes.number, /** * Radius of the cylinder bottom in meters */ radiusBottom: PropTypes.number, /** * Height of the cylinder in meters */ dimHeight: PropTypes.number, /** * Number of segments around the cylinder, * higher numbers correspond to a smoother cylinder */ segments: PropTypes.number, /** * Set material parameters in three.js */ materialParameters: PropTypes.object, }, viewConfig: { uiViewClassName: 'Cylinder', validAttributes: { ...ReactNativeViewAttributes.RCTView, radiusTop: true, radiusBottom: true, dimHeight: true, segments: true, }, }, getDefaultProps() { return { radiusTop: 0.5, radiusBottom: 0.5, dimHeight: 1, segments: 8, }; }, render() { let {texture, ...rest} = this.props; if (typeof texture === 'number') { texture = resolveAssetSource(texture); } rest.style = rest.style || {}; if (!rest.style.position) { rest.style.position = 'absolute'; } return ; }, }); const RKCylinder = requireNativeComponent('Cylinder', Cylinder, {}); module.exports = Cylinder; ================================================ FILE: Libraries/Mesh/Entity.js ================================================ /** * 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 Entity * @flow */ import * as React from 'react'; import ReactNative from 'ReactNative'; import requireNativeComponent from 'requireNativeComponent'; import resolveAssetSource from 'resolveAssetSource'; import type {ViewProps} from 'ViewPropTypes'; type EntitySource = | { gltf2: string, } | { obj: string | number, } | { mtl: string | number, obj: string | number, }; type Props = ViewProps & { source: EntitySource, }; /** * Entity allows you to render 3D objects. * * Entity currently supports the Wavefront OBJ file format, a common * representation for 3D models. In the future, we hope to expand this with * the ability to initialize custom loaders at runtime. * * The external resource (or resources) containing the model information is * provided using a `source` attribute, which is an object of key-value pairs * mapping resource types to their locations. * * The following properties are currently supported: * * * `obj` - Location of an OBJ-formatted model. * * `mtl` - Location of a MTL-formatted material (the companion to OBJ) * * These values can be static strings, asset() calls, or require() statements. * * ``` * // Entity with a material * * * // Entity without a material * * ``` */ const RCTEntity = requireNativeComponent('Model', null, { nativeOnly: {}, }); export default class Entity extends ReactNative.NativeComponent { render() { const {source, ...rest} = this.props; if (source) { if (typeof source.mtl === 'number') { source.mtl = resolveAssetSource(source.mtl); } if (typeof source.obj === 'number') { source.obj = resolveAssetSource(source.obj); } } rest.style = rest.style || {}; if (!rest.style.position) { rest.style.position = 'absolute'; } // default meshes to being a render group if (!rest.style.renderGroup) { rest.style.renderGroup = true; } return ; } } ================================================ FILE: Libraries/Mesh/Model.js ================================================ /** * 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 Model */ 'use strict'; const NativeMethodsMixin = require('NativeMethodsMixin'); const PropTypes = require('prop-types'); const React = require('React'); const ReactNativeViewAttributes = require('ReactNativeViewAttributes'); const View = require('View'); const StyleSheetPropType = require('StyleSheetPropType'); const LayoutAndTransformColorPropTypes = require('LayoutAndTransformColorPropTypes'); const createReactClass = require('create-react-class'); const requireNativeComponent = require('requireNativeComponent'); const resolveAssetSource = require('resolveAssetSource'); /** * Model allows you to render 3D objects in React VR. * * React VR currently supports the Wavefront OBJ file format, a common * representation for 3D models. In the future, we hope to expand this with * the ability to initialize custom loaders at runtime. * * The external resource (or resources) containing the model information is * provided using a `source` attribute, which is an object of key-value pairs * mapping resource types to their locations. * * The following properties are currently supported: * * * `obj` - Location of an OBJ-formatted model. * * `mtl` - Location of a MTL-formatted material (the companion to OBJ) * * These values can be static strings, asset() calls, or require() statements. * * ``` * // Model with a material * * * // Model without a material * * ``` * * Like the 3D primitives, Model also supports the `lit` and `texture` props. * If `lit` is true, the Model's materials are affected by scene lighting. This * overrides any settings from an MTL file. * If `texture` is specified, React VR looks up the corresponding image * and uses it to texture the Model. The texture is only used if an MTL file * is not specified. This can be a string, an asset() call, or a require(). * * */ const Model = createReactClass({ mixins: [NativeMethodsMixin], propTypes: { ...View.propTypes, style: StyleSheetPropType(LayoutAndTransformColorPropTypes), /** * The lit property specifies if the Model will be affected by lights placed in the scene. */ lit: PropTypes.bool, /** * Set material parameters in three.js */ materialParameters: PropTypes.object, /** * `obj` is a string representing the resource identifier for the Model, this must be * an http address. * The source properties will enable future expansion to support additional formats */ source: PropTypes.object, /** * The texture property specifies the url of the texture to be used for the Model. * To make texture repeat, pass an object with `repeat` property, for example: * `texture={{ ...asset('path/to/texture.jpg'), repeat: [4, 4] }}` * * First and second element in `repeat` sets how many times texture is repeated * in x and y directions. */ texture: PropTypes.oneOfType([ PropTypes.number, PropTypes.string, PropTypes.shape({ uri: PropTypes.string.isRequired, repeat: PropTypes.arrayOf(PropTypes.number), }), ]), /** * Specifying true for this property will cause the object to be displayed as a wireframe */ wireframe: PropTypes.bool, }, viewConfig: { uiViewClassName: 'Model', validAttributes: { ...ReactNativeViewAttributes.RCTView, }, }, getDefaultProps() { return {}; }, render() { let {texture, source, ...rest} = this.props; if (source) { // Temporary forwarding of props until deprecation is complete if (source.hasOwnProperty('lit')) { console.warn( '"lit" is now a top-level property of Model, and no longer part of "source". ' + 'Please review the documentation for the latest API' ); rest.lit = source.lit; } if (source.mesh) { console.warn( 'source.mesh has been renamed to source.obj for OBJ files. ' + 'Please review the documentation for the latest API' ); source.obj = source.mesh; delete source.mesh; } // End prop forwarding if (typeof source.mtl === 'number') { source.mtl = resolveAssetSource(source.mtl); } if (typeof source.obj === 'number') { source.obj = resolveAssetSource(source.obj); } } if (typeof texture === 'number') { texture = resolveAssetSource(texture); } rest.style = rest.style || {}; if (!rest.style.position) { rest.style.position = 'absolute'; } // default meshes to being a render group if (!rest.style.renderGroup) { rest.style.renderGroup = true; } return ( true} onResponderTerminationRequest={() => false} /> ); }, }); const RKModel = requireNativeComponent('Model', Model, {}); module.exports = Model; ================================================ FILE: Libraries/Mesh/Plane.js ================================================ /** * 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 Plane */ 'use strict'; const NativeMethodsMixin = require('NativeMethodsMixin'); const PropTypes = require('prop-types'); const React = require('React'); const ReactNativeViewAttributes = require('ReactNativeViewAttributes'); const View = require('View'); const StyleSheetPropType = require('StyleSheetPropType'); const LayoutAndTransformColorPropTypes = require('LayoutAndTransformColorPropTypes'); const createReactClass = require('create-react-class'); const requireNativeComponent = require('requireNativeComponent'); const resolveAssetSource = require('resolveAssetSource'); /** * Plane constructs a plane-type 3D primitive in your scene. * * It can be sized through `dimWidth` and `dimHeight` properties, which take numeric * values measured in meters. If not specified, these props default to 1. * * ``` * * ``` * * Like all 3D primitives, Plane also supports the `lit`, `texture`, and `wireframe` props. * If `lit` is true, the Plane's materials are affected by scene lighting. * If `wireframe` is true, the Plane renders in a wireframe style. * If `texture` is specified, React VR looks up the corresponding image * and uses it to texture the Plane. This can be a string, an asset() call, or a require(). * * */ const Plane = createReactClass({ mixins: [NativeMethodsMixin], propTypes: { ...View.propTypes, style: StyleSheetPropType(LayoutAndTransformColorPropTypes), /** * The lit property specifies if the Model is affected by lights placed in the scene. */ lit: PropTypes.bool, /** * Set material parameters in three.js */ materialParameters: PropTypes.object, /** * The texture property specifies the url of the texture to be used for the Model. * To make texture repeat, pass an object with `repeat` property, for example: * `texture={{ ...asset('path/to/texture.jpg'), repeat: [4, 4] }}` * * First and second element in `repeat` sets how many times texture is repeated * in x and y directions. */ texture: PropTypes.oneOfType([ PropTypes.number, PropTypes.string, PropTypes.shape({ uri: PropTypes.string.isRequired, repeat: PropTypes.arrayOf(PropTypes.number), }), ]), /** * Specifying true for this property causes the object to be displayed as a wireframe */ wireframe: PropTypes.bool, /** * Width of the box in meters */ dimWidth: PropTypes.number, /** * Height of the box in meters */ dimHeight: PropTypes.number, }, viewConfig: { uiViewClassName: 'Plane', validAttributes: { ...ReactNativeViewAttributes.RCTView, dimWidth: true, dimHeight: true, }, }, getDefaultProps() { return { dimWidth: 1, dimHeight: 1, }; }, render() { let {texture, ...rest} = this.props; if (typeof texture === 'number') { texture = resolveAssetSource(texture); } rest.style = rest.style || {}; if (!rest.style.position) { rest.style.position = 'absolute'; } return ; }, }); const RKPlane = requireNativeComponent('Plane', Plane, {}); module.exports = Plane; ================================================ FILE: Libraries/Mesh/Sphere.js ================================================ /** * 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 Sphere */ 'use strict'; const NativeMethodsMixin = require('NativeMethodsMixin'); const PropTypes = require('prop-types'); const React = require('React'); const ReactNativeViewAttributes = require('ReactNativeViewAttributes'); const View = require('View'); const StyleSheetPropType = require('StyleSheetPropType'); const LayoutAndTransformColorPropTypes = require('LayoutAndTransformColorPropTypes'); const createReactClass = require('create-react-class'); const requireNativeComponent = require('requireNativeComponent'); const resolveAssetSource = require('resolveAssetSource'); /** * Sphere constructs a sphere-type 3D primitive in your scene. * * It can be sized through a `radius` property, which takes numeric values * measured in meters. You can also specify the number of width and height * segments with the `widthSegments` and `heightSegments` props. * * ``` * * ``` * * Like all 3D primitives, Sphere also supports the `lit`, `texture`, and `wireframe` props. * If `lit` is true, the Sphere's materials are affected by scene lighting. * If `wireframe` is true, the Sphere renders in a wireframe style. * If `texture` is specified, React VR looks up the corresponding image * and uses it to texture the Sphere. This can be a string, an asset() call, or a require(). * * */ const Sphere = createReactClass({ mixins: [NativeMethodsMixin], propTypes: { ...View.propTypes, style: StyleSheetPropType(LayoutAndTransformColorPropTypes), /** * The lit property specifies if the Model is affected by lights placed in the scene. */ lit: PropTypes.bool, /** * Set material parameters in three.js */ materialParameters: PropTypes.object, /** * The texture property specifies the url of the texture to be used for the Model. * To make texture repeat, pass an object with `repeat` property, for example: * `texture={{ ...asset('path/to/texture.jpg'), repeat: [4, 4] }}` * * First and second element in `repeat` sets how many times texture is repeated * in x and y directions. */ texture: PropTypes.oneOfType([ PropTypes.number, PropTypes.string, PropTypes.shape({ uri: PropTypes.string.isRequired, repeat: PropTypes.arrayOf(PropTypes.number), }), ]), /** * Specifying true for this property causes the object to be displayed as a wireframe */ wireframe: PropTypes.bool, /** * The radius in meters of the sphere */ radius: PropTypes.number, /** * The number of segments around the sphere. Large corresponds to a smoother sphere but * is slower to render */ widthSegments: PropTypes.number, /** * The number of segments between the poles of the sphere. Large corresponds to a smoother * sphere but is slower to render */ heightSegments: PropTypes.number, }, viewConfig: { uiViewClassName: 'Sphere', validAttributes: { ...ReactNativeViewAttributes.RCTView, radius: true, widthSegments: true, heightSegments: true, }, }, getDefaultProps() { return { radius: 0.5, widthSegments: 8, heightSegments: 6, }; }, render() { let {texture, ...rest} = this.props; if (typeof texture === 'number') { texture = resolveAssetSource(texture); } rest.style = rest.style || {}; if (!rest.style.position) { rest.style.position = 'absolute'; } return ; }, }); const RKSphere = requireNativeComponent('Sphere', Sphere, {}); module.exports = Sphere; ================================================ FILE: Libraries/Pano/Pano.js ================================================ /** * 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 Pano */ 'use strict'; const NativeMethodsMixin = require('NativeMethodsMixin'); const PropTypes = require('prop-types'); const React = require('React'); const ReactNativeViewAttributes = require('ReactNativeViewAttributes'); const View = require('View'); const StyleSheetPropType = require('StyleSheetPropType'); const LayoutAndTransformTintPropTypes = require('LayoutAndTransformTintPropTypes'); const createReactClass = require('create-react-class'); const requireNativeComponent = require('requireNativeComponent'); const resolveAssetSource = require('resolveAssetSource'); /** * A Sphere of 1000m with center located at the local transform origin. * By default this is `position:'absolute'`. * * Panos are images projected onto a sphere that fully surrounds the viewer. * These are a core image format for VR applications. * You can create 360 photos by using special 360 camera hardware. These will be * usually in the form of Equirectangular images covering full 360° horizontal and 180° * vertical angles. Here is an example: * ![](https://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Botanischer_garten_panorama_mittel.jpg/1280px-Botanischer_garten_panorama_mittel.jpg) * * Cubemap images are also supported by specifying the source url as an * array of 6 individual images, presented in the order `[+x, -x, +y, -y, +z, -z]` */ const Pano = createReactClass({ mixins: [NativeMethodsMixin], propTypes: { ...View.propTypes, style: StyleSheetPropType(LayoutAndTransformTintPropTypes), /** * source image in the form of * `{uri: 'http'}` for a panorama * or * `[{uri: 'http..'}, {uri: 'http..'}, {uri: 'http..'}, * {uri: 'http..'}, {uri: 'http..'}, {uri: 'http..'}]` for a cubemap * or * `[{uri: 'http..'}, {uri: 'http..'}, {uri: 'http..'}, * {uri: 'http..'}, {uri: 'http..'}, {uri: 'http..'}, * {uri: 'http..'}, {uri: 'http..'}, {uri: 'http..'}, * {uri: 'http..'}, {uri: 'http..'}, {uri: 'http..'}]` for a stereo * cubemap where the first 6 images are the left eye cubemap and the * following 6 are the right eye cubemap. * * stereo(optional): the stereo format of a panorama: '2D' | 'TOP_BOTTOM_3D' | * 'BOTTOM_TOP_3D' | 'LEFT_RIGHT_3D' | 'RIGHT_LEFT_3D' * * If stereo is not a supported stereo format, it'll by default use '2D' */ source: PropTypes.oneOfType([ PropTypes.shape({ uri: PropTypes.string, stereo: PropTypes.string, }), PropTypes.arrayOf( PropTypes.shape({ uri: PropTypes.string, }) ), PropTypes.shape({ tile: PropTypes.string, maxDepth: PropTypes.number, }), // Opaque type returned by require('./image.jpg') PropTypes.number, ]), /** * Option onLoad callback called on success **/ onLoad: PropTypes.func, /** * Option onLoadEnd callback called on success or failure **/ onLoadEnd: PropTypes.func, }, viewConfig: { uiViewClassName: 'Pano', validAttributes: { ...ReactNativeViewAttributes.RCTView, }, }, _onLoad: function() { this.props.onLoad && this.props.onLoad(); }, _onLoadEnd: function() { this.props.onLoadEnd && this.props.onLoadEnd(); }, getDefaultProps: function() { return {}; }, render: function() { const props = {...this.props} || {}; props.style = props.style || {}; if (!props.style.position) { props.style.position = 'absolute'; } // default panos to being a render group if (!props.style.renderGroup) { props.style.renderGroup = true; } const source = resolveAssetSource(this.props.source); if (!source) { // If source is not defined, set uri to undefined and RCTPano will // handle the undefined uri props.source = {uri: undefined}; } else { props.source = source; } return ( true} onResponderTerminationRequest={() => false}> {this.props.children} ); }, }); const RKPano = requireNativeComponent('Pano', Pano, { nativeOnly: {}, }); module.exports = Pano; ================================================ FILE: Libraries/Pano/Prefetch.js ================================================ /** * 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 Prefetch */ 'use strict'; const NativeMethodsMixin = require('NativeMethodsMixin'); const PropTypes = require('prop-types'); const React = require('React'); const View = require('View'); const createReactClass = require('create-react-class'); const requireNativeComponent = require('requireNativeComponent'); const resolveAssetSource = require('resolveAssetSource'); /** * Prefetch is a component that declaratively hints the need to download and cache * pano images */ const Prefetch = createReactClass({ mixins: [NativeMethodsMixin], propTypes: { ...View.propTypes, /** * source image in the form of * `{uri: 'http'}` for a panorama * or * `[{uri: 'http..'}, {uri: 'http..'}, {uri: 'http..'}, * {uri: 'http..'}, {uri: 'http..'}, {uri: 'http..'}]` for a cubemap */ source: PropTypes.oneOfType([ PropTypes.shape({ uri: PropTypes.string, }), PropTypes.arrayOf( PropTypes.shape({ uri: PropTypes.string, }) ), PropTypes.shape({ tile: PropTypes.string, maxDepth: PropTypes.number, }), // Opaque type returned by require('./image.jpg') PropTypes.number, ]), }, getDefaultProps: function() { return {}; }, render: function() { const props = {...this.props} || {}; const source = resolveAssetSource(this.props.source); if (!source) { // If source is not defined, set uri to undefined and RCTPano will // handle the undefined uri props.source = {uri: undefined}; } else { props.source = source; } return ( {this.props.children} ); }, }); const RKPrefetch = requireNativeComponent('Prefetch', Prefetch, {}); module.exports = Prefetch; ================================================ FILE: Libraries/Scene/Scene.js ================================================ /** * 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 Scene */ 'use strict'; const NativeMethodsMixin = require('NativeMethodsMixin'); const React = require('React'); const ReactNativeViewAttributes = require('ReactNativeViewAttributes'); const View = require('View'); const StyleSheetPropType = require('StyleSheetPropType'); const LayoutAndTransformPropTypes = require('LayoutAndTransformPropTypes'); const createReactClass = require('create-react-class'); const requireNativeComponent = require('requireNativeComponent'); /** * The Scene transform represents the camera location in the world. * * There should only be a single Scene node within a React VR view tree. * The transform of a Scene node, rather than affecting any children, is * instead the transform of the camera in the scene. */ const Scene = createReactClass({ mixins: [NativeMethodsMixin], viewConfig: { uiViewClassName: 'Scene', validAttributes: ReactNativeViewAttributes.RCTView, }, propTypes: { ...View.propTypes, style: StyleSheetPropType(LayoutAndTransformPropTypes), /** */ }, getDefaultProps: function() { return {}; }, render: function() { // TODO: prevent propagation of changes to 'transform' property up the view hierarchy // the viewer transform change is handled via the runtime return ( true} onResponderTerminationRequest={() => false}> {this.props.children} ); }, }); const RKScene = requireNativeComponent('Scene', Scene, { nativeOnly: {}, }); module.exports = Scene; ================================================ FILE: Libraries/Sound/Sound.js ================================================ /** * 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 Sound */ 'use strict'; const LayoutAndTransformPropTypes = require('LayoutAndTransformPropTypes'); const NativeMethodsMixin = require('NativeMethodsMixin'); const PropTypes = require('prop-types'); const React = require('React'); const ReactNativeViewAttributes = require('ReactNativeViewAttributes'); const UIManager = require('UIManager'); const ReactNative = require('ReactNative'); const StyleSheetPropType = require('StyleSheetPropType'); const View = require('View'); const createReactClass = require('create-react-class'); const requireNativeComponent = require('requireNativeComponent'); const resolveAssetSource = require('resolveAssetSource'); /** * Sound represents an audio source located within the scene. It supports * 3D positional audio, changing the stereo balance of the sound as the * listener moves around the scene or turns their head in VR. * * Example usage: * ``` * * * * ``` * * The `source` attribute represents the external resource to load. * It should be an `asset()`` statement, or a resource declaration in the form * `{uri: 'PATH'}`. Since different browsers support different audio formats, * you can also supply a map of formats to their corresponding resource objects, * and React VR can select the sound file supported by the browser: * ``` * * ``` * You can read more about supported audio formats in the docs for the * [Sound Effects](docs/vrsoundeffects.html) API. * * Things to keep in mind when using this component: * * * Must be a leaf node with no child components * * Defaults to `style: {position: absolute}` */ const Sound = createReactClass({ mixins: [NativeMethodsMixin], propTypes: { ...View.propTypes, style: StyleSheetPropType(LayoutAndTransformPropTypes), /** * Source audio in the form of `{uri: 'http'}` */ source: PropTypes.object, /** * Whether audio starts playing automatically when component is loaded. * Default is `true` */ autoPlay: PropTypes.bool, /** * Whether audio repeats automatically when finished playing. * Default is `false` */ loop: PropTypes.bool, /** * Whether the audio is muted. * Default is `false`. */ muted: PropTypes.bool, /** * Option callback evoked when audio is done playing. **/ onEnded: PropTypes.func, /** * Option callback evoked when video duration changed. * event.nativeEvent.duration - the duration of video **/ onDurationChange: PropTypes.func, /** * Option callback evoked when video currentTime of video changed. * event.nativeEvent.currentTime - the currentTime of video **/ onTimeUpdate: PropTypes.func, /** * Option callback evoked when video play status changed. * event.nativeEvent.playStatus - the play status of video: * play status is one of 'closed' | 'loading' | 'error' | 'ended' | 'paused' | 'playing' | 'ready' **/ onPlayStatusChange: PropTypes.func, /** * Controls the playback status. If not set, the value of `autoPlay` determines * whether the audio plays when the component is loaded. * This prop is scheduled to be deprecated. Use `playControl` instead. */ playStatus: PropTypes.oneOf(['play', 'pause', 'stop']), /** * Controls the playback status. If not set, the value of `autoPlay` determines * whether the audio plays when the component is loaded. */ playControl: PropTypes.oneOf(['play', 'pause', 'stop']), /** * playerState - playerState is a `MediaPlayerState` that controls video * playback with its inner state. When playerState is set, the value of * `autoPlay`, `muted` `volume` and `playControl` properties are ignored * as they will be set by playerState instead. * See [MediaPlayerState](docs/mediaplayerstate.html) */ playerState: PropTypes.object, /** * Value of the audio volume. The minimum value 0 mutes the sound. * The suggested maximum is 1.0, which is also the default value. * Values greater than 1.0 are allowed, but may cause clipping or * distortion depending on the audio hardware. * * For example: Lower the volume by 50% * * `volume={0.5}` */ volume: PropTypes.number, }, viewConfig: { uiViewClassName: 'Sound', validAttributes: { ...ReactNativeViewAttributes.RCTView, volume: true, }, }, getDefaultProps: function() { return { autoPlay: true, volume: 1.0, loop: false, playControl: null, source: null, }; }, getInitialState: function() { return { volume: 1.0, muted: false, }; }, componentWillMount() { if (__DEV__) { if (this.props.playStatus) { console.warn( 'playStatus has been renamed to playControl. Please update your code before v2.0.0' ); } } if (this.props.playerState) { this._subscribe(this.props.playerState); } }, componentWillReceiveProps(nextProps) { if (__DEV__) { if (nextProps.playStatus) { console.warn( 'playStatus has been renamed to playControl. Please update your code before v2.0.0' ); } } if (this.props.playerState !== nextProps.playerState) { if (this.props.playerState) { this._unsubscribe(this.props.playerState); } if (nextProps.playerState) { this._subscribe(nextProps.playerState); } } }, componentWillUnmount() { if (this.props.playerState) { this._unsubscribe(this.props.playerState); } }, _subscribe(playerState) { playerState.addListener('play', this._play); playerState.addListener('pause', this._pause); playerState.addListener('seekTo', this._seekTo); playerState.addListener('volumeChange', this._volumeChange); playerState.addListener('mutedChange', this._mutedChange); this.setState({ volume: playerState.volume, muted: playerState.muted, }); }, _unsubscribe(playerState) { playerState.removeListener('play', this._play); playerState.removeListener('pause', this._pause); playerState.removeListener('seekTo', this._seekTo); playerState.removeListener('volumeChange', this._volumeChange); playerState.removeListener('mutedChange', this._mutedChange); }, _play() { UIManager.dispatchViewManagerCommand( ReactNative.findNodeHandle(this), UIManager.Sound.Commands.play, [] ); }, _pause() { UIManager.dispatchViewManagerCommand( ReactNative.findNodeHandle(this), UIManager.Sound.Commands.pause, [] ); }, _seekTo(timeSec) { UIManager.dispatchViewManagerCommand( ReactNative.findNodeHandle(this), UIManager.Sound.Commands.seekTo, [timeSec] ); }, _volumeChange(volume) { this.setState({volume: volume}); }, _mutedChange(muted) { this.setState({muted: muted}); }, _onEnded: function() { this.props.onEnded && this.props.onEnded(); }, _onDurationChange: function(event) { if (this.props.playerState) { this.props.playerState.onDurationChange(event); } this.props.onDurationChange && this.props.onDurationChange(event); }, _onTimeUpdate: function(event) { if (this.props.playerState) { this.props.playerState.onTimeUpdate(event); } this.props.onTimeUpdate && this.props.onTimeUpdate(event); }, _onPlayStatusChange: function(event) { if (this.props.playerState) { this.props.playerState.onPlayStatusChange(event); } this.props.onPlayStatusChange && this.props.onPlayStatusChange(event); }, render: function() { const props = {...this.props} || {}; props.style = props.style || {}; if (__DEV__) { if (props.children) { console.warn(' must be a leaf node, props.children will not be rendered'); } } if (props.playStatus && !props.playControl) { props.playControl = props.playStatus; delete props['playStatus']; } if (this.props.playerState) { props.autoPlay = false; props.volume = this.state.volume; props.muted = this.state.muted; } // events props.onDurationChange = this._onDurationChange; props.onTimeUpdate = this._onTimeUpdate; props.onPlayStatusChange = this._onPlayStatusChange; const source = resolveAssetSource(props.source); if (source) { // Default to 'absolute' position, and pass handle to native side. return ( true} onResponderTerminationRequest={() => false} /> ); } // If no source property, render `null` return null; }, }); const RKSound = requireNativeComponent('Sound', Sound, { nativeOnly: {}, }); module.exports = Sound; ================================================ FILE: Libraries/StyleSheet/LayoutAndTransformColorPropTypes.js ================================================ /** * 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 LayoutAndTransformColorPropTypes * @flow */ 'use strict'; const ColorPropType = require('ColorPropType'); const LayoutPropTypes = require('LayoutPropTypes'); const PropTypes = require('prop-types'); const TransformPropTypes = require('TransformPropTypes'); /** * Warning: Some of these properties may not be supported in all releases. */ const LayoutAndTransformColorPropTypes = { ...LayoutPropTypes, ...TransformPropTypes, color: ColorPropType, opacity: PropTypes.number, }; module.exports = LayoutAndTransformColorPropTypes; ================================================ FILE: Libraries/StyleSheet/LayoutAndTransformOpacityPropTypes.js ================================================ /** * 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 LayoutAndTransformOpacityPropTypes * @flow */ 'use strict'; const LayoutPropTypes = require('LayoutPropTypes'); const PropTypes = require('prop-types'); const TransformPropTypes = require('TransformPropTypes'); /** * Warning: Some of these properties may not be supported in all releases. */ const LayoutAndTransformOpacityPropTypes = { ...LayoutPropTypes, ...TransformPropTypes, opacity: PropTypes.number, }; module.exports = LayoutAndTransformOpacityPropTypes; ================================================ FILE: Libraries/StyleSheet/LayoutAndTransformPropTypes.js ================================================ /** * 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 LayoutAndTransformPropTypes * @flow */ 'use strict'; const LayoutPropTypes = require('LayoutPropTypes'); const TransformPropTypes = require('TransformPropTypes'); /** * Warning: Some of these properties may not be supported in all releases. */ const LayoutAndTransformPropTypes = { ...LayoutPropTypes, ...TransformPropTypes, }; module.exports = LayoutAndTransformPropTypes; ================================================ FILE: Libraries/StyleSheet/LayoutAndTransformTintPropTypes.js ================================================ /** * 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 LayoutAndTransformTintPropTypes * @flow */ 'use strict'; const ColorPropType = require('ColorPropType'); const LayoutPropTypes = require('LayoutPropTypes'); const TransformPropTypes = require('TransformPropTypes'); const PropTypes = require('prop-types'); /** * Warning: Some of these properties may not be supported in all releases. */ const LayoutAndTransformTintPropTypes = { ...LayoutPropTypes, ...TransformPropTypes, /** * Changes the color of all the non-transparent pixels to the tintColor. */ tintColor: ColorPropType, opacity: PropTypes.number, }; module.exports = LayoutAndTransformTintPropTypes; ================================================ FILE: Libraries/StyleSheet/LayoutPropTypes.vr.js ================================================ /** * 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 LayoutPropTypes * @flow */ 'use strict'; const ReactPropTypes = require('prop-types'); // We add a few overrides to the original React Native implementation // Import the original, and add the extra values before re-exporting it const OriginalLayoutPropTypes = require('react-native/Libraries/StyleSheet/LayoutPropTypes'); const LayoutPropTypes = { ...OriginalLayoutPropTypes, /** `width` sets the width of this component. * * It works similarly to `width` in CSS, but in React Native you * must use points or percentages. Ems and other units are not supported. * See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details. */ width: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.string]), /** `height` sets the height of this component. * * It works similarly to `height` in CSS, but in React Native you * must use points or percentages. Ems and other units are not supported. * See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details. */ height: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.string]), /** `top` is the number of logical pixels to offset the top edge of * this component. * * It works similarly to `top` in CSS, but in React Native you * must use points or percentages. Ems and other units are not supported. * * See https://developer.mozilla.org/en-US/docs/Web/CSS/top * for more details of how `top` affects layout. */ top: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.string]), /** `left` is the number of logical pixels to offset the left edge of * this component. * * It works similarly to `left` in CSS, but in React Native you * must use points or percentages. Ems and other units are not supported. * * See https://developer.mozilla.org/en-US/docs/Web/CSS/left * for more details of how `left` affects layout. */ left: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.string]), /** `right` is the number of logical pixels to offset the right edge of * this component. * * It works similarly to `right` in CSS, but in React Native you * must use points or percentages. Ems and other units are not supported. * * See https://developer.mozilla.org/en-US/docs/Web/CSS/right * for more details of how `right` affects layout. */ right: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.string]), /** `bottom` is the number of logical pixels to offset the bottom edge of * this component. * * It works similarly to `bottom` in CSS, but in React Native you * must use points or percentages. Ems and other units are not supported. * * See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom * for more details of how `bottom` affects layout. */ bottom: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.string]), /** `minWidth` is the minimum width for this component, in logical pixels. * * It works similarly to `min-width` in CSS, but in React Native you * must use points or percentages. Ems and other units are not supported. * * See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width * for more details. */ minWidth: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.string]), /** `maxWidth` is the maximum width for this component, in logical pixels. * * It works similarly to `max-width` in CSS, but in React Native you * must use points or percentages. Ems and other units are not supported. * * See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width * for more details. */ maxWidth: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.string]), /** `minHeight` is the minimum height for this component, in logical pixels. * * It works similarly to `min-height` in CSS, but in React Native you * must use points or percentages. Ems and other units are not supported. * * See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height * for more details. */ minHeight: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.string]), /** `maxHeight` is the maximum height for this component, in logical pixels. * * It works similarly to `max-height` in CSS, but in React Native you * must use points or percentages. Ems and other units are not supported. * * See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height * for more details. */ maxHeight: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.string]), /** Setting `margin` has the same effect as setting each of * `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. * See https://developer.mozilla.org/en-US/docs/Web/CSS/margin * for more details. */ margin: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.string]), /** Setting `marginVertical` has the same effect as setting both * `marginTop` and `marginBottom`. */ marginVertical: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.string]), /** Setting `marginHorizontal` has the same effect as setting * both `marginLeft` and `marginRight`. */ marginHorizontal: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.string]), /** `marginTop` works like `margin-top` in CSS. * See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top * for more details. */ marginTop: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.string]), /** `marginBottom` works like `margin-bottom` in CSS. * See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom * for more details. */ marginBottom: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.string]), /** `marginLeft` works like `margin-left` in CSS. * See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left * for more details. */ marginLeft: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.string]), /** `marginRight` works like `margin-right` in CSS. * See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right * for more details. */ marginRight: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.string]), /** Setting `padding` has the same effect as setting each of * `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`. * See https://developer.mozilla.org/en-US/docs/Web/CSS/padding * for more details. */ padding: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.string]), /** Setting `paddingVertical` is like setting both of * `paddingTop` and `paddingBottom`. */ paddingVertical: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.string]), /** Setting `paddingHorizontal` is like setting both of * `paddingLeft` and `paddingRight`. */ paddingHorizontal: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.string]), /** `paddingTop` works like `padding-top` in CSS. * See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top * for more details. */ paddingTop: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.string]), /** `paddingBottom` works like `padding-bottom` in CSS. * See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom * for more details. */ paddingBottom: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.string]), /** `paddingLeft` works like `padding-left` in CSS. * See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left * for more details. */ paddingLeft: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.string]), /** `paddingRight` works like `padding-right` in CSS. * See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right * for more details. */ paddingRight: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.string]), flexBasis: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.string]), /** * `display` display defines if the component will play a part in the layout and draw passes * this is not supported by RN so extending for React VR */ display: ReactPropTypes.oneOf(['flex', 'none']), /** * `layoutOrigin` defines how the final top and left locations are determined prior to rendering * The equivalent is computing the world location by * `style.left` = -layoutOrigin[0] * style.width * `style.top` = -layoutOrigin[1] * style.height * The advantage is that this is calculated after width and height are computed by flex box meaning that * it can be used without prior knowledge of the final layout * the default is [0,0] */ layoutOrigin: ReactPropTypes.arrayOf(ReactPropTypes.number), /** * `animation` defines a native per view version of the `LayoutAnimation` * This is currently only availble on the native version of react VR */ animation: ReactPropTypes.object, /** * `renderGroup` defines a component which is used for depth sorting the * components under it. This is generally used on any component which is position * `absolute` and transformed. */ renderGroup: ReactPropTypes.bool, }; module.exports = LayoutPropTypes; ================================================ FILE: Libraries/StyleSheet/ViewStylePropTypes.vr.js ================================================ /** * 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 ViewStylePropTypes * @flow */ 'use strict'; const ColorPropType = require('ColorPropType'); const PropTypes = require('prop-types'); const OriginalViewStylePropTypes = require('react-native/Libraries/Components/View/ViewStylePropTypes'); const ViewStylePropTypes = { ...OriginalViewStylePropTypes, gradientColorA: ColorPropType, gradientColorB: ColorPropType, gradientAngle: PropTypes.string, }; module.exports = ViewStylePropTypes; ================================================ FILE: Libraries/Utilities/MatrixMath.vr.js ================================================ /** * 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 MatrixMath */ 'use strict'; const MatrixMath = require('react-native/Libraries/Utilities/MatrixMath'); /** * Returns the rotation around the X, Y & Z axes */ MatrixMath.rotationMatrixToDegreesXYZ = function(matrix: Array): Array { // prettier-ignore const [ m00, m01, m02, m03, m10, m11, m12, m13, m20, m21, m22, m23, m30, m31, m32, m33, ] = matrix; // Check if the matrix is singular const sy = Math.sqrt(m00 * m00 + m10 * m10); if (sy > 0.0001) { return [Math.atan2(m21, m22), Math.atan2(-m20, sy), Math.atan2(m10, m00)]; } else { return [Math.atan2(-m12, m11), Math.atan2(-m20, 0), 0]; } }; MatrixMath.createRotateX = function(radians) { const mat = MatrixMath.createIdentityMatrix(); MatrixMath.reuseRotateXCommand(mat, radians); return mat; }; MatrixMath.createRotateY = function(radians) { const mat = MatrixMath.createIdentityMatrix(); MatrixMath.reuseRotateYCommand(mat, radians); return mat; }; MatrixMath.createRotateZ = function(radians) { const mat = MatrixMath.createIdentityMatrix(); MatrixMath.reuseRotateZCommand(mat, radians); return mat; }; module.exports = MatrixMath; ================================================ FILE: Libraries/Utilities/Platform.vr.js ================================================ /** * 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 Platform * @flow */ 'use strict'; const Platform = { OS: 'vr', select: (obj: Object) => ('vr' in obj ? obj.vr : obj.default), }; module.exports = Platform; ================================================ FILE: Libraries/Utilities/ThreeJSConstants.js ================================================ /** * 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 ThreeJSConstants * @flow */ import * as THREE from 'three/src/constants.js'; export default THREE; ================================================ FILE: Libraries/Utilities/VrHeadModel.js ================================================ /** * 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 VrHeadModel */ 'use strict'; const MatrixMath = require('MatrixMath'); const RCTDeviceEventEmitter = require('RCTDeviceEventEmitter'); const VrMath = require('VrMath'); /** * VrHeadModel is a utility module that simplifies obtaining the current orientation of the headset. * * Orientation data contains some latency and is not fully in sync with the display due to how React VR code runs asynchronously from the main render thread. */ class VrHeadModelImpl { constructor() { this.headMatrix = MatrixMath.createIdentityMatrix(); this.viewMatrix = MatrixMath.createIdentityMatrix(); this._inVR = false; this.fov = 0; this.aspect = 1; this._headMatrixListener = RCTDeviceEventEmitter.addListener( 'onReceivedHeadMatrix', this._onReceivedHeadMatrix.bind(this) ); RCTDeviceEventEmitter.addListener('onEnterVR', () => { this._inVR = true; }); RCTDeviceEventEmitter.addListener('onExitVR', () => { this._inVR = false; }); } _onReceivedHeadMatrix(headMatrix, viewMatrix, fov, aspect) { this.headMatrix = headMatrix; this.viewMatrix = viewMatrix; this.fov = fov; this.aspect = aspect; } /** * Returns the position of the head as [X,Y,Z]. * * If headMatrix is not specified, we use the current orientation of the headset. */ positionOfHeadMatrix(headMatrix) { console.warn('positionOfHeadMatrix is deprecated. Please use position instead'); const matrix = headMatrix || this.headMatrix; return VrMath.getTranslation(matrix); } /** * Returns the rotation as Euler angles in radians. * * If headMatrix is not specified, we use the current orientation of the headset. * If eulerOrder is not specified, we use `YXZ` order, that is Yaw, Pitch, and Roll. */ rotationOfHeadMatrix(headMatrix, eulerOrder) { console.warn( 'rotationOfHeadMatrix is deprecated. Please use rotation, rotationInRadians, ' + 'yawPitchRoll or yawPitchRollInRadians instead' ); const matrix = headMatrix || this.headMatrix; return VrMath.getRotation(matrix, eulerOrder); } /** * Return the position of the head as [X,Y,Z]. */ position() { return VrMath.getTranslation(this.headMatrix); } /** * Returns the rotation as Euler angles in degrees. * * Returns an array in the form: * [rotation about X axis, rotation about Y axis, rotation about Z axis] */ rotation() { return this.rotationInRadians().map(VrMath.radToDeg); } /** * Returns the rotation as Euler angles in degrees. * * Returns an array in the form: * [rotation about X axis, rotation about Y axis, rotation about Z axis] */ rotationInRadians() { return VrMath.getRotation(this.headMatrix); } /** * Return the rotation in yaw, pitch, roll order in degrees. * * For those new to 3D graphics and who are not former pilots: * Yaw = looking up and down * Pitch = looking to the left and right * Roll = tilting your head from side to side * * Returns an array of rotations in the form: * [Y axis, X axis, Z axis] */ yawPitchRoll() { return this.yawPitchRollInRadians().map(VrMath.radToDeg); } /** * Returns the rotation in yaw, pitch, roll order in radians. * * For those new to 3D graphics and who are not former pilots: * Yaw = looking up and down * Pitch = looking to the left and right * Roll = tilting your head from side to side * * Returns an array of rotations in the form: * [Y axis, X axis, Z axis] */ yawPitchRollInRadians() { const rotation = this.rotationInRadians(); return [rotation[1], rotation[0], rotation[2]]; } /** * Returns the horizontal field of view of the camera in degrees. */ horizontalFov() { return this.fov; } /** * Returns the vertical field of view of the camera in degrees. */ verticalFov() { return this.fov / this.aspect; } /** * Returns the horizontal field of view of the camera in radians. */ horizontalFovInRadians() { return VrMath.degToRad(this.horizontalFov()); } /** * Returns the vertical field of view of the camera in radians. */ verticalFovInRadians() { return VrMath.degToRad(this.verticalFov()); } /** * Returns the Head matrix as an array of numbers. */ getHeadMatrix() { return [...this.headMatrix]; } /** * Returns true if the headset is in use. */ getVRStatus() { console.warn('getVRStatus is deprecated. Please use inVR instead'); return this._inVR; } /** * Returns true if the headset is in use, false if viewed outside of VR */ inVR() { return this._inVR; } } module.exports = new VrHeadModelImpl(); ================================================ FILE: Libraries/Utilities/VrMath.js ================================================ /** * 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 VrMath */ 'use strict'; const clamp = require('clamp'); const MatrixMath = require('MatrixMath'); const RAD_TO_DEG = 180 / Math.PI; const DEG_TO_RAD = Math.PI / 180; /** * Math utilities for React VR */ const VrMath = { /** * Get scale from a 4x4 matrix, assumes upper 3x3 of matrix * only contains scale and rotation * @param {array} m - The array[16] for 4x4 matrix * @return {array} the translation, in x, y, z order. * Based on: https://github.com/mrdoob/three.js/blob/master/src/math/Matrix4.js */ getScale: function(m) { const sx = MatrixMath.v3Length([m[0], m[1], m[2]]); const sy = MatrixMath.v3Length([m[4], m[5], m[6]]); const sz = MatrixMath.v3Length([m[8], m[9], m[10]]); // Check for a coordinate system flip. if determine is negative, // we need to invert one scale. const det = MatrixMath.determinant(m); return det < 0 ? [-sx, sy, sz] : [sx, sy, sz]; }, /** * Get translation from a 4x4 matrix * @param {array} m - The array[16] for 4x4 matrix * @return {array} the translation, in x, y, z order. */ getTranslation: function(m) { return [m[12], m[13], m[14]]; }, /** * Get rotation from a 4x4 matrix * @param {array} m - The array[16] for 4x4 matrix, assumes upper 3x3 of matrix * only contains scale and rotation * @param {string} eulerOrder - The order of euler angle rotation sequence. * @return {array} the rotation euler angle, in x, y, z order. * Based on: https://github.com/mrdoob/three.js/blob/master/src/math/Euler.js */ getRotation: function(m, eulerOrder) { const scale = this.getScale(m); const invSX = 1 / scale[0]; const invSY = 1 / scale[1]; const invSZ = 1 / scale[2]; const m11 = m[0] * invSX; const m12 = m[4] * invSY; const m13 = m[8] * invSZ; const m21 = m[1] * invSX; const m22 = m[5] * invSY; const m23 = m[9] * invSZ; const m31 = m[2] * invSX; const m32 = m[6] * invSY; const m33 = m[10] * invSZ; const order = eulerOrder || 'YXZ'; const rotation = [0, 0, 0]; if (order === 'XYZ') { rotation[1] = Math.asin(clamp(m13, -1, 1)); if (Math.abs(m13) < 0.99999) { rotation[0] = Math.atan2(-m23, m33); rotation[2] = Math.atan2(-m12, m11); } else { rotation[0] = Math.atan2(m32, m22); rotation[2] = 0; } } else if (order === 'YXZ') { rotation[0] = Math.asin(-clamp(m23, -1, 1)); if (Math.abs(m23) < 0.99999) { rotation[1] = Math.atan2(m13, m33); rotation[2] = Math.atan2(m21, m22); } else { rotation[1] = Math.atan2(-m31, m11); rotation[2] = 0; } } else if (order === 'ZXY') { rotation[0] = Math.asin(clamp(m32, -1, 1)); if (Math.abs(m32) < 0.99999) { rotation[1] = Math.atan2(-m31, m33); rotation[2] = Math.atan2(-m12, m22); } else { rotation[1] = 0; rotation[2] = Math.atan2(m21, m11); } } else if (order === 'ZYX') { rotation[1] = Math.asin(-clamp(m31, -1, 1)); if (Math.abs(m31) < 0.99999) { rotation[0] = Math.atan2(m32, m33); rotation[2] = Math.atan2(m21, m11); } else { rotation[0] = 0; rotation[2] = Math.atan2(-m12, m22); } } else if (order === 'YZX') { rotation[2] = Math.asin(clamp(m21, -1, 1)); if (Math.abs(m21) < 0.99999) { rotation[0] = Math.atan2(-m23, m22); rotation[1] = Math.atan2(-m31, m11); } else { rotation[0] = 0; rotation[1] = Math.atan2(m13, m33); } } else if (order === 'XZY') { rotation[2] = Math.asin(-clamp(m12, -1, 1)); if (Math.abs(m12) < 0.99999) { rotation[0] = Math.atan2(m32, m22); rotation[1] = Math.atan2(m13, m11); } else { rotation[0] = Math.atan2(-m23, m33); rotation[1] = 0; } } else { console.warn('VrMath.getRotation: unsupported order: ' + order); } return rotation; }, /** * Get forward direction from a matrix * @param {array} m - The array[16] for 4x4 matrix * @return {array} the forward vector, in x, y, z order, normalized. */ getMatrixForward: function(m) { return MatrixMath.v3Normalize([-m[8], -m[9], -m[10]]); }, /** * Get up direction from a matrix * @param {array} m - The array[16] for 4x4 matrix * @return {array} the up vector, in x, y, z order, normalized. */ getMatrixUp: function(m) { return MatrixMath.v3Normalize([m[4], m[5], m[6]]); }, radToDeg: function(rad) { return rad * RAD_TO_DEG; }, degToRad: function(deg) { return deg * DEG_TO_RAD; }, }; module.exports = VrMath; ================================================ FILE: Libraries/Utilities/VrSoundEffects.js ================================================ /** * 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 VrSoundEffects * @flow */ 'use strict'; import {NativeModules} from 'react-native'; const RCTDeviceEventEmitter = require('RCTDeviceEventEmitter'); const AudioModule = NativeModules.AudioModule; const loadedSounds: {[uri: string]: any} = {}; const loadedSoundsRefs: {[uri: string]: number} = {}; type Resource = {uri: string}; type MultiFormatResource = {[format: string]: Resource}; // see docs/VrSoundEffects.docblock.md for docblock (not auto-extracted unless part of a class) /** * Takes an object mapping audio formats to resources, and returns the first * resource that's supported on the current system. */ export function getSupportedResource(formats: MultiFormatResource | Resource): ?Resource { if (!formats) { return null; } if (formats.uri) { return formats; } const supported = AudioModule.supportedFormats; for (const format in formats) { if (supported.indexOf(format) > -1) { return formats[format]; } } return null; } /** * Load the given audio resource. Audio clips must be loaded before playing. */ export function load(formats: MultiFormatResource | Resource, onReady: () => void = undefined) { const resource = getSupportedResource(formats); if (!resource || !resource.uri) { console.warn( "VrSoundEffects.load(resource) expected resource in format {uri: 'http'}, got:", resource ); return; } const url = resource.uri; if (loadedSounds[url]) { loadedSoundsRefs[url] += 1; onReady && onReady(); } else { const sound = { handle: url, options: { source: url, }, ready: false, }; loadedSoundsRefs[url] = 1; loadedSounds[url] = sound; AudioModule.createAudio(url, {source: url}); AudioModule.load(url, () => { if (loadedSounds[url]) { loadedSounds[url].ready = true; } onReady && onReady(); }); } } /** * Play the audio resource indicated by the handle. Resource must have * previously been loaded. */ export function play(formats: MultiFormatResource | Resource) { const resource = getSupportedResource(formats); if (!resource || !resource.uri) { console.warn( "VrSoundEffects.load(resource) expected resource in format {url: 'http'}, got:", resource ); return; } const url = resource.uri; if (!loadedSounds[url] || !loadedSounds[url].ready) { console.warn('VrSoundEffects: must load sound before playing', url); return; } AudioModule.play(url); } /** * Play an "one shot" audio resource indicated by the handle. Resource must have * previously been loaded. */ export function playOneShot(formats: MultiFormatResource | Resource) { const resource = getSupportedResource(formats); if (!resource || !resource.uri) { console.warn( "VrSoundEffects.load(resource) expected resource in format {url: 'http'}, got:", resource ); return; } const url = resource.uri; if (!loadedSounds[url] || !loadedSounds[url].ready) { console.warn('VrSoundEffects: must load sound before playing', url); return; } AudioModule.playOneShot({source: url}); } /** * Adjust the volume for this sound. */ export function volume(formats: MultiFormatResource | Resource, volume: number) { const resource = getSupportedResource(formats); const url = resource.uri; if (!loadedSounds[url] || !loadedSounds[url].ready) { console.warn('VrSoundEffects: must load sound before adjusting volume', url); return; } if (volume < 0) { console.warn('VrSoundEffects: volume cannot be negative', volume); return; } AudioModule.setParams(url, {volume: volume, fadeTime: 0.0}); } /** * Dispose of any resources associated with this handle. */ export function unload(formats: MultiFormatResource | Resource, volume: number) { const resource = getSupportedResource(formats); const url = resource.uri; if (loadedSounds[url]) { loadedSoundsRefs[url] -= 1; if (loadedSoundsRefs[url] === 0) { AudioModule.unload(url); delete loadedSounds[url]; delete loadedSoundsRefs[url]; } } } ================================================ FILE: Libraries/Utilities/asset.js ================================================ /** * 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 asset * @flow */ /* eslint-disable import/no-commonjs */ import staticAssetURL from './staticAssetURL'; export type AssetSource = {uri: string}; function asset(localPath: string, sourceExtra: Object = {}): AssetSource { return { ...sourceExtra, uri: staticAssetURL(localPath), }; } module.exports = asset; ================================================ FILE: Libraries/Utilities/createGlyph.js ================================================ /** * 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 createGlyph */ const NativeModules = require('NativeModules'); const GlyphTextures = NativeModules.GlyphTextures; let nextGlyph = 1; function createGlyph(glyph, name) { if (typeof name !== 'string') { name = nextGlyph; nextGlyph++; } const uri = 'texture://glyph/' + name; GlyphTextures.registerGlyph(name, glyph); return {uri}; } module.exports = createGlyph; ================================================ FILE: Libraries/Utilities/staticAssetURL.js ================================================ /** * 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 staticAssetURL * @flow */ import {NativeModules} from 'react-native'; const {assetRoot} = NativeModules.ExternalAssets; /** * Generate a path to a resource, using the currently-configured * static asset path. */ export default function staticAssetURL(localPath: string): string { let uri = localPath; if (assetRoot) { if (localPath.startsWith('/')) { uri = assetRoot + localPath.substr(1); } else { uri = assetRoot + localPath; } } return uri; } ================================================ FILE: Libraries/Utilities/texture.js ================================================ /** * 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 texture */ /** * Opaque wrapper around custom textures, allows us to change the implementation * at any time. */ function texture(name, options) { return {uri: 'texture://' + name}; } module.exports = texture; ================================================ FILE: Libraries/VRLayers/CylindricalPanel.js ================================================ /** * 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 CylindricalPanel */ 'use strict'; const NativeMethodsMixin = require('NativeMethodsMixin'); const PropTypes = require('prop-types'); const React = require('React'); const View = require('View'); const StyleSheetPropType = require('StyleSheetPropType'); const LayoutAndTransformOpacityPropTypes = require('LayoutAndTransformOpacityPropTypes'); const createReactClass = require('create-react-class'); const invariant = require('invariant'); const requireNativeComponent = require('requireNativeComponent'); /** * The primary purpose of CylindricalPanel is to provide a simple means * of carrying settings and layouts from 2D into VR. CylindricalPanel * draws child components to the inner surface of a cylinder by first * drawing the child components to an offscreen buffer of the specified * width and height. * * By default, the cylinder placed at the center position of the scene so that the viewer is * encapsulated by it. * * ``` * * ... Child components ... * * ``` * * The width and height of the cylinder must be specified, and the width must also correspond to * the arc that the cylinder covers. The default Density is 4680px, which has been empirically * defined to match a 1px unit on panel space to 1px on the eye. That is, the defaults allow transferring * pixel units from 2D to also work in VR. * * The degrees in the arc can be computed by (width/density * 360). * For example, with the default values, a cylinder covering half of the view direction (180 degrees) would have a width * of 2340px. We recommend leaving the density to the default for the current range of VR displays. * Presently, the maximum width is limited to 4096px, so if you require a full 360 degree cylinder, * the density must be reduced to a value of 4096. * * The height is used to compute the height of the cylinder such that the world width and height of * a 1px element on the panel remain square. For example, a 100px by 100px with a 100px by 100px source * bitmap would also look square when drawn to the cylinder. * * Child components can determine if they are within a Panel by using the `isOnLayer` context * */ const CylindricalPanel = createReactClass({ mixins: [NativeMethodsMixin], propTypes: { ...View.propTypes, layer: PropTypes.shape({ width: PropTypes.number.isRequired, height: PropTypes.number.isRequired, radius: PropTypes.number, density: PropTypes.number, }).isRequired, style: StyleSheetPropType(LayoutAndTransformOpacityPropTypes), }, getChildContext(): Object { return {isOnLayer: true}; }, childContextTypes: { isOnLayer: PropTypes.bool, }, contextTypes: { isOnLayer: PropTypes.bool, }, getDefaultProps: function() { return {}; }, render: function() { // TODO: prevent propagtion of changes to 'transform' property up the view hierarchy const {layer, ...rest} = this.props; rest.style = rest.style || {}; if (!rest.style.renderGroup) { rest.style.renderGroup = true; } invariant( layer.width > 0 && layer.width <= 4096, 'width is not within range of 0 and 4096 ' + layer.width.toString() ); invariant( layer.height > 0 && layer.height <= 1000, 'height is not within range of 0 and 1000 ' + layer.height.toString() ); if (!layer.density) { // default density of 4680 maps 1px of panel to 1px in vr view layer.density = 4680; } if (!layer.radius) { layer.radius = 4; } invariant( layer.width <= layer.density, 'width value should be less than density ' + layer.width.toString(), layer.density.toString() ); invariant( layer.height <= layer.density, 'height value should be less than density ' + layer.height.toString(), layer.density.toString() ); return ( true} onResponderTerminationRequest={() => false}> {this.props.children} ); }, }); const RKCylindricalPanel = requireNativeComponent('CylindricalPanel', CylindricalPanel, { nativeOnly: {}, }); module.exports = CylindricalPanel; ================================================ FILE: Libraries/VRLayers/QuadPanel.js ================================================ /** * 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 QuadPanel */ 'use strict'; const NativeMethodsMixin = require('NativeMethodsMixin'); const PropTypes = require('prop-types'); const React = require('React'); const View = require('View'); const StyleSheetPropType = require('StyleSheetPropType'); const LayoutAndTransformOpacityPropTypes = require('LayoutAndTransformOpacityPropTypes'); const createReactClass = require('create-react-class'); const invariant = require('invariant'); const requireNativeComponent = require('requireNativeComponent'); /** * QuadPanel is a special component in React VR that allows drawing the child components * to the surface of a quad. This is accomplished by drawing the child components to an offscreen * buffer of the specified width and height. * * ``` * * ... Child components ... * * ``` * * The width and height of the quad must be specified in pixels when presented at distance units. * Density is defaulted to 4680px which has been empirically * defined to meet a 1px unit on panel space to 1px on the eye, ie the defaults allow transferal of * px units in 2d to work in VR. * * We recommend leaving the density to the default for the current range of VR displays. * Presently the width and height is limited to be not bigger than 4096px. * * The purpose of the quad layer is to provide a simple means to carry 2d settings and layouts * to within VR * * Child components can determine if within a Panel by using the `isOnLayer` context * */ const QuadPanel = createReactClass({ mixins: [NativeMethodsMixin], propTypes: { ...View.propTypes, layer: PropTypes.shape({ width: PropTypes.number.isRequired, height: PropTypes.number.isRequired, distance: PropTypes.number, density: PropTypes.number, }).isRequired, style: StyleSheetPropType(LayoutAndTransformOpacityPropTypes), }, getChildContext(): Object { return {isOnLayer: true}; }, childContextTypes: { isOnLayer: PropTypes.bool, }, contextTypes: { isOnLayer: PropTypes.bool, }, getDefaultProps: function() { return {}; }, render: function() { // TODO: prevent propagtion of changes to 'transform' property up the view hierarchy const {layer, ...rest} = this.props; rest.style = rest.style || {}; if (!rest.style.renderGroup) { rest.style.renderGroup = true; } invariant( layer.width > 0 && layer.width <= 4096, 'width is not within range of 0 and 4096 ' + layer.width.toString() ); invariant( layer.height > 0 && layer.height <= 4096, 'height is not within range of 0 and 4096 ' + layer.height.toString() ); if (!layer.density) { // default density of 4680 maps 1px of panel to 1px in vr view layer.density = 4680; } if (!layer.distance) { layer.distance = 4; } invariant( layer.width <= layer.density, 'width value should be less than density ' + layer.width.toString(), layer.density.toString() ); invariant( layer.height <= layer.density, 'height value should be less than density ' + layer.height.toString(), layer.density.toString() ); return ( true} onResponderTerminationRequest={() => false}> {this.props.children} ); }, }); const RKQuadPanel = requireNativeComponent('QuadPanel', QuadPanel, { nativeOnly: {}, }); module.exports = QuadPanel; ================================================ FILE: Libraries/VRModules/ControllerInfo.js ================================================ /** * 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 ControllerInfo * @flow */ 'use strict'; const RCTControllerInfo = require('NativeModules').ControllerInfo; /** * ControllerInfo exposes information about connected gamepads and controllers. * It should be used to respond to controller connect / disconnect events, and * extracting static information about controllers (unique identifiers, button * and axis counts, left vs right hand, etc). * For controller button states and poses, rely on React VR's input events and * ray caster systems. */ class ControllerInfo { /** * Get the current information from all connected controllers. * Resolves with an array of controller information objects. * Returns a promise */ getControllers(): Promise { return RCTControllerInfo.getControllers(); } } const ControllerInfoInst = new ControllerInfo(); module.exports = ControllerInfoInst; ================================================ FILE: Libraries/VRModules/Environment.js ================================================ /** * 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 Environment * @flow */ import {EnvironmentModule} from 'NativeModules'; import processTransform from 'processTransform'; type Resource = string | {uri: string}; type RotateTransform = {rotateX: string} | {rotateY: string} | {rotateZ: string} | {rotate: string} export type EnvironmentOptions = { format?: string, transition?: number, fadeLevel?: number, rotateTransform?: Array }; export function clearBackground() { EnvironmentModule.loadScene({type: 'black'}); } export function setBackgroundImage( url: Resource, options: EnvironmentOptions = {}, ) { const scene: Object = { type: 'photo', url: typeof url === 'object' ? url.uri : url, stereo: options.format, rotateTransform: options.rotateTransform ? processTransform(options.rotateTransform) : undefined, }; const transition: Object = { transition: options.transition, fadeLevel: options.fadeLevel, } EnvironmentModule.loadScene(scene, transition); } export function setBackgroundVideo(player: string, options: EnvironmentOptions = {}) { const scene = { type: 'video', player: player, rotateTransform: options.rotateTransform ? processTransform(options.rotateTransform) : undefined, }; const transition: Object = { transition: options.transition, fadeLevel: options.fadeLevel, } EnvironmentModule.loadScene(scene, transition); } export function preloadBackgroundImage(url: Resource) { const scene: Object = { type: 'photo', url: typeof url === 'object' ? url.uri : url }; EnvironmentModule.preloadScene(scene); } export function animateFade(fadeLevel: number, fadeTime: number) { EnvironmentModule.animateFade(fadeLevel, fadeTime); } export function setScreen(screenId: string, handle: ?string, surfaceId: string, x: number, y: number, width: number, height: number) { EnvironmentModule.setScreen({ screenId: screenId, type: 'surface', surface: surfaceId, player: handle, x: x, y: y, width: width, height: height, }); } ================================================ FILE: Libraries/VRModules/ExternalAssets.js ================================================ /** * 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 ExternalAssets * @flow */ 'use strict'; const RCTExternalAssets = require('NativeModules').ExternalAssets; /** * ExternalAssets configures the root path of resources imported via asset() */ class ExternalAssets { /** * returns the base asset root */ getAssetRoot(): string { return RCTExternalAssets.assetRoot; } } const ExternalAssetsInst = new ExternalAssets(); module.exports = ExternalAssetsInst; ================================================ FILE: Libraries/VRModules/GlyphTextures.js ================================================ /** * 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 GlyphTextures */ 'use strict'; const GlyphTextures = require('NativeModules').GlyphTextures; module.exports = GlyphTextures; ================================================ FILE: Libraries/VRModules/History.js ================================================ /** * 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 History */ 'use strict'; const RCTHistory = require('NativeModules').History; /** * History exposes the browser history stack to React */ class History { /** * Returns a Promise that is resolved with the current history length */ length(): Promise { return RCTHistory.length(); } /** * Returns a Promise that is resolved with the current history state */ state(): Promise { return RCTHistory.state(); } /** * Returns a Promise that is resolved after the history is moved back */ back(): Promise { return RCTHistory.back(); } /** * Returns a Promise that is resolved after the history is moved forward */ forward(): Promise { return RCTHistory.forward(); } /** * Takes a number of steps, and moves the history by that delta. Returns a * Promise that is resolved after the move is completed. * * @param delta - The number of steps to move the current history state. A * positive number moves the history forward, a negative number moves the * history back. */ go(delta: number): Promise { return RCTHistory.go(delta); } /** * Push a new state onto the history stack. The first argument is the state * object to push onto the stack; the second argument is the new title * for the window. An optional third argument is the new URL to display * in the navigation bar. * * @param state - An object to push onto the stack * @param title - A string to set as the window title * @param url (optional) - The URL to show in the navigation bar */ pushState(state: any, title: any, url: ?any): Promise { return RCTHistory.pushState(state, title, url); } /** * Replace the top state onto the history stack. The first argument is the * state object to place at the top of the stack; the second argument is the * new title for the window. An optional third argument is the new URL to * display in the navigation bar. * * @param state - An object to push onto the stack * @param title - A string to set as the window title * @param url (optional) - The URL to show in the navigation bar */ replaceState(state: any, title: any, url: ?any): Promise { return RCTHistory.replaceState(state, title, url); } } const HistoryInst = new History(); module.exports = HistoryInst; ================================================ FILE: Libraries/VRModules/Location.js ================================================ /** * 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 Location * @flow */ 'use strict'; const RCTLocation = require('NativeModules').Location; /** * Location implements window.location for the React context */ class Location { /** * Reload the current page. The optional boolean parameter determines whether * the cache is bypassed. * @param forceReload - If true, the cache will be ignored on reload */ reload(forceReload: boolean) { RCTLocation.reload(forceReload); } /** * Replace the current location, without affecting the History stack. * @param replace - The location to navigate to */ replace(url: string) { RCTLocation.replace(url); } } const LocationInst = new Location(); module.exports = LocationInst; ================================================ FILE: Libraries/VRModules/ReactVRConstants.js ================================================ /** * 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 ReactVRConstants */ 'use strict'; const ReactVRConstants = require('NativeModules').ReactVRConstants; module.exports = ReactVRConstants; ================================================ FILE: Libraries/VRModules/VideoModule.js ================================================ /** * Copyright 2015-present Oculus VR, LLC. All Rights Reserved. * * Video Module is the wrapper of native video module * * @flow * @providesModule VideoModule */ import {NativeModules} from 'react-native'; import EventEmitter from 'EventEmitter'; import RCTDeviceEventEmitter from 'RCTDeviceEventEmitter'; import type EmitterSubscription from 'EmitterSubscription'; const NativeVideoModule = NativeModules.VideoModule || {}; // This represents the maximum number of video players available on the platform // a value of -1 indicates it supports an infinite number of players. const maxPlayers = NativeVideoModule.maxPlayers || 1; // same types as Compositor/Video/Types export type VideoPlayerStatus = | 'closed' // No session. | 'closing' // Session is being closed. | 'failed' // Session had an error. | 'finished' // Session has finished playing video | 'paused' // Session is paused. | 'playing' // Session is playing a video. | 'seeking' // Session is seeking a position | 'ready' // Session is ready to play a video. | 'stopped'; // Session is stopped (ready to play) export type VideoStereoFormat = '2D' | '3DLR' | '3DTB' | '3DBT' | 'UNKNOWN'; export type VideoLayout = 'RECT' | 'SPHERICAL' | 'CUBEMAP_32'; export type VideoRotation = { yaw: number, }; export type VideoSource = { fileFormat?: string, url: string, }; export type VideoPlayOptions = { fadeLevel?: number, fadeSpeed?: number, forceMono?: boolean, layout?: VideoLayout, muted?: boolean, rotation?: VideoRotation, stereo?: VideoStereoFormat, volume?: number, }; export type VideoOptions = VideoPlayOptions & { source: VideoSource | Array, startPosition?: number, autoPlay?: boolean, }; export type VideoEvent = { player: string, }; export type VideoStatusEvent = VideoEvent & { duration: number, error?: string, isBuffering: boolean, isMuted: boolean, position: number, status: VideoPlayerStatus, volume: number, }; export type onVideoStatusChangedCallback = (event: VideoStatusEvent) => void; /** * JS wrapper of native module `VideoModule` * Example of usage: * const player = VideoModule.getPlayer('default'); * const player.play({ * source: { * url: "http://www.xxx.xx/video.mp4", * }, * volume: 0.7, * stereo: '3DLR', * }); * player.pause(); * player.resume(); * player.seek(5000); * player.stop(); */ class VideoModuleImpl { maxPlayers: number = maxPlayers; _players: {[string]: VideoPlayerInstance}; _nextPlayerNameId: number = 0; constructor() { this._players = {}; } createPlayer(name?: string) { if (maxPlayers !== -1 && Object.keys(this._players).length >= maxPlayers) { throw new Error( `Unable to create another video player, this platform only supports a maximum of ${maxPlayers} players at once.` ); } if (!name) { name = `auto_video_player_${this._nextPlayerNameId++}`; } if (name in this._players) { throw new Error( `Unable to create video player with name ${name} because a player already exists with that name.` ); } NativeVideoModule.createPlayer(name); this._players[name] = new VideoPlayerInstance(name); return this._players[name]; } destroyPlayer(name: string) { if (name === 'default') { throw new Error('The default video player cannot be destroyed.'); } if (!(name in this._players)) { throw new Error( `Unable to delete video player with name ${name} because it does not exist.` ); } NativeVideoModule.destroyPlayer(name); delete this._players[name]; } // Get a video player instance to play video getPlayer(name?: string): VideoPlayerInstance { name = name || 'default'; if (this._players[name]) { return this._players[name]; } else { throw new Error(`Unable to find video player with name "${name}".`); } } // play a video for player // Don't use this directly, please use VideoPlayerInstance methods instead play(player: string, options: VideoOptions) { NativeVideoModule.play(player, options); } // pause the video // Don't use this directly, please use VideoPlayerInstance methods instead pause(player: string) { NativeVideoModule.pause(player); } // resume the video // Don't use this directly, please use VideoPlayerInstance methods instead resume(player: string) { NativeVideoModule.resume(player); } // stop the video // Don't use this directly, please use VideoPlayerInstance methods instead stop(player: string) { NativeVideoModule.stop(player); } // seek the video // Don't use this directly, please use VideoPlayerInstance methods instead seek(player: string, timeMs: number) { NativeVideoModule.seek(player, timeMs); } // set the parameters of video // Don't use this directly, please use VideoPlayerInstance methods instead setParams(player: string, options: VideoPlayOptions) { NativeVideoModule.setParams(player, options); } _onVideoEvents(eventType: string, event: VideoEvent) { if (this._players[event.player]) { this._players[event.player]._emitter.emit(eventType, event); } } _initializeDefaultPlayer() { this.createPlayer('default'); } } const VideoModule = new VideoModuleImpl(); const VideoEventTypes = ['onVideoStatusChanged']; for (const eventType of VideoEventTypes) { RCTDeviceEventEmitter.addListener(eventType, (event: VideoEvent) => { VideoModule._onVideoEvents(eventType, event); }); } export class VideoPlayerInstance { _player: string; _emitter = new EventEmitter(); constructor(player: string) { this._player = player; } // play a video for player play(options: VideoOptions) { VideoModule.play(this._player, options); } // pause the video pause() { VideoModule.pause(this._player); } // resume the video resume() { VideoModule.resume(this._player); } // stop the video stop() { VideoModule.stop(this._player); } // seek the video seek(timeMs: number) { VideoModule.seek(this._player, timeMs); } setVolume(volume: number) { VideoModule.setParams(this._player, { volume, }); } setMuted(muted: boolean) { VideoModule.setParams(this._player, { muted, }); } // set the parameters of video setParams(options: VideoPlayOptions) { VideoModule.setParams(this._player, options); } destroy() { VideoModule.destroyPlayer(this._player); } addListener( eventType: string, listener: onVideoStatusChangedCallback ) { return this._emitter.addListener(eventType, listener); } removeSubscription(subscription: EmitterSubscription) { this._emitter.removeSubscription(subscription); } } VideoModule._initializeDefaultPlayer(); export const DefaultVideoPlayer = VideoModule.getPlayer(); export default VideoModule; ================================================ FILE: Libraries/VRReactOverrides/AccessibilityInfo.vr.js ================================================ /** * 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 AccessibilityInfo */ 'use strict'; const AccessibilityInfo = { fetch(): Promise { return new Promise((resolve, reject) => { resolve(false); }); }, addEventListener(eventName: string, handler: Function): void { // no-op }, removeEventListener(eventName: string, handler: Function): void { // no-op }, }; module.exports = AccessibilityInfo; ================================================ FILE: Libraries/VRReactOverrides/BackHandler.vr.js ================================================ /** * 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 BackHandler */ 'use strict'; const emptyFunction = function() {}; const BackHandler = { exitApp: emptyFunction, addEventListener() { return { remove: emptyFunction, }; }, removeEventListener: emptyFunction, }; module.exports = BackHandler; ================================================ FILE: Libraries/VRReactOverrides/HMRLoadingView.vr.js ================================================ /** * 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 HMRLoadingView * @flow */ 'use strict'; class HMRLoadingView { static _showing: boolean; static showMessage(message: string) { if (HMRLoadingView._showing) { return; } console.log('HMR Start'); console.log(message); HMRLoadingView._showing = true; setTimeout(() => { HMRLoadingView._showing = false; console.log('HMR End'); }, 2000); } static hide() { // noop } } module.exports = HMRLoadingView; ================================================ FILE: Libraries/VRReactOverrides/Image.vr.js ================================================ /** * 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 Image * @flow */ 'use strict'; const NativeMethodsMixin = require('NativeMethodsMixin'); const ColorPropType = require('ColorPropType'); const ImageResizeMode = require('ImageResizeMode'); const ImageStylePropTypes = require('ImageStylePropTypes'); const PropTypes = require('prop-types'); const React = require('React'); const ReactNativeViewAttributes = require('ReactNativeViewAttributes'); const StyleSheet = require('StyleSheet'); const StyleSheetPropType = require('StyleSheetPropType'); const View = require('View'); const createReactClass = require('create-react-class'); const flattenStyle = require('flattenStyle'); const merge = require('merge'); const requireNativeComponent = require('requireNativeComponent'); const resolveAssetSource = require('resolveAssetSource'); /** * A react component for displaying different types of images. * * Example usage: * * ``` * renderImages: function() { * return ( * * * * * ); * }, *``` */ const Image = createReactClass({ propTypes: { ...View.propTypes, style: StyleSheetPropType({ ...ImageStylePropTypes, gradientColorA: ColorPropType, gradientColorB: ColorPropType, gradientAngle: PropTypes.string, }), /** * `uri` is a string representing the resource identifier for the image, which * could be an http address, a local file path, or a static image * resource (which should be wrapped in the `require('./path/to/image.png')` function). */ source: PropTypes.oneOfType([ PropTypes.shape({ uri: PropTypes.string, }), // Opaque type returned by require('./image.jpg') PropTypes.number, ]), /** * similarly to `source`, this property represents the resource used to render * the loading indicator for the image, displayed until image is ready to be * displayed, typically after when it got downloaded from network. */ loadingIndicatorSource: PropTypes.oneOfType([ PropTypes.shape({ uri: PropTypes.string, }), // Opaque type returned by require('./image.jpg') PropTypes.number, ]), progressiveRenderingEnabled: PropTypes.bool, fadeDuration: PropTypes.number, /** * Invoked on load start */ onLoadStart: PropTypes.func, /** * Invoked when load completes successfully */ onLoad: PropTypes.func, /** * Invoked when load either succeeds or fails */ onLoadEnd: PropTypes.func, /** * Used to locate this view in end-to-end tests. */ testID: PropTypes.string, /** * inset in texture space in 9 tile set up */ inset: PropTypes.arrayOf(PropTypes.number), /** * Inset size in world units in 9 tile set up */ insetSize: PropTypes.arrayOf(PropTypes.number), /** * Specifies the extents of the UV to display */ crop: PropTypes.arrayOf(PropTypes.number), }, statics: { resizeMode: ImageResizeMode, }, mixins: [NativeMethodsMixin], /** * `NativeMethodsMixin` will look for this when invoking `setNativeProps`. We * make `this` look like an actual native component class. Since it can render * as 3 different native components we need to update viewConfig accordingly */ viewConfig: { uiViewClassName: 'RCTImageView', validAttributes: { ...ReactNativeViewAttributes.RCTView, inset: true, insetSize: true, crop: true, }, }, contextTypes: { isInAParentText: PropTypes.bool, }, render: function() { const source = resolveAssetSource(this.props.source); const loadingIndicatorSource = resolveAssetSource(this.props.loadingIndicatorSource); // As opposed to the ios version, here it render `null` // when no source or source.uri... so let's not break that. if (source && source.uri === '') { console.warn('source.uri should not be an empty string'); } if (this.props.src) { console.warn('The component requires a `source` property rather than `src`.'); } if (source && source.uri) { const style = flattenStyle([styles.base, this.props.style]); const {onLoadStart, onLoad, onLoadEnd} = this.props; const nativeProps = merge(this.props, { style, shouldNotifyLoadEvents: !!(onLoadStart || onLoad || onLoadEnd), source: source, loadingIndicatorSrc: loadingIndicatorSource ? loadingIndicatorSource.uri : null, }); /** * by default set the renderGroup if any transform as been set */ if ( nativeProps.style && nativeProps.style['renderGroup'] === undefined && nativeProps.style.transform ) { nativeProps.style.renderGroup = true; } if (this.context.isInAParentText) { // RCTTextInlineImage isn't implemented yet return ; } else { return ; } } return null; }, }); const styles = StyleSheet.create({ base: { overflow: 'hidden', }, absoluteImage: { left: 0, right: 0, top: 0, bottom: 0, position: 'absolute', }, }); const cfg = { nativeOnly: { src: true, loadingIndicatorSrc: true, defaultImageSrc: true, imageTag: true, progressHandlerRegistered: true, shouldNotifyLoadEvents: true, }, }; const RKImage = requireNativeComponent('RCTImageView', Image, cfg); //var RCTTextInlineImage = requireNativeComponent('RCTTextInlineImage', Image, cfg); module.exports = Image; ================================================ FILE: Libraries/VRReactOverrides/Interpolation.vr.js ================================================ /** * 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 Interpolation * @flow */ /* eslint no-bitwise: 0 */ 'use strict'; const invariant = require('fbjs/lib/invariant'); const normalizeColor = require('normalizeColor'); type ExtrapolateType = 'extend' | 'identity' | 'clamp'; type SnapType = 'none' | 'round' | 'ceil' | 'floor'; export type InterpolationConfigType = { inputRange: Array, /* $FlowFixMe(>=0.38.0 site=react_native_fb,react_native_oss) - Flow error * detected during the deployment of v0.38.0. To see the error, remove this * comment and run flow */ outputRange: Array | Array, easing?: (input: number) => number, extrapolate?: ExtrapolateType, extrapolateLeft?: ExtrapolateType, extrapolateRight?: ExtrapolateType, snap?: SnapType, }; const linear = t => t; /** * Very handy helper to map input ranges to output ranges with an easing * function and custom behavior outside of the ranges. */ class Interpolation { static create(config: InterpolationConfigType): (input: number) => number | string { if (config.outputRange && typeof config.outputRange[0] === 'string') { return createInterpolationFromStringOutputRange(config); } const outputRange: Array = (config.outputRange: any); checkInfiniteRange('outputRange', outputRange); const inputRange = config.inputRange; checkInfiniteRange('inputRange', inputRange); checkValidInputRange(inputRange); invariant( inputRange.length === outputRange.length, 'inputRange (' + inputRange.length + ') and outputRange (' + outputRange.length + ') must have the same length' ); const easing = config.easing || linear; let extrapolateLeft: ExtrapolateType = 'extend'; if (config.extrapolateLeft !== undefined) { extrapolateLeft = config.extrapolateLeft; } else if (config.extrapolate !== undefined) { extrapolateLeft = config.extrapolate; } let extrapolateRight: ExtrapolateType = 'extend'; if (config.extrapolateRight !== undefined) { extrapolateRight = config.extrapolateRight; } else if (config.extrapolate !== undefined) { extrapolateRight = config.extrapolate; } return input => { invariant(typeof input === 'number', 'Cannot interpolation an input which is not a number'); const range = findRange(input, inputRange); const snap: SnapType = config.snap || 'none'; return interpolate( input, inputRange[range], inputRange[range + 1], outputRange[range], outputRange[range + 1], easing, extrapolateLeft, extrapolateRight, snap ); }; } } function ApplySnapping(result: number, snap: SnapType): number { switch (snap) { case 'round': return Math.round(result); case 'floor': return Math.floor(result); case 'ceil': return Math.ceil(result); default: return result; } } function interpolate( input: number, inputMin: number, inputMax: number, outputMin: number, outputMax: number, easing: (input: number) => number, extrapolateLeft: ExtrapolateType, extrapolateRight: ExtrapolateType, snap: SnapType ) { let result = input; // Extrapolate if (result < inputMin) { if (extrapolateLeft === 'identity') { return ApplySnapping(result, snap); } else if (extrapolateLeft === 'clamp') { result = inputMin; } else if (extrapolateLeft === 'extend') { // noop } } if (result > inputMax) { if (extrapolateRight === 'identity') { return ApplySnapping(result, snap); } else if (extrapolateRight === 'clamp') { result = inputMax; } else if (extrapolateRight === 'extend') { // noop } } if (outputMin === outputMax) { return ApplySnapping(outputMin, snap); } if (inputMin === inputMax) { if (input <= inputMin) { return ApplySnapping(outputMin, snap); } return ApplySnapping(outputMax, snap); } // Input Range if (inputMin === -Infinity) { result = -result; } else if (inputMax === Infinity) { result -= inputMin; } else { result = (result - inputMin) / (inputMax - inputMin); } // Easing result = easing(result); // Output Range if (outputMin === -Infinity) { result = -result; } else if (outputMax === Infinity) { result += outputMin; } else { result = result * (outputMax - outputMin) + outputMin; } return ApplySnapping(result, snap); } function colorToRgba(input: string): string { let int32Color = normalizeColor(input); if (int32Color === null) { return input; } int32Color = int32Color || 0; const r = (int32Color & 0xff000000) >>> 24; const g = (int32Color & 0x00ff0000) >>> 16; const b = (int32Color & 0x0000ff00) >>> 8; const a = (int32Color & 0x000000ff) / 255; return `rgba(${r}, ${g}, ${b}, ${a})`; } const stringShapeRegex = /[0-9\.-]+/g; /** * Supports string shapes by extracting numbers so new values can be computed, * and recombines those values into new strings of the same shape. Supports * things like: * * rgba(123, 42, 99, 0.36) // colors * -45deg // values with units */ function createInterpolationFromStringOutputRange( config: InterpolationConfigType ): (input: number) => string { let outputRange: Array = (config.outputRange: any); invariant(outputRange.length >= 2, 'Bad output range'); outputRange = outputRange.map(colorToRgba); checkPattern(outputRange); // ['rgba(0, 100, 200, 0)', 'rgba(50, 150, 250, 0.5)'] // -> // [ // [0, 50], // [100, 150], // [200, 250], // [0, 0.5], // ] /* $FlowFixMe(>=0.18.0): `outputRange[0].match()` can return `null`. Need to * guard against this possibility. */ const outputRanges = outputRange[0].match(stringShapeRegex).map(() => []); outputRange.forEach(value => { /* $FlowFixMe(>=0.18.0): `value.match()` can return `null`. Need to guard * against this possibility. */ value.match(stringShapeRegex).forEach((number, i) => { outputRanges[i].push(+number); }); }); /* $FlowFixMe(>=0.18.0): `outputRange[0].match()` can return `null`. Need to * guard against this possibility. */ const interpolations = outputRange[0].match(stringShapeRegex).map((value, i) => { return Interpolation.create({ ...config, outputRange: outputRanges[i], }); }); // rgba requires that the r,g,b are integers.... so we want to round them, but we *dont* want to // round the opacity (4th column). const shouldRound = isRgbOrRgba(outputRange[0]); return input => { let i = 0; // 'rgba(0, 100, 200, 0)' // -> // 'rgba(${interpolations[0](input)}, ${interpolations[1](input)}, ...' return outputRange[0].replace(stringShapeRegex, () => { const val = +interpolations[i++](input); const rounded = shouldRound && i < 4 ? Math.round(val) : Math.round(val * 1000) / 1000; return String(rounded); }); }; } function isRgbOrRgba(range) { return typeof range === 'string' && range.startsWith('rgb'); } function checkPattern(arr: Array) { const pattern = arr[0].replace(stringShapeRegex, ''); for (let i = 1; i < arr.length; ++i) { invariant( pattern === arr[i].replace(stringShapeRegex, ''), 'invalid pattern ' + arr[0] + ' and ' + arr[i] ); } } function findRange(input: number, inputRange: Array) { let i = 1; for (; i < inputRange.length - 1; ++i) { if (inputRange[i] >= input) { break; } } return i - 1; } function checkValidInputRange(arr: Array) { invariant(arr.length >= 2, 'inputRange must have at least 2 elements'); for (let i = 1; i < arr.length; ++i) { invariant( arr[i] >= arr[i - 1], /* $FlowFixMe(>=0.13.0) - In the addition expression below this comment, * one or both of the operands may be something that doesn't cleanly * convert to a string, like undefined, null, and object, etc. If you really * mean this implicit string conversion, you can do something like * String(myThing) */ 'inputRange must be monotonically increasing ' + arr ); } } function checkInfiniteRange(name: string, arr: Array) { invariant(arr.length >= 2, name + ' must have at least 2 elements'); invariant( arr.length !== 2 || arr[0] !== -Infinity || arr[1] !== Infinity, /* $FlowFixMe(>=0.13.0) - In the addition expression below this comment, * one or both of the operands may be something that doesn't cleanly convert * to a string, like undefined, null, and object, etc. If you really mean * this implicit string conversion, you can do something like * String(myThing) */ name + 'cannot be ]-infinity;+infinity[ ' + arr ); } module.exports = Interpolation; ================================================ FILE: Libraries/VRReactOverrides/MaskedViewIOS.vr.js ================================================ /** * 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 MaskedViewIOS * @flow */ 'use strict'; module.exports = require('UnimplementedView'); ================================================ FILE: Libraries/VRReactOverrides/NetworkOverlay.vr.js ================================================ /** * 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 NetworkOverlay * @flow */ const React = require('React'); class NetworkOverlay extends React.Component { render() { return null; } } module.exports = NetworkOverlay; ================================================ FILE: Libraries/VRReactOverrides/PlatformSpecific/CheckBox.vr.js ================================================ /** * 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 * @providesModule CheckBox */ /* eslint-disable import/no-commonjs */ module.exports = require('UnimplementedView'); ================================================ FILE: Libraries/VRReactOverrides/PlatformSpecific/DatePickerAndroid.vr.js ================================================ /** * 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 DatePickerAndroid */ 'use strict'; const React = require('React'); class DummyDatePickerAndroid extends React.Component { render() { return null; } } module.exports = DummyDatePickerAndroid; ================================================ FILE: Libraries/VRReactOverrides/PlatformSpecific/DatePickerIOS.vr.js ================================================ /** * 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 DatePickerIOS */ 'use strict'; const React = require('React'); class DummyDatePickerIOS extends React.Component { render() { return null; } } module.exports = DummyDatePickerIOS; ================================================ FILE: Libraries/VRReactOverrides/PlatformSpecific/DrawerLayoutAndroid.vr.js ================================================ /** * 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 DrawerLayoutAndroid */ 'use strict'; const React = require('React'); class DummyDrawerLayoutAndroid extends React.Component { render() { return null; } } module.exports = DummyDrawerLayoutAndroid; ================================================ FILE: Libraries/VRReactOverrides/PlatformSpecific/NavigationExperimental.vr.js ================================================ /** * 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 NavigationExperimental */ 'use strict'; const React = require('React'); class DummyNavigationExperimental extends React.Component { render() { return null; } } module.exports = DummyNavigationExperimental; ================================================ FILE: Libraries/VRReactOverrides/PlatformSpecific/NavigatorBreadcrumbNavigationBarStyles.vr.js ================================================ /** * 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 NavigatorBreadcrumbNavigationBarStyles */ 'use strict'; const React = require('React'); class DummyNavigatorBreadcrumbNavigationBarStyles extends React.Component { render() { return null; } } module.exports = DummyNavigatorBreadcrumbNavigationBarStyles; ================================================ FILE: Libraries/VRReactOverrides/PlatformSpecific/NavigatorIOS.vr.js ================================================ /** * 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 NavigatorIOS */ 'use strict'; const React = require('React'); class DummyNavigatorIOS extends React.Component { render() { return null; } } module.exports = DummyNavigatorIOS; ================================================ FILE: Libraries/VRReactOverrides/PlatformSpecific/PickerAndroid.vr.js ================================================ /** * 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 PickerAndroid */ 'use strict'; const React = require('React'); class DummyPickerAndroid extends React.Component { render() { return null; } } module.exports = DummyPickerAndroid; ================================================ FILE: Libraries/VRReactOverrides/PlatformSpecific/PickerIOS.vr.js ================================================ /** * 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 PickerIOS */ 'use strict'; const React = require('React'); class DummyPickerIOS extends React.Component { render() { return null; } } module.exports = DummyPickerIOS; ================================================ FILE: Libraries/VRReactOverrides/PlatformSpecific/ProgressBarAndroid.vr.js ================================================ /** * 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 ProgressBarAndroid */ 'use strict'; const React = require('React'); class DummyProgressBarAndroid extends React.Component { render() { return null; } } module.exports = DummyProgressBarAndroid; ================================================ FILE: Libraries/VRReactOverrides/PlatformSpecific/ProgressViewIOS.vr.js ================================================ /** * 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 ProgressViewIOS */ 'use strict'; const React = require('React'); class DummyProgressViewIOS extends React.Component { render() { return null; } } module.exports = DummyProgressViewIOS; ================================================ FILE: Libraries/VRReactOverrides/PlatformSpecific/RecyclerViewBackedScrollview.vr.js ================================================ /** * 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 RecyclerViewBackedScrollView */ 'use strict'; const React = require('React'); class DummyRecyclerViewBackedScrollView extends React.Component { render() { return null; } } module.exports = DummyRecyclerViewBackedScrollView; ================================================ FILE: Libraries/VRReactOverrides/PlatformSpecific/SafeAreaView.vr.js ================================================ /** * 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 * @providesModule SafeAreaView */ /* eslint-disable import/no-commonjs */ module.exports = require('UnimplementedView'); ================================================ FILE: Libraries/VRReactOverrides/PlatformSpecific/SegmentedControlIOS.vr.js ================================================ /** * 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 SegmentedControlIOS */ 'use strict'; const React = require('React'); class DummySegmentedControlIOS extends React.Component { render() { return null; } } module.exports = DummySegmentedControlIOS; ================================================ FILE: Libraries/VRReactOverrides/PlatformSpecific/SnapshotViewIOS.vr.js ================================================ /** * 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 SnapshotViewIOS */ 'use strict'; const React = require('React'); class DummySnapshotViewIOS extends React.Component { render() { return null; } } module.exports = DummySnapshotViewIOS; ================================================ FILE: Libraries/VRReactOverrides/PlatformSpecific/StatusBarIOS.vr.js ================================================ /** * 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 StatusBarIOS */ 'use strict'; const React = require('React'); class DummyStatusBarIOS extends React.Component { render() { return null; } } module.exports = DummyStatusBarIOS; ================================================ FILE: Libraries/VRReactOverrides/PlatformSpecific/TabBarIOS.vr.js ================================================ /** * 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 TabBarIOS */ 'use strict'; const React = require('React'); class DummyTabBarIOS extends React.Component { render() { return null; } } module.exports = DummyTabBarIOS; ================================================ FILE: Libraries/VRReactOverrides/PlatformSpecific/TimePickerAndroid.vr.js ================================================ /** * 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 TimePickerAndroid */ 'use strict'; const React = require('React'); class DummyTimePickerAndroid extends React.Component { render() { return null; } } module.exports = DummyTimePickerAndroid; ================================================ FILE: Libraries/VRReactOverrides/PlatformSpecific/ToastAndroid.vr.js ================================================ /** * 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 ToastAndroid */ 'use strict'; const React = require('React'); class DummyToastAndroid extends React.Component { render() { return null; } } module.exports = DummyToastAndroid; ================================================ FILE: Libraries/VRReactOverrides/PlatformSpecific/ToolbarAndroid.vr.js ================================================ /** * 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 ToolbarAndroid */ 'use strict'; const React = require('React'); class DummyToolbarAndroid extends React.Component { render() { return null; } } module.exports = DummyToolbarAndroid; ================================================ FILE: Libraries/VRReactOverrides/PlatformSpecific/TouchableNativeFeedback.vr.js ================================================ /** * 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 TouchableNativeFeedback */ 'use strict'; const React = require('React'); class DummyTouchableNativeFeedback extends React.Component { render() { return null; } } module.exports = DummyTouchableNativeFeedback; ================================================ FILE: Libraries/VRReactOverrides/PlatformSpecific/VibrationIOS.vr.js ================================================ /** * 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 VibrationIOS */ 'use strict'; const React = require('React'); class DummyVibrationIOS extends React.Component { render() { return null; } } module.exports = DummyVibrationIOS; ================================================ FILE: Libraries/VRReactOverrides/PlatformSpecific/ViewPagerAndroid.vr.js ================================================ /** * 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 ViewPagerAndroid */ 'use strict'; const React = require('React'); class DummyViewPagerAndroid extends React.Component { render() { return null; } } module.exports = DummyViewPagerAndroid; ================================================ FILE: Libraries/VRReactOverrides/PlatformSpecific/WebView.vr.js ================================================ /** * 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 WebView */ 'use strict'; const React = require('React'); class DummyWebView extends React.Component { render() { return null; } } module.exports = DummyWebView; ================================================ FILE: Libraries/VRReactOverrides/RCTNetworking.vr.js ================================================ /** * 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 RCTNetworking * @flow */ 'use strict'; // Do not require the native RCTNetworking module directly! Use this wrapper module instead. // It will add the necessary requestId, so that you don't have to generate it yourself. const FormData = require('FormData'); const NativeEventEmitter = require('NativeEventEmitter'); const RCTNetworkingNative = require('NativeModules').Networking; type Header = [string, string]; function convertHeadersMapToArray(headers: Object): Array
{ const headerArray = []; for (const name in headers) { headerArray.push([name, headers[name]]); } return headerArray; } let _requestId = 1; function generateRequestId(): number { return _requestId++; } /** * This class is a wrapper around the native RCTNetworking module. It adds a necessary unique * requestId to each network request that can be used to abort that request later on. */ class RCTNetworking extends NativeEventEmitter { constructor() { super(RCTNetworkingNative); } sendRequest( method: string, trackingName: string, url: string, headers: Object, data: string | FormData | {uri: string}, responseType: 'text' | 'base64', incrementalUpdates: boolean, timeout: number, callback: (requestId: number) => any ) { const body = typeof data === 'string' ? {string: data} : data instanceof FormData ? {formData: getParts(data)} : data; const requestId = generateRequestId(); RCTNetworkingNative.sendRequest( method, url, requestId, convertHeadersMapToArray(headers), {...body, trackingName}, responseType, incrementalUpdates, timeout ); callback(requestId); } abortRequest(requestId: number) { RCTNetworkingNative.abortRequest(requestId); } clearCookies(callback: (result: boolean) => any) { RCTNetworkingNative.clearCookies(callback); } } function getParts(data) { return data.getParts().map(part => { part.headers = convertHeadersMapToArray(part.headers); return part; }); } module.exports = new RCTNetworking(); ================================================ FILE: Libraries/VRReactOverrides/ReactNativeViewAttributes.vr.js ================================================ /** * 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 ReactNativeViewAttributes * @flow */ 'use strict'; const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes'); const ReactNativeViewAttributes = {}; ReactNativeViewAttributes.UIView = { pointerEvents: true, accessible: true, accessibilityLabel: true, accessibilityComponentType: true, accessibilityLiveRegion: true, accessibilityTraits: true, importantForAccessibility: true, testID: true, renderToHardwareTextureAndroid: true, shouldRasterizeIOS: true, onLayout: true, onAccessibilityTap: true, onMagicTap: true, onEnter: true, onExit: true, onInput: true, onGazeEnter: true, onGazeExit: true, onMouseEnter: true, onMouseExit: true, onChange: true, onHeadPose: true, onGazeInput: true, onGazeHeadPose: true, onMouseInput: true, onMouseHeadPose: true, onChangeCaptured: true, onInputCaptured: true, onHeadPoseCaptured: true, onGazeInputCaptured: true, onGazeHeadPoseCaptured: true, onMouseInputCaptured: true, onMouseHeadPoseCaptured: true, collapsable: true, needsOffscreenAlphaCompositing: true, style: ReactNativeStyleAttributes, }; ReactNativeViewAttributes.RCTView = { ...ReactNativeViewAttributes.UIView, // This is a special performance property exposed by RCTView and useful for // scrolling content when there are many subviews, most of which are offscreen. // For this property to be effective, it must be applied to a view that contains // many subviews that extend outside its bound. The subviews must also have // overflow: hidden, as should the containing view (or one of its superviews). removeClippedSubviews: true, }; module.exports = ReactNativeViewAttributes; ================================================ FILE: Libraries/VRReactOverrides/Settings.vr.js ================================================ /** * 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 Settings * @flow */ 'use strict'; const Settings = { get(key: string): mixed { console.warn('Settings is not yet supported on React VR'); return null; }, set(settings: Object) { console.warn('Settings is not yet supported on React VR'); }, watchKeys(keys: string | Array, callback: Function): number { console.warn('Settings is not yet supported on React VR'); return -1; }, clearWatch(watchId: number) { console.warn('Settings is not yet supported on React VR'); }, }; module.exports = Settings; ================================================ FILE: Libraries/VRReactOverrides/TVEventHandler.vr.js ================================================ /** * Copyright (c) 2016-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 TVEventHandler * @flow */ 'use strict'; function TVEventHandler() {} TVEventHandler.prototype.enable = function(component: ?any, callback: Function) {}; TVEventHandler.prototype.disable = function() {}; module.exports = TVEventHandler; ================================================ FILE: Libraries/VRReactOverrides/Text.vr.js ================================================ /** * 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 Text * @flow */ // FIXME All source file should be linted and typed. /* eslint-disable */ const ColorPropType = require('ColorPropType'); const EdgeInsetsPropType = require('EdgeInsetsPropType'); const NativeMethodsMixin = require('NativeMethodsMixin'); const React = require('React'); const PropTypes = require('prop-types'); const ReactNativeViewAttributes = require('ReactNativeViewAttributes'); const StyleSheetPropType = require('StyleSheetPropType'); const TextStylePropTypes = require('TextStylePropTypes'); const Touchable = require('Touchable'); const UIManager = require('UIManager'); const createReactClass = require('create-react-class'); const createReactNativeComponentClass = require('createReactNativeComponentClass'); const mergeFast = require('mergeFast'); const processColor = require('processColor'); const stylePropType = StyleSheetPropType(TextStylePropTypes); const viewConfig = { validAttributes: mergeFast(ReactNativeViewAttributes.UIView, { isHighlighted: true, numberOfLines: true, ellipsizeMode: true, allowFontScaling: true, disabled: true, selectable: true, selectionColor: true, adjustsFontSizeToFit: true, minimumFontScale: true, textBreakStrategy: true, isOnLayer: true, }), uiViewClassName: 'RCTText', }; /** * A React component for displaying text. * * See https://facebook.github.io/react-native/docs/text.html */ // $FlowFixMe(>=0.41.0) const Text = createReactClass({ displayName: 'Text', propTypes: { /** * When `numberOfLines` is set, this prop defines how text will be * truncated. * * See https://facebook.github.io/react-native/docs/text.html#ellipsizemode */ ellipsizeMode: PropTypes.oneOf(['head', 'middle', 'tail', 'clip']), /** * Used to truncate the text with an ellipsis. * * See https://facebook.github.io/react-native/docs/text.html#numberoflines */ numberOfLines: PropTypes.number, /** * Set text break strategy on Android. * * See https://facebook.github.io/react-native/docs/text.html#textbreakstrategy */ textBreakStrategy: PropTypes.oneOf(['simple', 'highQuality', 'balanced']), /** * Invoked on mount and layout changes. * * See https://facebook.github.io/react-native/docs/text.html#onlayout */ onLayout: PropTypes.func, /** * This function is called on press. * * See https://facebook.github.io/react-native/docs/text.html#onpress */ onPress: PropTypes.func, /** * This function is called on long press. * * See https://facebook.github.io/react-native/docs/text.html#onlongpress */ onLongPress: PropTypes.func, /** * Defines how far your touch may move off of the button, before * deactivating the button. * * See https://facebook.github.io/react-native/docs/text.html#pressretentionoffset */ pressRetentionOffset: EdgeInsetsPropType, /** * Lets the user select text. * * See https://facebook.github.io/react-native/docs/text.html#selectable */ selectable: PropTypes.bool, /** * The highlight color of the text. * * See https://facebook.github.io/react-native/docs/text.html#selectioncolor */ selectionColor: ColorPropType, /** * When `true`, no visual change is made when text is pressed down. * * See https://facebook.github.io/react-native/docs/text.html#supperhighlighting */ suppressHighlighting: PropTypes.bool, style: stylePropType, /** * Used to locate this view in end-to-end tests. * * See https://facebook.github.io/react-native/docs/text.html#testid */ testID: PropTypes.string, /** * Used to locate this view from native code. * * See https://facebook.github.io/react-native/docs/text.html#nativeid */ nativeID: PropTypes.string, /** * Whether fonts should scale to respect Text Size accessibility settings. * * See https://facebook.github.io/react-native/docs/text.html#allowfontscaling */ allowFontScaling: PropTypes.bool, /** * Indicates whether the view is an accessibility element. * * See https://facebook.github.io/react-native/docs/text.html#accessible */ accessible: PropTypes.bool, /** * Whether font should be scaled down automatically. * * See https://facebook.github.io/react-native/docs/text.html#adjustsfontsizetofit */ adjustsFontSizeToFit: PropTypes.bool, /** * Smallest possible scale a font can reach. * * See https://facebook.github.io/react-native/docs/text.html#minimumfontscale */ minimumFontScale: PropTypes.number, /** * Specifies the disabled state of the text view for testing purposes. * * See https://facebook.github.io/react-native/docs/text.html#disabled */ disabled: PropTypes.bool, /** * This function is called on entering the text. * * e.g., `onEnter={this.enterText}>` */ onEnter: PropTypes.func, /** * This function is called on exiting the text. * * e.g., `onExit={this.exitText}>` */ onExit: PropTypes.func, /** * This function is called when input is sent to the text. * * e.g., `onInput={this.inputStuff}>` */ onInput: PropTypes.func, }, getDefaultProps(): Object { return { accessible: true, allowFontScaling: true, ellipsizeMode: 'tail', isOnLayer: false, }; }, getInitialState: function(): Object { return mergeFast(Touchable.Mixin.touchableGetInitialState(), { isHighlighted: false, }); }, mixins: [NativeMethodsMixin], viewConfig: viewConfig, getChildContext(): Object { return {isInAParentText: true}; }, childContextTypes: { isInAParentText: PropTypes.bool, }, contextTypes: { isInAParentText: PropTypes.bool, isOnLayer: PropTypes.bool, }, /** * Only assigned if touch is needed. */ _handlers: (null: ?Object), _hasPressHandler(): boolean { return !!this.props.onPress || !!this.props.onLongPress; }, /** * These are assigned lazily the first time the responder is set to make plain * text nodes as cheap as possible. */ touchableHandleActivePressIn: (null: ?Function), touchableHandleActivePressOut: (null: ?Function), touchableHandlePress: (null: ?Function), touchableHandleLongPress: (null: ?Function), touchableGetPressRectOffset: (null: ?Function), render(): React.Element { let newProps = this.props; if (this.props.onStartShouldSetResponder || this._hasPressHandler()) { if (!this._handlers) { this._handlers = { onStartShouldSetResponder: (): boolean => { const shouldSetFromProps = this.props.onStartShouldSetResponder && // $FlowFixMe(>=0.41.0) this.props.onStartShouldSetResponder(); const setResponder = shouldSetFromProps || this._hasPressHandler(); if (setResponder && !this.touchableHandleActivePressIn) { // Attach and bind all the other handlers only the first time a touch // actually happens. for (const key in Touchable.Mixin) { if (typeof Touchable.Mixin[key] === 'function') { (this: any)[key] = Touchable.Mixin[key].bind(this); } } this.touchableHandleActivePressIn = () => { if ( this.props.suppressHighlighting || !this._hasPressHandler() ) { return; } this.setState({ isHighlighted: true, }); }; this.touchableHandleActivePressOut = () => { if ( this.props.suppressHighlighting || !this._hasPressHandler() ) { return; } this.setState({ isHighlighted: false, }); }; // $FlowFixMe (via postinstall.shenangians) this really ought to be fixed upstream this.touchableHandlePress = (e: SyntheticEvent) => { this.props.onPress && this.props.onPress(e); }; // $FlowFixMe (via postinstall.shenangians) this really ought to be fixed upstream this.touchableHandleLongPress = (e: SyntheticEvent) => { this.props.onLongPress && this.props.onLongPress(e); }; this.touchableGetPressRectOffset = function(): RectOffset { return this.props.pressRetentionOffset || PRESS_RECT_OFFSET; }; } // $FlowFixMe(>=0.41.0) return setResponder; }, // $FlowFixMe (via postinstall.shenangians) this really ought to be fixed upstream onResponderGrant: function(e: SyntheticEvent, dispatchID: string) { // $FlowFixMe(>=0.41.0) this.touchableHandleResponderGrant(e, dispatchID); this.props.onResponderGrant && // $FlowFixMe(>=0.41.0) this.props.onResponderGrant.apply(this, arguments); }.bind(this), // $FlowFixMe (via postinstall.shenangians) this really ought to be fixed upstream onResponderMove: function(e: SyntheticEvent) { // $FlowFixMe(>=0.41.0) this.touchableHandleResponderMove(e); this.props.onResponderMove && // $FlowFixMe(>=0.41.0) this.props.onResponderMove.apply(this, arguments); }.bind(this), // $FlowFixMe (via postinstall.shenangians) this really ought to be fixed upstream onResponderRelease: function(e: SyntheticEvent) { // $FlowFixMe(>=0.41.0) this.touchableHandleResponderRelease(e); this.props.onResponderRelease && // $FlowFixMe(>=0.41.0) this.props.onResponderRelease.apply(this, arguments); }.bind(this), // $FlowFixMe (via postinstall.shenangians) this really ought to be fixed upstream onResponderTerminate: function(e: SyntheticEvent) { // $FlowFixMe(>=0.41.0) this.touchableHandleResponderTerminate(e); this.props.onResponderTerminate && // $FlowFixMe(>=0.41.0) this.props.onResponderTerminate.apply(this, arguments); }.bind(this), onResponderTerminationRequest: function(): boolean { // Allow touchable or props.onResponderTerminationRequest to deny // the request // $FlowFixMe(>=0.41.0) var allowTermination = this.touchableHandleResponderTerminationRequest(); if (allowTermination && this.props.onResponderTerminationRequest) { // $FlowFixMe(>=0.41.0) allowTermination = this.props.onResponderTerminationRequest.apply( this, arguments, ); } return allowTermination; }.bind(this), }; } newProps = { ...this.props, ...this._handlers, isHighlighted: this.state.isHighlighted, }; } if (newProps.selectionColor != null) { newProps = { ...newProps, selectionColor: processColor(newProps.selectionColor), }; } if (Touchable.TOUCH_TARGET_DEBUG && newProps.onPress) { newProps = { ...newProps, style: [this.props.style, {color: 'magenta'}], }; } if (this.context.isInAParentText) { return ; } else { return ; } }, }); type RectOffset = { top: number, left: number, right: number, bottom: number, }; var PRESS_RECT_OFFSET = {top: 20, left: 20, right: 20, bottom: 30}; var RCTText = createReactNativeComponentClass( viewConfig.uiViewClassName, () => viewConfig, ); var RCTVirtualText = RCTText; if (UIManager.RCTVirtualText) { RCTVirtualText = createReactNativeComponentClass('RCTVirtualText', () => ({ validAttributes: mergeFast(ReactNativeViewAttributes.UIView, { isHighlighted: true, }), uiViewClassName: 'RCTVirtualText', })); } module.exports = Text; ================================================ FILE: Libraries/VRReactOverrides/TransformPropTypes.vr.js ================================================ /** * 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 TransformPropTypes * @flow */ 'use strict'; const ReactPropTypes = require('prop-types'); const deprecatedPropType = require('deprecatedPropType'); const ArrayOfNumberPropType = ReactPropTypes.arrayOf(ReactPropTypes.number); const NumberOrStringPropType = ReactPropTypes.oneOfType([ ReactPropTypes.number, ReactPropTypes.string, ]); const NumberOrArrayOfNumberPropType = ReactPropTypes.oneOfType([ ReactPropTypes.number, ArrayOfNumberPropType, ]); const TransformMatrixPropType = function( props: Object, propName: string, componentName: string, ...rest ): ?Error { if (props.transform && props.transformMatrix) { return new Error('transformMatrix and transform styles cannot be used on the same component'); } return ArrayOfNumberPropType(props, propName, componentName, ...rest); }; const TransformPropTypes = { transform: ReactPropTypes.arrayOf( ReactPropTypes.oneOfType([ ReactPropTypes.shape({perspective: ReactPropTypes.number}), ReactPropTypes.shape({rotate: NumberOrStringPropType}), ReactPropTypes.shape({rotateX: NumberOrStringPropType}), ReactPropTypes.shape({rotateY: NumberOrStringPropType}), ReactPropTypes.shape({rotateZ: NumberOrStringPropType}), ReactPropTypes.shape({scale: NumberOrArrayOfNumberPropType}), ReactPropTypes.shape({scaleX: ReactPropTypes.number}), ReactPropTypes.shape({scaleY: ReactPropTypes.number}), ReactPropTypes.shape({scaleZ: ReactPropTypes.number}), ReactPropTypes.shape({scale3d: ArrayOfNumberPropType}), ReactPropTypes.shape({translate: ArrayOfNumberPropType}), ReactPropTypes.shape({translateX: ReactPropTypes.number}), ReactPropTypes.shape({translateY: ReactPropTypes.number}), ReactPropTypes.shape({translateZ: ReactPropTypes.number}), ReactPropTypes.shape({skewX: ReactPropTypes.string}), ReactPropTypes.shape({skewY: ReactPropTypes.string}), ]) ), transformMatrix: TransformMatrixPropType, /* Deprecated transform props used on Android only */ scaleX: deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.'), scaleY: deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.'), rotation: deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.'), translateX: deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.'), translateY: deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.'), }; module.exports = TransformPropTypes; ================================================ FILE: Libraries/VRReactOverrides/YellowBox.vr.js ================================================ /** * 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 YellowBox */ 'use strict'; const React = require('React'); /** * Once we have a way to reliably place UI components in the scene without * conflicting with existing scene elements, we should enable a component that * renders console logs, errors, and warnings in a scrollable window. */ class YellowBox extends React.Component { render() { return null; } } module.exports = YellowBox; ================================================ FILE: Libraries/VRReactOverrides/processTransform.vr.js ================================================ /** * 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 processTransform * @flow */ /* eslint-disable */ 'use strict'; const MatrixMath = require('MatrixMath'); const Platform = require('Platform'); const invariant = require('invariant'); const stringifySafe = require('stringifySafe'); /** * Generate a transform matrix based on the provided transforms, and use that * within the style object instead. * * This allows us to provide an API that is similar to CSS, where transforms may * be applied in an arbitrary order, and yet have a universal, singular * interface to native code. */ function processTransform(transform: Object): Object { const result = MatrixMath.createIdentityMatrix(); transform.forEach(transformation => { const key = Object.keys(transformation)[0]; const value = transformation[key]; if (__DEV__) { _validateTransform(key, value, transformation); } switch (key) { case 'matrix': MatrixMath.multiplyInto(result, result, value); break; case 'perspective': _multiplyTransform(result, MatrixMath.reusePerspectiveCommand, [value]); break; case 'rotateX': _multiplyTransform(result, MatrixMath.reuseRotateXCommand, [_convertToRadians(value)]); break; case 'rotateY': _multiplyTransform(result, MatrixMath.reuseRotateYCommand, [_convertToRadians(value)]); break; case 'rotate': case 'rotateZ': _multiplyTransform(result, MatrixMath.reuseRotateZCommand, [_convertToRadians(value)]); break; case 'scale': if (typeof value === 'number') { _multiplyTransform(result, MatrixMath.reuseScale3dCommand, [value, value, value]); } else { _multiplyTransform(result, MatrixMath.reuseScale3dCommand, [ value[0], value[1], value[2], ]); } break; case 'scaleX': _multiplyTransform(result, MatrixMath.reuseScaleXCommand, [value]); break; case 'scaleY': _multiplyTransform(result, MatrixMath.reuseScaleYCommand, [value]); break; case 'scaleZ': _multiplyTransform(result, MatrixMath.reuseScaleZCommand, [value]); break; case 'scale3d': _multiplyTransform(result, MatrixMath.reuseScale3dCommand, [value[0], value[1], value[2]]); break; case 'translate': _multiplyTransform(result, MatrixMath.reuseTranslate3dCommand, [ value[0], value[1], value[2] || 0, ]); break; case 'translateX': _multiplyTransform(result, MatrixMath.reuseTranslate2dCommand, [value, 0]); break; case 'translateY': _multiplyTransform(result, MatrixMath.reuseTranslate2dCommand, [0, value]); break; case 'translateZ': _multiplyTransform(result, MatrixMath.reuseTranslate3dCommand, [0, 0, value]); break; case 'skewX': _multiplyTransform(result, MatrixMath.reuseSkewXCommand, [_convertToRadians(value)]); break; case 'skewY': _multiplyTransform(result, MatrixMath.reuseSkewYCommand, [_convertToRadians(value)]); break; default: throw new Error('Invalid transform name: ' + key); } }); // Android does not support the direct application of a transform matrix to // a view, so we need to decompose the result matrix into transforms that can // get applied in the specific order of (1) translate (2) scale (3) rotate. // Once we can directly apply a matrix, we can remove this decomposition. if (Platform.OS === 'android') { return MatrixMath.decomposeMatrix(result); } return result; } /** * Performs a destructive operation on a transform matrix. */ function _multiplyTransform( result: Array, matrixMathFunction: Function, args: Array ): void { const matrixToApply = MatrixMath.createIdentityMatrix(); const argsWithIdentity = [matrixToApply].concat(args); matrixMathFunction.apply(this, argsWithIdentity); MatrixMath.multiplyInto(result, result, matrixToApply); } /** * Parses a string like '0.5rad' or '60deg' into radians expressed in a float. * Note that validation on the string is done in `_validateTransform()`. */ function _convertToRadians(value: string): number { const isRad = typeof value === 'string' ? value.indexOf('rad') > -1 : false; const floatValue = typeof value === 'string' ? parseFloat(value, 10) : value; return isRad ? floatValue : floatValue * Math.PI / 180; } function _validateTransform(key, value, transformation) { invariant( !value.getValue, 'You passed an Animated.Value to a normal component. ' + 'You need to wrap that component in an Animated. For example, ' + 'replace by .' ); const multivalueTransforms = ['matrix', 'translate']; if (multivalueTransforms.indexOf(key) !== -1) { invariant( Array.isArray(value), 'Transform with key of %s must have an array as the value: %s', key, stringifySafe(transformation) ); } switch (key) { case 'matrix': invariant( value.length === 9 || value.length === 16, 'Matrix transform must have a length of 9 (2d) or 16 (3d). ' + 'Provided matrix has a length of %s: %s', value.length, stringifySafe(transformation) ); break; case 'translate': break; case 'scale': invariant( typeof value === 'number' || value.length === 3, 'scale with key of "%s" must be a number or array of length 3: %s', key, stringifySafe(transformation) ); break; case 'rotateX': case 'rotateY': case 'rotateZ': case 'rotate': invariant( typeof value === 'string' || typeof value === 'number', 'Transform with key of "%s" must be a string or number: %s', key, stringifySafe(transformation) ); invariant( typeof value === 'number' || value.indexOf('deg') > -1 || value.indexOf('rad') > -1, 'Rotate transform must be expressed in degrees (deg) or radians (rad): %s', stringifySafe(transformation) ); break; case 'skewX': case 'skewY': invariant( typeof value === 'string', 'Transform with key of "%s" must be a string: %s', key, stringifySafe(transformation) ); invariant( value.indexOf('deg') > -1 || value.indexOf('rad') > -1, 'Rotate transform must be expressed in degrees (deg) or radians (rad): %s', stringifySafe(transformation) ); break; case 'perspective': invariant( typeof value === 'number', 'Transform with key of "%s" must be a number: %s', key, stringifySafe(transformation) ); invariant( value !== 0, 'Transform with key of "%s" cannot be zero: %s', key, stringifySafe(transformation) ); break; default: invariant( typeof value === 'number', 'Transform with key of "%s" must be a number: %s', key, stringifySafe(transformation) ); } } module.exports = processTransform; ================================================ FILE: Libraries/VRReactOverrides/setupDevtools.vr.js ================================================ /** * 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 setupDevtools * @flow */ /* eslint-disable import/no-commonjs */ type DevToolsPluginConnection = { host: string, isAppActive: () => boolean, port: number, }; type DevToolsPlugin = { connectToDevTools: (connection: DevToolsPluginConnection) => void, }; let register = function() { // noop }; if (__DEV__) { const WebSocket = require('WebSocket'); const {PlatformConstants} = require('NativeModules'); /* $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 reactDevTools = require('react-devtools-core'); register = function(plugin: DevToolsPlugin) { // Initialize dev tools only if the native module for WebSocket is available if (self.__DEVTOOLS__ && WebSocket.isAvailable) { // Don't steal the DevTools from currently active app. // Note: if you add any AppState subscriptions to this file, // you will also need to guard against `AppState.isAvailable`, // or the code will throw for bundles that don't have it. const isAppActive = () => true; // Special case: Genymotion is running on a different host. const host = PlatformConstants && PlatformConstants.ServerHost ? PlatformConstants.ServerHost.split(':')[0] : 'localhost'; plugin.connectToDevTools({ isAppActive, host, // Read the optional global variable for backward compatibility. // It was added in https://github.com/facebook/react-native/commit/bf2b435322e89d0aeee8792b1c6e04656c2719a0. port: window.__REACT_DEVTOOLS_PORT__, resolveRNStyle: require('flattenStyle'), }); } }; register(reactDevTools); window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on('react-devtools', agent => { const NativeModules = require('NativeModules'); const {UIManager} = NativeModules; let currentHighlight = null; const ReactNativeComponentTree = require('ReactNativeComponentTree'); agent.on('highlight', ({node}) => { if (typeof node !== 'number') { if (typeof node._nativeTag === 'number') { node = node._nativeTag; } else { return; } } currentHighlight = node; if (UIManager.setBoundingBoxVisible) { UIManager.setBoundingBoxVisible(node, true); } }); const hideHighlight = () => { if (currentHighlight) { if (UIManager.setBoundingBoxVisible) { UIManager.setBoundingBoxVisible(currentHighlight, false); } currentHighlight = null; } }; agent.on('hideHighlight', hideHighlight); agent.on('shutdown', hideHighlight); }); global.registerDevtoolsPlugin = register; } module.exports = { register, }; ================================================ FILE: Libraries/Video/MediaPlayerState.js ================================================ /** * 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 MediaPlayerState */ const EventEmitter = require('EventEmitter'); /** * MediaPlayerState creates an instance that controls video states internally, * which can be shared between media components and control components. * The simplest workflow is to create a `MediaPlayerState`, and hook it with components: * ``` * class VideoPlayer extends React.Component { * constructor(props) { * super(props); * this.state = { * playerState: new MediaPlayerState({autoPlay: true, muted: true}), // init with muted, autoPlay * }; * } * render() { * return ( * * * ); * } * } * ``` * To control video playback, you can directly call functions on `playerState` * ``` * this.state.playerState.play(); * this.state.playerState.pause(); * this.state.playerState.setMuted(false); * ``` */ class MediaPlayerState extends EventEmitter { /** * Create a new MediaPlayerState. * * @param options (optional) - Configure the initial state. * * - autoPlay {boolean}: whether the media should start playing automatically. Default is false. * - muted {boolean}: whether the media should be muted. Default is false. * - volume {number}: Volume of the media, generally in the range 0 to 1. Default is 1.0 */ constructor(options) { super(); this.playStatus = 'closed'; this.duration = undefined; this.currentTime = undefined; this.volume = options.volume !== undefined ? options.volume : 1.0; this.muted = options.muted || false; this.autoPlay = options.autoPlay || false; this.onDurationChange = this.onDurationChange.bind(this); this.onTimeUpdate = this.onTimeUpdate.bind(this); this.onPlayStatusChange = this.onPlayStatusChange.bind(this); } /** * Begin or resume playback. */ play() { // call play this.emit('play'); } /** * Pause playback. */ pause() { // call pause this.emit('pause'); } /** * Seek to a position of the video * @param timeSec - the position seek to. */ seekTo(timeSec) { // call seekTo this.emit('seekTo', timeSec); } /** * Register for calling a command on a Video on a user gesture on a Component * @param commandID - the command id. * @param commandArgs - the command arguments. * @param reactTag - the tag of the component that listen to the user gesture. */ registerUserGesture(commandID, commandArgs, reactTag) { // call registerUserGesture this.emit('registerUserGesture', commandID, commandArgs, reactTag); } /** * Unregister for calling a command on a Video on a user gesture on a Component * @param reactTag - the tag of the component that listen to the user gesture. */ unregisterUserGesture(reactTag) { // call unregisterUserGesture this.emit('unregisterUserGesture', reactTag); } /** * Set the volume of the media (0.0 ~ 1.0). Default is 1.0 */ setVolume(value) { this.volume = value; this.emit('volumeChange', value); } /** * Whether the audio should be muted. Default is false. */ setMuted(value) { this.muted = value; this.emit('mutedChange', value); } onDurationChange(event) { if (event.nativeEvent.duration) { this.duration = event.nativeEvent.duration; this.emit('durationChange', this.duration); } } onTimeUpdate(event) { if (event.nativeEvent.currentTime) { this.currentTime = event.nativeEvent.currentTime; this.emit('timeUpdate', this.currentTime); } } onPlayStatusChange(event) { this.playStatus = event.nativeEvent.playStatus; this.emit('playStatusChange', this.playStatus); if (this.playStatus === 'ready' && this.autoPlay) { this.play(); } } } module.exports = MediaPlayerState; ================================================ FILE: Libraries/Video/Video.js ================================================ /** * 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 Video */ 'use strict'; const NativeMethodsMixin = require('NativeMethodsMixin'); const PropTypes = require('prop-types'); const React = require('React'); const ReactNativeViewAttributes = require('ReactNativeViewAttributes'); const View = require('View'); const requireNativeComponent = require('requireNativeComponent'); const StyleSheetPropType = require('StyleSheetPropType'); const UIManager = require('UIManager'); const ReactNative = require('ReactNative'); const LayoutAndTransformTintPropTypes = require('LayoutAndTransformTintPropTypes'); const createReactClass = require('create-react-class'); const resolveAssetSource = require('resolveAssetSource'); /** * A react component for displaying 2D video. * * Note: Auto-play is restricted on some browsers. For example on Chrome * Android, auto-play only works if the video is `muted`, otherwise * a user gesture (typically touch, mouse, and keyboard but not gamepad) * is required to begin video playback. * * Example Usage: * ``` *