diff --git a/docs/iframe.html b/docs/iframe.html index b0f4dade..564970e4 100644 --- a/docs/iframe.html +++ b/docs/iframe.html @@ -71,4 +71,4 @@ }

No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.


\ No newline at end of file
+      }
No Preview
Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.

\ No newline at end of file
diff --git a/docs/main.ef2eedd89ddac60a5216.bundle.js b/docs/main.02f8c8457cb99ff1d2b8.bundle.js
similarity index 53%
rename from docs/main.ef2eedd89ddac60a5216.bundle.js
rename to docs/main.02f8c8457cb99ff1d2b8.bundle.js
index dd3cfd29..f9388742 100644
--- a/docs/main.ef2eedd89ddac60a5216.bundle.js
+++ b/docs/main.02f8c8457cb99ff1d2b8.bundle.js
@@ -1,2 +1,2 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{100:function(module,__webpack_exports__,__webpack_require__){"use strict";var _styleResolver__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(272),css={create:function create(rules,group){return _styleResolver__WEBPACK_IMPORTED_MODULE_0__.a.createCSS(rules,group)}};__webpack_exports__.a=css},101:function(module,__webpack_exports__,__webpack_require__){"use strict";var react_dom__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(156);__webpack_exports__.a=function findNodeHandle(component){var node;try{node=Object(react_dom__WEBPACK_IMPORTED_MODULE_0__.findDOMNode)(component)}catch(e){}return node}},112:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var fbjs_lib_ExecutionEnvironment__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(24),fbjs_lib_ExecutionEnvironment__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(fbjs_lib_ExecutionEnvironment__WEBPACK_IMPORTED_MODULE_0__),doLeftAndRightSwapInRTL=!0,isPreferredLanguageRTL=!1,isRTLAllowed=!0,isRTLForced=!1,isRTL=function isRTL(){return!!isRTLForced||isRTLAllowed&&isPreferredLanguageRTL},onDirectionChange=function onDirectionChange(){fbjs_lib_ExecutionEnvironment__WEBPACK_IMPORTED_MODULE_0___default.a.canUseDOM&&document.documentElement&&document.documentElement.setAttribute&&document.documentElement.setAttribute("dir",isRTL()?"rtl":"ltr")},I18nManager={allowRTL:function allowRTL(bool){isRTLAllowed=bool,onDirectionChange()},forceRTL:function forceRTL(bool){isRTLForced=bool,onDirectionChange()},setPreferredLanguageRTL:function setPreferredLanguageRTL(bool){isPreferredLanguageRTL=bool,onDirectionChange()},swapLeftAndRightInRTL:function swapLeftAndRightInRTL(bool){doLeftAndRightSwapInRTL=bool},get doLeftAndRightSwapInRTL(){return doLeftAndRightSwapInRTL},get isRTL(){return isRTL()}};__webpack_exports__.default=I18nManager},120:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(0),_StyleSheet__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(4),_TouchableOpacity__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(155),_Text__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__(9),Button=react__WEBPACK_IMPORTED_MODULE_0__.forwardRef((function(props,forwardedRef){var accessibilityLabel=props.accessibilityLabel,color=props.color,disabled=props.disabled,onPress=props.onPress,testID=props.testID,title=props.title;return react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TouchableOpacity__WEBPACK_IMPORTED_MODULE_2__.default,{accessibilityLabel:accessibilityLabel,accessibilityRole:"button",disabled:disabled,onPress:onPress,ref:forwardedRef,style:[styles.button,color&&{backgroundColor:color},disabled&&styles.buttonDisabled],testID:testID},react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Text__WEBPACK_IMPORTED_MODULE_3__.default,{style:[styles.text,disabled&&styles.textDisabled]},title))}));Button.displayName="Button";var styles=_StyleSheet__WEBPACK_IMPORTED_MODULE_1__.default.create({button:{backgroundColor:"#2196F3",borderRadius:2},text:{color:"#fff",fontWeight:"500",padding:8,textAlign:"center",textTransform:"uppercase"},buttonDisabled:{backgroundColor:"#dfdfdf"},textDisabled:{color:"#a1a1a1"}});__webpack_exports__.default=Button},122:function(module,__webpack_exports__,__webpack_require__){"use strict";function pick(obj,list){var nextObj={};for(var key in obj)obj.hasOwnProperty(key)&&(!0!==list[key]&&0!==key.indexOf("aria-")||(nextObj[key]=obj[key]));return nextObj}__webpack_require__.d(__webpack_exports__,"a",(function(){return pick}))},123:function(module,__webpack_exports__,__webpack_require__){"use strict";var ERROR="ERROR",NOT_RESPONDER="NOT_RESPONDER",Transitions=Object.freeze({NOT_RESPONDER:{DELAY:ERROR,RESPONDER_GRANT:"RESPONDER_INACTIVE_PRESS_START",RESPONDER_RELEASE:ERROR,RESPONDER_TERMINATED:ERROR,LONG_PRESS_DETECTED:ERROR},RESPONDER_INACTIVE_PRESS_START:{DELAY:"RESPONDER_ACTIVE_PRESS_START",RESPONDER_GRANT:ERROR,RESPONDER_RELEASE:NOT_RESPONDER,RESPONDER_TERMINATED:NOT_RESPONDER,LONG_PRESS_DETECTED:ERROR},RESPONDER_ACTIVE_PRESS_START:{DELAY:ERROR,RESPONDER_GRANT:ERROR,RESPONDER_RELEASE:NOT_RESPONDER,RESPONDER_TERMINATED:NOT_RESPONDER,LONG_PRESS_DETECTED:"RESPONDER_ACTIVE_LONG_PRESS_START"},RESPONDER_ACTIVE_LONG_PRESS_START:{DELAY:ERROR,RESPONDER_GRANT:ERROR,RESPONDER_RELEASE:NOT_RESPONDER,RESPONDER_TERMINATED:NOT_RESPONDER,LONG_PRESS_DETECTED:"RESPONDER_ACTIVE_LONG_PRESS_START"},ERROR:{DELAY:NOT_RESPONDER,RESPONDER_GRANT:"RESPONDER_INACTIVE_PRESS_START",RESPONDER_RELEASE:NOT_RESPONDER,RESPONDER_TERMINATED:NOT_RESPONDER,LONG_PRESS_DETECTED:NOT_RESPONDER}}),isActiveSignal=function isActiveSignal(signal){return"RESPONDER_ACTIVE_PRESS_START"===signal||"RESPONDER_ACTIVE_LONG_PRESS_START"===signal},isPressStartSignal=function isPressStartSignal(signal){return"RESPONDER_INACTIVE_PRESS_START"===signal||"RESPONDER_ACTIVE_PRESS_START"===signal||"RESPONDER_ACTIVE_LONG_PRESS_START"===signal},PressResponder=function(){function PressResponder(config){this._eventHandlers=null,this._isPointerTouch=!1,this._longPressDelayTimeout=null,this._longPressDispatched=!1,this._pressDelayTimeout=null,this._pressOutDelayTimeout=null,this._touchState=NOT_RESPONDER,this.configure(config)}var _proto=PressResponder.prototype;return _proto.configure=function configure(config){this._config=config},_proto.reset=function reset(){this._cancelLongPressDelayTimeout(),this._cancelPressDelayTimeout(),this._cancelPressOutDelayTimeout()},_proto.getEventHandlers=function getEventHandlers(){return null==this._eventHandlers&&(this._eventHandlers=this._createEventHandlers()),this._eventHandlers},_proto._createEventHandlers=function _createEventHandlers(){var _this=this,start=function start(event,shouldDelay){event.persist(),_this._cancelPressOutDelayTimeout(),_this._longPressDispatched=!1,_this._responder=event.currentTarget,_this._selectionTerminated=!1,_this._touchState=NOT_RESPONDER,_this._isPointerTouch="touchstart"===event.nativeEvent.type,_this._receiveSignal("RESPONDER_GRANT",event);var delayPressStart=normalizeDelay(_this._config.delayPressStart,0,50);!1!==shouldDelay&&delayPressStart>0?_this._pressDelayTimeout=setTimeout((function(){_this._receiveSignal("DELAY",event)}),delayPressStart):_this._receiveSignal("DELAY",event);var delayLongPress=normalizeDelay(_this._config.delayLongPress,10,450);_this._longPressDelayTimeout=setTimeout((function(){_this._handleLongPress(event)}),delayLongPress+delayPressStart)},end=function end(event){_this._receiveSignal("RESPONDER_RELEASE",event)},keyupHandler=function keyupHandler(event){_this._touchState!==NOT_RESPONDER&&(end(event),document.removeEventListener("keyup",keyupHandler))};return{onStartShouldSetResponder:function onStartShouldSetResponder(){var disabled=_this._config.disabled;return null==disabled||!disabled},onKeyDown:function onKeyDown(event){(function isValidKeyPress(event){var key=event.key,role=event.currentTarget.getAttribute("role"),isSpacebar=" "===key||"Spacebar"===key;return!event.repeat&&("Enter"===key||isSpacebar&&("button"===role||"menuitem"===role))})(event)&&(_this._touchState===NOT_RESPONDER&&(start(event,!1),document.addEventListener("keyup",keyupHandler)),event.stopPropagation())},onResponderGrant:function onResponderGrant(event){return start(event)},onResponderMove:function onResponderMove(event){null!=_this._config.onPressMove&&_this._config.onPressMove(event);var touch=getTouchFromResponderEvent(event);if(null!=_this._touchActivatePosition){var deltaX=_this._touchActivatePosition.pageX-touch.pageX,deltaY=_this._touchActivatePosition.pageY-touch.pageY;Math.hypot(deltaX,deltaY)>10&&_this._cancelLongPressDelayTimeout()}},onResponderRelease:function onResponderRelease(event){return end(event)},onResponderTerminate:function onResponderTerminate(event){"selectionchange"===event.nativeEvent.type&&(_this._selectionTerminated=!0),_this._receiveSignal("RESPONDER_TERMINATED",event)},onResponderTerminationRequest:function onResponderTerminationRequest(event){var _this$_config=_this._config,cancelable=_this$_config.cancelable,disabled=_this$_config.disabled,onLongPress=_this$_config.onLongPress;return!(!disabled&&null!=onLongPress&&_this._isPointerTouch&&"contextmenu"===event.nativeEvent.type)&&(null==cancelable||cancelable)},onClick:function onClick(event){var _this$_config2=_this._config,disabled=_this$_config2.disabled,onPress=_this$_config2.onPress;disabled||(_this._longPressDispatched||_this._selectionTerminated?event.preventDefault():null!=onPress&&!1===event.ctrlKey&&!1===event.altKey&&onPress(event)),event.stopPropagation()},onContextMenu:function onContextMenu(event){var _this$_config3=_this._config,disabled=_this$_config3.disabled,onLongPress=_this$_config3.onLongPress;disabled||null==onLongPress||!_this._isPointerTouch||event.defaultPrevented||event.preventDefault(),event.stopPropagation()}}},_proto._receiveSignal=function _receiveSignal(signal,event){var prevState=this._touchState,nextState=null;null!=Transitions[prevState]&&(nextState=Transitions[prevState][signal]),null==this._responder&&"RESPONDER_RELEASE"===signal||(null==nextState||nextState===ERROR?console.error("PressResponder: Invalid signal "+signal+" for state "+prevState+" on responder"):prevState!==nextState&&(this._performTransitionSideEffects(prevState,nextState,signal,event),this._touchState=nextState))},_proto._performTransitionSideEffects=function _performTransitionSideEffects(prevState,nextState,signal,event){if(function isTerminalSignal(signal){return"RESPONDER_TERMINATED"===signal||"RESPONDER_RELEASE"===signal}(signal)&&(this._isPointerTouch=!1,this._touchActivatePosition=null,this._cancelLongPressDelayTimeout()),isPressStartSignal(prevState)&&"LONG_PRESS_DETECTED"===signal){var onLongPress=this._config.onLongPress;null!=onLongPress&&null==event.nativeEvent.key&&(onLongPress(event),this._longPressDispatched=!0)}var isPrevActive=isActiveSignal(prevState),isNextActive=isActiveSignal(nextState);if(!isPrevActive&&isNextActive?this._activate(event):isPrevActive&&!isNextActive&&this._deactivate(event),isPressStartSignal(prevState)&&"RESPONDER_RELEASE"===signal){var _this$_config4=this._config,_onLongPress=_this$_config4.onLongPress;if(null!=_this$_config4.onPress)null!=_onLongPress&&"RESPONDER_ACTIVE_LONG_PRESS_START"===prevState||isNextActive||isPrevActive||(this._activate(event),this._deactivate(event))}this._cancelPressDelayTimeout()},_proto._activate=function _activate(event){var _this$_config5=this._config,onPressChange=_this$_config5.onPressChange,onPressStart=_this$_config5.onPressStart,touch=getTouchFromResponderEvent(event);this._touchActivatePosition={pageX:touch.pageX,pageY:touch.pageY},null!=onPressStart&&onPressStart(event),null!=onPressChange&&onPressChange(!0)},_proto._deactivate=function _deactivate(event){var _this$_config6=this._config,onPressChange=_this$_config6.onPressChange,onPressEnd=_this$_config6.onPressEnd;function end(){null!=onPressEnd&&onPressEnd(event),null!=onPressChange&&onPressChange(!1)}var delayPressEnd=normalizeDelay(this._config.delayPressEnd);delayPressEnd>0?this._pressOutDelayTimeout=setTimeout((function(){end()}),delayPressEnd):end()},_proto._handleLongPress=function _handleLongPress(event){"RESPONDER_ACTIVE_PRESS_START"!==this._touchState&&"RESPONDER_ACTIVE_LONG_PRESS_START"!==this._touchState||this._receiveSignal("LONG_PRESS_DETECTED",event)},_proto._cancelLongPressDelayTimeout=function _cancelLongPressDelayTimeout(){null!=this._longPressDelayTimeout&&(clearTimeout(this._longPressDelayTimeout),this._longPressDelayTimeout=null)},_proto._cancelPressDelayTimeout=function _cancelPressDelayTimeout(){null!=this._pressDelayTimeout&&(clearTimeout(this._pressDelayTimeout),this._pressDelayTimeout=null)},_proto._cancelPressOutDelayTimeout=function _cancelPressOutDelayTimeout(){null!=this._pressOutDelayTimeout&&(clearTimeout(this._pressOutDelayTimeout),this._pressOutDelayTimeout=null)},PressResponder}();function normalizeDelay(delay,min,fallback){return void 0===min&&(min=0),void 0===fallback&&(fallback=0),Math.max(min,null!=delay?delay:fallback)}function getTouchFromResponderEvent(event){var _event$nativeEvent=event.nativeEvent,changedTouches=_event$nativeEvent.changedTouches,touches=_event$nativeEvent.touches;return null!=touches&&touches.length>0?touches[0]:null!=changedTouches&&changedTouches.length>0?changedTouches[0]:event.nativeEvent}var react=__webpack_require__(0);function usePressEvents(hostRef,config){var pressResponderRef=Object(react.useRef)(null);null==pressResponderRef.current&&(pressResponderRef.current=new PressResponder(config));var pressResponder=pressResponderRef.current;return Object(react.useEffect)((function(){pressResponder.configure(config)}),[config,pressResponder]),Object(react.useEffect)((function(){return function(){pressResponder.reset()}}),[pressResponder]),Object(react.useDebugValue)(config),pressResponder.getEventHandlers()}__webpack_require__.d(__webpack_exports__,"a",(function(){return usePressEvents}))},124:function(module,__webpack_exports__,__webpack_require__){"use strict";var invariant=__webpack_require__(5),invariant_default=__webpack_require__.n(invariant),isSupported=__webpack_require__(24).canUseDOM&&void 0!==window.requestIdleCallback,requestIdleCallback=isSupported?window.requestIdleCallback:function _requestIdleCallback(cb,options){return setTimeout((function(){var start=Date.now();cb({didTimeout:!1,timeRemaining:function timeRemaining(){return Math.max(0,50-(Date.now()-start))}})}),1)},cancelIdleCallback=isSupported?window.cancelIdleCallback:function _cancelIdleCallback(id){clearTimeout(id)},modules_requestIdleCallback=requestIdleCallback,InteractionManager={Events:{interactionStart:"interactionStart",interactionComplete:"interactionComplete"},runAfterInteractions:function runAfterInteractions(task){var handle,promise=new Promise((function(resolve){handle=modules_requestIdleCallback((function(){task?resolve(task()):resolve()}))}));return{then:promise.then.bind(promise),done:promise.then.bind(promise),cancel:function cancel(){cancelIdleCallback(handle)}}},createInteractionHandle:function createInteractionHandle(){return 1},clearInteractionHandle:function clearInteractionHandle(handle){invariant_default()(!!handle,"Must provide a handle to clear.")},addListener:function addListener(){}};__webpack_exports__.a=InteractionManager},138:function(module,exports,__webpack_require__){var _interopRequireDefault=__webpack_require__(1);__webpack_require__(6),__webpack_require__(20),__webpack_require__(64),__webpack_require__(47),__webpack_require__(519),__webpack_require__(48),__webpack_require__(73),__webpack_require__(2),__webpack_require__(136),__webpack_require__(137),__webpack_require__(8),__webpack_require__(52),Object.defineProperty(exports,"__esModule",{value:!0}),exports.styles=exports.createUncachedURI=void 0;var _defineProperty2=_interopRequireDefault(__webpack_require__(22)),_StyleSheet=_interopRequireDefault(__webpack_require__(4));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}exports.createUncachedURI=function(source){var helper=function(str){return"".concat(str,"?t=").concat(Date.now())},uri="string"==typeof source?source:source.uri;return"string"==typeof source?helper(uri):function _objectSpread(target){for(var source,i=1;i App;\nAppRegistry.registerComponent(appKey, getComponent)\n")),(0,_react2.mdx)("h3",{id:"registerconfigconfig"},"registerConfig(config)"),(0,_react2.mdx)("p",null,"Register multiple applications. AppConfig type is:"),(0,_react2.mdx)("pre",null,(0,_react2.mdx)("code",(0,_extends2.default)({parentName:"pre"},{className:"language-js"}),"type AppConfig = {\n  appKey: string;\n  component: ComponentProvider;\n  run?: function\n}\n\nconst config = [{\n  appKey: 'FirstApp',\n  component: () => FirstApp\n}, {\n  appKey: 'SecondApp',\n  component: () => SecondApp\n}];\nAppRegistry.registerConfig(config)\n")),(0,_react2.mdx)("h3",{id:"registerrunnableappkey-run"},"registerRunnable(appKey, run)"),(0,_react2.mdx)("p",null,"Register a custom render function for an application. The function will receive\nthe ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"appParameters")," passed to ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"runApplication"),"."),(0,_react2.mdx)("pre",null,(0,_react2.mdx)("code",(0,_extends2.default)({parentName:"pre"},{className:"language-js"}),"AppRegistry.registerRunnable('MyApp', (appParams) => { ... });\n")),(0,_react2.mdx)("h3",{id:"runapplicationappkey-appparams"},"runApplication(appKey, appParams)"),(0,_react2.mdx)("p",null,"Runs the application that was registered under ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"appKey"),". The ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"appParameters"),"\nmust include the ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"rootTag")," into which the application is rendered, and\noptionally any ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"initialProps")," or render callback. If the client should hydrate\nserver-rendered HTML, set ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"hydrate")," to ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"true"),"."),(0,_react2.mdx)("pre",null,(0,_react2.mdx)("code",(0,_extends2.default)({parentName:"pre"},{className:"language-js"}),"AppRegistry.runApplication('MyApp', {\n  callback: () => { console.log('React rendering has finished') },\n  hydrate: true,\n  initialProps: {},\n  rootTag: document.getElementById('react-root'),\n})\n")),(0,_react2.mdx)("h3",{id:"setcomponentproviderinstrumentationhookcomponentprovider"},"setComponentProviderInstrumentationHook(componentProvider)"),(0,_react2.mdx)("pre",null,(0,_react2.mdx)("code",(0,_extends2.default)({parentName:"pre"},{className:"language-js"}),"type setComponentProviderInstrumentationHook = (componentProvider: func) => Component;\n")),(0,_react2.mdx)("h3",{id:"setwrappercomponentproviderappparams"},"setWrapperComponentProvider(appParams)"),(0,_react2.mdx)("pre",null,(0,_react2.mdx)("code",(0,_extends2.default)({parentName:"pre"},{className:"language-js"}),"type setWrapperComponentProvider = (appParameters: object) => Component;\n")),(0,_react2.mdx)("h3",{id:"unmountapplicationcomponentatroottagroottag"},"unmountApplicationComponentAtRootTag(rootTag)"),(0,_react2.mdx)("p",null,'To "stop" an application when a view should be destroyed, call\n',(0,_react2.mdx)("inlineCode",{parentName:"p"},"AppRegistry.unmountApplicationComponentAtRootTag")," with the ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"rootTag")," that was passed\ninto ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"runApplication"),"."))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};exports.__page=__page,__page.story={parameters:{docsOnly:!0}};var componentMeta={title:"APIs|AppRegistry",includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=(0,_objectSpread2.default)({},componentMeta.parameters.docs||{},{page:function page(){return(0,_react2.mdx)(_blocks.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},(0,_react2.mdx)(MDXContent,null))}});var _default=componentMeta;exports.default=_default},1430:function(module,exports,__webpack_require__){var _interopRequireDefault=__webpack_require__(1);__webpack_require__(6),__webpack_require__(64),__webpack_require__(47),__webpack_require__(73),__webpack_require__(2),__webpack_require__(136),__webpack_require__(137),__webpack_require__(8),__webpack_require__(52),Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=StateChanges;var _defineProperty2=_interopRequireDefault(__webpack_require__(22)),_slicedToArray2=_interopRequireDefault(__webpack_require__(85)),_react=_interopRequireDefault(__webpack_require__(0)),_AppState=_interopRequireDefault(__webpack_require__(1434)),_Text=_interopRequireDefault(__webpack_require__(9)),_View=_interopRequireDefault(__webpack_require__(3));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function StateChanges(){var _React$useState=_react.default.useState({active:0,background:0,currentState:_AppState.default.currentState}),_React$useState2=(0,_slicedToArray2.default)(_React$useState,2),state=_React$useState2[0],updateState=_React$useState2[1];return _react.default.useEffect((function(){var handleChange=function(nextState){updateState((function(previousState){return function _objectSpread(target){for(var source,i=1;i {});\n")),(0,_react2.mdx)("h3",{id:"removeeventlistenertype-handler"},"removeEventListener(type, handler)"),(0,_react2.mdx)("p",null,"Remove a handler by passing the ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"change")," event type and the handler."),(0,_react2.mdx)("p",null,"AppState.removeEventListener('change', handler);"),(0,_react2.mdx)("h2",{id:"example"},"Example"),(0,_react2.mdx)(_blocks.Preview,{withSource:"none",mdxType:"Preview"},(0,_react2.mdx)(_blocks.Story,{name:"stateChanges",mdxType:"Story"},(0,_react2.mdx)(Stories.stateChanges,null))))}MDXContent.isMDXComponent=!0;var stateChanges=function stateChanges(){return(0,_react2.mdx)(Stories.stateChanges,null)};exports.stateChanges=stateChanges,(stateChanges.story={}).name="stateChanges",stateChanges.story.parameters={mdxSource:""};var componentMeta={title:"APIs|AppState",includeStories:["stateChanges"]},mdxStoryNameToKey={stateChanges:"stateChanges"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=(0,_objectSpread2.default)({},componentMeta.parameters.docs||{},{page:function page(){return(0,_react2.mdx)(_blocks.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},(0,_react2.mdx)(MDXContent,null))}});var _default=componentMeta;exports.default=_default},1442:function(module,exports,__webpack_require__){var _interopRequireWildcard=__webpack_require__(14),_interopRequireDefault=__webpack_require__(1);Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.colorScheme=void 0;var _objectSpread2=_interopRequireDefault(__webpack_require__(13)),_extends2=_interopRequireDefault(__webpack_require__(10)),_objectWithoutProperties2=_interopRequireDefault(__webpack_require__(17)),_react2=(_interopRequireDefault(__webpack_require__(0)),__webpack_require__(16)),_blocks=__webpack_require__(19),Stories=_interopRequireWildcard(__webpack_require__(1443)),Story=function makeShortcode(name){return function MDXDefaultShortcode(props){return console.warn("Component "+name+" was not imported, exported, or provided by MDXProvider as global scope"),(0,_react2.mdx)("div",props)}}("Story"),layoutProps={},MDXLayout="wrapper";function MDXContent(_ref){var components=_ref.components,props=(0,_objectWithoutProperties2.default)(_ref,["components"]);return(0,_react2.mdx)(MDXLayout,(0,_extends2.default)({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),(0,_react2.mdx)(_blocks.Meta,{title:"APIs|Appearance",mdxType:"Meta"}),(0,_react2.mdx)("h1",{id:"appearance"},"Appearance"),(0,_react2.mdx)("p",null,"The Appearance module exposes information about the user's appearance\npreferences, such as their preferred color scheme (light or dark). In\n",(0,_react2.mdx)("inlineCode",{parentName:"p"},"react-native-web")," this is achieved using the ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"prefers-color-scheme")," media query."),(0,_react2.mdx)("h2",{id:"methods"},"Methods"),(0,_react2.mdx)("h3",{id:"getcolorscheme"},"getColorScheme()"),(0,_react2.mdx)("p",null,"You can use the Appearance module to determine if the user prefers a dark color\nscheme:"),(0,_react2.mdx)("pre",null,(0,_react2.mdx)("code",(0,_extends2.default)({parentName:"pre"},{className:"language-js"}),"const colorScheme = Appearance.getColorScheme();\nif (colorScheme === 'dark') {\n  // Use dark color scheme\n}\n")),(0,_react2.mdx)("p",null,"Although the color scheme is available immediately, this may change (e.g.\nscheduled color scheme change at sunrise or sunset). Any rendering logic or\nstyles that depend on the user preferred color scheme should try to call this\nfunction on every render, rather than caching the value."),(0,_react2.mdx)("h2",{id:"hooks"},"Hooks"),(0,_react2.mdx)("h3",{id:"usecolorscheme"},"useColorScheme"),(0,_react2.mdx)("p",null,"The ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"useColorScheme")," React hook provides and subscribes to color scheme updates\nfrom the Appearance module. The return value indicates the current user\npreferred color scheme. The value may be updated later, either through direct\nuser action (e.g. theme selection in device settings) or on a schedule (e.g.\nlight and dark themes that follow the day/night cycle)."),(0,_react2.mdx)("p",null,"Supported color schemes:"),(0,_react2.mdx)("ul",null,(0,_react2.mdx)("li",{parentName:"ul"},(0,_react2.mdx)("inlineCode",{parentName:"li"},"'light'"),": The user prefers a light color theme."),(0,_react2.mdx)("li",{parentName:"ul"},(0,_react2.mdx)("inlineCode",{parentName:"li"},"'dark'"),": The user prefers a dark color theme."),(0,_react2.mdx)("li",{parentName:"ul"},(0,_react2.mdx)("inlineCode",{parentName:"li"},"null"),": The user has not indicated a preferred color theme.")),(0,_react2.mdx)("pre",null,(0,_react2.mdx)("code",(0,_extends2.default)({parentName:"pre"},{className:"language-js"}),"import * as React from 'react';\nimport { Text, useColorScheme } from 'react-native';\n\nconst MyComponent = () => {\n  const colorScheme = useColorScheme();\n  return Your color scheme is: {colorScheme};\n};\n")),(0,_react2.mdx)("p",null,"This produces:"),(0,_react2.mdx)(_blocks.Preview,{withSource:"none",mdxType:"Preview"},(0,_react2.mdx)(Story,{name:"colorScheme",mdxType:"Story"},(0,_react2.mdx)(Stories.colorSchemeText,null))))}MDXContent.isMDXComponent=!0;var colorScheme=function colorScheme(){return(0,_react2.mdx)(Stories.colorSchemeText,null)};exports.colorScheme=colorScheme,(colorScheme.story={}).name="colorScheme",colorScheme.story.parameters={mdxSource:""};var componentMeta={title:"APIs|Appearance",includeStories:["colorScheme"]},mdxStoryNameToKey={colorScheme:"colorScheme"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=(0,_objectSpread2.default)({},componentMeta.parameters.docs||{},{page:function page(){return(0,_react2.mdx)(_blocks.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},(0,_react2.mdx)(MDXContent,null))}});var _default=componentMeta;exports.default=_default},1443:function(module,exports,__webpack_require__){var _interopRequireDefault=__webpack_require__(1);__webpack_require__(2),Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"colorSchemeText",{enumerable:!0,get:function get(){return _ColorSchemeText.default}});var _ColorSchemeText=_interopRequireDefault(__webpack_require__(1444))},1444:function(module,exports,__webpack_require__){__webpack_require__(2),Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=ColorSchemeText;var _interopRequireDefault=__webpack_require__(1),React=__webpack_require__(14)(__webpack_require__(0)),_Text=_interopRequireDefault(__webpack_require__(9)),_useColorScheme=_interopRequireDefault(__webpack_require__(1624));function ColorSchemeText(){var colorScheme=(0,_useColorScheme.default)();return React.createElement(_Text.default,null,"Your color scheme is: ",colorScheme)}ColorSchemeText.displayName="ColorSchemeText",ColorSchemeText.__docgenInfo={description:"",methods:[],displayName:"ColorSchemeText"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/apis/Appearance/examples/ColorSchemeText.js"]={name:"ColorSchemeText",docgenInfo:ColorSchemeText.__docgenInfo,path:"src/apis/Appearance/examples/ColorSchemeText.js"})},1445:function(module,exports,__webpack_require__){var _interopRequireDefault=__webpack_require__(1);__webpack_require__(2),Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=SetString;var _Button=_interopRequireDefault(__webpack_require__(120)),_Clipboard=_interopRequireDefault(__webpack_require__(1446)),_StyleSheet=_interopRequireDefault(__webpack_require__(4)),_TextInput=_interopRequireDefault(__webpack_require__(65)),_View=_interopRequireDefault(__webpack_require__(3)),_react=_interopRequireDefault(__webpack_require__(0));function SetString(){return _react.default.createElement(_View.default,null,_react.default.createElement(_View.default,{style:styles.buttonBox},_react.default.createElement(_Button.default,{onPress:function setString(){var success=_Clipboard.default.setString("This text was copied to the clipboard by React Native");console.log("Clipboard.setString success? ".concat(success))},title:"Copy to clipboard"})),_react.default.createElement(_TextInput.default,{multiline:!0,placeholder:"Try pasting here afterwards",style:styles.textInput}))}SetString.displayName="SetString";var styles=_StyleSheet.default.create({buttonBox:{maxWidth:300},textInput:{borderColor:"#AAB8C2",borderWidth:1,height:50,marginTop:20,padding:5}});SetString.__docgenInfo={description:"",methods:[],displayName:"SetString"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/apis/Clipboard/examples/SetString.js"]={name:"SetString",docgenInfo:SetString.__docgenInfo,path:"src/apis/Clipboard/examples/SetString.js"})},1446:function(module,__webpack_exports__,__webpack_require__){"use strict";var clipboardAvailable;__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"default",(function(){return Clipboard}));var Clipboard=function(){function Clipboard(){}return Clipboard.isAvailable=function isAvailable(){return void 0===clipboardAvailable&&(clipboardAvailable="function"==typeof document.queryCommandSupported&&document.queryCommandSupported("copy")),clipboardAvailable},Clipboard.getString=function getString(){return Promise.resolve("")},Clipboard.setString=function setString(text){var success=!1,body=document.body;if(body){var node=document.createElement("span");node.textContent=text,node.style.opacity="0",node.style.position="absolute",node.style.whiteSpace="pre-wrap",node.style.userSelect="auto",body.appendChild(node);var selection=window.getSelection();selection.removeAllRanges();var range=document.createRange();range.selectNodeContents(node),selection.addRange(range);try{document.execCommand("copy"),success=!0}catch(e){}selection.removeAllRanges(),body.removeChild(node)}return success},Clipboard}()},1447:function(module,exports,__webpack_require__){var _interopRequireWildcard=__webpack_require__(14),_interopRequireDefault=__webpack_require__(1);Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.setString=void 0;var _objectSpread2=_interopRequireDefault(__webpack_require__(13)),_extends2=_interopRequireDefault(__webpack_require__(10)),_objectWithoutProperties2=_interopRequireDefault(__webpack_require__(17)),_react2=(_interopRequireDefault(__webpack_require__(0)),__webpack_require__(16)),_blocks=__webpack_require__(19),Stories=_interopRequireWildcard(__webpack_require__(512)),layoutProps={},MDXLayout="wrapper";function MDXContent(_ref){var components=_ref.components,props=(0,_objectWithoutProperties2.default)(_ref,["components"]);return(0,_react2.mdx)(MDXLayout,(0,_extends2.default)({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),(0,_react2.mdx)(_blocks.Meta,{title:"APIs|Clipboard",mdxType:"Meta"}),(0,_react2.mdx)("h1",{id:"clipboard"},"Clipboard"),(0,_react2.mdx)("p",null,"Clipboard gives you an interface for setting to the clipboard. (Getting\nclipboard content is not currently supported on web.)"),(0,_react2.mdx)("h2",{id:"methods"},"Methods"),(0,_react2.mdx)("h3",{id:"isavailable"},"isAvailable()"),(0,_react2.mdx)("p",null,"Determines whether the browser environment supports Clipboard at all."),(0,_react2.mdx)("pre",null,(0,_react2.mdx)("code",(0,_extends2.default)({parentName:"pre"},{className:"language-js"}),"if (Clipboard.isAvailable) {\n  // you can use the Clipboard API\n}\n")),(0,_react2.mdx)("h3",{id:"setstringstring"},"setString(string)"),(0,_react2.mdx)("p",null,"Copies a string to the clipboard. On web, some browsers may not support copying\nto the clipboard, therefore, this function returns a boolean to indicate if the\ncopy was successful."),(0,_react2.mdx)("pre",null,(0,_react2.mdx)("code",(0,_extends2.default)({parentName:"pre"},{className:"language-js"}),"const wasSet = Clipboard.setString('add this to clipboard');\n")),(0,_react2.mdx)(_blocks.Preview,{withSource:"none",mdxType:"Preview"},(0,_react2.mdx)(_blocks.Story,{name:"setString",mdxType:"Story"},(0,_react2.mdx)(Stories.setString,null))),(0,_react2.mdx)("h3",{id:"getstring"},"getString()"),(0,_react2.mdx)("p",null,"Not properly supported on Web. Returns a ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"Promise")," of an empty string."))}MDXContent.isMDXComponent=!0;var setString=function setString(){return(0,_react2.mdx)(Stories.setString,null)};exports.setString=setString,(setString.story={}).name="setString",setString.story.parameters={mdxSource:""};var componentMeta={title:"APIs|Clipboard",includeStories:["setString"]},mdxStoryNameToKey={setString:"setString"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=(0,_objectSpread2.default)({},componentMeta.parameters.docs||{},{page:function page(){return(0,_react2.mdx)(_blocks.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},(0,_react2.mdx)(MDXContent,null))}});var _default=componentMeta;exports.default=_default},1448:function(module,exports,__webpack_require__){__webpack_require__(20),__webpack_require__(7),__webpack_require__(48),__webpack_require__(2),Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=StateChange;var _interopRequireWildcard=__webpack_require__(14),_interopRequireDefault=__webpack_require__(1),_toConsumableArray2=_interopRequireDefault(__webpack_require__(121)),_classCallCheck2=_interopRequireDefault(__webpack_require__(28)),_createClass2=_interopRequireDefault(__webpack_require__(29)),_possibleConstructorReturn2=_interopRequireDefault(__webpack_require__(30)),_getPrototypeOf3=_interopRequireDefault(__webpack_require__(26)),_assertThisInitialized2=_interopRequireDefault(__webpack_require__(54)),_inherits2=_interopRequireDefault(__webpack_require__(31)),_defineProperty2=_interopRequireDefault(__webpack_require__(22)),_Button=_interopRequireDefault(__webpack_require__(120)),_Dimensions=_interopRequireDefault(__webpack_require__(161)),_ScrollView=_interopRequireDefault(__webpack_require__(80)),_StyleSheet=_interopRequireDefault(__webpack_require__(4)),_Text=_interopRequireDefault(__webpack_require__(9)),_View=_interopRequireDefault(__webpack_require__(3)),_react=_interopRequireWildcard(__webpack_require__(0)),StateChangeExample=function(_Component){function StateChangeExample(){var _getPrototypeOf2,_this;(0,_classCallCheck2.default)(this,StateChangeExample);for(var _len=arguments.length,args=Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(StateChangeExample)).call.apply(_getPrototypeOf2,[this].concat(args))),(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),"state",{listened:!1,logs:[]}),(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),"toggle",(function(){var listened=_this.state.listened;listened?(_Dimensions.default.removeEventListener("change",_this._handleChange),_this._log("Removed listener")):(_Dimensions.default.addEventListener("change",_this._handleChange),_this._log("Added listener")),_this.setState((function(){return{listened:!listened}}))})),(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),"_handleChange",(function(_ref){var window=_ref.window,screen=_ref.screen;window=JSON.stringify(window,null,2),screen=JSON.stringify(screen,null,2),_this._log("Changed\nwindow = ".concat(window,"\nscreen = ").concat(screen))})),(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),"_log",(function(msg){_this.setState((function(state){return{logs:["".concat((new Date).toTimeString()," - ").concat(msg)].concat((0,_toConsumableArray2.default)(state.logs))}}))})),_this}return(0,_inherits2.default)(StateChangeExample,_Component),(0,_createClass2.default)(StateChangeExample,[{key:"componentWillUnmount",value:function componentWillUnmount(){_Dimensions.default.removeEventListener("change",this._handleChange)}},{key:"render",value:function render(){var _this$state=this.state,logs=_this$state.logs,buttonTitle=_this$state.listened?"Remove listener":"Add listener";return _react.default.createElement(_View.default,null,_react.default.createElement(_Button.default,{onPress:this.toggle,title:buttonTitle}),_react.default.createElement(_ScrollView.default,{style:styles.logs},logs.map((function(log,i){return _react.default.createElement(_Text.default,{key:i,style:styles.log},log)}))))}}]),StateChangeExample}(_react.Component);StateChangeExample.displayName="StateChangeExample";var _ref2=_react.default.createElement(StateChangeExample,null);function StateChange(){return _ref2}StateChange.displayName="StateChange";var styles=_StyleSheet.default.create({logs:{maxHeight:256},log:{fontFamily:"monospace, monospace",marginTop:8,marginBottom:8}});StateChange.__docgenInfo={description:"",methods:[],displayName:"StateChange"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/apis/Dimensions/examples/StateChanges.js"]={name:"StateChange",docgenInfo:StateChange.__docgenInfo,path:"src/apis/Dimensions/examples/StateChanges.js"})},1456:function(module,exports,__webpack_require__){var _interopRequireWildcard=__webpack_require__(14),_interopRequireDefault=__webpack_require__(1);Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.stateChanges=void 0;var _objectSpread2=_interopRequireDefault(__webpack_require__(13)),_extends2=_interopRequireDefault(__webpack_require__(10)),_objectWithoutProperties2=_interopRequireDefault(__webpack_require__(17)),_react2=(_interopRequireDefault(__webpack_require__(0)),__webpack_require__(16)),_blocks=__webpack_require__(19),Stories=_interopRequireWildcard(__webpack_require__(513)),layoutProps={},MDXLayout="wrapper";function MDXContent(_ref){var components=_ref.components,props=(0,_objectWithoutProperties2.default)(_ref,["components"]);return(0,_react2.mdx)(MDXLayout,(0,_extends2.default)({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),(0,_react2.mdx)(_blocks.Meta,{title:"APIs|Dimensions",mdxType:"Meta"}),(0,_react2.mdx)("h1",{id:"dimensions"},"Dimensions"),(0,_react2.mdx)("p",null,"Note: dimensions may change (e.g., due to device rotation) so any rendering\nlogic or styles that depend on these constants should try to call this function\non every render, rather than caching the value."),(0,_react2.mdx)("h2",{id:"methods"},"Methods"),(0,_react2.mdx)("h3",{id:"getdimension"},"get(dimension)"),(0,_react2.mdx)("p",null,"Get a dimension (e.g., ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"window")," or ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"screen"),")."),(0,_react2.mdx)("pre",null,(0,_react2.mdx)("code",(0,_extends2.default)({parentName:"pre"},{className:"language-js"}),"const { height, width } = Dimensions.get('window')\n")),(0,_react2.mdx)("h3",{id:"setdimensions"},"set(dimensions)"),(0,_react2.mdx)("p",null,"This should only be called server-side with an estimate for initial dimensions\nto be used when pre-rendering pages on the server."),(0,_react2.mdx)("pre",null,(0,_react2.mdx)("code",(0,_extends2.default)({parentName:"pre"},{className:"language-js"}),"Dimensions.set({\n  window: {\n    height: estimatedHeight,\n    width: estimatedWidth\n  }\n})\n")),(0,_react2.mdx)("h3",{id:"addeventlistenertype-handler"},"addEventListener(type, handler)"),(0,_react2.mdx)("p",null,"Add an event handler. Supported events:"),(0,_react2.mdx)("ul",null,(0,_react2.mdx)("li",{parentName:"ul"},(0,_react2.mdx)("inlineCode",{parentName:"li"},"change"),": Fires when a property within the ",(0,_react2.mdx)("inlineCode",{parentName:"li"},"Dimensions")," object changes. The argument to the event handler is an object with ",(0,_react2.mdx)("inlineCode",{parentName:"li"},"window")," and ",(0,_react2.mdx)("inlineCode",{parentName:"li"},"screen")," properties whose values are the same as the return values of ",(0,_react2.mdx)("inlineCode",{parentName:"li"},"Dimensions.get('window')")," and ",(0,_react2.mdx)("inlineCode",{parentName:"li"},"Dimensions.get('screen')"),", respectively.")),(0,_react2.mdx)("h3",{id:"removeeventlistenertype-handler"},"removeEventListener(type, handler)"),(0,_react2.mdx)("p",null,"Remove an event handler."),(0,_react2.mdx)("h2",{id:"example"},"Example"),(0,_react2.mdx)(_blocks.Preview,{withSource:"none",mdxType:"Preview"},(0,_react2.mdx)(_blocks.Story,{name:"stateChanges",mdxType:"Story"},(0,_react2.mdx)(Stories.stateChanges,null))))}MDXContent.isMDXComponent=!0;var stateChanges=function stateChanges(){return(0,_react2.mdx)(Stories.stateChanges,null)};exports.stateChanges=stateChanges,(stateChanges.story={}).name="stateChanges",stateChanges.story.parameters={mdxSource:""};var componentMeta={title:"APIs|Dimensions",includeStories:["stateChanges"]},mdxStoryNameToKey={stateChanges:"stateChanges"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=(0,_objectSpread2.default)({},componentMeta.parameters.docs||{},{page:function page(){return(0,_react2.mdx)(_blocks.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},(0,_react2.mdx)(MDXContent,null))}});var _default=componentMeta;exports.default=_default},1457:function(module,exports,__webpack_require__){var _interopRequireDefault=__webpack_require__(1);__webpack_require__(6),__webpack_require__(23),__webpack_require__(20),__webpack_require__(64),__webpack_require__(47),__webpack_require__(305),__webpack_require__(73),__webpack_require__(2),__webpack_require__(136),__webpack_require__(137),__webpack_require__(8),__webpack_require__(98),__webpack_require__(52),Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=LayoutRTL;var _defineProperty2=_interopRequireDefault(__webpack_require__(22)),_assertThisInitialized2=_interopRequireDefault(__webpack_require__(54)),_classCallCheck2=_interopRequireDefault(__webpack_require__(28)),_createClass2=_interopRequireDefault(__webpack_require__(29)),_possibleConstructorReturn2=_interopRequireDefault(__webpack_require__(30)),_getPrototypeOf3=_interopRequireDefault(__webpack_require__(26)),_inherits2=_interopRequireDefault(__webpack_require__(31)),_react=_interopRequireDefault(__webpack_require__(0)),_Page=_interopRequireDefault(__webpack_require__(1458)),_Block=_interopRequireDefault(__webpack_require__(1460)),_Animated=_interopRequireDefault(__webpack_require__(347)),_Button=_interopRequireDefault(__webpack_require__(120)),_I18nManager=_interopRequireDefault(__webpack_require__(112)),_Image=_interopRequireDefault(__webpack_require__(69)),_PanResponder=_interopRequireDefault(__webpack_require__(348)),_PixelRatio=_interopRequireDefault(__webpack_require__(354)),_Platform=_interopRequireDefault(__webpack_require__(157)),_ScrollView=_interopRequireDefault(__webpack_require__(80)),_StyleSheet=_interopRequireDefault(__webpack_require__(4)),_Text=_interopRequireDefault(__webpack_require__(9)),_TouchableWithoutFeedback=_interopRequireDefault(__webpack_require__(198)),_Switch=_interopRequireDefault(__webpack_require__(99)),_View=_interopRequireDefault(__webpack_require__(3));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var source,i=1;i"};var componentMeta={title:"APIs|I18nManager",includeStories:["layoutRtl"]},mdxStoryNameToKey={layoutRTL:"layoutRtl"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=(0,_objectSpread2.default)({},componentMeta.parameters.docs||{},{page:function page(){return(0,_react2.mdx)(_blocks.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},(0,_react2.mdx)(MDXContent,null))}});var _default=componentMeta;exports.default=_default},1463:function(module,exports,__webpack_require__){__webpack_require__(2),Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=OpenURL;var _interopRequireWildcard=__webpack_require__(14),_interopRequireDefault=__webpack_require__(1),_classCallCheck2=_interopRequireDefault(__webpack_require__(28)),_createClass2=_interopRequireDefault(__webpack_require__(29)),_possibleConstructorReturn2=_interopRequireDefault(__webpack_require__(30)),_getPrototypeOf2=_interopRequireDefault(__webpack_require__(26)),_inherits2=_interopRequireDefault(__webpack_require__(31)),_Linking=_interopRequireDefault(__webpack_require__(1464)),_StyleSheet=_interopRequireDefault(__webpack_require__(4)),_Text=_interopRequireDefault(__webpack_require__(9)),_View=_interopRequireDefault(__webpack_require__(3)),_react=_interopRequireWildcard(__webpack_require__(0)),url="https://mathiasbynens.github.io/rel-noopener/malicious.html",OpenURLExample=function(_PureComponent){function OpenURLExample(){return(0,_classCallCheck2.default)(this,OpenURLExample),(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(OpenURLExample).apply(this,arguments))}return(0,_inherits2.default)(OpenURLExample,_PureComponent),(0,_createClass2.default)(OpenURLExample,[{key:"handlePress",value:function handlePress(){_Linking.default.canOpenURL(url).then((function(){return _Linking.default.openURL(url)}))}},{key:"render",value:function render(){return _react.default.createElement(_View.default,null,_react.default.createElement(_Text.default,{onPress:this.handlePress,style:styles.text},"Linking.openURL"),_react.default.createElement(_Text.default,{accessibilityRole:"link",href:"https://mathiasbynens.github.io/rel-noopener/malicious.html",style:styles.text,target:"_blank"},'target="_blank"'))}}]),OpenURLExample}(_react.PureComponent);OpenURLExample.displayName="OpenURLExample";var _ref=_react.default.createElement(OpenURLExample,null);function OpenURL(){return _ref}OpenURL.displayName="OpenURL";var styles=_StyleSheet.default.create({text:{borderRadius:5,borderStyle:"solid",borderWidth:1,marginVertical:10,padding:10}});OpenURL.__docgenInfo={description:"",methods:[],displayName:"OpenURL"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/apis/Linking/examples/OpenURL.js"]={name:"OpenURL",docgenInfo:OpenURL.__docgenInfo,path:"src/apis/Linking/examples/OpenURL.js"})},1464:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var fbjs_lib_ExecutionEnvironment__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(24),fbjs_lib_invariant__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(5),fbjs_lib_invariant__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(fbjs_lib_invariant__WEBPACK_IMPORTED_MODULE_1__),initialURL=fbjs_lib_ExecutionEnvironment__WEBPACK_IMPORTED_MODULE_0__.canUseDOM?window.location.href:"",Linking={addEventListener:function addEventListener(){},removeEventListener:function removeEventListener(){},canOpenURL:function canOpenURL(){return Promise.resolve(!0)},getInitialURL:function getInitialURL(){return Promise.resolve(initialURL)},openURL:function openURL(url){try{return open(url),Promise.resolve()}catch(e){return Promise.reject(e)}},_validateURL:function _validateURL(url){fbjs_lib_invariant__WEBPACK_IMPORTED_MODULE_1___default()("string"==typeof url,"Invalid URL: should be a string. Was: "+url),fbjs_lib_invariant__WEBPACK_IMPORTED_MODULE_1___default()(url,"Invalid URL: cannot be empty")}},open=function open(url){fbjs_lib_ExecutionEnvironment__WEBPACK_IMPORTED_MODULE_0__.canUseDOM&&(window.location=new URL(url,window.location).toString())};__webpack_exports__.default=Linking},1465:function(module,exports,__webpack_require__){var _interopRequireWildcard=__webpack_require__(14),_interopRequireDefault=__webpack_require__(1);Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.openUrl=void 0;var _objectSpread2=_interopRequireDefault(__webpack_require__(13)),_extends2=_interopRequireDefault(__webpack_require__(10)),_objectWithoutProperties2=_interopRequireDefault(__webpack_require__(17)),_react2=(_interopRequireDefault(__webpack_require__(0)),__webpack_require__(16)),_blocks=__webpack_require__(19),Stories=_interopRequireWildcard(__webpack_require__(515)),layoutProps={},MDXLayout="wrapper";function MDXContent(_ref){var components=_ref.components,props=(0,_objectWithoutProperties2.default)(_ref,["components"]);return(0,_react2.mdx)(MDXLayout,(0,_extends2.default)({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),(0,_react2.mdx)(_blocks.Meta,{title:"APIs|Linking",mdxType:"Meta"}),(0,_react2.mdx)("h1",{id:"linking"},"Linking"),(0,_react2.mdx)("p",null,"Linking gives you a general interface for securely opening external URLs from JavaScript."),(0,_react2.mdx)("h2",{id:"methods"},"Methods"),(0,_react2.mdx)("h3",{id:"canopenurlurl"},"canOpenURL(url)"),(0,_react2.mdx)("p",null,"Returns a ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"Promise")," that resolves to a boolean indicating whether the app can open the URL."),(0,_react2.mdx)("h3",{id:"getinitialurl"},"getInitialURL()"),(0,_react2.mdx)("p",null,"Returns a ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"Promise")," that resolves to the string of the URL that initially loaded the app."),(0,_react2.mdx)("h3",{id:"openurlurl"},"openURL(url)"),(0,_react2.mdx)("p",null,"Try to open the given url in a secure fashion. The method returns a ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"Promise"),"\nobject. If the url opens, the promise is resolved. If not, the promise is\nrejected."),(0,_react2.mdx)("h2",{id:"example"},"Example"),(0,_react2.mdx)(_blocks.Preview,{withSource:"none",mdxType:"Preview"},(0,_react2.mdx)(_blocks.Story,{name:"openURL",mdxType:"Story"},(0,_react2.mdx)(Stories.openURL,null))))}MDXContent.isMDXComponent=!0;var openUrl=function openUrl(){return(0,_react2.mdx)(Stories.openURL,null)};exports.openUrl=openUrl,(openUrl.story={}).name="openURL",openUrl.story.parameters={mdxSource:""};var componentMeta={title:"APIs|Linking",includeStories:["openUrl"]},mdxStoryNameToKey={openURL:"openUrl"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=(0,_objectSpread2.default)({},componentMeta.parameters.docs||{},{page:function page(){return(0,_react2.mdx)(_blocks.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},(0,_react2.mdx)(MDXContent,null))}});var _default=componentMeta;exports.default=_default},1466:function(module,exports,__webpack_require__){var _interopRequireWildcard=__webpack_require__(14),_interopRequireDefault=__webpack_require__(1);Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.locationXy=exports.draggableCircle=void 0;var _objectSpread2=_interopRequireDefault(__webpack_require__(13)),_extends2=_interopRequireDefault(__webpack_require__(10)),_objectWithoutProperties2=_interopRequireDefault(__webpack_require__(17)),_react2=(_interopRequireDefault(__webpack_require__(0)),__webpack_require__(16)),_blocks=__webpack_require__(19),Stories=_interopRequireWildcard(__webpack_require__(1467)),layoutProps={},MDXLayout="wrapper";function MDXContent(_ref){var components=_ref.components,props=(0,_objectWithoutProperties2.default)(_ref,["components"]);return(0,_react2.mdx)(MDXLayout,(0,_extends2.default)({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),(0,_react2.mdx)(_blocks.Meta,{title:"APIs|PanResponder",mdxType:"Meta"}),(0,_react2.mdx)("h1",{id:"panresponder"},"PanResponder"),(0,_react2.mdx)("h2",{id:"examples"},"Examples"),(0,_react2.mdx)(_blocks.Preview,{withSource:"none",mdxType:"Preview"},(0,_react2.mdx)(_blocks.Story,{name:"draggableCircle",mdxType:"Story"},(0,_react2.mdx)(Stories.draggableCircle,null))),(0,_react2.mdx)(_blocks.Preview,{withSource:"none",mdxType:"Preview"},(0,_react2.mdx)(_blocks.Story,{name:"locationXY",mdxType:"Story"},(0,_react2.mdx)(Stories.locationXY,null))))}MDXContent.isMDXComponent=!0;var draggableCircle=function draggableCircle(){return(0,_react2.mdx)(Stories.draggableCircle,null)};exports.draggableCircle=draggableCircle,(draggableCircle.story={}).name="draggableCircle",draggableCircle.story.parameters={mdxSource:""};var locationXy=function locationXy(){return(0,_react2.mdx)(Stories.locationXY,null)};exports.locationXy=locationXy,(locationXy.story={}).name="locationXY",locationXy.story.parameters={mdxSource:""};var componentMeta={title:"APIs|PanResponder",includeStories:["draggableCircle","locationXy"]},mdxStoryNameToKey={draggableCircle:"draggableCircle",locationXY:"locationXy"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=(0,_objectSpread2.default)({},componentMeta.parameters.docs||{},{page:function page(){return(0,_react2.mdx)(_blocks.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},(0,_react2.mdx)(MDXContent,null))}});var _default=componentMeta;exports.default=_default},1467:function(module,exports,__webpack_require__){var _interopRequireDefault=__webpack_require__(1);__webpack_require__(2),Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"draggableCircle",{enumerable:!0,get:function get(){return _DraggableCircle.default}}),Object.defineProperty(exports,"locationXY",{enumerable:!0,get:function get(){return _LocationXY.default}});var _DraggableCircle=_interopRequireDefault(__webpack_require__(1468)),_LocationXY=_interopRequireDefault(__webpack_require__(1469))},1468:function(module,exports,__webpack_require__){__webpack_require__(2),Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _interopRequireWildcard=__webpack_require__(14),_interopRequireDefault=__webpack_require__(1),_extends2=_interopRequireDefault(__webpack_require__(10)),_classCallCheck2=_interopRequireDefault(__webpack_require__(28)),_createClass2=_interopRequireDefault(__webpack_require__(29)),_possibleConstructorReturn2=_interopRequireDefault(__webpack_require__(30)),_getPrototypeOf2=_interopRequireDefault(__webpack_require__(26)),_assertThisInitialized2=_interopRequireDefault(__webpack_require__(54)),_inherits2=_interopRequireDefault(__webpack_require__(31)),_defineProperty2=_interopRequireDefault(__webpack_require__(22)),_react=_interopRequireWildcard(__webpack_require__(0)),_PanResponder=_interopRequireDefault(__webpack_require__(348)),_StyleSheet=_interopRequireDefault(__webpack_require__(4)),_View=_interopRequireDefault(__webpack_require__(3)),DraggableCircle=function(_PureComponent){function DraggableCircle(){var _this;return(0,_classCallCheck2.default)(this,DraggableCircle),_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(DraggableCircle).call(this)),(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),"_panResponder",{}),(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),"_previousLeft",0),(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),"_previousTop",0),(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),"_circleStyles",{}),(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),"circle",null),(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),"_setCircleRef",(function(circle){_this.circle=circle})),(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),"_handleStartShouldSetPanResponder",(function(){return!0})),(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),"_handleMoveShouldSetPanResponder",(function(){return!0})),(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),"_handlePanResponderGrant",(function(){_this._highlight()})),(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),"_handlePanResponderMove",(function(e,gestureState){_this._circleStyles.style.left=_this._previousLeft+gestureState.dx,_this._circleStyles.style.top=_this._previousTop+gestureState.dy,_this._updateNativeStyles()})),(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),"_handlePanResponderEnd",(function(e,gestureState){_this._unHighlight(),_this._previousLeft+=gestureState.dx,_this._previousTop+=gestureState.dy})),_this._panResponder=_PanResponder.default.create({onStartShouldSetPanResponder:_this._handleStartShouldSetPanResponder,onMoveShouldSetPanResponder:_this._handleMoveShouldSetPanResponder,onPanResponderGrant:_this._handlePanResponderGrant,onPanResponderMove:_this._handlePanResponderMove,onPanResponderRelease:_this._handlePanResponderEnd,onPanResponderTerminate:_this._handlePanResponderEnd}),_this._previousLeft=20,_this._previousTop=84,_this._circleStyles={style:{left:_this._previousLeft,top:_this._previousTop,backgroundColor:"green"}},_this}return(0,_inherits2.default)(DraggableCircle,_PureComponent),(0,_createClass2.default)(DraggableCircle,[{key:"componentDidMount",value:function componentDidMount(){this._updateNativeStyles()}},{key:"render",value:function render(){return _react.default.createElement(_View.default,{style:styles.container},_react.default.createElement(_View.default,(0,_extends2.default)({ref:this._setCircleRef,style:styles.circle},this._panResponder.panHandlers)))}},{key:"_highlight",value:function _highlight(){this._circleStyles.style.backgroundColor="blue",this._updateNativeStyles()}},{key:"_unHighlight",value:function _unHighlight(){this._circleStyles.style.backgroundColor="green",this._updateNativeStyles()}},{key:"_updateNativeStyles",value:function _updateNativeStyles(){this.circle&&this.circle.setNativeProps(this._circleStyles)}}]),DraggableCircle}(_react.PureComponent);exports.default=DraggableCircle,DraggableCircle.displayName="DraggableCircle";var styles=_StyleSheet.default.create({circle:{width:80,height:80,borderRadius:40,position:"absolute",left:0,top:0,touchAction:"none"},container:{flex:1,minHeight:400,paddingTop:64}});DraggableCircle.__docgenInfo={description:"",methods:[{name:"_setCircleRef",docblock:null,modifiers:[],params:[{name:"circle",type:null}],returns:null},{name:"_highlight",docblock:null,modifiers:[],params:[],returns:null},{name:"_unHighlight",docblock:null,modifiers:[],params:[],returns:null},{name:"_updateNativeStyles",docblock:null,modifiers:[],params:[],returns:null},{name:"_handleStartShouldSetPanResponder",docblock:null,modifiers:[],params:[{name:"e",type:{name:"Object",alias:"Object"}},{name:"gestureState",type:{name:"Object",alias:"Object"}}],returns:{type:{name:"boolean"}}},{name:"_handleMoveShouldSetPanResponder",docblock:null,modifiers:[],params:[{name:"e",type:{name:"Object",alias:"Object"}},{name:"gestureState",type:{name:"Object",alias:"Object"}}],returns:{type:{name:"boolean"}}},{name:"_handlePanResponderGrant",docblock:null,modifiers:[],params:[{name:"e",type:{name:"Object",alias:"Object"}},{name:"gestureState",type:{name:"Object",alias:"Object"}}],returns:null},{name:"_handlePanResponderMove",docblock:null,modifiers:[],params:[{name:"e",type:{name:"Object",alias:"Object"}},{name:"gestureState",type:{name:"Object",alias:"Object"}}],returns:null},{name:"_handlePanResponderEnd",docblock:null,modifiers:[],params:[{name:"e",type:{name:"Object",alias:"Object"}},{name:"gestureState",type:{name:"Object",alias:"Object"}}],returns:null}],displayName:"DraggableCircle"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/apis/PanResponder/examples/DraggableCircle.js"]={name:"DraggableCircle",docgenInfo:DraggableCircle.__docgenInfo,path:"src/apis/PanResponder/examples/DraggableCircle.js"})},1469:function(module,exports,__webpack_require__){__webpack_require__(6),__webpack_require__(64),__webpack_require__(47),__webpack_require__(73),__webpack_require__(2),__webpack_require__(136),__webpack_require__(137),__webpack_require__(8),__webpack_require__(52),Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _interopRequireWildcard=__webpack_require__(14),_interopRequireDefault=__webpack_require__(1),_extends2=_interopRequireDefault(__webpack_require__(10)),_classCallCheck2=_interopRequireDefault(__webpack_require__(28)),_createClass2=_interopRequireDefault(__webpack_require__(29)),_possibleConstructorReturn2=_interopRequireDefault(__webpack_require__(30)),_getPrototypeOf2=_interopRequireDefault(__webpack_require__(26)),_assertThisInitialized2=_interopRequireDefault(__webpack_require__(54)),_inherits2=_interopRequireDefault(__webpack_require__(31)),_defineProperty2=_interopRequireDefault(__webpack_require__(22)),_react=_interopRequireWildcard(__webpack_require__(0)),_StyleSheet=_interopRequireDefault(__webpack_require__(4)),_View=_interopRequireDefault(__webpack_require__(3)),_PanResponder=_interopRequireDefault(__webpack_require__(348));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}var LocationXY=function(_Component){function LocationXY(){var _this;return(0,_classCallCheck2.default)(this,LocationXY),_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(LocationXY).call(this)),(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),"_handlePanResponderMove",(function(e,gestureState){console.log(e.nativeEvent.locationX,e.nativeEvent.locationY),_this.setState((function(state){return function _objectSpread(target){for(var source,i=1;i\n")),(0,_react2.mdx)("h3",{id:"roundtonearestpixelnumber"},"roundToNearestPixel(number)"),(0,_react2.mdx)("p",null,"Rounds a layout size (dp) to the nearest layout size that corresponds to an\ninteger number of pixels. For example, on a device with a PixelRatio of 3,\n",(0,_react2.mdx)("inlineCode",{parentName:"p"},"PixelRatio.roundToNearestPixel(8.4) = 8.33"),", which corresponds to exactly\n",(0,_react2.mdx)("inlineCode",{parentName:"p"},"(8.33 * 3) = 25")," pixels."))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};exports.__page=__page,__page.story={parameters:{docsOnly:!0}};var componentMeta={title:"APIs|PixelRatio",includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=(0,_objectSpread2.default)({},componentMeta.parameters.docs||{},{page:function page(){return(0,_react2.mdx)(_blocks.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},(0,_react2.mdx)(MDXContent,null))}});var _default=componentMeta;exports.default=_default},1471:function(module,exports,__webpack_require__){var _interopRequireDefault=__webpack_require__(1);Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.__page=void 0;var _objectSpread2=_interopRequireDefault(__webpack_require__(13)),_extends2=_interopRequireDefault(__webpack_require__(10)),_objectWithoutProperties2=_interopRequireDefault(__webpack_require__(17)),_react2=(_interopRequireDefault(__webpack_require__(0)),__webpack_require__(16)),_blocks=__webpack_require__(19),layoutProps={},MDXLayout="wrapper";function MDXContent(_ref){var components=_ref.components,props=(0,_objectWithoutProperties2.default)(_ref,["components"]);return(0,_react2.mdx)(MDXLayout,(0,_extends2.default)({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),(0,_react2.mdx)(_blocks.Meta,{title:"APIs|Platform",mdxType:"Meta"}),(0,_react2.mdx)("h1",{id:"platform"},"Platform"),(0,_react2.mdx)("p",null,"Detect what is the platform in which the app is running. This piece of\nfunctionality can be useful when only small parts of a component are platform\nspecific."),(0,_react2.mdx)("h2",{id:"properties"},"Properties"),(0,_react2.mdx)("h3",{id:"os"},"OS"),(0,_react2.mdx)("p",null,(0,_react2.mdx)("inlineCode",{parentName:"p"},"Platform.OS")," will be ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"web")," when running in a Web browser."),(0,_react2.mdx)("pre",null,(0,_react2.mdx)("code",(0,_extends2.default)({parentName:"pre"},{className:"language-js"}),"import { Platform } from 'react-native';\n\nconst styles = StyleSheet.create({\n  height: (Platform.OS === 'web') ? 200 : 100,\n});\n")),(0,_react2.mdx)("h2",{id:"methods"},"Methods"),(0,_react2.mdx)("h3",{id:"selectconfig"},"select(config)"),(0,_react2.mdx)("p",null,(0,_react2.mdx)("inlineCode",{parentName:"p"},"Platform.select")," takes an object containing ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"Platform.OS")," as keys and returns\nthe value for the platform you are currently running on."),(0,_react2.mdx)("pre",null,(0,_react2.mdx)("code",(0,_extends2.default)({parentName:"pre"},{className:"language-js"}),"import { Platform } from 'react-native';\n\nconst containerStyles = {\n  flex: 1,\n  ...Platform.select({\n    android: {\n      backgroundColor: 'blue'\n    },\n    ios: {\n      backgroundColor: 'red'\n    },\n    web: {\n      backgroundColor: 'green'\n    }\n  })\n});\n")))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};exports.__page=__page,__page.story={parameters:{docsOnly:!0}};var componentMeta={title:"APIs|Platform",includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=(0,_objectSpread2.default)({},componentMeta.parameters.docs||{},{page:function page(){return(0,_react2.mdx)(_blocks.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},(0,_react2.mdx)(MDXContent,null))}});var _default=componentMeta;exports.default=_default},1472:function(module,exports,__webpack_require__){var _interopRequireDefault=__webpack_require__(1);Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.__page=void 0;var _objectSpread2=_interopRequireDefault(__webpack_require__(13)),_extends2=_interopRequireDefault(__webpack_require__(10)),_objectWithoutProperties2=_interopRequireDefault(__webpack_require__(17)),_react2=(_interopRequireDefault(__webpack_require__(0)),__webpack_require__(16)),_blocks=__webpack_require__(19),layoutProps={},MDXLayout="wrapper";function MDXContent(_ref){var components=_ref.components,props=(0,_objectWithoutProperties2.default)(_ref,["components"]);return(0,_react2.mdx)(MDXLayout,(0,_extends2.default)({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),(0,_react2.mdx)(_blocks.Meta,{title:"APIs|StyleSheet",mdxType:"Meta"}),(0,_react2.mdx)("h1",{id:"stylesheet"},"StyleSheet"),(0,_react2.mdx)("p",null,"The StyleSheet abstraction converts predefined styles to (vendor-prefixed) CSS\nwithout requiring a compile-time step. Styles that cannot be resolved outside of\nthe render loop (e.g., dynamic positioning) are usually applied as inline\nstyles."),(0,_react2.mdx)("h2",{id:"methods"},"Methods"),(0,_react2.mdx)("h3",{id:"composestyle1-style2"},"compose(style1, style2)"),(0,_react2.mdx)("p",null,"Combines two styles such that the last style overrides properties of the first\nstyle. If either style is falsy, the other one is returned without allocating an\narray, saving allocations and maintaining reference equality."),(0,_react2.mdx)("pre",null,(0,_react2.mdx)("code",(0,_extends2.default)({parentName:"pre"},{className:"language-js"}),"StyleSheet.compose(style1, style2);\n")),(0,_react2.mdx)("h3",{id:"createstyles"},"create(styles)"),(0,_react2.mdx)("p",null,"Each key of the object passed to ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"create")," must define a style object. The\nreturned object replaces style objects with IDs."),(0,_react2.mdx)("pre",null,(0,_react2.mdx)("code",(0,_extends2.default)({parentName:"pre"},{className:"language-js"}),"const styles = StyleSheet.create({\n  container: {\n    borderRadius: 4,\n    borderWidth: 0.5,\n    borderColor: '#d6d7da',\n  },\n  title: {\n    fontSize: 19,\n    fontWeight: 'bold',\n  }\n})\n")),(0,_react2.mdx)("h3",{id:"flattenstyle"},"flatten(style)"),(0,_react2.mdx)("p",null,"Lookup a style object by ID or flatten an array of styles into a single style\nobject."),(0,_react2.mdx)("pre",null,(0,_react2.mdx)("code",(0,_extends2.default)({parentName:"pre"},{className:"language-js"}),"StyleSheet.flatten(styles.listItem);\nStyleSheet.flatten([styles.listItem, styles.selectedListItem]);\n")),(0,_react2.mdx)("h2",{id:"properties"},"Properties"),(0,_react2.mdx)("h3",{id:"absolutefill"},"absoluteFill"),(0,_react2.mdx)("p",null,"A very common pattern is to create overlays with position absolute and zero\npositioning, so ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"absoluteFill")," can be used for convenience and to reduce\nduplication of these repeated styles."),(0,_react2.mdx)("pre",null,(0,_react2.mdx)("code",(0,_extends2.default)({parentName:"pre"},{className:"language-js"}),"\n")),(0,_react2.mdx)("h3",{id:"absolutefillobject"},"absoluteFillObject"),(0,_react2.mdx)("p",null,"Sometimes you may want ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"absoluteFill")," but with a couple tweaks -\n",(0,_react2.mdx)("inlineCode",{parentName:"p"},"absoluteFillObject")," can be used to create a customized entry in a ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"StyleSheet")),(0,_react2.mdx)("pre",null,(0,_react2.mdx)("code",(0,_extends2.default)({parentName:"pre"},{className:"language-js"}),"const styles = StyleSheet.create({\n  container: {\n    ...StyleSheet.absoluteFillObject,\n    backgroundColor: 'transparent',\n    top: 10\n  }\n});\n")),(0,_react2.mdx)("h3",{id:"hairlinewidth"},"hairlineWidth"),(0,_react2.mdx)("p",null,"Equal to 1px. This is not implemented using screen density as browsers may\nround sub-pixel values down to ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"0"),", causing the line not to be rendered."))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};exports.__page=__page,__page.story={parameters:{docsOnly:!0}};var componentMeta={title:"APIs|StyleSheet",includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=(0,_objectSpread2.default)({},componentMeta.parameters.docs||{},{page:function page(){return(0,_react2.mdx)(_blocks.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},(0,_react2.mdx)(MDXContent,null))}});var _default=componentMeta;exports.default=_default},1473:function(module,exports,__webpack_require__){var _interopRequireDefault=__webpack_require__(1);Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.__page=void 0;var _objectSpread2=_interopRequireDefault(__webpack_require__(13)),_extends2=_interopRequireDefault(__webpack_require__(10)),_objectWithoutProperties2=_interopRequireDefault(__webpack_require__(17)),_react2=(_interopRequireDefault(__webpack_require__(0)),__webpack_require__(16)),_blocks=__webpack_require__(19),layoutProps={},MDXLayout="wrapper";function MDXContent(_ref){var components=_ref.components,props=(0,_objectWithoutProperties2.default)(_ref,["components"]);return(0,_react2.mdx)(MDXLayout,(0,_extends2.default)({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),(0,_react2.mdx)(_blocks.Meta,{title:"APIs|Vibration",mdxType:"Meta"}),(0,_react2.mdx)("h1",{id:"vibration"},"Vibration"),(0,_react2.mdx)("p",null,"Vibration is described as a pattern of on-off pulses, which may be of varying\nlengths. The pattern may consist of either a single integer, describing the\nnumber of milliseconds to vibrate, or an array of integers describing a pattern\nof vibrations and pauses. Vibration is controlled with a single method:\n",(0,_react2.mdx)("inlineCode",{parentName:"p"},"Vibration.vibrate()"),"."),(0,_react2.mdx)("p",null,"The vibration is asynchronous so this method will return immediately. There will\nbe no effect on devices that do not support vibration."),(0,_react2.mdx)("h2",{id:"methods"},"Methods"),(0,_react2.mdx)("h3",{id:"cancel"},"cancel()"),(0,_react2.mdx)("p",null,"Stop the vibration"),(0,_react2.mdx)("h3",{id:"vibratepattern"},"vibrate(pattern)"),(0,_react2.mdx)("p",null,"Start the vibration pattern"),(0,_react2.mdx)("pre",null,(0,_react2.mdx)("code",(0,_extends2.default)({parentName:"pre"},{className:"language-js"}),"// Vibrate once for 200ms\nVibration.vibrate(200);\nVibration.vibrate([200]);\n\n// Vibrate for 200ms, pause for 100ms, vibrate for 200ms:\nVibration.vibrate([200, 100, 200]);\n")))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};exports.__page=__page,__page.story={parameters:{docsOnly:!0}};var componentMeta={title:"APIs|Vibration",includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=(0,_objectSpread2.default)({},componentMeta.parameters.docs||{},{page:function page(){return(0,_react2.mdx)(_blocks.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},(0,_react2.mdx)(MDXContent,null))}});var _default=componentMeta;exports.default=_default},1474:function(module,exports,__webpack_require__){var _interopRequireWildcard=__webpack_require__(14),_interopRequireDefault=__webpack_require__(1);Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.size=exports.hidesWhenStopped=exports.color=exports.animating=void 0;var _objectSpread2=_interopRequireDefault(__webpack_require__(13)),_extends2=_interopRequireDefault(__webpack_require__(10)),_objectWithoutProperties2=_interopRequireDefault(__webpack_require__(17)),_react2=(_interopRequireDefault(__webpack_require__(0)),__webpack_require__(16)),_blocks=__webpack_require__(19),Stories=_interopRequireWildcard(__webpack_require__(1475)),layoutProps={},MDXLayout="wrapper";function MDXContent(_ref){var components=_ref.components,props=(0,_objectWithoutProperties2.default)(_ref,["components"]);return(0,_react2.mdx)(MDXLayout,(0,_extends2.default)({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),(0,_react2.mdx)(_blocks.Meta,{title:"Components|ActivityIndicator",mdxType:"Meta"}),(0,_react2.mdx)("h1",{id:"activityindicator"},"ActivityIndicator"),(0,_react2.mdx)("p",null,"Displays a customizable activity indicator."),(0,_react2.mdx)("h2",{id:"props"},"Props"),(0,_react2.mdx)("table",null,(0,_react2.mdx)("thead",{parentName:"table"},(0,_react2.mdx)("tr",{parentName:"thead"},(0,_react2.mdx)("th",(0,_extends2.default)({parentName:"tr"},{align:null}),"Name"),(0,_react2.mdx)("th",(0,_extends2.default)({parentName:"tr"},{align:null}),"Type"),(0,_react2.mdx)("th",(0,_extends2.default)({parentName:"tr"},{align:null}),"Default"))),(0,_react2.mdx)("tbody",{parentName:"table"},(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}),"...ViewProps"),(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null})),(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}))),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}),"animating"),(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}),"?boolean"),(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}),"true")),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}),"color"),(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}),"?string"),(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}),"'#1976D2'")),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}),"hidesWhenStopped"),(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}),"?boolean"),(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}),"true")),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}),"size"),(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}),"'small' ","|"," 'large' ","|"," number"),(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}),"'small'")))),(0,_react2.mdx)("h3",{id:"animating"},"animating"),(0,_react2.mdx)("p",null,"Controls whether to show the indicator or hide it."),(0,_react2.mdx)(_blocks.Preview,{withSource:"none",mdxType:"Preview"},(0,_react2.mdx)(_blocks.Story,{name:"animating",mdxType:"Story"},(0,_react2.mdx)(Stories.animating,null))),(0,_react2.mdx)("h3",{id:"color"},"color"),(0,_react2.mdx)("p",null,"Customize the foreground color of the indicator."),(0,_react2.mdx)(_blocks.Preview,{withSource:"none",mdxType:"Preview"},(0,_react2.mdx)(_blocks.Story,{name:"color",mdxType:"Story"},(0,_react2.mdx)(Stories.color,null))),(0,_react2.mdx)("h3",{id:"hideswhenstopped"},"hidesWhenStopped"),(0,_react2.mdx)("p",null,"Control whether to show the indicator when it is not animating."),(0,_react2.mdx)(_blocks.Preview,{withSource:"none",mdxType:"Preview"},(0,_react2.mdx)(_blocks.Story,{name:"hidesWhenStopped",mdxType:"Story"},(0,_react2.mdx)(Stories.hidesWhenStopped,null))),(0,_react2.mdx)("h3",{id:"size"},"size"),(0,_react2.mdx)("p",null,"Customize the size of the indicator. ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"small")," has a height of ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"20px"),", large has a\nheight of ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"36px"),". Scale transforms can also be used."),(0,_react2.mdx)(_blocks.Preview,{withSource:"none",mdxType:"Preview"},(0,_react2.mdx)(_blocks.Story,{name:"size",mdxType:"Story"},(0,_react2.mdx)(Stories.size,null))))}MDXContent.isMDXComponent=!0;var animating=function animating(){return(0,_react2.mdx)(Stories.animating,null)};exports.animating=animating,(animating.story={}).name="animating",animating.story.parameters={mdxSource:""};var color=function color(){return(0,_react2.mdx)(Stories.color,null)};exports.color=color,(color.story={}).name="color",color.story.parameters={mdxSource:""};var hidesWhenStopped=function hidesWhenStopped(){return(0,_react2.mdx)(Stories.hidesWhenStopped,null)};exports.hidesWhenStopped=hidesWhenStopped,(hidesWhenStopped.story={}).name="hidesWhenStopped",hidesWhenStopped.story.parameters={mdxSource:""};var size=function size(){return(0,_react2.mdx)(Stories.size,null)};exports.size=size,(size.story={}).name="size",size.story.parameters={mdxSource:""};var componentMeta={title:"Components|ActivityIndicator",includeStories:["animating","color","hidesWhenStopped","size"]},mdxStoryNameToKey={animating:"animating",color:"color",hidesWhenStopped:"hidesWhenStopped",size:"size"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=(0,_objectSpread2.default)({},componentMeta.parameters.docs||{},{page:function page(){return(0,_react2.mdx)(_blocks.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},(0,_react2.mdx)(MDXContent,null))}});var _default=componentMeta;exports.default=_default},1475:function(module,exports,__webpack_require__){var _interopRequireDefault=__webpack_require__(1);__webpack_require__(2),Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"animating",{enumerable:!0,get:function get(){return _Animating.default}}),Object.defineProperty(exports,"color",{enumerable:!0,get:function get(){return _Color.default}}),Object.defineProperty(exports,"hidesWhenStopped",{enumerable:!0,get:function get(){return _HidesWhenStopped.default}}),Object.defineProperty(exports,"size",{enumerable:!0,get:function get(){return _Size.default}});var _Animating=_interopRequireDefault(__webpack_require__(1476)),_Color=_interopRequireDefault(__webpack_require__(1477)),_HidesWhenStopped=_interopRequireDefault(__webpack_require__(1478)),_Size=_interopRequireDefault(__webpack_require__(1479))},1476:function(module,exports,__webpack_require__){var _interopRequireDefault=__webpack_require__(1);__webpack_require__(2),Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=Animating;var _ActivityIndicator=_interopRequireDefault(__webpack_require__(199)),_StyleSheet=_interopRequireDefault(__webpack_require__(4)),_View=_interopRequireDefault(__webpack_require__(3)),_react=_interopRequireDefault(__webpack_require__(0)),_ref=_react.default.createElement(_ActivityIndicator.default,null),_ref2=_react.default.createElement(_ActivityIndicator.default,{animating:!1});function Animating(){return _react.default.createElement(_View.default,{style:styles.horizontal},_ref,_ref2)}Animating.displayName="Animating";var styles=_StyleSheet.default.create({horizontal:{alignItems:"center",flexDirection:"row"}});Animating.__docgenInfo={description:"",methods:[],displayName:"Animating"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/ActivityIndicator/examples/Animating.js"]={name:"Animating",docgenInfo:Animating.__docgenInfo,path:"src/components/ActivityIndicator/examples/Animating.js"})},1477:function(module,exports,__webpack_require__){var _interopRequireDefault=__webpack_require__(1);__webpack_require__(2),Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=Color;var _react=_interopRequireDefault(__webpack_require__(0)),_ActivityIndicator=_interopRequireDefault(__webpack_require__(199)),_StyleSheet=_interopRequireDefault(__webpack_require__(4)),_View=_interopRequireDefault(__webpack_require__(3));function Color(){return _react.default.createElement(_View.default,{style:styles.horizontal},_react.default.createElement(_ActivityIndicator.default,{color:"#1DA1F2",style:styles.item}),_react.default.createElement(_ActivityIndicator.default,{color:"#17BF63",style:styles.item}),_react.default.createElement(_ActivityIndicator.default,{color:"#F45D22",style:styles.item}),_react.default.createElement(_ActivityIndicator.default,{color:"#794BC4",style:styles.item}),_react.default.createElement(_ActivityIndicator.default,{color:"#E0245E",style:styles.item}),_react.default.createElement(_ActivityIndicator.default,{color:"#FFAD1F",style:styles.item}))}Color.displayName="Color";var styles=_StyleSheet.default.create({horizontal:{alignItems:"center",flexDirection:"row"},item:{paddingRight:10}});Color.__docgenInfo={description:"",methods:[],displayName:"Color"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/ActivityIndicator/examples/Color.js"]={name:"Color",docgenInfo:Color.__docgenInfo,path:"src/components/ActivityIndicator/examples/Color.js"})},1478:function(module,exports,__webpack_require__){var _interopRequireDefault=__webpack_require__(1);__webpack_require__(20),__webpack_require__(2),__webpack_require__(150),Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=HidesWhenStoppedExample;var _classCallCheck2=_interopRequireDefault(__webpack_require__(28)),_createClass2=_interopRequireDefault(__webpack_require__(29)),_possibleConstructorReturn2=_interopRequireDefault(__webpack_require__(30)),_getPrototypeOf3=_interopRequireDefault(__webpack_require__(26)),_assertThisInitialized2=_interopRequireDefault(__webpack_require__(54)),_inherits2=_interopRequireDefault(__webpack_require__(31)),_defineProperty2=_interopRequireDefault(__webpack_require__(22)),_ActivityIndicator=_interopRequireDefault(__webpack_require__(199)),_StyleSheet=_interopRequireDefault(__webpack_require__(4)),_View=_interopRequireDefault(__webpack_require__(3)),_react=_interopRequireDefault(__webpack_require__(0)),ToggleAnimatingActivityIndicator=function(_React$Component){function ToggleAnimatingActivityIndicator(){var _getPrototypeOf2,_this;(0,_classCallCheck2.default)(this,ToggleAnimatingActivityIndicator);for(var _len=arguments.length,args=Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(ToggleAnimatingActivityIndicator)).call.apply(_getPrototypeOf2,[this].concat(args))),(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),"state",{animating:!0}),(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),"setToggleTimeout",(function(){_this._timer=setTimeout((function(){_this.setState({animating:!_this.state.animating}),_this.setToggleTimeout()}),2e3)})),_this}return(0,_inherits2.default)(ToggleAnimatingActivityIndicator,_React$Component),(0,_createClass2.default)(ToggleAnimatingActivityIndicator,[{key:"componentDidMount",value:function componentDidMount(){this.setToggleTimeout()}},{key:"componentWillUnmount",value:function componentWillUnmount(){clearTimeout(this._timer)}},{key:"render",value:function render(){return _react.default.createElement(_ActivityIndicator.default,{animating:this.state.animating,hidesWhenStopped:this.props.hidesWhenStopped,size:"large",style:[styles.centering,this.props.style]})}}]),ToggleAnimatingActivityIndicator}(_react.default.Component);ToggleAnimatingActivityIndicator.displayName="ToggleAnimatingActivityIndicator";var _ref=_react.default.createElement(ToggleAnimatingActivityIndicator,null);function HidesWhenStoppedExample(){return _react.default.createElement(_View.default,{style:[styles.horizontal]},_react.default.createElement(ToggleAnimatingActivityIndicator,{hidesWhenStopped:!1,style:styles.item}),_ref)}HidesWhenStoppedExample.displayName="HidesWhenStoppedExample";var styles=_StyleSheet.default.create({horizontal:{alignItems:"center",flexDirection:"row"},item:{paddingRight:10}});HidesWhenStoppedExample.__docgenInfo={description:"",methods:[],displayName:"HidesWhenStoppedExample"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/ActivityIndicator/examples/HidesWhenStopped.js"]={name:"HidesWhenStoppedExample",docgenInfo:HidesWhenStoppedExample.__docgenInfo,path:"src/components/ActivityIndicator/examples/HidesWhenStopped.js"})},1479:function(module,exports,__webpack_require__){var _interopRequireDefault=__webpack_require__(1);__webpack_require__(7),__webpack_require__(2),Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=Size;var _react=_interopRequireDefault(__webpack_require__(0)),_ActivityIndicator=_interopRequireDefault(__webpack_require__(199)),_StyleSheet=_interopRequireDefault(__webpack_require__(4)),_View=_interopRequireDefault(__webpack_require__(3)),sizes=[20,"small",36,"large",60];function Size(){return _react.default.createElement(_View.default,{style:styles.horizontal},sizes.map((function(size,i){return _react.default.createElement(_ActivityIndicator.default,{key:i,size:size,style:styles.item})})),_react.default.createElement(_ActivityIndicator.default,{size:"large",style:styles.large}))}Size.displayName="Size";var styles=_StyleSheet.default.create({horizontal:{alignItems:"center",flexDirection:"row"},item:{paddingRight:10},large:{marginLeft:20,transform:[{scale:1.75}]}});Size.__docgenInfo={description:"",methods:[],displayName:"Size"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/ActivityIndicator/examples/Size.js"]={name:"Size",docgenInfo:Size.__docgenInfo,path:"src/components/ActivityIndicator/examples/Size.js"})},1480:function(module,exports,__webpack_require__){var _interopRequireWildcard=__webpack_require__(14),_interopRequireDefault=__webpack_require__(1);Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.onPress=exports.disabled=exports.color=void 0;var _objectSpread2=_interopRequireDefault(__webpack_require__(13)),_extends2=_interopRequireDefault(__webpack_require__(10)),_objectWithoutProperties2=_interopRequireDefault(__webpack_require__(17)),_react2=(_interopRequireDefault(__webpack_require__(0)),__webpack_require__(16)),_blocks=__webpack_require__(19),Stories=_interopRequireWildcard(__webpack_require__(1481)),layoutProps={},MDXLayout="wrapper";function MDXContent(_ref){var components=_ref.components,props=(0,_objectWithoutProperties2.default)(_ref,["components"]);return(0,_react2.mdx)(MDXLayout,(0,_extends2.default)({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),(0,_react2.mdx)(_blocks.Meta,{title:"Components|Button",mdxType:"Meta"}),(0,_react2.mdx)("h1",{id:"button"},"Button"),(0,_react2.mdx)("p",null,"A basic button component. Supports a minimal level of customization. You can\nbuild your own custom button using ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"TouchableOpacity")," or ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"TouchableHighlight"),"."),(0,_react2.mdx)("h2",{id:"props"},"Props"),(0,_react2.mdx)("table",null,(0,_react2.mdx)("thead",{parentName:"table"},(0,_react2.mdx)("tr",{parentName:"thead"},(0,_react2.mdx)("th",(0,_extends2.default)({parentName:"tr"},{align:null}),"Name"),(0,_react2.mdx)("th",(0,_extends2.default)({parentName:"tr"},{align:null}),"Type"),(0,_react2.mdx)("th",(0,_extends2.default)({parentName:"tr"},{align:null}),"Default"))),(0,_react2.mdx)("tbody",{parentName:"table"},(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}),"accessibilityLabel"),(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}),"?string"),(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}))),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}),"color"),(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}),"?string"),(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}),"'#2196F3'")),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}),"disabled"),(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}),"?boolean"),(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}),"false")),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}),"onPress"),(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}),"?Function"),(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}))),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}),"testID"),(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}),"?string"),(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}))),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}),"title"),(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}),"?string"),(0,_react2.mdx)("td",(0,_extends2.default)({parentName:"tr"},{align:null}))))),(0,_react2.mdx)("h3",{id:"color"},"color"),(0,_react2.mdx)("p",null,"Customize the background color of the button."),(0,_react2.mdx)(_blocks.Preview,{withSource:"none",mdxType:"Preview"},(0,_react2.mdx)(_blocks.Story,{name:"color",mdxType:"Story"},(0,_react2.mdx)(Stories.color,null))),(0,_react2.mdx)("h3",{id:"disabled"},"disabled"),(0,_react2.mdx)("p",null,"Prevent all interactions with the button."),(0,_react2.mdx)(_blocks.Preview,{withSource:"none",mdxType:"Preview"},(0,_react2.mdx)(_blocks.Story,{name:"disabled",mdxType:"Story"},(0,_react2.mdx)(Stories.disabled,null))),(0,_react2.mdx)("h3",{id:"onpress"},"onPress"),(0,_react2.mdx)("p",null,"Called when the button is pressed by a pointer or keyboard."),(0,_react2.mdx)(_blocks.Preview,{withSource:"none",mdxType:"Preview"},(0,_react2.mdx)(_blocks.Story,{name:"onPress",mdxType:"Story"},(0,_react2.mdx)(Stories.onPress,null))),(0,_react2.mdx)("h3",{id:"title"},"title"),(0,_react2.mdx)("p",null,"Text to display inside the button."),(0,_react2.mdx)("pre",null,(0,_react2.mdx)("code",(0,_extends2.default)({parentName:"pre"},{className:"language-js"}),'