(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{102:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var fbjs_lib_ExecutionEnvironment__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(28),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},103:function(module,__webpack_exports__,__webpack_require__){"use strict";var fbjs_lib_invariant__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(5),fbjs_lib_invariant__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(fbjs_lib_invariant__WEBPACK_IMPORTED_MODULE_0__);__webpack_exports__.a=function ensurePositiveDelayProps(props){fbjs_lib_invariant__WEBPACK_IMPORTED_MODULE_0___default()(!(props.delayPressIn<0||props.delayPressOut<0||props.delayLongPress<0),"Touchable components cannot have negative delay properties")}},104:function(module,__webpack_exports__,__webpack_require__){"use strict";var accessibilityRoleToWebRole={adjustable:"slider",button:"button",header:"heading",image:"img",imagebutton:null,keyboardkey:null,label:null,link:"link",none:"presentation",search:"search",summary:"region",text:null},AccessibilityUtil_propsToAriaRole=function propsToAriaRole(_ref){var accessibilityRole=_ref.accessibilityRole;if(accessibilityRole){var inferredRole=accessibilityRoleToWebRole[accessibilityRole];if(null!==inferredRole)return inferredRole||accessibilityRole}},roleComponents={article:"article",banner:"header",complementary:"aside",contentinfo:"footer",form:"form",link:"a",list:"ul",listitem:"li",main:"main",navigation:"nav",region:"section"},emptyObject={},AccessibilityUtil={buttonLikeRoles:{button:!0,menuitem:!0},isDisabled:function isDisabled(props){return props.disabled||Array.isArray(props.accessibilityStates)&&props.accessibilityStates.indexOf("disabled")>-1},propsToAccessibilityComponent:function propsToAccessibilityComponent(props){if(void 0===props&&(props=emptyObject),"label"===props.accessibilityRole)return"label";var role=AccessibilityUtil_propsToAriaRole(props);return role?"heading"===role?"h"+(props["aria-level"]||1):roleComponents[role]:void 0},propsToAriaRole:AccessibilityUtil_propsToAriaRole};__webpack_exports__.a=AccessibilityUtil},11:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var _modules_applyLayout__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(149),_modules_applyNativeMethods__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(54),_createElement__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(80),_StyleSheet_css__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__(94),react__WEBPACK_IMPORTED_MODULE_5__=(__webpack_require__(114),__webpack_require__(0)),react__WEBPACK_IMPORTED_MODULE_5___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_5__),_StyleSheet__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(6),_TextAncestorContext__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__(135);var Text=function(_React$Component){function Text(){return _React$Component.apply(this,arguments)||this}!function _inheritsLoose(subClass,superClass){subClass.prototype=Object.create(superClass.prototype),subClass.prototype.constructor=subClass,subClass.__proto__=superClass}(Text,_React$Component);var _proto=Text.prototype;return _proto.renderText=function renderText(hasTextAncestor){var _this$props=this.props,dir=_this$props.dir,forwardedRef=_this$props.forwardedRef,numberOfLines=_this$props.numberOfLines,onPress=_this$props.onPress,selectable=_this$props.selectable,style=_this$props.style,otherProps=(_this$props.adjustsFontSizeToFit,_this$props.allowFontScaling,_this$props.ellipsizeMode,_this$props.lineBreakMode,_this$props.maxFontSizeMultiplier,_this$props.minimumFontScale,_this$props.onLayout,_this$props.onLongPress,_this$props.pressRetentionOffset,_this$props.selectionColor,_this$props.suppressHighlighting,_this$props.textBreakStrategy,_this$props.tvParallaxProperties,function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(target[key]=source[key]);return target}(_this$props,["dir","forwardedRef","numberOfLines","onPress","selectable","style","adjustsFontSizeToFit","allowFontScaling","ellipsizeMode","lineBreakMode","maxFontSizeMultiplier","minimumFontScale","onLayout","onLongPress","pressRetentionOffset","selectionColor","suppressHighlighting","textBreakStrategy","tvParallaxProperties"]));onPress&&(otherProps.accessible=!0,otherProps.onClick=this._createPressHandler(onPress),otherProps.onKeyDown=this._createEnterHandler(onPress)),otherProps.classList=[this.props.className,classes.text,!0===hasTextAncestor&&classes.textHasAncestor,1===numberOfLines&&classes.textOneLine,numberOfLines>1&&classes.textMultiLine],otherProps.dir=void 0!==dir?dir:"auto",otherProps.ref=forwardedRef,otherProps.style=[style,numberOfLines>1&&{WebkitLineClamp:numberOfLines},!1===selectable&&styles.notSelectable,onPress&&styles.pressable];var component=hasTextAncestor?"span":"div";return Object(_createElement__WEBPACK_IMPORTED_MODULE_2__.a)(component,otherProps)},_proto.render=function render(){var _this=this;return react__WEBPACK_IMPORTED_MODULE_5___default.a.createElement(_TextAncestorContext__WEBPACK_IMPORTED_MODULE_7__.a.Consumer,null,(function(hasTextAncestor){var element=_this.renderText(hasTextAncestor);return hasTextAncestor?element:react__WEBPACK_IMPORTED_MODULE_5___default.a.createElement(_TextAncestorContext__WEBPACK_IMPORTED_MODULE_7__.a.Provider,{value:!0},element)}))},_proto._createEnterHandler=function _createEnterHandler(fn){return function(e){13===e.keyCode&&fn&&fn(e)}},_proto._createPressHandler=function _createPressHandler(fn){return function(e){e.stopPropagation(),fn&&fn(e)}},Text}(react__WEBPACK_IMPORTED_MODULE_5___default.a.Component);Text.displayName="Text",Text.propTypes={};var classes=_StyleSheet_css__WEBPACK_IMPORTED_MODULE_3__.a.create({text:{border:"0 solid black",boxSizing:"border-box",color:"black",display:"inline",font:"14px System",margin:0,padding:0,whiteSpace:"pre-wrap",wordWrap:"break-word"},textHasAncestor:{color:"inherit",font:"inherit",whiteSpace:"inherit"},textOneLine:{maxWidth:"100%",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},textMultiLine:{display:"-webkit-box",maxWidth:"100%",overflow:"hidden",textOverflow:"ellipsis",WebkitBoxOrient:"vertical"}}),styles=_StyleSheet__WEBPACK_IMPORTED_MODULE_6__.default.create({notSelectable:{userSelect:"none"},pressable:{cursor:"pointer"}});__webpack_exports__.default=Object(_modules_applyLayout__WEBPACK_IMPORTED_MODULE_0__.a)(Object(_modules_applyNativeMethods__WEBPACK_IMPORTED_MODULE_1__.a)(Text))},112:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var _StyleSheet__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(6),_TouchableOpacity__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(133),_Text__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(11),react__WEBPACK_IMPORTED_MODULE_4__=(__webpack_require__(1),__webpack_require__(0)),react__WEBPACK_IMPORTED_MODULE_4___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);var Button=function(_Component){function Button(){return _Component.apply(this,arguments)||this}return function _inheritsLoose(subClass,superClass){subClass.prototype=Object.create(superClass.prototype),subClass.prototype.constructor=subClass,subClass.__proto__=superClass}(Button,_Component),Button.prototype.render=function render(){var _this$props=this.props,accessibilityLabel=_this$props.accessibilityLabel,color=_this$props.color,disabled=_this$props.disabled,onPress=_this$props.onPress,testID=_this$props.testID,title=_this$props.title;return react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(_TouchableOpacity__WEBPACK_IMPORTED_MODULE_1__.default,{accessibilityLabel:accessibilityLabel,accessibilityRole:"button",disabled:disabled,onPress:onPress,style:[styles.button,color&&{backgroundColor:color},disabled&&styles.buttonDisabled],testID:testID},react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(_Text__WEBPACK_IMPORTED_MODULE_2__.default,{style:[styles.text,disabled&&styles.textDisabled]},title))},Button}(react__WEBPACK_IMPORTED_MODULE_4__.Component);Button.propTypes={};var styles=_StyleSheet__WEBPACK_IMPORTED_MODULE_0__.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},117:function(module,__webpack_exports__,__webpack_require__){"use strict";var invariant=__webpack_require__(5),invariant_default=__webpack_require__.n(invariant),isSupported=__webpack_require__(28).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},118:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_exports__.a=function getBoundingClientRect(node){if(node&&(1===node.nodeType&&"function"==typeof node.getBoundingClientRect))return node.getBoundingClientRect()}},1206:function(module,exports,__webpack_require__){(function(module){__webpack_require__(63),__webpack_require__(140);var _theming=__webpack_require__(17),_react=__webpack_require__(1207);(0,_react.addParameters)({options:{storySort:function storySort(a,b){var sectionA=a[1].id.split("-")[0];return b[1].id.split("-")[0].localeCompare(sectionA)},theme:(0,_theming.create)({base:"light",brandTitle:"React Native for Web",brandUrl:"https://necolas.github.io/react-native-web"}),hierarchySeparator:/\/|\./,hierarchyRootSeparator:/\|/,panelPosition:"bottom"}});var context=__webpack_require__(1230);(0,_react.configure)(context,module)}).call(this,__webpack_require__(142)(module))},1230:function(module,exports,__webpack_require__){var map={"./apis/AppRegistry/AppRegistry.stories.mdx":1231,"./apis/AppState/AppState.stories.js":432,"./apis/AppState/AppState.stories.mdx":1245,"./apis/Clipboard/Clipboard.stories.js":434,"./apis/Clipboard/Clipboard.stories.mdx":1251,"./apis/Dimensions/Dimensions.stories.js":435,"./apis/Dimensions/Dimensions.stories.mdx":1256,"./apis/I18nManager/I18nManager.stories.js":436,"./apis/I18nManager/I18nManager.stories.mdx":1263,"./apis/Linking/Linking.stories.js":437,"./apis/Linking/Linking.stories.mdx":1266,"./apis/PixelRatio/PixelRatio.stories.mdx":1267,"./apis/Platform/Platform.stories.mdx":1268,"./apis/StyleSheet/StyleSheet.stories.mdx":1269,"./apis/Vibration/Vibration.stories.mdx":1270,"./components/ActivityIndicator/ActivityIndicator.stories.js":438,"./components/ActivityIndicator/ActivityIndicator.stories.mdx":1275,"./components/Button/Button.stories.js":439,"./components/Button/Button.stories.mdx":1279,"./components/CheckBox/CheckBox.stories.js":441,"./components/CheckBox/CheckBox.stories.mdx":1285,"./components/FlatList/FlatList.stories.js":442,"./components/FlatList/FlatList.stories.mdx":1300,"./components/Image/Image.stories.js":445,"./components/Image/Image.stories.mdx":1316,"./components/ImageBackground/ImageBackground.stories.js":448,"./components/ImageBackground/ImageBackground.stories.mdx":1318,"./components/Picker/Picker.stories.js":449,"./components/Picker/Picker.stories.mdx":1319,"./components/ProgressBar/ProgressBar.stories.js":450,"./components/ProgressBar/ProgressBar.stories.mdx":1325,"./components/ScrollView/ScrollView.stories.js":451,"./components/ScrollView/ScrollView.stories.mdx":1330,"./components/Switch/Switch.stories.js":452,"./components/Switch/Switch.stories.mdx":1339,"./components/Text/Text.stories.js":453,"./components/Text/Text.stories.mdx":1345,"./components/TextInput/TextInput.stories.js":454,"./components/TextInput/TextInput.stories.mdx":1360,"./components/TouchableHighlight/TouchableHighlight.stories.js":455,"./components/TouchableHighlight/TouchableHighlight.stories.mdx":1365,"./components/TouchableOpacity/TouchableOpacity.stories.js":456,"./components/TouchableOpacity/TouchableOpacity.stories.mdx":1367,"./components/TouchableWithoutFeedback/TouchableWithoutFeedback.stories.js":457,"./components/TouchableWithoutFeedback/TouchableWithoutFeedback.stories.mdx":1371,"./components/View/View.stories.js":458,"./components/View/View.stories.mdx":1378,"./guides/accessibility.stories.mdx":1379,"./guides/client-side-rendering.stories.mdx":1380,"./guides/direct-manipulation.stories.mdx":1381,"./guides/internationalization.stories.mdx":1382,"./guides/multi-platform-apps.stories.mdx":1383,"./guides/server-side-rendering.stories.mdx":1384,"./guides/style.stories.mdx":1385,"./guides/unstable.stories.mdx":1386,"./guides/web-recipes.stories.mdx":1387,"./introduction.stories.mdx":1388};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id=1230},1231:function(module,exports,__webpack_require__){var _interopRequireDefault=__webpack_require__(3);Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.__page=void 0;var _objectSpread2=_interopRequireDefault(__webpack_require__(14)),_extends2=_interopRequireDefault(__webpack_require__(9)),_objectWithoutProperties2=_interopRequireDefault(__webpack_require__(19)),_react2=(_interopRequireDefault(__webpack_require__(0)),__webpack_require__(18)),_blocks=__webpack_require__(20),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|AppRegistry",mdxType:"Meta"}),(0,_react2.mdx)("h1",null,"AppRegistry"),(0,_react2.mdx)("p",null,"AppRegistry is the control point for registering, running, prerendering, and\nunmounting all apps. App root components should register themselves with\n",(0,_react2.mdx)("inlineCode",{parentName:"p"},"AppRegistry.registerComponent"),". Apps can be run by invoking\n",(0,_react2.mdx)("inlineCode",{parentName:"p"},"AppRegistry.runApplication"),"."),(0,_react2.mdx)("h2",null,"Methods"),(0,_react2.mdx)("h3",null,"getAppKeys()"),(0,_react2.mdx)("p",null,"Returns an array of all registered app keys"),(0,_react2.mdx)("pre",null,(0,_react2.mdx)("code",(0,_extends2.default)({parentName:"pre"},{className:"language-js"}),"const appKeys = AppRegistry.getAppKeys();\n")),(0,_react2.mdx)("h3",null,"getApplication(appKey, appParams)"),(0,_react2.mdx)("p",null,"A web-only method for server-side rendering to HTML and CSS. It returns an\nobject containing the given application's element and a function to get styles\nonce the element is rendered."),(0,_react2.mdx)("p",null,"Additional props can be passed to the ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"getStyleElement")," function, e.g., your CSP\npolicy may require a ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"nonce")," to be set on style elements."),(0,_react2.mdx)("pre",null,(0,_react2.mdx)("code",(0,_extends2.default)({parentName:"pre"},{className:"language-js"}),"const appKey = 'MyApp';\nconst appParams = { ... };\nconst { element, getStyleElement } = AppRegistry.getApplication(appKey, appParams);\n")),(0,_react2.mdx)("h3",null,"registerComponent(appKey, getComponent)"),(0,_react2.mdx)("p",null,"Register a component provider under the given appKey."),(0,_react2.mdx)("pre",null,(0,_react2.mdx)("code",(0,_extends2.default)({parentName:"pre"},{className:"language-js"}),"const appKey = 'MyApp';\nconst getComponent = () => App;\nAppRegistry.registerComponent(appKey, getComponent)\n")),(0,_react2.mdx)("h3",null,"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",null,"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",null,"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",null,"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",null,"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",null,"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"]},mdxStoryNameToId={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={container:function container(_ref2){var context=_ref2.context,children=_ref2.children;return(0,_react2.mdx)(_blocks.DocsContainer,{context:(0,_objectSpread2.default)({},context,{mdxStoryNameToId:mdxStoryNameToId})},children)},page:MDXContent};var _default=componentMeta;exports.default=_default},1232:function(module,exports,__webpack_require__){var _interopRequireDefault=__webpack_require__(3);__webpack_require__(7),__webpack_require__(73),__webpack_require__(29),__webpack_require__(64),__webpack_require__(2),__webpack_require__(42),__webpack_require__(145),__webpack_require__(8),__webpack_require__(30),Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=StateChanges;var _defineProperty2=_interopRequireDefault(__webpack_require__(25)),_slicedToArray2=_interopRequireDefault(__webpack_require__(129)),_react=_interopRequireDefault(__webpack_require__(0)),_AppState=_interopRequireDefault(__webpack_require__(1236)),_Text=_interopRequireDefault(__webpack_require__(11)),_View=_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}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],handleChange=function(nextState){updateState((function(previousState){return function _objectSpread(target){for(var source,i=1;i {});\n")),(0,_react2.mdx)("h3",null,"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",null,"Example"),(0,_react2.mdx)(_blocks.Preview,{withSource:"none",mdxType:"Preview"},(0,_react2.mdx)(_blocks.Story,{name:"stateChanges",mdxType:"Story"},stories.stateChanges)))}MDXContent.isMDXComponent=!0;var stateChanges=(0,_blocks.makeStoryFn)(stories.stateChanges);exports.stateChanges=stateChanges,stateChanges.story={},stateChanges.story.name="stateChanges",stateChanges.story.parameters={mdxSource:"stories.stateChanges"};var componentMeta={title:"APIs|AppState",includeStories:["stateChanges"]},mdxStoryNameToId={stateChanges:"apis-appstate--state-changes"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={container:function container(_ref2){var context=_ref2.context,children=_ref2.children;return(0,_react2.mdx)(_blocks.DocsContainer,{context:(0,_objectSpread2.default)({},context,{mdxStoryNameToId:mdxStoryNameToId})},children)},page:MDXContent};var _default=componentMeta;exports.default=_default},1246:function(module,exports,__webpack_require__){var _interopRequireDefault=__webpack_require__(3);__webpack_require__(2),Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=SetString;var _Button=_interopRequireDefault(__webpack_require__(112)),_Clipboard=_interopRequireDefault(__webpack_require__(1250)),_StyleSheet=_interopRequireDefault(__webpack_require__(6)),_TextInput=_interopRequireDefault(__webpack_require__(66)),_View=_interopRequireDefault(__webpack_require__(4)),_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}})},1250: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",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}()},1251:function(module,exports,__webpack_require__){var _interopRequireWildcard=__webpack_require__(23),_interopRequireDefault=__webpack_require__(3);Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.setString=void 0;var _objectSpread2=_interopRequireDefault(__webpack_require__(14)),_extends2=_interopRequireDefault(__webpack_require__(9)),_objectWithoutProperties2=_interopRequireDefault(__webpack_require__(19)),_react2=(_interopRequireDefault(__webpack_require__(0)),__webpack_require__(18)),_blocks=__webpack_require__(20),stories=_interopRequireWildcard(__webpack_require__(434)),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",null,"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",null,"Methods"),(0,_react2.mdx)("h3",null,"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",null,"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"},stories.setString)),(0,_react2.mdx)("h3",null,"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=(0,_blocks.makeStoryFn)(stories.setString);exports.setString=setString,setString.story={},setString.story.name="setString",setString.story.parameters={mdxSource:"stories.setString"};var componentMeta={title:"APIs|Clipboard",includeStories:["setString"]},mdxStoryNameToId={setString:"apis-clipboard--set-string"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={container:function container(_ref2){var context=_ref2.context,children=_ref2.children;return(0,_react2.mdx)(_blocks.DocsContainer,{context:(0,_objectSpread2.default)({},context,{mdxStoryNameToId:mdxStoryNameToId})},children)},page:MDXContent};var _default=componentMeta;exports.default=_default},1252:function(module,exports,__webpack_require__){var _interopRequireWildcard=__webpack_require__(23),_interopRequireDefault=__webpack_require__(3);__webpack_require__(15),__webpack_require__(16),__webpack_require__(49),__webpack_require__(2),Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=StateChange;var _toConsumableArray2=_interopRequireDefault(__webpack_require__(113)),_classCallCheck2=_interopRequireDefault(__webpack_require__(37)),_createClass2=_interopRequireDefault(__webpack_require__(38)),_possibleConstructorReturn2=_interopRequireDefault(__webpack_require__(39)),_getPrototypeOf3=_interopRequireDefault(__webpack_require__(40)),_assertThisInitialized2=_interopRequireDefault(__webpack_require__(60)),_inherits2=_interopRequireDefault(__webpack_require__(41)),_defineProperty2=_interopRequireDefault(__webpack_require__(25)),_Button=_interopRequireDefault(__webpack_require__(112)),_Dimensions=_interopRequireDefault(__webpack_require__(151)),_ScrollView=_interopRequireDefault(__webpack_require__(79)),_StyleSheet=_interopRequireDefault(__webpack_require__(6)),_Text=_interopRequireDefault(__webpack_require__(11)),_View=_interopRequireDefault(__webpack_require__(4)),_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}})},1256:function(module,exports,__webpack_require__){var _interopRequireWildcard=__webpack_require__(23),_interopRequireDefault=__webpack_require__(3);Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.stateChanges=void 0;var _objectSpread2=_interopRequireDefault(__webpack_require__(14)),_extends2=_interopRequireDefault(__webpack_require__(9)),_objectWithoutProperties2=_interopRequireDefault(__webpack_require__(19)),_react2=(_interopRequireDefault(__webpack_require__(0)),__webpack_require__(18)),_blocks=__webpack_require__(20),stories=_interopRequireWildcard(__webpack_require__(435)),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",null,"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",null,"Methods"),(0,_react2.mdx)("h3",null,"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",null,"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",null,"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",null,"removeEventListener(type, handler)"),(0,_react2.mdx)("p",null,"Remove an event handler."),(0,_react2.mdx)("h2",null,"Example"),(0,_react2.mdx)(_blocks.Preview,{withSource:"none",mdxType:"Preview"},(0,_react2.mdx)(_blocks.Story,{name:"stateChanges",mdxType:"Story"},stories.stateChanges)))}MDXContent.isMDXComponent=!0;var stateChanges=(0,_blocks.makeStoryFn)(stories.stateChanges);exports.stateChanges=stateChanges,stateChanges.story={},stateChanges.story.name="stateChanges",stateChanges.story.parameters={mdxSource:"stories.stateChanges"};var componentMeta={title:"APIs|Dimensions",includeStories:["stateChanges"]},mdxStoryNameToId={stateChanges:"apis-dimensions--state-changes"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={container:function container(_ref2){var context=_ref2.context,children=_ref2.children;return(0,_react2.mdx)(_blocks.DocsContainer,{context:(0,_objectSpread2.default)({},context,{mdxStoryNameToId:mdxStoryNameToId})},children)},page:MDXContent};var _default=componentMeta;exports.default=_default},1257:function(module,exports,__webpack_require__){var _interopRequireDefault=__webpack_require__(3);__webpack_require__(7),__webpack_require__(31),__webpack_require__(15),__webpack_require__(73),__webpack_require__(29),__webpack_require__(277),__webpack_require__(64),__webpack_require__(2),__webpack_require__(42),__webpack_require__(145),__webpack_require__(8),__webpack_require__(92),__webpack_require__(30),Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=LayoutRTL;var _defineProperty2=_interopRequireDefault(__webpack_require__(25)),_assertThisInitialized2=_interopRequireDefault(__webpack_require__(60)),_classCallCheck2=_interopRequireDefault(__webpack_require__(37)),_createClass2=_interopRequireDefault(__webpack_require__(38)),_possibleConstructorReturn2=_interopRequireDefault(__webpack_require__(39)),_getPrototypeOf3=_interopRequireDefault(__webpack_require__(40)),_inherits2=_interopRequireDefault(__webpack_require__(41)),_react=_interopRequireDefault(__webpack_require__(0)),_Page=_interopRequireDefault(__webpack_require__(1258)),_Block=_interopRequireDefault(__webpack_require__(1260)),_Animated=_interopRequireDefault(__webpack_require__(311)),_Button=_interopRequireDefault(__webpack_require__(112)),_I18nManager=_interopRequireDefault(__webpack_require__(102)),_Image=_interopRequireDefault(__webpack_require__(67)),_PanResponder=_interopRequireDefault(__webpack_require__(1393)),_PixelRatio=_interopRequireDefault(__webpack_require__(1262)),_Platform=_interopRequireDefault(__webpack_require__(146)),_ScrollView=_interopRequireDefault(__webpack_require__(79)),_StyleSheet=_interopRequireDefault(__webpack_require__(6)),_Text=_interopRequireDefault(__webpack_require__(11)),_TouchableWithoutFeedback=_interopRequireDefault(__webpack_require__(78)),_Switch=_interopRequireDefault(__webpack_require__(93)),_View=_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}function _objectSpread(target){for(var source,i=1;i\n")),(0,_react2.mdx)("h3",null,"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"]},mdxStoryNameToId={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={container:function container(_ref2){var context=_ref2.context,children=_ref2.children;return(0,_react2.mdx)(_blocks.DocsContainer,{context:(0,_objectSpread2.default)({},context,{mdxStoryNameToId:mdxStoryNameToId})},children)},page:MDXContent};var _default=componentMeta;exports.default=_default},1268:function(module,exports,__webpack_require__){var _interopRequireDefault=__webpack_require__(3);Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.__page=void 0;var _objectSpread2=_interopRequireDefault(__webpack_require__(14)),_extends2=_interopRequireDefault(__webpack_require__(9)),_objectWithoutProperties2=_interopRequireDefault(__webpack_require__(19)),_react2=(_interopRequireDefault(__webpack_require__(0)),__webpack_require__(18)),_blocks=__webpack_require__(20),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",null,"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",null,"Properties"),(0,_react2.mdx)("h3",null,"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",null,"Methods"),(0,_react2.mdx)("h3",null,"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"]},mdxStoryNameToId={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={container:function container(_ref2){var context=_ref2.context,children=_ref2.children;return(0,_react2.mdx)(_blocks.DocsContainer,{context:(0,_objectSpread2.default)({},context,{mdxStoryNameToId:mdxStoryNameToId})},children)},page:MDXContent};var _default=componentMeta;exports.default=_default},1269:function(module,exports,__webpack_require__){var _interopRequireDefault=__webpack_require__(3);Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.__page=void 0;var _objectSpread2=_interopRequireDefault(__webpack_require__(14)),_extends2=_interopRequireDefault(__webpack_require__(9)),_objectWithoutProperties2=_interopRequireDefault(__webpack_require__(19)),_react2=(_interopRequireDefault(__webpack_require__(0)),__webpack_require__(18)),_blocks=__webpack_require__(20),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",null,"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",null,"Methods"),(0,_react2.mdx)("h3",null,"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",null,"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",null,"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",null,"Properties"),(0,_react2.mdx)("h3",null,"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",null,"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",null,"hairlineWidth"),(0,_react2.mdx)("p",null,"Enables borders of just one physical pixel on retina screens, otherwise it is\nequal to a CSS value of 1px."))}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"]},mdxStoryNameToId={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={container:function container(_ref2){var context=_ref2.context,children=_ref2.children;return(0,_react2.mdx)(_blocks.DocsContainer,{context:(0,_objectSpread2.default)({},context,{mdxStoryNameToId:mdxStoryNameToId})},children)},page:MDXContent};var _default=componentMeta;exports.default=_default},1270:function(module,exports,__webpack_require__){var _interopRequireDefault=__webpack_require__(3);Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.__page=void 0;var _objectSpread2=_interopRequireDefault(__webpack_require__(14)),_extends2=_interopRequireDefault(__webpack_require__(9)),_objectWithoutProperties2=_interopRequireDefault(__webpack_require__(19)),_react2=(_interopRequireDefault(__webpack_require__(0)),__webpack_require__(18)),_blocks=__webpack_require__(20),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",null,"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",null,"Methods"),(0,_react2.mdx)("h3",null,"cancel()"),(0,_react2.mdx)("p",null,"Stop the vibration"),(0,_react2.mdx)("h3",null,"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"]},mdxStoryNameToId={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={container:function container(_ref2){var context=_ref2.context,children=_ref2.children;return(0,_react2.mdx)(_blocks.DocsContainer,{context:(0,_objectSpread2.default)({},context,{mdxStoryNameToId:mdxStoryNameToId})},children)},page:MDXContent};var _default=componentMeta;exports.default=_default},1271:function(module,exports,__webpack_require__){var _interopRequireDefault=__webpack_require__(3);__webpack_require__(2),Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=Animating;var _ActivityIndicator=_interopRequireDefault(__webpack_require__(181)),_StyleSheet=_interopRequireDefault(__webpack_require__(6)),_View=_interopRequireDefault(__webpack_require__(4)),_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"}})},1272:function(module,exports,__webpack_require__){var _interopRequireDefault=__webpack_require__(3);__webpack_require__(2),Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=Color;var _react=_interopRequireDefault(__webpack_require__(0)),_ActivityIndicator=_interopRequireDefault(__webpack_require__(181)),_StyleSheet=_interopRequireDefault(__webpack_require__(6)),_View=_interopRequireDefault(__webpack_require__(4));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}})},1273:function(module,exports,__webpack_require__){var _interopRequireWildcard=__webpack_require__(23),_interopRequireDefault=__webpack_require__(3);__webpack_require__(15),__webpack_require__(2),__webpack_require__(176),Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=HidesWhenStoppedExample;var _classCallCheck2=_interopRequireDefault(__webpack_require__(37)),_createClass2=_interopRequireDefault(__webpack_require__(38)),_possibleConstructorReturn2=_interopRequireDefault(__webpack_require__(39)),_getPrototypeOf3=_interopRequireDefault(__webpack_require__(40)),_assertThisInitialized2=_interopRequireDefault(__webpack_require__(60)),_inherits2=_interopRequireDefault(__webpack_require__(41)),_defineProperty2=_interopRequireDefault(__webpack_require__(25)),_ActivityIndicator=_interopRequireDefault(__webpack_require__(181)),_StyleSheet=_interopRequireDefault(__webpack_require__(6)),_View=_interopRequireDefault(__webpack_require__(4)),_propTypes=__webpack_require__(1),_react=_interopRequireWildcard(__webpack_require__(0)),ToggleAnimatingActivityIndicator=function(_PureComponent){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,_PureComponent),(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.PureComponent);ToggleAnimatingActivityIndicator.displayName="ToggleAnimatingActivityIndicator",(0,_defineProperty2.default)(ToggleAnimatingActivityIndicator,"propTypes",{hidesWhenStopped:_propTypes.bool,style:_ActivityIndicator.default.propTypes.style});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}})},1274:function(module,exports,__webpack_require__){var _interopRequireDefault=__webpack_require__(3);__webpack_require__(16),__webpack_require__(2),Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=Size;var _react=_interopRequireDefault(__webpack_require__(0)),_ActivityIndicator=_interopRequireDefault(__webpack_require__(181)),_StyleSheet=_interopRequireDefault(__webpack_require__(6)),_View=_interopRequireDefault(__webpack_require__(4)),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}]}})},1275:function(module,exports,__webpack_require__){var _interopRequireWildcard=__webpack_require__(23),_interopRequireDefault=__webpack_require__(3);Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.size=exports.hidesWhenStopped=exports.color=exports.animating=void 0;var _objectSpread2=_interopRequireDefault(__webpack_require__(14)),_extends2=_interopRequireDefault(__webpack_require__(9)),_objectWithoutProperties2=_interopRequireDefault(__webpack_require__(19)),_react2=(_interopRequireDefault(__webpack_require__(0)),__webpack_require__(18)),_blocks=__webpack_require__(20),stories=_interopRequireWildcard(__webpack_require__(438)),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",null,"ActivityIndicator"),(0,_react2.mdx)("p",null,"Displays a customizable activity indicator."),(0,_react2.mdx)("h2",null,"Props"),(0,_react2.mdx)(_blocks.Props,{of:stories.ofProps,mdxType:"Props"}),(0,_react2.mdx)("h3",null,"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"},stories.animating)),(0,_react2.mdx)("h3",null,"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"},stories.color)),(0,_react2.mdx)("h3",null,"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"},stories.hidesWhenStopped)),(0,_react2.mdx)("h3",null,"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"},stories.size)))}MDXContent.isMDXComponent=!0;var animating=(0,_blocks.makeStoryFn)(stories.animating);exports.animating=animating,animating.story={},animating.story.name="animating",animating.story.parameters={mdxSource:"stories.animating"};var color=(0,_blocks.makeStoryFn)(stories.color);exports.color=color,color.story={},color.story.name="color",color.story.parameters={mdxSource:"stories.color"};var hidesWhenStopped=(0,_blocks.makeStoryFn)(stories.hidesWhenStopped);exports.hidesWhenStopped=hidesWhenStopped,hidesWhenStopped.story={},hidesWhenStopped.story.name="hidesWhenStopped",hidesWhenStopped.story.parameters={mdxSource:"stories.hidesWhenStopped"};var size=(0,_blocks.makeStoryFn)(stories.size);exports.size=size,size.story={},size.story.name="size",size.story.parameters={mdxSource:"stories.size"};var componentMeta={title:"Components|ActivityIndicator",includeStories:["animating","color","hidesWhenStopped","size"]},mdxStoryNameToId={animating:"components-activityindicator--animating",color:"components-activityindicator--color",hidesWhenStopped:"components-activityindicator--hides-when-stopped",size:"components-activityindicator--size"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={container:function container(_ref2){var context=_ref2.context,children=_ref2.children;return(0,_react2.mdx)(_blocks.DocsContainer,{context:(0,_objectSpread2.default)({},context,{mdxStoryNameToId:mdxStoryNameToId})},children)},page:MDXContent};var _default=componentMeta;exports.default=_default},1276:function(module,exports,__webpack_require__){var _interopRequireDefault=__webpack_require__(3);__webpack_require__(2),Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=Color;var _react=_interopRequireDefault(__webpack_require__(0)),_helpers=__webpack_require__(440),_Button=_interopRequireDefault(__webpack_require__(112)),_View=_interopRequireDefault(__webpack_require__(4)),emptyFunction=function(){},_ref=_react.default.createElement(_View.default,null,_react.default.createElement(_Button.default,{color:"#17BF63",onPress:emptyFunction,title:"Press me"}),_react.default.createElement(_helpers.DividerVertical,null),_react.default.createElement(_Button.default,{color:"#F45D22",onPress:emptyFunction,title:"Press me"}),_react.default.createElement(_helpers.DividerVertical,null),_react.default.createElement(_Button.default,{color:"#794BC4",onPress:emptyFunction,title:"Press me"}),_react.default.createElement(_helpers.DividerVertical,null),_react.default.createElement(_Button.default,{color:"#E0245E",onPress:emptyFunction,title:"Press me"}));function Color(){return _ref}Color.displayName="Color"},1277:function(module,exports,__webpack_require__){var _interopRequireDefault=__webpack_require__(3);__webpack_require__(2),Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=Disabled;var _react=_interopRequireDefault(__webpack_require__(0)),_Button=_interopRequireDefault(__webpack_require__(112));function Disabled(){return _react.default.createElement(_Button.default,{disabled:!0,onPress:function onPress(){console.error("Disabled button should not trigger onPress!")},title:"Disabled button"})}Disabled.displayName="Disabled"},1278:function(module,exports,__webpack_require__){var _interopRequireDefault=__webpack_require__(3);__webpack_require__(2),Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=OnPress;var _react=_interopRequireDefault(__webpack_require__(0)),_helpers=__webpack_require__(440),_Button=_interopRequireDefault(__webpack_require__(112)),_StyleSheet=_interopRequireDefault(__webpack_require__(6)),_View=_interopRequireDefault(__webpack_require__(4)),emptyFunction=function(){},_ref=_react.default.createElement(_Button.default,{accessibilityLabel:"This sounds great!",onPress:emptyFunction,title:"This looks great!"}),_ref2=_react.default.createElement(_helpers.DividerHorizontal,null),_ref3=_react.default.createElement(_Button.default,{color:"#841584",onPress:emptyFunction,title:"Ok!"});function OnPress(){return _react.default.createElement(_View.default,{style:styles.horizontal},_ref,_ref2,_ref3)}OnPress.displayName="OnPress";var styles=_StyleSheet.default.create({horizontal:{flexDirection:"row"}})},1279:function(module,exports,__webpack_require__){var _interopRequireWildcard=__webpack_require__(23),_interopRequireDefault=__webpack_require__(3);Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.onPress=exports.disabled=exports.color=void 0;var _objectSpread2=_interopRequireDefault(__webpack_require__(14)),_extends2=_interopRequireDefault(__webpack_require__(9)),_objectWithoutProperties2=_interopRequireDefault(__webpack_require__(19)),_react2=(_interopRequireDefault(__webpack_require__(0)),__webpack_require__(18)),_blocks=__webpack_require__(20),stories=_interopRequireWildcard(__webpack_require__(439)),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",null,"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",null,"Props"),(0,_react2.mdx)(_blocks.Props,{of:stories.ofProps,mdxType:"Props"}),(0,_react2.mdx)("h3",null,"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"},stories.color)),(0,_react2.mdx)("h3",null,"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"},stories.disabled)),(0,_react2.mdx)("h3",null,"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"},stories.onPress)),(0,_react2.mdx)("h3",null,"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"}),'