Showing preview only (1,851K chars total). Download the full file or copy to clipboard to get everything.
Repository: necolas/react-native-web
Branch: master
Commit: a9de220ba9e6
Files: 479
Total size: 1.7 MB
Directory structure:
gitextract_agiijy7o/
├── .codesandbox/
│ └── ci.json
├── .github/
│ ├── CONTRIBUTING.md
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug.yml
│ │ ├── config.yml
│ │ └── feature.yml
│ ├── labels-config.yml
│ └── workflows/
│ ├── labels.yml
│ ├── performance.yml
│ ├── react-integration.yml
│ └── tests.yml
├── .gitignore
├── .watchmanconfig
├── LICENSE
├── README.md
├── configs/
│ ├── .eslintignore
│ ├── .eslintrc
│ ├── .flowconfig
│ ├── .prettierignore
│ ├── babel.config.js
│ ├── husky/
│ │ └── pre-commit
│ ├── jest-setupFiles.dom.js
│ ├── jest.config.js
│ └── jest.config.node.js
├── flow-typed/
│ └── npm/
│ ├── create-react-class_v15.x.x.js
│ ├── prop-types_v15.x.x.js
│ └── styleq.js
├── package.json
├── packages/
│ ├── babel-plugin-react-native-web/
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── index.js
│ │ ├── package.json
│ │ └── src/
│ │ ├── __tests__/
│ │ │ ├── __snapshots__/
│ │ │ │ └── index-test.js.snap
│ │ │ └── index-test.js
│ │ ├── index.js
│ │ └── moduleMap.js
│ ├── benchmarks/
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── app/
│ │ │ │ ├── App.js
│ │ │ │ ├── Benchmark/
│ │ │ │ │ ├── index.js
│ │ │ │ │ ├── math.js
│ │ │ │ │ ├── timing.js
│ │ │ │ │ └── types.js
│ │ │ │ ├── Button.js
│ │ │ │ ├── Icons.js
│ │ │ │ ├── Layout.js
│ │ │ │ ├── ReportCard.js
│ │ │ │ ├── Text.js
│ │ │ │ └── theme.js
│ │ │ ├── cases/
│ │ │ │ ├── SierpinskiTriangle.js
│ │ │ │ └── Tree.js
│ │ │ ├── impl.js
│ │ │ ├── implementations/
│ │ │ │ ├── css-modules/
│ │ │ │ │ ├── Box.js
│ │ │ │ │ ├── Dot.js
│ │ │ │ │ ├── Provider.js
│ │ │ │ │ ├── View.js
│ │ │ │ │ ├── box-styles.css
│ │ │ │ │ ├── dot-styles.css
│ │ │ │ │ ├── index.js
│ │ │ │ │ └── view-styles.css
│ │ │ │ ├── inline-styles/
│ │ │ │ │ ├── Box.js
│ │ │ │ │ ├── Dot.js
│ │ │ │ │ ├── Provider.js
│ │ │ │ │ ├── View.js
│ │ │ │ │ └── index.js
│ │ │ │ ├── react-native-web/
│ │ │ │ │ ├── Box.js
│ │ │ │ │ ├── Dot.js
│ │ │ │ │ ├── Provider.js
│ │ │ │ │ └── index.js
│ │ │ │ ├── styleq/
│ │ │ │ │ ├── Box.js
│ │ │ │ │ ├── Dot.js
│ │ │ │ │ ├── Provider.js
│ │ │ │ │ ├── View.js
│ │ │ │ │ └── index.js
│ │ │ │ └── stylesheet/
│ │ │ │ ├── Box.js
│ │ │ │ ├── Dot.js
│ │ │ │ ├── Provider.js
│ │ │ │ ├── View.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ └── webpack.config.js
│ ├── dom-event-testing-library/
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── index.js
│ │ ├── package.json
│ │ └── src/
│ │ ├── __tests__/
│ │ │ ├── __snapshots__/
│ │ │ │ └── index-test.js.snap
│ │ │ └── index-test.js
│ │ ├── constants.js
│ │ ├── createEvent.js
│ │ ├── domEnvironment.js
│ │ ├── domEventSequences.js
│ │ ├── domEvents.js
│ │ ├── index.js
│ │ ├── testHelpers.js
│ │ └── touchStore.js
│ ├── react-native-web/
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── package.json
│ │ └── src/
│ │ ├── exports/
│ │ │ ├── AccessibilityInfo/
│ │ │ │ └── index.js
│ │ │ ├── ActivityIndicator/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ └── index-test.js.snap
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── Alert/
│ │ │ │ └── index.js
│ │ │ ├── Animated/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── AppRegistry/
│ │ │ │ ├── AppContainer.js
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ └── index-test.js.snap
│ │ │ │ │ ├── index-test.js
│ │ │ │ │ └── index-test.node.js
│ │ │ │ ├── index.js
│ │ │ │ └── renderApplication.js
│ │ │ ├── AppState/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── Appearance/
│ │ │ │ └── index.js
│ │ │ ├── BackHandler/
│ │ │ │ └── index.js
│ │ │ ├── Button/
│ │ │ │ └── index.js
│ │ │ ├── CheckBox/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ └── index-test.js.snap
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── Clipboard/
│ │ │ │ └── index.js
│ │ │ ├── DeviceEventEmitter/
│ │ │ │ └── index.js
│ │ │ ├── Dimensions/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── Easing/
│ │ │ │ └── index.js
│ │ │ ├── FlatList/
│ │ │ │ └── index.js
│ │ │ ├── I18nManager/
│ │ │ │ └── index.js
│ │ │ ├── Image/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ └── index-test.js.snap
│ │ │ │ │ └── index-test.js
│ │ │ │ ├── index.js
│ │ │ │ └── types.js
│ │ │ ├── ImageBackground/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── InputAccessoryView/
│ │ │ │ └── index.js
│ │ │ ├── InteractionManager/
│ │ │ │ ├── TaskQueue.js
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── TaskQueue-test.js
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── Keyboard/
│ │ │ │ └── index.js
│ │ │ ├── KeyboardAvoidingView/
│ │ │ │ └── index.js
│ │ │ ├── LayoutAnimation/
│ │ │ │ └── index.js
│ │ │ ├── Linking/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── LogBox/
│ │ │ │ └── index.js
│ │ │ ├── Modal/
│ │ │ │ ├── ModalAnimation.js
│ │ │ │ ├── ModalContent.js
│ │ │ │ ├── ModalFocusTrap.js
│ │ │ │ ├── ModalPortal.js
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ └── index-test.js.snap
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── NativeEventEmitter/
│ │ │ │ └── index.js
│ │ │ ├── NativeModules/
│ │ │ │ └── index.js
│ │ │ ├── PanResponder/
│ │ │ │ ├── Alternative.js
│ │ │ │ └── index.js
│ │ │ ├── Picker/
│ │ │ │ ├── PickerItem.js
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ └── index-test.js.snap
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── PixelRatio/
│ │ │ │ └── index.js
│ │ │ ├── Platform/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── Pressable/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ └── index-test.js.snap
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── ProgressBar/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── RefreshControl/
│ │ │ │ └── index.js
│ │ │ ├── SafeAreaView/
│ │ │ │ └── index.js
│ │ │ ├── ScrollView/
│ │ │ │ ├── ScrollViewBase.js
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ └── index-test.js.snap
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── SectionList/
│ │ │ │ └── index.js
│ │ │ ├── Share/
│ │ │ │ └── index.js
│ │ │ ├── StatusBar/
│ │ │ │ └── index.js
│ │ │ ├── StyleSheet/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── compiler-createReactDOMStyle-test.js
│ │ │ │ │ ├── compiler-test.js
│ │ │ │ │ ├── dom-createOrderedCSSStyleSheet-test.js
│ │ │ │ │ ├── dom-test.js
│ │ │ │ │ ├── dom-test.node.js
│ │ │ │ │ ├── index-test.js
│ │ │ │ │ ├── preprocess-test.js
│ │ │ │ │ └── validate-test.js
│ │ │ │ ├── compiler/
│ │ │ │ │ ├── createReactDOMStyle.js
│ │ │ │ │ ├── hash.js
│ │ │ │ │ ├── hyphenateStyleName.js
│ │ │ │ │ ├── index.js
│ │ │ │ │ ├── normalizeColor.js
│ │ │ │ │ ├── normalizeValueWithProperty.js
│ │ │ │ │ ├── resolveShadowValue.js
│ │ │ │ │ └── unitlessNumbers.js
│ │ │ │ ├── dom/
│ │ │ │ │ ├── createCSSStyleSheet.js
│ │ │ │ │ ├── createOrderedCSSStyleSheet.js
│ │ │ │ │ └── index.js
│ │ │ │ ├── index.js
│ │ │ │ ├── preprocess.js
│ │ │ │ └── validate.js
│ │ │ ├── Switch/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ └── index-test.js.snap
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── Text/
│ │ │ │ ├── TextAncestorContext.js
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ └── index-test.js.snap
│ │ │ │ │ └── index-test.js
│ │ │ │ ├── index.js
│ │ │ │ └── types.js
│ │ │ ├── TextInput/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ ├── index.js
│ │ │ │ └── types.js
│ │ │ ├── Touchable/
│ │ │ │ ├── BoundingDimensions.js
│ │ │ │ ├── Position.js
│ │ │ │ ├── ensurePositiveDelayProps.js
│ │ │ │ └── index.js
│ │ │ ├── TouchableHighlight/
│ │ │ │ └── index.js
│ │ │ ├── TouchableNativeFeedback/
│ │ │ │ └── index.js
│ │ │ ├── TouchableOpacity/
│ │ │ │ └── index.js
│ │ │ ├── TouchableWithoutFeedback/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── UIManager/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── Vibration/
│ │ │ │ └── index.js
│ │ │ ├── View/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ └── index-test.js.snap
│ │ │ │ │ └── index-test.js
│ │ │ │ ├── index.js
│ │ │ │ └── types.js
│ │ │ ├── VirtualizedList/
│ │ │ │ └── index.js
│ │ │ ├── YellowBox/
│ │ │ │ └── index.js
│ │ │ ├── createElement/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ └── index-test.js.snap
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── findNodeHandle/
│ │ │ │ └── index.js
│ │ │ ├── processColor/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── render/
│ │ │ │ └── index.js
│ │ │ ├── unmountComponentAtNode/
│ │ │ │ └── index.js
│ │ │ ├── useColorScheme/
│ │ │ │ └── index.js
│ │ │ ├── useLocaleContext/
│ │ │ │ └── index.js
│ │ │ └── useWindowDimensions/
│ │ │ └── index.js
│ │ ├── index.js
│ │ ├── modules/
│ │ │ ├── AccessibilityUtil/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── propsToAccessibilityComponent-test.js
│ │ │ │ │ └── propsToAriaRole-test.js
│ │ │ │ ├── index.js
│ │ │ │ ├── isDisabled.js
│ │ │ │ ├── propsToAccessibilityComponent.js
│ │ │ │ └── propsToAriaRole.js
│ │ │ ├── AssetRegistry/
│ │ │ │ └── index.js
│ │ │ ├── ImageLoader/
│ │ │ │ └── index.js
│ │ │ ├── TextInputState/
│ │ │ │ └── index.js
│ │ │ ├── UnimplementedView/
│ │ │ │ └── index.js
│ │ │ ├── addEventListener/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── index-test.js
│ │ │ │ │ └── index-test.node.js
│ │ │ │ └── index.js
│ │ │ ├── canUseDom/
│ │ │ │ └── index.js
│ │ │ ├── createDOMProps/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── dismissKeyboard/
│ │ │ │ └── index.js
│ │ │ ├── forwardedProps/
│ │ │ │ └── index.js
│ │ │ ├── getBoundingClientRect/
│ │ │ │ └── index.js
│ │ │ ├── isSelectionValid/
│ │ │ │ └── index.js
│ │ │ ├── isWebColor/
│ │ │ │ └── index.js
│ │ │ ├── mergeRefs/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── modality/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── multiplyStyleLengthValue/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── normalizeColor/
│ │ │ │ └── index.js
│ │ │ ├── pick/
│ │ │ │ └── index.js
│ │ │ ├── prefixStyles/
│ │ │ │ ├── index.js
│ │ │ │ └── static.js
│ │ │ ├── requestIdleCallback/
│ │ │ │ └── index.js
│ │ │ ├── setValueForStyles/
│ │ │ │ ├── dangerousStyleValue.js
│ │ │ │ └── index.js
│ │ │ ├── unitlessNumbers/
│ │ │ │ └── index.js
│ │ │ ├── useElementLayout/
│ │ │ │ └── index.js
│ │ │ ├── useEvent/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── useHover/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── useLayoutEffect/
│ │ │ │ └── index.js
│ │ │ ├── useLocale/
│ │ │ │ ├── index.js
│ │ │ │ └── isLocaleRTL.js
│ │ │ ├── useMergeRefs/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── usePlatformMethods/
│ │ │ │ └── index.js
│ │ │ ├── usePressEvents/
│ │ │ │ ├── PressResponder.js
│ │ │ │ └── index.js
│ │ │ ├── useResponderEvents/
│ │ │ │ ├── README.md
│ │ │ │ ├── ResponderEventTypes.js
│ │ │ │ ├── ResponderSystem.js
│ │ │ │ ├── ResponderTouchHistoryStore.js
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ ├── createResponderEvent.js
│ │ │ │ ├── index.js
│ │ │ │ └── utils.js
│ │ │ ├── useStable/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ └── warnOnce/
│ │ │ └── index.js
│ │ ├── types/
│ │ │ ├── index.js
│ │ │ └── styles.js
│ │ └── vendor/
│ │ ├── hash/
│ │ │ └── index.js
│ │ └── react-native/
│ │ ├── Animated/
│ │ │ ├── Animated.js
│ │ │ ├── AnimatedEvent.js
│ │ │ ├── AnimatedImplementation.js
│ │ │ ├── AnimatedMock.js
│ │ │ ├── AnimatedPlatformConfig.js
│ │ │ ├── Easing.js
│ │ │ ├── NativeAnimatedHelper.js
│ │ │ ├── NativeAnimatedModule.js
│ │ │ ├── NativeAnimatedTurboModule.js
│ │ │ ├── SpringConfig.js
│ │ │ ├── animations/
│ │ │ │ ├── Animation.js
│ │ │ │ ├── DecayAnimation.js
│ │ │ │ ├── SpringAnimation.js
│ │ │ │ └── TimingAnimation.js
│ │ │ ├── bezier.js
│ │ │ ├── components/
│ │ │ │ ├── AnimatedFlatList.js
│ │ │ │ ├── AnimatedImage.js
│ │ │ │ ├── AnimatedScrollView.js
│ │ │ │ ├── AnimatedSectionList.js
│ │ │ │ ├── AnimatedText.js
│ │ │ │ └── AnimatedView.js
│ │ │ ├── createAnimatedComponent.js
│ │ │ ├── nodes/
│ │ │ │ ├── AnimatedAddition.js
│ │ │ │ ├── AnimatedColor.js
│ │ │ │ ├── AnimatedDiffClamp.js
│ │ │ │ ├── AnimatedDivision.js
│ │ │ │ ├── AnimatedInterpolation.js
│ │ │ │ ├── AnimatedModulo.js
│ │ │ │ ├── AnimatedMultiplication.js
│ │ │ │ ├── AnimatedNode.js
│ │ │ │ ├── AnimatedProps.js
│ │ │ │ ├── AnimatedStyle.js
│ │ │ │ ├── AnimatedSubtraction.js
│ │ │ │ ├── AnimatedTracking.js
│ │ │ │ ├── AnimatedTransform.js
│ │ │ │ ├── AnimatedValue.js
│ │ │ │ ├── AnimatedValueXY.js
│ │ │ │ └── AnimatedWithChildren.js
│ │ │ └── useAnimatedProps.js
│ │ ├── Batchinator/
│ │ │ └── index.js
│ │ ├── EventEmitter/
│ │ │ ├── NativeEventEmitter.js
│ │ │ └── RCTDeviceEventEmitter.js
│ │ ├── FillRateHelper/
│ │ │ └── index.js
│ │ ├── FlatList/
│ │ │ └── index.js
│ │ ├── JSEventLoopWatchdog/
│ │ │ └── index.js
│ │ ├── LayoutAnimation/
│ │ │ └── index.js
│ │ ├── PanResponder/
│ │ │ └── index.js
│ │ ├── PooledClass/
│ │ │ └── index.js
│ │ ├── ReactNative/
│ │ │ └── ReactNativeFeatureFlags.js
│ │ ├── SHA
│ │ ├── SectionList/
│ │ │ └── index.js
│ │ ├── StaticContainer/
│ │ │ └── index.js
│ │ ├── StaticRenderer/
│ │ │ └── index.js
│ │ ├── TouchHistoryMath/
│ │ │ └── index.js
│ │ ├── TurboModule/
│ │ │ ├── RCTExport.js
│ │ │ └── TurboModuleRegistry.js
│ │ ├── Types/
│ │ │ └── CoreEventTypes.js
│ │ ├── Utilities/
│ │ │ ├── Platform.js
│ │ │ ├── clamp.js
│ │ │ ├── setAndForwardRef.js
│ │ │ ├── useMergeRefs.js
│ │ │ └── useRefEffect.js
│ │ ├── ViewabilityHelper/
│ │ │ └── index.js
│ │ ├── VirtualizeUtils/
│ │ │ └── index.js
│ │ ├── VirtualizedList/
│ │ │ ├── CellRenderMask.js
│ │ │ ├── ChildListCollection.js
│ │ │ ├── StateSafePureComponent.js
│ │ │ ├── VirtualizedListCellRenderer.js
│ │ │ ├── VirtualizedListContext.js
│ │ │ ├── VirtualizedListProps.js
│ │ │ └── index.js
│ │ ├── VirtualizedSectionList/
│ │ │ └── index.js
│ │ ├── deepDiffer/
│ │ │ └── index.js
│ │ ├── infoLog/
│ │ │ └── index.js
│ │ └── vendor/
│ │ └── emitter/
│ │ └── EventEmitter.js
│ ├── react-native-web-docs/
│ │ ├── .eleventy.js
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── package.json
│ │ └── src/
│ │ ├── data/
│ │ │ └── site.js
│ │ ├── includes/
│ │ │ ├── assets/
│ │ │ │ ├── inline.css
│ │ │ │ └── inline.js
│ │ │ ├── fragments/
│ │ │ │ ├── footer.html
│ │ │ │ ├── macros.html
│ │ │ │ └── nav.html
│ │ │ └── layouts/
│ │ │ ├── 404.html
│ │ │ ├── home.html
│ │ │ ├── page.html
│ │ │ └── shell.html
│ │ └── pages/
│ │ ├── 404.md
│ │ ├── docs/
│ │ │ ├── apis/
│ │ │ │ ├── _.md
│ │ │ │ ├── animated.md
│ │ │ │ ├── app-registry.md
│ │ │ │ ├── app-state.md
│ │ │ │ ├── appearance.md
│ │ │ │ ├── clipboard.md
│ │ │ │ ├── dimensions.md
│ │ │ │ ├── linking.md
│ │ │ │ ├── pan-responder.md
│ │ │ │ ├── pixel-ratio.md
│ │ │ │ ├── platform.md
│ │ │ │ ├── style-sheet.md
│ │ │ │ └── vibration.md
│ │ │ ├── appendix/
│ │ │ │ ├── _.md
│ │ │ │ ├── about-project.md
│ │ │ │ └── unstable-apis.md
│ │ │ ├── components/
│ │ │ │ ├── _.md
│ │ │ │ ├── activity-indicator.md
│ │ │ │ ├── checkbox.md
│ │ │ │ ├── image-background.md
│ │ │ │ ├── image.md
│ │ │ │ ├── lists.md
│ │ │ │ ├── modal.md
│ │ │ │ ├── picker.md
│ │ │ │ ├── pressable.md
│ │ │ │ ├── progress-bar.md
│ │ │ │ ├── scroll-view.md
│ │ │ │ ├── switch.md
│ │ │ │ ├── text-input.md
│ │ │ │ ├── text.md
│ │ │ │ └── view.md
│ │ │ ├── concepts/
│ │ │ │ ├── _.md
│ │ │ │ ├── accessibility.md
│ │ │ │ ├── interactions.md
│ │ │ │ ├── localization.md
│ │ │ │ ├── rendering.md
│ │ │ │ └── styling.md
│ │ │ ├── getting-started/
│ │ │ │ ├── _.md
│ │ │ │ ├── browser-compatibility.md
│ │ │ │ ├── help.md
│ │ │ │ ├── installation.md
│ │ │ │ ├── introduction.md
│ │ │ │ ├── multi-platform.md
│ │ │ │ ├── react-native-compatibility.md
│ │ │ │ ├── setup.md
│ │ │ │ └── typescript-support.md
│ │ │ └── hooks/
│ │ │ ├── _.md
│ │ │ ├── use-color-scheme.md
│ │ │ ├── use-locale-context.md
│ │ │ └── use-window-dimensions.md
│ │ ├── home.md
│ │ └── pages.json
│ └── react-native-web-examples/
│ ├── .babelrc
│ ├── LICENSE
│ ├── README.md
│ ├── next.config.js
│ ├── package.json
│ ├── pages/
│ │ ├── _document.js
│ │ ├── activity-indicator/
│ │ │ └── index.js
│ │ ├── animated/
│ │ │ └── index.js
│ │ ├── app-registry/
│ │ │ └── index.js
│ │ ├── app-state/
│ │ │ └── index.js
│ │ ├── checkbox/
│ │ │ └── index.js
│ │ ├── clipboard/
│ │ │ └── index.js
│ │ ├── dimensions/
│ │ │ └── index.js
│ │ ├── flatlist/
│ │ │ └── index.js
│ │ ├── image/
│ │ │ └── index.js
│ │ ├── image-background/
│ │ │ └── index.js
│ │ ├── index.js
│ │ ├── linking/
│ │ │ └── index.js
│ │ ├── lists/
│ │ │ └── index.js
│ │ ├── localization/
│ │ │ └── index.js
│ │ ├── modal/
│ │ │ └── index.js
│ │ ├── pan-responder/
│ │ │ └── index.js
│ │ ├── pressable/
│ │ │ └── index.js
│ │ ├── progress-bar/
│ │ │ └── index.js
│ │ ├── scroll-view/
│ │ │ └── index.js
│ │ ├── section-list/
│ │ │ └── index.js
│ │ ├── switch/
│ │ │ └── index.js
│ │ ├── text/
│ │ │ └── index.js
│ │ ├── text-input/
│ │ │ └── index.js
│ │ └── view/
│ │ └── index.js
│ ├── sandbox.config.json
│ └── shared/
│ ├── button.js
│ └── example.js
└── scripts/
├── createBabelReactNativeWebModuleMap.js
├── createInlineStylePrefixerData.js
└── releaseReactNativeWebPackages.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .codesandbox/ci.json
================================================
{
"packages": ["packages/react-native-web", "packages/babel-plugin-react-native-web"],
"buildCommand": "build",
"sandboxes": ["/packages/react-native-web-examples/"],
"node": "16"
}
================================================
FILE: .github/CONTRIBUTING.md
================================================
# Contributing
## Reporting Issues and Asking Questions
Before opening an issue, please search the [issue tracker](https://github.com/necolas/react-native-web/issues) to make sure your issue hasn't already been reported. Please note that your issue may be closed if it doesn't include the information requested in the issue template.
## Getting started
Visit the [Issue tracker](https://github.com/necolas/react-native-web/issues) to find a list of open issues that need attention.
Fork, then clone the repo:
```
git clone https://github.com/your-username/react-native-web.git
```
Install dependencies (requires Node.js >= 16.0):
```
npm install
```
## Build
Build a specific package:
```
npm run build -w <package-name>
```
For example, this will build `react-native-web`:
```
npm run build -w react-native-web
```
Build all packages that can be built:
```
npm run build
```
## Develop
Develop a specific package:
```
npm run dev -w <package-name>
```
For example, this command will watch and rebuild the `react-native-web` package:
```
npm run dev -w react-native-web
```
And this command will watch and rebuild the `react-native-web-examples` package:
```
npm run dev -w react-native-web-examples
```
## Test
Run the monorepo linter:
```
npm run lint
```
Run the monorepo type checker:
```
npm run flow
```
Run the monorepo unit tests:
```
npm run unit
```
Run all the automated tests:
```
npm run test
```
## New Features
Please open an issue with a proposal for a new feature or refactoring before starting on the work. We don't want you to waste your efforts on a pull request that we won't want to accept.
## Pull requests
**Before submitting a pull request**, please make sure the following is done:
1. Fork the repository and create your branch from `master`.
2. If you've added code that should be tested, add tests!
3. If you've changed APIs, update the documentation.
4. Ensure the tests pass (`npm run test`).
You should see a pre-commit hook run before each commit.
You can now submit a pull request, referencing any issues it addresses.
Please try to keep your pull request focused in scope and avoid including unrelated commits.
After you have submitted your pull request, it's recommended that **you** perform the first code review. We'll try to get back to you as soon as possible and may suggest changes.
Thank you for contributing!
## Releases
To commit, publish, and push a final version:
```
npm run release -- <version> --otp=<otp-code>
```
Release candidates or versions that you'd like to publish to npm, but do not want to produce a commit and push it to GitHub:
```
npm run release -- <version> --skip-git
```
================================================
FILE: .github/ISSUE_TEMPLATE/bug.yml
================================================
name: Bug report
description: File a bug report
labels: ["bug"]
body:
- type: markdown
attributes:
value: |
Thank you for reporting an issue! Create a test case for your issue by forking this template https://codesandbox.io/s/6lx6ql1w5r
- type: checkboxes
attributes:
label: Is there an existing issue for this?
description: Please search to see if an issue already exists for the bug you encountered.
options:
- label: I have searched the existing issues
required: true
- type: textarea
attributes:
label: Describe the issue
description: Please provide a concise description of what you're experiencing. Providing screenshots is also helpful.
validations:
required: true
- type: textarea
attributes:
label: Expected behavior
description: Please provide a concise description of what you expected to happen.
validations:
required: true
- type: textarea
attributes:
label: Steps to reproduce
description: Please describe the precise steps needed to reproduce the behavior.
placeholder: |
Mention package versions and environment (browser, etc)...
1. ...
2. ...
validations:
required: true
- type: input
attributes:
label: Test case
description: Please provide a link to a reduced test case that reproduces the issue.
placeholder: "https://codesandbox.io/s/6lx6ql1w5r"
validations:
required: true
- type: textarea
attributes:
label: Additional comments
description: You're welcome to provide additional context and proposed solutions.
================================================
FILE: .github/ISSUE_TEMPLATE/config.yml
================================================
blank_issues_enabled: false
================================================
FILE: .github/ISSUE_TEMPLATE/feature.yml
================================================
name: Feature request
description: If you have a suggestion…
labels: ["enhancement"]
body:
- type: markdown
attributes:
value: |
Thank you for suggesting a feature!
- type: checkboxes
attributes:
label: Is there an existing request?
description: Please search open and closed issues to see if this request has already been made.
options:
- label: I have searched for this request
required: true
- type: textarea
attributes:
label: Describe the feature request
description: Please provide a concise description of the request, potential solutions, and additional context.
validations:
required: true
================================================
FILE: .github/labels-config.yml
================================================
# Configuration for Label Actions - https://github.com/marketplace/actions/label-actions
"needs: issue template":
comment: >
<strong>:warning: This issue is missing required fields</strong>. To avoid this issue being closed, please provide the required information as described in the <a href="https://github.com/necolas/react-native-web/blob/master/.github/ISSUE_TEMPLATE/bug.yml">ISSUE TEMPLATE</a>.
"resolution: no response":
comment: >
This issue is being closed because the requested information has not been provided.
close: true
================================================
FILE: .github/workflows/labels.yml
================================================
name: labels
on:
issues:
types: [labeled, unlabeled]
pull_request:
types: [labeled, unlabeled]
permissions:
contents: read
issues: write
pull-requests: write
jobs:
label-actions:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: dessant/label-actions@v3
with:
config-path: .github/labels-config.yml
github-token: ${{ github.token }}
================================================
FILE: .github/workflows/performance.yml
================================================
name: performance
on: [pull_request]
jobs:
compressed-size:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: necolas/compressed-size-action@master
with:
build-script: "compile"
exclude: "./packages/react-native-web/dist/cjs/{index.js,**/*.js}"
pattern: "./packages/react-native-web/dist/{index.js,**/*.js}"
repo-token: "${{ secrets.GITHUB_TOKEN }}"
================================================
FILE: .github/workflows/react-integration.yml
================================================
name: react@next integration
on:
schedule:
# Run every Monday at 12:00 (see https://crontab.guru)
- cron: '0 12 * * 1'
jobs:
react-next:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
- run: npm install
# Update react-native-web to use react@next
- run: npm install --force react@next react-dom@next -w react-native-web
# Run the unit tests
- run: npm run unit
================================================
FILE: .github/workflows/tests.yml
================================================
name: tests
on:
push:
branches:
- "master"
pull_request:
types: [opened, synchronize, reopened]
jobs:
format:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
- run: npm install
- run: npm run format
type-check:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
- run: npm install
- run: npm run flow
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
- run: npm install
- run: npm run lint
unit-test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
- run: npm install
- run: npm run unit
================================================
FILE: .gitignore
================================================
.next
build
coverage
dist
node_modules
================================================
FILE: .watchmanconfig
================================================
{}
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) Nicolas Gallagher.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# Development monorepo
This is the development monorepo for "React Native for Web" and related projects.
## Structure
* `.github`
* Contains workflows used by GitHub Actions.
* Contains issue templates.
* `configs`
* Contains configuration files used by the monorepo tooling (compiling, linting, testing, etc.)
* `packages`
* [react-native-web](https://github.com/necolas/react-native-web/blob/master/packages/react-native-web)
* Contains the individual packages managed in the monorepo.
* `scripts`
* Contains Node.js scripts for miscellaneous tasks.
## Tasks
* `build`
* Use `npm run build` to run the build script in every package.
* Use `npm run build -w <package-name>` to run the build script for a specific package.
* `dev`
* Use `npm run dev` to run the dev script in every package.
* Use `npm run dev -w <package-name>` to run the dev script for a specific package.
* `test`
* Use `npm run test` to run tests for every package.
More details can be found in the contributing guide below.
## Contributing
Development happens in the open on GitHub and we are grateful for contributions including bugfixes, improvements, and ideas.
### Code of conduct
This project expects all participants to adhere to Meta's OSS [Code of Conduct][code-of-conduct]. Please read the full text so that you can understand what actions will and will not be tolerated.
### Contributing guide
Read the [contributing guide][contributing-url] to learn about the development process, how to propose bugfixes and improvements, and how to build and test your changes to React Native for Web.
### Good first issues
To help you get you familiar with the contribution process, there is a list of [good first issues][good-first-issue-url] that contain bugs which have a relatively limited scope. This is a great place to get started.
[contributing-url]: https://github.com/necolas/react-native-web/blob/master/.github/CONTRIBUTING.md
[good-first-issue-url]: https://github.com/necolas/react-native-web/labels/good%20first%20issue
[code-of-conduct]: https://opensource.fb.com/code-of-conduct/
================================================
FILE: configs/.eslintignore
================================================
coverage
dist
flow-typed
node_modules
packages/**/vendor/*
packages/**/.next
================================================
FILE: configs/.eslintrc
================================================
{
"settings": {
"react": {
"pragma": "React",
"version": "18.0",
"flowVersion": "0.148.0" // Flow version
}
},
// babel parser to support ES6/7 features
"parser": "@babel/eslint-parser",
"parserOptions": {
"ecmaVersion": 7,
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"requireConfigFile": false,
"sourceType": "module"
},
"extends": [
"plugin:flowtype/recommended",
"prettier"
],
"plugins": [
"flowtype",
"promise",
"react",
"react-hooks"
],
"env": {
"browser": true,
"es6": true,
"jest": true,
"node": true
},
"ignorePatterns": [
"coverage",
"dist",
"flow-typed",
"node_modules",
"packages/**/vendor/*",
"packages/**/.next"
],
"globals": {
},
"rules": {
"camelcase": 0,
"constructor-super": 2,
"default-case": [2, { "commentPattern": "^no default$" }],
"eqeqeq": [2, "allow-null"],
"handle-callback-err": [2, "^(err|error)$" ],
"new-cap": [2, { "newIsCap": true, "capIsNew": false }],
"no-alert": 1,
"no-array-constructor": 2,
"no-caller": 2,
"no-case-declarations": 2,
"no-class-assign": 2,
"no-cond-assign": 2,
"no-const-assign": 2,
"no-control-regex": 2,
"no-debugger": 2,
"no-delete-var": 2,
"no-dupe-args": 2,
"no-dupe-class-members": 2,
"no-dupe-keys": 2,
"no-duplicate-case": 2,
"no-empty-character-class": 2,
"no-empty-pattern": 2,
"no-eval": 2,
"no-ex-assign": 2,
"no-extend-native": 2,
"no-extra-bind": 2,
"no-extra-boolean-cast": 2,
"no-fallthrough": 2,
"no-floating-decimal": 2,
"no-func-assign": 2,
"no-implied-eval": 2,
"no-inner-declarations": [2, "functions"],
"no-invalid-regexp": 2,
"no-irregular-whitespace": 2,
"no-iterator": 2,
"no-label-var": 2,
"no-labels": [2, { "allowLoop": false, "allowSwitch": false }],
"no-lone-blocks": 2,
"no-loop-func": 2,
"no-multi-str": 2,
"no-native-reassign": 2,
"no-negated-in-lhs": 2,
"no-new": 2,
"no-new-func": 2,
"no-new-object": 2,
"no-new-require": 2,
"no-new-symbol": 2,
"no-new-wrappers": 2,
"no-obj-calls": 2,
"no-octal": 2,
"no-octal-escape": 2,
"no-path-concat": 2,
"no-proto": 2,
"no-redeclare": 2,
"no-regex-spaces": 2,
"no-return-assign": [2, "except-parens"],
"no-script-url": 2,
"no-self-assign": 2,
"no-self-compare": 2,
"no-sequences": 2,
"no-shadow-restricted-names": 2,
"no-sparse-arrays": 2,
"no-this-before-super": 2,
"no-throw-literal": 2,
"no-undef": 2,
"no-undef-init": 2,
"no-unexpected-multiline": 2,
"no-unmodified-loop-condition": 2,
"no-unneeded-ternary": [2, { "defaultAssignment": false }],
"no-unreachable": 2,
"no-unsafe-finally": 2,
"no-unused-vars": [2, { "vars": "all", "args": "none" }],
"no-useless-call": 2,
"no-useless-computed-key": 2,
"no-useless-concat": 2,
"no-useless-constructor": 2,
"no-useless-escape": 2,
"no-var": 2,
"no-with": 2,
"prefer-const": 2,
"prefer-rest-params": 2,
"quotes": [2, "single", { "avoidEscape": true, "allowTemplateLiterals": true }],
"radix": 2,
"use-isnan": 2,
"valid-typeof": 2,
"yoda": [2, "never"],
// flow
"flowtype/generic-spacing": 0,
"flowtype/space-after-type-colon": 0,
// promise
"promise/param-names": 2,
// react
"react/display-name": 0,
"react/jsx-no-bind": 0,
"react/jsx-no-duplicate-props": 2,
"react/jsx-no-undef": 2,
"react/jsx-pascal-case": 2,
"react/jsx-sort-props": 2,
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": 2,
"react/no-did-mount-set-state": 0,
"react/no-did-update-set-state": 2,
"react/no-direct-mutation-state": 2,
"react/no-multi-comp": 0,
"react/no-string-refs": 2,
"react/no-unknown-property": 2,
"react/prefer-es6-class": 2,
"react/prop-types": 0,
"react/react-in-jsx-scope": 0,
"react/self-closing-comp": 2,
"react/sort-comp": 0,
"react/sort-prop-types": 2,
"react/wrap-multilines": 0,
// react-hooks
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn"
}
}
================================================
FILE: configs/.flowconfig
================================================
[version]
0.148.0
[ignore]
<PROJECT_ROOT>/.*/__tests__/.*
<PROJECT_ROOT>/packages/.*/dist/.*
<PROJECT_ROOT>/packages/react-native-web-docs/.*
<PROJECT_ROOT>/packages/react-native-web-examples/.*
[include]
[declarations]
.*/node_modules/.*
[libs]
[options]
indexed_access=true
munge_underscores=true
================================================
FILE: configs/.prettierignore
================================================
../coverage
../**/dist
../flow-typed
../node_modules
../packages/**/vendor/*
../packages/**/.next
================================================
FILE: configs/babel.config.js
================================================
const createConfig = ({ modules }) => {
const plugins = [
'@babel/plugin-transform-flow-strip-types',
['@babel/plugin-proposal-class-properties', { loose: true }],
['@babel/plugin-proposal-object-rest-spread', { useBuiltIns: true }],
'@babel/plugin-proposal-nullish-coalescing-operator',
[
'@babel/plugin-transform-runtime',
{
version: '7.18.6'
}
]
].concat(modules ? ['babel-plugin-add-module-exports'] : []);
return {
assumptions: {
iterableIsArray: true
},
comments: true,
presets: [
[
'@babel/preset-env',
{
loose: true,
modules,
exclude: ['transform-typeof-symbol'],
targets: {
browsers: [
'chrome 49',
// https://www.mozilla.org/en-US/firefox/all/#product-desktop-esr
'firefox 91',
'ios_saf 10',
'safari 10',
// https://docs.microsoft.com/en-us/DeployEdge/microsoft-edge-support-lifecycle
'edge 94',
'opera 36'
]
}
}
],
'@babel/preset-react',
'@babel/preset-flow'
],
plugins: plugins
};
};
module.exports = function (api) {
if (api) {
api.cache(true);
}
return process.env.BABEL_ENV === 'commonjs' || process.env.NODE_ENV === 'test'
? createConfig({ modules: 'commonjs' })
: createConfig({ modules: false });
};
================================================
FILE: configs/husky/pre-commit
================================================
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx --no lint-staged
================================================
FILE: configs/jest-setupFiles.dom.js
================================================
/**
* Copyright (c) Nicolas Gallagher.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
// JSDOM doesn't implement ResizeObserver
class ResizeObserver {
disconnect() {}
observe() {}
unobserve() {}
}
window.ResizeObserver = ResizeObserver;
// JSDOM doesn't provide values for 'clientWidth' etc
Object.defineProperty(window.document.documentElement, 'clientHeight', {
get: function () {
return this._jsdomClientWidth || window.innerHeight;
}
});
Object.defineProperty(window.document.documentElement, 'clientWidth', {
get: function () {
return this._jsdomClientWidth || window.innerWidth;
}
});
================================================
FILE: configs/jest.config.js
================================================
'use strict';
const babelConfig = require('./babel.config.js');
module.exports = {
coveragePathIgnorePatterns: [
'/node_modules/',
'<rootDir>/packages/react-native-web/src/vendor/'
],
fakeTimers: {
enableGlobally: true
},
modulePathIgnorePatterns: [
'<rootDir>/packages/benchmarks/',
'<rootDir>/packages/react-native-web-docs/',
'<rootDir>/packages/react-native-web-examples/',
'<rootDir>/packages/react-native-web/dist/'
],
rootDir: process.cwd(),
roots: ['<rootDir>/packages'],
setupFiles: [require.resolve('./jest-setupFiles.dom.js')],
snapshotFormat: {
printBasicPrototype: false
},
testEnvironment: 'jsdom',
testMatch: ['**/__tests__/**/?(*-)+(spec|test).[jt]s?(x)'],
transform: {
'\\.[jt]sx?$': ['babel-jest', babelConfig()]
}
};
================================================
FILE: configs/jest.config.node.js
================================================
'use strict';
const babelConfig = require('./babel.config.js');
module.exports = {
coveragePathIgnorePatterns: [
'/node_modules/',
'<rootDir>/packages/react-native-web/src/vendor/'
],
fakeTimers: {
enableGlobally: true
},
modulePathIgnorePatterns: [
'<rootDir>/packages/benchmarks/',
'<rootDir>/packages/react-native-web-docs/',
'<rootDir>/packages/react-native-web-examples/',
'<rootDir>/packages/react-native-web/dist/'
],
rootDir: process.cwd(),
roots: ['<rootDir>/packages'],
snapshotFormat: {
printBasicPrototype: false
},
testEnvironment: 'node',
testMatch: ['**/__tests__/**/?(*-)+(spec|test).node.[jt]s?(x)'],
transform: {
'\\.[jt]sx?$': ['babel-jest', babelConfig()]
}
};
================================================
FILE: flow-typed/npm/create-react-class_v15.x.x.js
================================================
// flow-typed signature: 59a949eac1b23f4800e93fe3c647f055
// flow-typed version: c6154227d1/create-react-class_v15.x.x/flow_>=v0.104.x
declare module "create-react-class" {
declare module.exports: React$CreateClass;
}
================================================
FILE: flow-typed/npm/prop-types_v15.x.x.js
================================================
// flow-typed signature: c93a723cbeb4d2f95d6a472157f6052f
// flow-typed version: 61b795e5b6/prop-types_v15.x.x/flow_>=v0.104.x
type $npm$propTypes$ReactPropsCheckType = (
props: any,
propName: string,
componentName: string,
href?: string
) => ?Error;
// Copied from: https://github.com/facebook/flow/blob/0938da8d7293d0077fbe95c3a3e0eebadb57b012/lib/react.js#L433-L449
declare module 'prop-types' {
declare var array: React$PropType$Primitive<Array<any>>;
declare var bool: React$PropType$Primitive<boolean>;
declare var func: React$PropType$Primitive<(...a: Array<any>) => mixed>;
declare var number: React$PropType$Primitive<number>;
declare var object: React$PropType$Primitive<{ +[string]: mixed, ... }>;
declare var string: React$PropType$Primitive<string>;
declare var symbol: React$PropType$Primitive<Symbol>;
declare var any: React$PropType$Primitive<any>;
declare var arrayOf: React$PropType$ArrayOf;
declare var element: React$PropType$Primitive<any>;
declare var elementType: React$PropType$Primitive<any>;
declare var instanceOf: React$PropType$InstanceOf;
declare var node: React$PropType$Primitive<any>;
declare var objectOf: React$PropType$ObjectOf;
declare var oneOf: React$PropType$OneOf;
declare var oneOfType: React$PropType$OneOfType;
declare var shape: React$PropType$Shape;
declare function checkPropTypes<V>(
propTypes: { [key: $Keys<V>]: $npm$propTypes$ReactPropsCheckType, ... },
values: V,
location: string,
componentName: string,
getStack: ?() => ?string
): void;
}
================================================
FILE: flow-typed/npm/styleq.js
================================================
type CompiledStyle = {
$$css: boolean,
[key: string]: string,
};
type InlineStyle = {
[key: string]: mixed,
};
type EitherStyle = CompiledStyle | InlineStyle;
type StylesArray<+T> = T | $ReadOnlyArray<StylesArray<T>>;
type Styles = StylesArray<EitherStyle | false | void>;
type Style<+T = EitherStyle> = StylesArray<false | ?T>;
type StyleqOptions = {
disableCache?: boolean,
disableMix?: boolean,
transform?: (EitherStyle) => EitherStyle,
};
type StyleqResult = [string, InlineStyle | null];
type Styleq = (styles: Styles) => StyleqResult;
type IStyleq = {
(...styles: $ReadOnlyArray<Styles>): StyleqResult,
factory: (options?: StyleqOptions) => Styleq,
};
declare module "styleq" {
declare module.exports: {
styleq: IStyleq
};
}
declare module "styleq/transform-localize-style" {
declare module.exports: {
localizeStyle: (style: EitherStyle, isRTL: boolean) => EitherStyle
};
}
================================================
FILE: package.json
================================================
{
"private": true,
"version": "0.0.0",
"name": "react-ui-monorepo",
"scripts": {
"clean": "del-cli ./packages/*/dist",
"build": "npm run clean && npm run build --workspaces --if-present",
"compile": "npm run build",
"dev": "npm run dev --workspaces --if-present",
"flow": "flow --flowconfig-name ./configs/.flowconfig",
"format": "prettier --check --ignore-path ./configs/.prettierignore \"**/*.js\"",
"format:fix": "prettier --write --ignore-path ./configs/.prettierignore \"**/*.js\"",
"lint": "eslint configs packages scripts --config ./configs/.eslintrc",
"lint:fix": "npm run lint -- --fix",
"prerelease": "npm run test && npm run build",
"release": "node ./scripts/releaseReactNativeWebPackages.js",
"release:benchmarks": "git checkout gh-pages && rm -rf ./docs/benchmarks && mv packages/benchmarks/dist ./docs/benchmarks && git add -A && git commit -m \"Deploy benchmarks\" && git push origin gh-pages && git checkout -",
"release:react-native-web-docs": "git checkout gh-pages && rm -rf ./docs && mv packages/react-native-web-docs/dist ./docs && git add ./docs && git commit -m \"Deploy documentation\" && git push origin gh-pages && git checkout -",
"postrelease": "npm run release:react-native-web-docs && npm run release:benchmarks",
"prepare": "husky install configs/husky",
"test": "npm run flow && npm run format && npm run lint && npm run unit --runInBand",
"unit": "npm-run-all \"unit:* {@}\" --",
"unit:dom": "jest --config ./configs/jest.config.js",
"unit:node": "jest --config ./configs/jest.config.node.js"
},
"devDependencies": {
"@babel/cli": "^7.18.6",
"@babel/core": "^7.18.6",
"@babel/eslint-parser": "^7.18.2",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
"@babel/plugin-proposal-object-rest-spread": "^7.18.6",
"@babel/plugin-transform-runtime": "^7.18.6",
"@babel/preset-env": "^7.18.6",
"@babel/preset-flow": "^7.18.6",
"@babel/preset-react": "^7.18.6",
"@testing-library/react": "^16.3.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^29.7.0",
"babel-plugin-add-module-exports": "^1.0.4",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"caniuse-api": "^3.0.0",
"cross-env": "^7.0.3",
"del-cli": "^4.0.1",
"eslint": "^8.19.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-flowtype": "^8.0.3",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.6.0",
"flow-bin": "0.148.0",
"gen-flow-files": "^0.4.11",
"glob": "^8.0.3",
"husky": "^8.0.0",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"lint-staged": "^13.0.3",
"minimist": "^1.2.6",
"npm-run-all": "^4.1.3",
"prettier": "^2.7.1"
},
"workspaces": [
"packages/react-native-web",
"packages/*"
],
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"packages/react-native-web/src/index.js": [
"node ./scripts/createBabelReactNativeWebModuleMap.js",
"prettier --write ./packages/babel-plugin-react-native-web/src/moduleMap.js"
],
"**/*.js": [
"npm run format:fix",
"npm run lint:fix"
]
},
"prettier": {
"singleQuote": true,
"trailingComma": "none"
},
"author": "Nicolas Gallagher",
"license": "MIT"
}
================================================
FILE: packages/babel-plugin-react-native-web/LICENSE
================================================
MIT License
Copyright (c) Nicolas Gallagher.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: packages/babel-plugin-react-native-web/README.md
================================================
# babel-plugin-react-native-web
[![npm version][package-badge]][package-url] [](https://reactjs.org/docs/how-to-contribute.html#your-first-pull-request)
A Babel plugin that will alias `react-native` to `react-native-web` and exclude
any modules not required by your app (keeping bundle size down).
## Installation
```
npm install --save-dev babel-plugin-react-native-web
```
## Usage
**.babelrc**
```
{
"plugins": [
["react-native-web", { commonjs: true }]
]
}
```
You should configure the plugin to match the module format used by your
bundler. Most modern bundlers will use a package's ES modules by default (i.e.,
if `package.json` has a `module` field). But if you need the plugin to rewrite
import paths to point to CommonJS modules, you must set the `commonjs` option
to `true`.
## Example
NOTE: `react-native-web` internal paths are _not stable_ and you must not rely
on them. Always use the Babel plugin to optimize your build. What follows is an
example of the rewrite performed by the plugin.
**Before**
```js
import { StyleSheet, View } from 'react-native';
```
**After**
```js
import StyleSheet from 'react-native-web/dist/exports/StyleSheet';
import View from 'react-native-web/dist/exports/View';
```
[package-badge]: https://img.shields.io/npm/v/babel-plugin-react-native-web.svg?style=flat
[package-url]: https://www.npmjs.com/package/babel-plugin-react-native-web
================================================
FILE: packages/babel-plugin-react-native-web/index.js
================================================
module.exports = require('./src');
================================================
FILE: packages/babel-plugin-react-native-web/package.json
================================================
{
"publishConfig": {
"registry": "https://registry.npmjs.org/"
},
"name": "babel-plugin-react-native-web",
"version": "0.21.2",
"description": "Babel plugin for React Native for Web",
"main": "index.js",
"devDependencies": {
"babel-plugin-tester": "^10.1.0"
},
"author": "Nicolas Gallagher",
"license": "MIT",
"repository": {
"type": "git",
"url": "git://github.com/necolas/react-native-web.git"
}
}
================================================
FILE: packages/babel-plugin-react-native-web/src/__tests__/__snapshots__/index-test.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Rewrite react-native to react-native-web export from "react-native": export from "react-native" 1`] = `
export { View } from 'react-native';
export { StyleSheet, Text, unstable_createElement } from 'react-native';
↓ ↓ ↓ ↓ ↓ ↓
export { default as View } from 'react-native-web/dist/exports/View';
export { default as StyleSheet } from 'react-native-web/dist/exports/StyleSheet';
export { default as Text } from 'react-native-web/dist/exports/Text';
export { default as unstable_createElement } from 'react-native-web/dist/exports/createElement';
`;
exports[`Rewrite react-native to react-native-web export from "react-native-web": export from "react-native-web" 1`] = `
export { View } from 'react-native-web';
export { StyleSheet, Text, unstable_createElement } from 'react-native-web';
↓ ↓ ↓ ↓ ↓ ↓
export { default as View } from 'react-native-web/dist/exports/View';
export { default as StyleSheet } from 'react-native-web/dist/exports/StyleSheet';
export { default as Text } from 'react-native-web/dist/exports/Text';
export { default as unstable_createElement } from 'react-native-web/dist/exports/createElement';
`;
exports[`Rewrite react-native to react-native-web import from "react-native": import from "react-native" 1`] = `
import ReactNative from 'react-native';
import { View } from 'react-native';
import { Invalid, View as MyView } from 'react-native';
import { useLocaleContext } from 'react-native';
import * as ReactNativeModules from 'react-native';
↓ ↓ ↓ ↓ ↓ ↓
import ReactNative from 'react-native-web/dist/index';
import View from 'react-native-web/dist/exports/View';
import { Invalid } from 'react-native-web/dist/index';
import MyView from 'react-native-web/dist/exports/View';
import useLocaleContext from 'react-native-web/dist/exports/useLocaleContext';
import * as ReactNativeModules from 'react-native-web/dist/index';
`;
exports[`Rewrite react-native to react-native-web import from "react-native": import from "react-native" 2`] = `
import ReactNative from 'react-native';
import { View } from 'react-native';
import { Invalid, View as MyView } from 'react-native';
import * as ReactNativeModules from 'react-native';
↓ ↓ ↓ ↓ ↓ ↓
import ReactNative from 'react-native-web/dist/cjs/index';
import View from 'react-native-web/dist/cjs/exports/View';
import { Invalid } from 'react-native-web/dist/cjs/index';
import MyView from 'react-native-web/dist/cjs/exports/View';
import * as ReactNativeModules from 'react-native-web/dist/cjs/index';
`;
exports[`Rewrite react-native to react-native-web import from "react-native-web": import from "react-native-web" 1`] = `
import { unstable_createElement } from 'react-native-web';
import { StyleSheet, View, Pressable, processColor } from 'react-native-web';
import * as ReactNativeModules from 'react-native-web';
↓ ↓ ↓ ↓ ↓ ↓
import unstable_createElement from 'react-native-web/dist/exports/createElement';
import StyleSheet from 'react-native-web/dist/exports/StyleSheet';
import View from 'react-native-web/dist/exports/View';
import Pressable from 'react-native-web/dist/exports/Pressable';
import processColor from 'react-native-web/dist/exports/processColor';
import * as ReactNativeModules from 'react-native-web/dist/index';
`;
exports[`Rewrite react-native to react-native-web require "react-native": require "react-native" 1`] = `
const ReactNative = require('react-native');
const { View } = require('react-native');
const { StyleSheet, Pressable } = require('react-native');
↓ ↓ ↓ ↓ ↓ ↓
const ReactNative = require('react-native-web/dist/index');
const View = require('react-native-web/dist/exports/View').default;
const StyleSheet = require('react-native-web/dist/exports/StyleSheet').default;
const Pressable = require('react-native-web/dist/exports/Pressable').default;
`;
exports[`Rewrite react-native to react-native-web require "react-native": require "react-native" 2`] = `
const ReactNative = require('react-native');
const { View } = require('react-native');
const { StyleSheet, Pressable } = require('react-native');
↓ ↓ ↓ ↓ ↓ ↓
const ReactNative = require('react-native-web/dist/cjs/index');
const View = require('react-native-web/dist/cjs/exports/View').default;
const StyleSheet =
require('react-native-web/dist/cjs/exports/StyleSheet').default;
const Pressable =
require('react-native-web/dist/cjs/exports/Pressable').default;
`;
exports[`Rewrite react-native to react-native-web require "react-native-web": require "react-native-web" 1`] = `
const ReactNative = require('react-native-web');
const { unstable_createElement } = require('react-native-web');
const { StyleSheet, View, Pressable, processColor } = require('react-native-web');
↓ ↓ ↓ ↓ ↓ ↓
const ReactNative = require('react-native-web/dist/index');
const unstable_createElement =
require('react-native-web/dist/exports/createElement').default;
const StyleSheet = require('react-native-web/dist/exports/StyleSheet').default;
const View = require('react-native-web/dist/exports/View').default;
const Pressable = require('react-native-web/dist/exports/Pressable').default;
const processColor =
require('react-native-web/dist/exports/processColor').default;
`;
================================================
FILE: packages/babel-plugin-react-native-web/src/__tests__/index-test.js
================================================
const plugin = require('..');
const pluginTester = require('babel-plugin-tester').default;
const tests = [
// import react-native
{
title: 'import from "react-native"',
code: `import ReactNative from 'react-native';
import { View } from 'react-native';
import { Invalid, View as MyView } from 'react-native';
import { useLocaleContext } from 'react-native';
import * as ReactNativeModules from 'react-native';`,
snapshot: true
},
{
title: 'import from "react-native"',
code: `import ReactNative from 'react-native';
import { View } from 'react-native';
import { Invalid, View as MyView } from 'react-native';
import * as ReactNativeModules from 'react-native';`,
snapshot: true,
pluginOptions: { commonjs: true }
},
{
title: 'import from "react-native-web"',
code: `import { unstable_createElement } from 'react-native-web';
import { StyleSheet, View, Pressable, processColor } from 'react-native-web';
import * as ReactNativeModules from 'react-native-web';`,
snapshot: true
},
{
title: 'export from "react-native"',
code: `export { View } from 'react-native';
export { StyleSheet, Text, unstable_createElement } from 'react-native';`,
snapshot: true
},
{
title: 'export from "react-native-web"',
code: `export { View } from 'react-native-web';
export { StyleSheet, Text, unstable_createElement } from 'react-native-web';`,
snapshot: true
},
// require react-native
{
title: 'require "react-native"',
code: `const ReactNative = require('react-native');
const { View } = require('react-native');
const { StyleSheet, Pressable } = require('react-native');`,
snapshot: true
},
{
title: 'require "react-native"',
code: `const ReactNative = require('react-native');
const { View } = require('react-native');
const { StyleSheet, Pressable } = require('react-native');`,
snapshot: true,
pluginOptions: { commonjs: true }
},
{
title: 'require "react-native-web"',
code: `const ReactNative = require('react-native-web');
const { unstable_createElement } = require('react-native-web');
const { StyleSheet, View, Pressable, processColor } = require('react-native-web');`,
snapshot: true
}
];
pluginTester({
babelOptions: {
generatorOpts: {
jsescOption: {
quotes: 'single'
}
}
},
plugin,
pluginName: 'Rewrite react-native to react-native-web',
tests
});
================================================
FILE: packages/babel-plugin-react-native-web/src/index.js
================================================
const moduleMap = require('./moduleMap');
const isCommonJS = (opts) => opts.commonjs === true;
const getDistLocation = (importName, opts) => {
const format = isCommonJS(opts) ? 'cjs/' : '';
const internalName =
importName === 'unstable_createElement' ? 'createElement' : importName;
if (internalName === 'index') {
return `react-native-web/dist/${format}index`;
} else if (internalName && moduleMap[internalName]) {
return `react-native-web/dist/${format}exports/${internalName}`;
}
};
const isReactNativeRequire = (t, node) => {
const { declarations } = node;
if (declarations.length > 1) {
return false;
}
const { id, init } = declarations[0];
return (
(t.isObjectPattern(id) || t.isIdentifier(id)) &&
t.isCallExpression(init) &&
t.isIdentifier(init.callee) &&
init.callee.name === 'require' &&
init.arguments.length === 1 &&
(init.arguments[0].value === 'react-native' ||
init.arguments[0].value === 'react-native-web')
);
};
const isReactNativeModule = ({ source, specifiers }) =>
source &&
(source.value === 'react-native' || source.value === 'react-native-web') &&
specifiers.length;
module.exports = function ({ types: t }) {
return {
name: 'Rewrite react-native to react-native-web',
visitor: {
ImportDeclaration(path, state) {
const { specifiers } = path.node;
if (isReactNativeModule(path.node)) {
const imports = specifiers
.map((specifier) => {
if (t.isImportSpecifier(specifier)) {
const importName = specifier.imported.name;
const distLocation = getDistLocation(importName, state.opts);
if (distLocation) {
return t.importDeclaration(
[
t.importDefaultSpecifier(
t.identifier(specifier.local.name)
)
],
t.stringLiteral(distLocation)
);
}
}
return t.importDeclaration(
[specifier],
t.stringLiteral(getDistLocation('index', state.opts))
);
})
.filter(Boolean);
path.replaceWithMultiple(imports);
}
},
ExportNamedDeclaration(path, state) {
const { specifiers } = path.node;
if (isReactNativeModule(path.node)) {
const exports = specifiers
.map((specifier) => {
if (t.isExportSpecifier(specifier)) {
const exportName = specifier.exported.name;
const localName = specifier.local.name;
const distLocation = getDistLocation(localName, state.opts);
if (distLocation) {
return t.exportNamedDeclaration(
null,
[
t.exportSpecifier(
t.identifier('default'),
t.identifier(exportName)
)
],
t.stringLiteral(distLocation)
);
}
}
return t.exportNamedDeclaration(
null,
[specifier],
t.stringLiteral(getDistLocation('index', state.opts))
);
})
.filter(Boolean);
path.replaceWithMultiple(exports);
}
},
VariableDeclaration(path, state) {
if (isReactNativeRequire(t, path.node)) {
const { id } = path.node.declarations[0];
if (t.isObjectPattern(id)) {
const imports = id.properties
.map((identifier) => {
const distLocation = getDistLocation(
identifier.key.name,
state.opts
);
if (distLocation) {
return t.variableDeclaration(path.node.kind, [
t.variableDeclarator(
t.identifier(identifier.value.name),
t.memberExpression(
t.callExpression(t.identifier('require'), [
t.stringLiteral(distLocation)
]),
t.identifier('default')
)
)
]);
}
})
.filter(Boolean);
path.replaceWithMultiple(imports);
} else if (t.isIdentifier(id)) {
const name = id.name;
const importIndex = t.variableDeclaration(path.node.kind, [
t.variableDeclarator(
t.identifier(name),
t.callExpression(t.identifier('require'), [
t.stringLiteral(getDistLocation('index', state.opts))
])
)
]);
path.replaceWith(importIndex);
}
}
}
}
};
};
================================================
FILE: packages/babel-plugin-react-native-web/src/moduleMap.js
================================================
// THIS FILE IS AUTOMATICALLY GENERATED. DO NOT EDIT.
module.exports = {
AccessibilityInfo: true,
ActivityIndicator: true,
Alert: true,
Animated: true,
AppRegistry: true,
AppState: true,
Appearance: true,
BackHandler: true,
Button: true,
CheckBox: true,
Clipboard: true,
DeviceEventEmitter: true,
Dimensions: true,
Easing: true,
FlatList: true,
I18nManager: true,
Image: true,
ImageBackground: true,
InputAccessoryView: true,
InteractionManager: true,
Keyboard: true,
KeyboardAvoidingView: true,
LayoutAnimation: true,
Linking: true,
LogBox: true,
Modal: true,
NativeEventEmitter: true,
NativeModules: true,
PanResponder: true,
Picker: true,
PixelRatio: true,
Platform: true,
Pressable: true,
ProgressBar: true,
RefreshControl: true,
SafeAreaView: true,
ScrollView: true,
SectionList: true,
Share: true,
StatusBar: true,
StyleSheet: true,
Switch: true,
Text: true,
TextInput: true,
Touchable: true,
TouchableHighlight: true,
TouchableNativeFeedback: true,
TouchableOpacity: true,
TouchableWithoutFeedback: true,
UIManager: true,
Vibration: true,
View: true,
VirtualizedList: true,
YellowBox: true,
createElement: true,
findNodeHandle: true,
processColor: true,
render: true,
unmountComponentAtNode: true,
useColorScheme: true,
useLocaleContext: true,
useWindowDimensions: true
};
================================================
FILE: packages/benchmarks/LICENSE
================================================
MIT License
Copyright (c) Nicolas Gallagher.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: packages/benchmarks/README.md
================================================
# Benchmarks
Try the [benchmarks app](https://necolas.github.io/react-native-web/benchmarks) online.
To work on the benchmarks locally from monorepo root:
```
npm run dev -w react-native-web
npm run build -w benchmarks
open ./packages/benchmarks/dist/index.html
```
## Notes
These benchmarks are approximations of extreme cases that libraries may
encounter. Their purpose is to provide an early-warning signal for performance
regressions. Each test report includes the mean and standard deviation of the
timings, and approximations of the time spent in scripting (S) and layout (L).
The components used in the render benchmarks are simple enough to be
implemented by multiple UI or style libraries. The benchmark implementations
and the features of the style libraries are _only approximately equivalent in
functionality_.
No benchmark will run for more than 20 seconds.
### Mount deep/wide tree
These cases look at the performance of mounting and rendering large trees of
elements that use static styles.
### Update dynamic styles
This case looks at the performance of repeated style updates to a large mounted
tree. Some libraries choose to inject new styles for each "dynamic style",
whereas others choose to use inline styles. Libraries without built-in support
for dynamic styles (i.e., they rely on user-authored inline styles) are not
included.
## Example results
### MacBook Pro (2011)
MacBook Pro (13-inch, Early 2011); 2.3 GHz Intel Core i5; 8 GB 1333 MHz DDR3 RAM. Google Chrome 72.
Typical render timings: mean ± standard deviations.
| Implementation | Mount deep tree (ms) | Mount wide tree (ms) | Dynamic update (ms) |
| :--- | ---: | ---: | ---: |
| `css-modules` | `23.41` `±03.06` | `35.38` `±06.41` | - |
| `react-native-web@0.11.0` | `28.37` `±04.39` | `41.50` `±05.75` | `23.13` `±03.51` |
| `inline-styles` | `66.19` `±06.31` | `104.22` `±10.22` | `09.96` `±02.76` |
### Moto G4
Moto G4 (Android 7); Octa-core (4x1.5 GHz & 4x1.2 Ghz); 2 GB RAM. Google Chrome 72.
Typical render timings: mean ± standard deviations.
| Implementation | Mount deep tree (ms) | Mount wide tree (ms) | Dynamic update (ms) |
| :--- | ---: | ---: | ---: |
| `css-modules` | `71.33` `±09.68` | `101.36` `±12.36` | - |
| `react-native-web@0.11.0` | `83.65` `±12.40` | `123.59` `±14.40` | `75.41` `±07.74` |
| `inline-styles` | `188.35` `±17.69` | `282.35` `±22.48` | `28.10` `±06.87` |
================================================
FILE: packages/benchmarks/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Performance tests</title>
<meta name="viewport" content="width=device-width">
<style>
html, body { height: 100%; width: 100%; overflow: hidden; }
.root { height: 100%; overflow: hidden; }
</style>
</head>
<body>
<div class="root"></div>
<script src="./bundle.js"></script>
</body>
</html>
================================================
FILE: packages/benchmarks/package.json
================================================
{
"private": true,
"name": "benchmarks",
"version": "0.0.0",
"scripts": {
"clean": "del-cli ./dist",
"build": "NODE_ENV=production npm run dev",
"dev": "npm run clean && mkdir -p dist && cp -f index.html dist/index.html && webpack --config ./webpack.config.js"
},
"dependencies": {
"classnames": "^2.3.1",
"d3-scale-chromatic": "^3.0.0",
"prop-types": "^15.6.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-native-web": "0.18.10"
},
"devDependencies": {
"babel-loader": "^8.2.5",
"babel-plugin-react-native-web": "0.18.10",
"css-loader": "^6.7.1",
"style-loader": "^3.3.1",
"url-loader": "^4.1.1",
"webpack": "^5.76.0",
"webpack-bundle-analyzer": "^4.5.0",
"webpack-cli": "^4.10.0"
}
}
================================================
FILE: packages/benchmarks/src/app/App.js
================================================
import Benchmark from './Benchmark';
import { Picker, StyleSheet, ScrollView, Pressable, View } from 'react-native';
import React, { Component } from 'react';
import Button from './Button';
import { IconClear, IconEye } from './Icons';
import ReportCard from './ReportCard';
import Text from './Text';
import Layout from './Layout';
import { colors } from './theme';
const Overlay = () => <View style={[StyleSheet.absoluteFill, { zIndex: 2 }]} />;
export default class App extends Component {
static displayName = '@app/App';
constructor(props, context) {
super(props, context);
const currentBenchmarkName = Object.keys(props.tests)[0];
this.state = {
currentBenchmarkName,
currentLibraryName: 'react-native-web',
status: 'idle',
results: []
};
}
render() {
const { tests } = this.props;
const { currentBenchmarkName, status, currentLibraryName, results } =
this.state;
const currentImplementation =
tests[currentBenchmarkName][currentLibraryName];
const { Component, Provider, getComponentProps, sampleCount } =
currentImplementation;
return (
<Layout
actionPanel={
<View>
<View style={styles.pickers}>
<View style={styles.pickerContainer}>
<Text style={styles.pickerTitle}>Library</Text>
<Text style={{ fontWeight: 'bold' }}>{currentLibraryName}</Text>
<Picker
enabled={status !== 'running'}
onValueChange={this._handleChangeLibrary}
selectedValue={currentLibraryName}
style={styles.picker}
>
{Object.keys(tests[currentBenchmarkName]).map(
(libraryName) => (
<Picker.Item
key={libraryName}
label={libraryName}
value={libraryName}
/>
)
)}
</Picker>
</View>
<View style={{ width: 1, backgroundColor: colors.fadedGray }} />
<View style={styles.pickerContainer}>
<Text style={styles.pickerTitle}>Benchmark</Text>
<Text>{currentBenchmarkName}</Text>
<Picker
enabled={status !== 'running'}
onValueChange={this._handleChangeBenchmark}
selectedValue={currentBenchmarkName}
style={styles.picker}
>
{Object.keys(tests).map((test) => (
<Picker.Item key={test} label={test} value={test} />
))}
</Picker>
</View>
</View>
<View style={{ flexDirection: 'row', height: 50 }}>
<View style={styles.grow}>
<Button
onPress={this._handleStart}
style={styles.button}
title={status === 'running' ? 'Running…' : 'Run'}
/>
</View>
</View>
{status === 'running' ? <Overlay /> : null}
</View>
}
listPanel={
<View style={styles.listPanel}>
<View style={styles.grow}>
<View style={styles.listBar}>
<View style={styles.iconClearContainer}>
<Pressable onPress={this._handleClear}>
<IconClear />
</Pressable>
</View>
</View>
<ScrollView ref={this._setScrollRef} style={styles.grow}>
{results.map((r, i) => (
<ReportCard
benchmarkName={r.benchmarkName}
key={i}
libraryName={r.libraryName}
libraryVersion={r.libraryVersion}
mean={r.mean}
meanLayout={r.meanLayout}
meanScripting={r.meanScripting}
runTime={r.runTime}
sampleCount={r.sampleCount}
stdDev={r.stdDev}
/>
))}
{status === 'running' ? (
<ReportCard
benchmarkName={currentBenchmarkName}
libraryName={currentLibraryName}
/>
) : null}
</ScrollView>
</View>
{status === 'running' ? <Overlay /> : null}
</View>
}
viewPanel={
<View style={styles.viewPanel}>
<View style={styles.iconEyeContainer}>
<Pressable onPress={this._handleVisuallyHideBenchmark}>
<IconEye style={styles.iconEye} />
</Pressable>
</View>
<Provider>
{status === 'running' ? (
<React.Fragment>
<View ref={this._setBenchWrapperRef}>
<Benchmark
component={Component}
forceLayout={true}
getComponentProps={getComponentProps}
onComplete={this._createHandleComplete({
sampleCount,
benchmarkName: currentBenchmarkName,
libraryName: currentLibraryName
})}
ref={this._setBenchRef}
sampleCount={sampleCount}
timeout={20000}
type={Component.benchmarkType}
/>
</View>
</React.Fragment>
) : (
<Component {...getComponentProps({ cycle: 10 })} />
)}
</Provider>
{status === 'running' ? <Overlay /> : null}
</View>
}
/>
);
}
_handleChangeBenchmark = (value) => {
this.setState(() => ({ currentBenchmarkName: value }));
};
_handleChangeLibrary = (value) => {
this.setState(() => ({ currentLibraryName: value }));
};
_handleStart = () => {
this.setState(
() => ({ status: 'running' }),
() => {
if (this._shouldHideBenchmark && this._benchWrapperRef) {
this._benchWrapperRef.style.opacity = 0;
}
this._benchmarkRef.start();
this._scrollToEnd();
}
);
};
// hide the benchmark as it is performed (no flashing on screen)
_handleVisuallyHideBenchmark = () => {
this._shouldHideBenchmark = !this._shouldHideBenchmark;
if (this._benchWrapperRef) {
this._benchWrapperRef.style.opacity = this._shouldHideBenchmark ? 0 : 1;
}
};
_createHandleComplete =
({ benchmarkName, libraryName, sampleCount }) =>
(results) => {
this.setState(
(state) => ({
results: state.results.concat([
{
...results,
benchmarkName,
libraryName,
libraryVersion:
this.props.tests[benchmarkName][libraryName].version
}
]),
status: 'complete'
}),
this._scrollToEnd
);
// console.log(results);
// console.log(results.samples.map(sample => sample.elapsed.toFixed(1)).join('\n'));
};
_handleClear = () => {
this.setState(() => ({ results: [] }));
};
_setBenchRef = (ref) => {
this._benchmarkRef = ref;
};
_setBenchWrapperRef = (ref) => {
this._benchWrapperRef = ref;
};
_setScrollRef = (ref) => {
this._scrollRef = ref;
};
// scroll the most recent result into view
_scrollToEnd = () => {
window.requestAnimationFrame(() => {
if (this._scrollRef) {
this._scrollRef.scrollToEnd();
}
});
};
}
const styles = StyleSheet.create({
viewPanel: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
overflow: 'hidden',
backgroundColor: 'black'
},
iconEye: {
color: 'white',
height: 32
},
iconEyeContainer: {
position: 'absolute',
top: 10,
right: 10,
zIndex: 1
},
iconClearContainer: {
height: '100%',
marginLeft: 5
},
grow: {
flex: 1
},
listPanel: {
flex: 1,
width: '100%',
marginHorizontal: 'auto'
},
listBar: {
padding: 5,
alignItems: 'center',
flexDirection: 'row',
backgroundColor: colors.fadedGray,
borderBottomWidth: 1,
borderBottomColor: colors.mediumGray,
justifyContent: 'flex-end'
},
pickers: {
flexDirection: 'row'
},
pickerContainer: {
flex: 1,
padding: 5
},
pickerTitle: {
fontSize: 12,
color: colors.deepGray
},
picker: {
...StyleSheet.absoluteFillObject,
appearance: 'none',
opacity: 0,
width: '100%'
},
button: {
borderRadius: 0,
flex: 1
}
});
================================================
FILE: packages/benchmarks/src/app/Benchmark/index.js
================================================
/**
* The MIT License (MIT)
* Copyright (c) 2017 Paul Armstrong
* https://github.com/paularmstrong/react-component-benchmark
* @flow
*/
/* global $Values */
import type { Node } from 'react';
import * as Timing from './timing';
import React, { Component } from 'react';
import { getMean, getMedian, getStdDev } from './math';
import type {
BenchResultsType,
FullSampleTimingType,
SampleTimingType
} from './types';
export const BenchmarkType = {
MOUNT: 'mount',
UPDATE: 'update',
UNMOUNT: 'unmount'
};
const shouldRender = (
cycle: number,
type: $Values<typeof BenchmarkType>
): boolean => {
switch (type) {
// Render every odd iteration (first, third, etc)
// Mounts and unmounts the component
case BenchmarkType.MOUNT:
case BenchmarkType.UNMOUNT:
return !((cycle + 1) % 2);
// Render every iteration (updates previously rendered module)
case BenchmarkType.UPDATE:
return true;
default:
return false;
}
};
const shouldRecord = (
cycle: number,
type: $Values<typeof BenchmarkType>
): boolean => {
switch (type) {
// Record every odd iteration (when mounted: first, third, etc)
case BenchmarkType.MOUNT:
return !((cycle + 1) % 2);
// Record every iteration
case BenchmarkType.UPDATE:
return true;
// Record every even iteration (when unmounted)
case BenchmarkType.UNMOUNT:
return !(cycle % 2);
default:
return false;
}
};
const isDone = (
cycle: number,
sampleCount: number,
type: $Values<typeof BenchmarkType>
): boolean => {
switch (type) {
case BenchmarkType.MOUNT:
return cycle >= sampleCount * 2 - 1;
case BenchmarkType.UPDATE:
return cycle >= sampleCount - 1;
case BenchmarkType.UNMOUNT:
return cycle >= sampleCount * 2;
default:
return true;
}
};
const sortNumbers = (a: number, b: number): number => a - b;
type BenchmarkPropsType = {
component: typeof React.Component,
forceLayout?: boolean,
getComponentProps: Function,
onComplete: (x: BenchResultsType) => void,
sampleCount: number,
timeout: number,
type: $Values<typeof BenchmarkType>
};
type BenchmarkStateType = {
componentProps: Object,
cycle: number,
running: boolean
};
/**
* Benchmark
* TODO: documentation
*/
export default class Benchmark extends Component<
BenchmarkPropsType,
BenchmarkStateType
> {
_raf: ?Function;
_startTime: number;
_samples: Array<SampleTimingType>;
static displayName: ?string = 'Benchmark';
static defaultProps: {|
sampleCount: number,
timeout: number,
type: $PropertyType<BenchmarkPropsType, 'type'>
|} = {
sampleCount: 50,
timeout: 10000, // 10 seconds
type: BenchmarkType.MOUNT
};
static Type: typeof BenchmarkType = BenchmarkType;
constructor(props: BenchmarkPropsType, context?: {}) {
super(props, context);
const cycle = 0;
const componentProps = props.getComponentProps({ cycle });
this.state = {
componentProps,
cycle,
running: false
};
this._startTime = 0;
this._samples = [];
}
componentWillReceiveProps(nextProps: BenchmarkPropsType) {
if (nextProps) {
this.setState((state) => ({
componentProps: nextProps.getComponentProps(state.cycle)
}));
}
}
componentWillUpdate(
nextProps: BenchmarkPropsType,
nextState: BenchmarkStateType
) {
if (nextState.running && !this.state.running) {
this._startTime = Timing.now();
}
}
componentDidUpdate() {
const { forceLayout, sampleCount, timeout, type } = this.props;
const { cycle, running } = this.state;
if (running && shouldRecord(cycle, type)) {
this._samples[cycle].scriptingEnd = Timing.now();
// force style recalc that would otherwise happen before the next frame
if (forceLayout) {
this._samples[cycle].layoutStart = Timing.now();
if (document.body) {
document.body.offsetWidth;
}
this._samples[cycle].layoutEnd = Timing.now();
}
}
if (running) {
const now = Timing.now();
if (
!isDone(cycle, sampleCount, type) &&
now - this._startTime < timeout
) {
this._handleCycleComplete();
} else {
this._handleComplete(now);
}
}
}
componentWillUnmount() {
if (this._raf) {
window.cancelAnimationFrame(this._raf);
}
}
render(): Node {
const { component: Component, type } = this.props;
const { componentProps, cycle, running } = this.state;
if (running && shouldRecord(cycle, type)) {
this._samples[cycle] = { scriptingStart: Timing.now() };
}
return running && shouldRender(cycle, type) ? (
<Component {...componentProps} />
) : null;
}
start() {
this._samples = [];
this.setState(() => ({ running: true, cycle: 0 }));
}
_handleCycleComplete() {
const { getComponentProps, type } = this.props;
const { cycle } = this.state;
let componentProps;
if (getComponentProps) {
// Calculate the component props outside of the time recording (render)
// so that it doesn't skew results
componentProps = getComponentProps({ cycle });
// make sure props always change for update tests
if (type === BenchmarkType.UPDATE) {
componentProps['data-test'] = cycle;
}
}
this._raf = window.requestAnimationFrame(() => {
this.setState((state: BenchmarkStateType) => ({
cycle: state.cycle + 1,
componentProps
}));
});
}
getSamples(): Array<FullSampleTimingType> {
return this._samples.reduce(
(
memo: Array<FullSampleTimingType>,
{
scriptingStart,
scriptingEnd,
layoutStart,
layoutEnd
}: SampleTimingType
): Array<FullSampleTimingType> => {
memo.push({
start: scriptingStart,
end: layoutEnd || scriptingEnd || 0,
scriptingStart,
scriptingEnd: scriptingEnd || 0,
layoutStart,
layoutEnd
});
return memo;
},
[]
);
}
_handleComplete(endTime: number) {
const { onComplete } = this.props;
const samples = this.getSamples();
this.setState(() => ({ running: false, cycle: 0 }));
const runTime = endTime - this._startTime;
const sortedElapsedTimes = samples
.map(({ start, end }) => end - start)
.sort(sortNumbers);
const sortedScriptingElapsedTimes = samples
.map(({ scriptingStart, scriptingEnd }) => scriptingEnd - scriptingStart)
.sort(sortNumbers);
const sortedLayoutElapsedTimes = samples
.map(
({ layoutStart, layoutEnd }) => (layoutEnd || 0) - (layoutStart || 0)
)
.sort(sortNumbers);
onComplete({
startTime: this._startTime,
endTime,
runTime,
sampleCount: samples.length,
samples: samples,
max: sortedElapsedTimes[sortedElapsedTimes.length - 1],
min: sortedElapsedTimes[0],
median: getMedian(sortedElapsedTimes),
mean: getMean(sortedElapsedTimes),
stdDev: getStdDev(sortedElapsedTimes),
meanLayout: getMean(sortedLayoutElapsedTimes),
meanScripting: getMean(sortedScriptingElapsedTimes)
});
}
}
================================================
FILE: packages/benchmarks/src/app/Benchmark/math.js
================================================
// @flow
type ValuesType = Array<number>;
export const getStdDev = (values: ValuesType): number => {
const avg = getMean(values);
const squareDiffs = values.map((value: number) => {
const diff = value - avg;
return diff * diff;
});
return Math.sqrt(getMean(squareDiffs));
};
export const getMean = (values: ValuesType): number => {
const sum = values.reduce((sum: number, value: number) => sum + value, 0);
return sum / values.length;
};
export const getMedian = (values: ValuesType): number => {
if (values.length === 1) {
return values[0];
}
const numbers = values.sort((a: number, b: number) => a - b);
return (
(numbers[(numbers.length - 1) >> 1] + numbers[numbers.length >> 1]) / 2
);
};
================================================
FILE: packages/benchmarks/src/app/Benchmark/timing.js
================================================
// @flow
// Returns a high resolution time (if possible) in milliseconds
export function now(): number {
if (window && window.performance) {
return window.performance.now();
} else {
return Date.now();
}
}
================================================
FILE: packages/benchmarks/src/app/Benchmark/types.js
================================================
/**
* @flow
*/
export type BenchResultsType = {
startTime: number,
endTime: number,
runTime: number,
sampleCount: number,
samples: Array<FullSampleTimingType>,
max: number,
min: number,
median: number,
mean: number,
stdDev: number
};
export type SampleTimingType = {
scriptingStart: number,
scriptingEnd?: number,
layoutStart?: number,
layoutEnd?: number
};
export type FullSampleTimingType = {
start: number,
end: number,
scriptingStart: number,
scriptingEnd: number,
layoutStart?: number,
layoutEnd?: number
};
================================================
FILE: packages/benchmarks/src/app/Button.js
================================================
import { StyleSheet, TouchableHighlight, Text } from 'react-native';
import React, { Component } from 'react';
export default class Button extends Component<*> {
static displayName = '@app/Button';
render() {
const {
accessibilityLabel,
color,
disabled,
onPress,
style,
textStyle,
testID,
title
} = this.props;
return (
<TouchableHighlight
accessibilityLabel={accessibilityLabel}
accessibilityRole="button"
disabled={disabled}
onPress={onPress}
style={[
styles.button,
style,
color && { backgroundColor: color },
disabled && styles.buttonDisabled
]}
testID={testID}
>
<Text style={[styles.text, textStyle, disabled && styles.textDisabled]}>
{title}
</Text>
</TouchableHighlight>
);
}
}
const styles = StyleSheet.create({
button: {
backgroundColor: '#2196F3',
borderRadius: 0,
justifyContent: 'center'
},
text: {
color: '#fff',
fontSize: 20,
fontWeight: '500',
padding: 8,
textAlign: 'center',
textTransform: 'uppercase'
},
buttonDisabled: {
backgroundColor: '#dfdfdf'
},
textDisabled: {
color: '#a1a1a1'
}
});
================================================
FILE: packages/benchmarks/src/app/Icons.js
================================================
import React, { Fragment } from 'react';
import {
unstable_createElement as createElement,
StyleSheet
} from 'react-native';
const styles = StyleSheet.create({
root: {
display: 'inline-block',
fill: 'currentcolor',
height: '1.25em',
maxWidth: '100%',
position: 'relative',
userSelect: 'none',
textAlignVertical: 'text-bottom'
}
});
const createIcon = (children) => {
const Icon = (props) =>
createElement('svg', {
children,
style: [styles.root, props.style],
width: 24,
height: 24,
viewBox: '0 0 24 24'
});
return Icon;
};
export const IconClear = createIcon(
<Fragment>
<path d="M0 0h24v24H0z" id="bounds" opacity="0" />
<path d="M12 1.25C6.072 1.25 1.25 6.072 1.25 12S6.072 22.75 12 22.75 22.75 17.928 22.75 12 17.928 1.25 12 1.25zm0 1.5c2.28 0 4.368.834 5.982 2.207L4.957 17.982C3.584 16.368 2.75 14.282 2.75 12c0-5.1 4.15-9.25 9.25-9.25zm0 18.5c-2.28 0-4.368-.834-5.982-2.207L19.043 6.018c1.373 1.614 2.207 3.7 2.207 5.982 0 5.1-4.15 9.25-9.25 9.25z" />
</Fragment>
);
export const IconEye = createIcon(
<Fragment>
<path d="M0 0h24v24H0z" id="bounds" opacity="0" />
<path d="M14.548 11.634c-1.207 0-2.188-.98-2.188-2.188 0-.664.302-1.25.77-1.653-.363-.097-.736-.165-1.13-.165-2.416 0-4.375 1.96-4.375 4.376S9.585 16.38 12 16.38c2.418 0 4.377-1.96 4.377-4.376 0-.4-.07-.78-.17-1.146-.402.47-.992.776-1.66.776z" />
<path d="M12 19.79c-7.228 0-10.12-6.724-10.24-7.01-.254-.466-.254-1.105.035-1.642C1.88 10.923 4.772 4.2 12 4.2s10.12 6.723 10.24 7.01c.254.465.254 1.104-.035 1.64-.085.216-2.977 6.94-10.205 6.94zm0-14c-6.154 0-8.668 5.787-8.772 6.033-.068.135-.068.208-.033.273.137.316 2.65 6.104 8.805 6.104 6.18 0 8.747-5.973 8.772-6.033.07-.136.07-.21.034-.274-.138-.316-2.652-6.103-8.806-6.103z" />
</Fragment>
);
export const IconCopy = createIcon(
<Fragment>
<path d="M0 0h24v24H0z" id="bounds" opacity="0" />
<path d="M11.47 14.53c.146.146.338.22.53.22s.384-.073.53-.22l5-5c.293-.293.293-.768 0-1.06s-.768-.294-1.06 0l-3.72 3.72V2c0-.414-.337-.75-.75-.75s-.75.336-.75.75v10.19L7.53 8.47c-.293-.293-.768-.293-1.06 0s-.294.768 0 1.06l5 5z" />
<path d="M21.25 13.25c-.414 0-.75.336-.75.75v5.652c0 .437-.355.792-.792.792H4.292c-.437 0-.792-.355-.792-.792V14c0-.414-.336-.75-.75-.75S2 13.586 2 14v5.652c0 1.264 1.028 2.292 2.292 2.292h15.416c1.264 0 2.292-1.028 2.292-2.292V14c0-.414-.336-.75-.75-.75z" />
</Fragment>
);
================================================
FILE: packages/benchmarks/src/app/Layout.js
================================================
import { colors } from './theme';
import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
export default class Layout extends Component {
state = {
widescreen: false
};
render() {
const { viewPanel, actionPanel, listPanel } = this.props;
const { widescreen } = this.state;
return (
<View
onLayout={this._handleLayout}
style={[styles.root, widescreen && styles.row]}
>
<View
style={[widescreen ? styles.grow : styles.stackPanel, styles.layer]}
>
{viewPanel}
</View>
<View style={styles.grow}>
<View style={[styles.grow, styles.layer]}>{listPanel}</View>
<View style={styles.divider} />
<View style={styles.layer}>{actionPanel}</View>
</View>
</View>
);
}
_handleLayout = ({ nativeEvent }) => {
const { layout } = nativeEvent;
const { width } = layout;
if (width >= 740) {
this.setState(() => ({ widescreen: true }));
} else {
this.setState(() => ({ widescreen: false }));
}
};
}
const styles = StyleSheet.create({
root: {
height: '100%'
},
row: {
flexDirection: 'row'
},
divider: {
height: 10,
backgroundColor: colors.fadedGray,
borderBottomWidth: 1,
borderTopWidth: 1,
borderColor: colors.mediumGray
},
grow: {
flex: 1
},
stackPanel: {
height: '33.33%'
},
layer: {
transform: [{ translateZ: '0' }]
}
});
================================================
FILE: packages/benchmarks/src/app/ReportCard.js
================================================
/* @noflow */
import Text from './Text';
import { StyleSheet, View } from 'react-native';
import React, { Fragment } from 'react';
const fmt = (time: number) => {
const i = Number(Math.round(time + 'e2') + 'e-2').toFixed(2);
return 10 / i > 1 ? `0${i}` : i;
};
class ReportCard extends React.PureComponent {
render() {
const {
benchmarkName,
libraryName,
sampleCount,
mean,
meanLayout,
meanScripting,
stdDev,
libraryVersion
} = this.props;
const sampleCountText = sampleCount != null ? `(${sampleCount})` : '';
return (
<View style={styles.root}>
<View style={styles.left}>
<Text numberOfLines={1} style={styles.bold}>
{`${libraryName}${libraryVersion ? '@' + libraryVersion : ''}`}
</Text>
<Text numberOfLines={1}>
{benchmarkName} {sampleCountText}
</Text>
</View>
<View style={styles.right}>
{mean ? (
<Fragment>
<Text style={[styles.bold, styles.monoFont]}>
{fmt(mean)} ±{fmt(stdDev)} ms
</Text>
<Text style={[styles.smallText, styles.monoFont]}>
(S/L) {fmt(meanScripting)}/{fmt(meanLayout)} ms
</Text>
</Fragment>
) : (
<Text style={styles.bold}>In progress…</Text>
)}
</View>
</View>
);
}
}
const styles = StyleSheet.create({
root: {
flexDirection: 'row',
alignItems: 'center',
padding: 5,
borderBottomWidth: 1,
borderBottomColor: '#eee'
},
bold: {
fontWeight: 'bold'
},
smallText: { fontSize: 12 },
monoFont: {
fontFamily: 'monospace'
},
centerText: {
display: 'flex',
alignItems: 'center'
},
left: {
width: '50%'
},
right: {
flex: 1,
alignItems: 'flex-end'
}
});
export default ReportCard;
================================================
FILE: packages/benchmarks/src/app/Text.js
================================================
import React from 'react';
import { StyleSheet, Text } from 'react-native';
import { bool } from 'prop-types';
import { colors } from './theme';
class AppText extends React.Component {
static displayName = '@app/Text';
static contextTypes = {
isInAParentText: bool
};
render() {
const { style, ...rest } = this.props;
const { isInAParentText } = this.context;
return (
<Text {...rest} style={[!isInAParentText && styles.baseText, style]} />
);
}
}
const styles = StyleSheet.create({
baseText: {
color: colors.textBlack,
fontSize: '1rem',
lineHeight: '1.3125em'
}
});
export default AppText;
================================================
FILE: packages/benchmarks/src/app/theme.js
================================================
import { Dimensions, Platform } from 'react-native';
const baseFontSize = 14;
const baseUnit = 1.3125;
const canUseDOM = !!(
typeof window !== 'undefined' &&
window.document &&
window.document.createElement
);
const createPlatformLength = (multiplier) =>
Platform.select({
web: `${multiplier}rem`,
default: multiplier * baseFontSize
});
/**
* Exported variables
*/
export const borderRadii = {
normal: Platform.select({ web: '0.35rem', default: 5 }),
infinite: '9999px'
};
export const breakpoints = {
small: 360,
medium: 600,
large: 800,
xLarge: 1100
};
/**
* Color palette
* DO NOT add new colors unless they are part of @design's color palette.
* DO NOT use colors that are not specified here.
* source: go/uicolors
*/
export const colors = {
// Primary
blue: '#1DA1F2',
purple: '#794BC4',
green: '#17BF63',
yellow: '#FFAD1F',
orange: '#F45D22',
red: '#E0245E',
// Text and interface grays
textBlack: '#14171A',
deepGray: '#657786',
mediumGray: '#AAB8C2',
lightGray: '#CCD6DD',
fadedGray: '#E6ECF0',
faintGray: '#F5F8FA',
white: '#FFF',
textBlue: '#1B95E0'
};
export const fontFamilies = {
normal: 'System',
japan: Platform.select({
web: 'Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif',
default: 'System'
}),
rtl: Platform.select({ web: 'Tahoma, Arial, sans-serif', default: 'System' })
};
export const fontSizes = {
// font scale
small: createPlatformLength(0.85),
normal: createPlatformLength(1),
large: createPlatformLength(1.25),
xLarge: createPlatformLength(1.5),
jumbo: createPlatformLength(2)
};
export const lineHeight = Platform.select({ web: `${baseUnit}` });
export const spaces = {
// This set of space variables should be used for margin, padding
micro: createPlatformLength(baseUnit * 0.125),
xxSmall: createPlatformLength(baseUnit * 0.25),
xSmall: createPlatformLength(baseUnit * 0.5),
small: createPlatformLength(baseUnit * 0.75),
medium: createPlatformLength(baseUnit),
large: createPlatformLength(baseUnit * 1.5),
xLarge: createPlatformLength(baseUnit * 2),
xxLarge: createPlatformLength(baseUnit * 2.5),
jumbo: createPlatformLength(baseUnit * 3)
};
// On web, change the root font-size at specific breakpoints to scale the UI
// for larger viewports.
if (Platform.OS === 'web' && canUseDOM) {
const { medium, large } = breakpoints;
const htmlElement = document.documentElement;
const setFontSize = (width) => {
const fontSize =
width > medium ? (width > large ? '18px' : '17px') : '16px';
if (htmlElement) {
htmlElement.style.fontSize = fontSize;
}
};
setFontSize(Dimensions.get('window').width);
Dimensions.addEventListener('change', (dimensions) => {
setFontSize(dimensions.window.width);
});
}
================================================
FILE: packages/benchmarks/src/cases/SierpinskiTriangle.js
================================================
import { BenchmarkType } from '../app/Benchmark';
import React from 'react';
import {
interpolatePurples,
interpolateBuPu,
interpolateRdPu
} from 'd3-scale-chromatic';
const targetSize = 10;
class SierpinskiTriangle extends React.Component {
static displayName = 'SierpinskiTriangle';
static benchmarkType = BenchmarkType.UPDATE;
static defaultProps = {
depth: 0,
renderCount: 0
};
render() {
const { components, x, y, depth, renderCount } = this.props;
let { s } = this.props;
const { Dot } = components;
if (Dot) {
if (s <= targetSize) {
let fn;
switch (depth) {
case 1:
fn = interpolatePurples;
break;
case 2:
fn = interpolateBuPu;
break;
case 3:
default:
fn = interpolateRdPu;
}
// introduce randomness to ensure that repeated runs don't produce the same colors
const color = fn((renderCount * Math.random()) / 20);
return (
<Dot
color={color}
size={targetSize}
x={x - targetSize / 2}
y={y - targetSize / 2}
/>
);
}
s /= 2;
return (
<React.Fragment>
<SierpinskiTriangle
components={components}
depth={1}
renderCount={renderCount}
s={s}
x={x}
y={y - s / 2}
/>
<SierpinskiTriangle
components={components}
depth={2}
renderCount={renderCount}
s={s}
x={x - s}
y={y + s / 2}
/>
<SierpinskiTriangle
components={components}
depth={3}
renderCount={renderCount}
s={s}
x={x + s}
y={y + s / 2}
/>
</React.Fragment>
);
} else {
return (
<span style={{ color: 'white' }}>No implementation available</span>
);
}
}
}
export default SierpinskiTriangle;
================================================
FILE: packages/benchmarks/src/cases/Tree.js
================================================
import { BenchmarkType } from '../app/Benchmark';
import React, { Component } from 'react';
class Tree extends Component {
static displayName = 'Tree';
static benchmarkType = BenchmarkType.MOUNT;
render() {
const { breadth, components, depth, id, wrap } = this.props;
const { Box } = components;
let result = (
<Box color={id % 3} layout={depth % 2 === 0 ? 'column' : 'row'} outer>
{depth === 0 && <Box color={(id % 3) + 3} fixed />}
{depth !== 0 &&
Array.from({ length: breadth }).map((el, i) => (
<Tree
breadth={breadth}
components={components}
depth={depth - 1}
id={i}
key={i}
wrap={wrap}
/>
))}
</Box>
);
for (let i = 0; i < wrap; i++) {
result = <Box>{result}</Box>;
}
return result;
}
}
export default Tree;
================================================
FILE: packages/benchmarks/src/impl.js
================================================
/* @noflow */
import { type Component } from 'react';
import packageJson from '../package.json';
const context = require.context('./implementations/', true, /index\.js$/);
const { dependencies } = packageJson;
type ComponentsType = {
Box: Component,
Dot: Component,
Provider: Component,
View: Component
};
type ImplementationType = {
components: ComponentsType,
name: string,
version: string
};
const toImplementations = (context: Object): Array<ImplementationType> =>
context.keys().map((path) => {
const components = context(path).default;
const name = path.split('/')[1];
const version = dependencies[name] || '';
return { components, name, version };
});
const toObject = (impls: Array<ImplementationType>): Object =>
impls.reduce((acc, impl) => {
acc[impl.name] = impl;
return acc;
}, {});
const map = toObject(toImplementations(context));
export default map;
================================================
FILE: packages/benchmarks/src/implementations/css-modules/Box.js
================================================
import classnames from 'classnames';
import React from 'react';
import View from './View';
import styles from './box-styles.css';
const Box = ({
color,
fixed = false,
layout = 'column',
outer = false,
...other
}) => (
<View
{...other}
className={classnames(styles[`color${color}`], {
[styles.fixed]: fixed,
[styles.outer]: outer,
[styles.row]: layout === 'row'
})}
/>
);
export default Box;
================================================
FILE: packages/benchmarks/src/implementations/css-modules/Dot.js
================================================
import React from 'react';
import styles from './dot-styles.css';
const Dot = ({ size, x, y, children, color }) => (
<div
className={styles.root}
style={{
borderBottomColor: color,
borderRightWidth: `${size / 2}px`,
borderBottomWidth: `${size / 2}px`,
borderLeftWidth: `${size / 2}px`,
marginLeft: `${x}px`,
marginTop: `${y}px`
}}
>
{children}
</div>
);
export default Dot;
================================================
FILE: packages/benchmarks/src/implementations/css-modules/Provider.js
================================================
import View from './View';
export default View;
================================================
FILE: packages/benchmarks/src/implementations/css-modules/View.js
================================================
import classnames from 'classnames';
import React from 'react';
import styles from './view-styles.css';
class View extends React.Component {
render() {
const props = this.props;
return (
<div {...props} className={classnames(styles.initial, props.className)} />
);
}
}
export default View;
================================================
FILE: packages/benchmarks/src/implementations/css-modules/box-styles.css
================================================
.outer {
align-self: flex-start;
padding: 4px;
}
.row {
flex-direction: row;
}
.color0 {
background-color: #14171A;
}
.color1 {
background-color: #AAB8C2;
}
.color2 {
background-color: #E6ECF0;
}
.color3 {
background-color: #FFAD1F;
}
.color4 {
background-color: #F45D22;
}
.color5 {
background-color: #E0245E;
}
.fixed {
width: 6px;
height: 6px;
}
================================================
FILE: packages/benchmarks/src/implementations/css-modules/dot-styles.css
================================================
.root {
position: absolute;
cursor: pointer;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-top-width: 0;
transform: translate(50%, 50%);
}
================================================
FILE: packages/benchmarks/src/implementations/css-modules/index.js
================================================
import Box from './Box';
import Dot from './Dot';
import Provider from './Provider';
import View from './View';
export default {
Box,
Dot,
Provider,
View
};
================================================
FILE: packages/benchmarks/src/implementations/css-modules/view-styles.css
================================================
.initial {
align-items: stretch;
background-color: transparent;
border-width: 0;
border-style: solid;
box-sizing: border-box;
display: flex;
flex-basis: auto;
flex-direction: column;
flex-shrink: 0;
list-style: none;
margin: 0;
min-height: 0;
min-width: 0;
padding: 0;
position: relative;
z-index: 0;
}
================================================
FILE: packages/benchmarks/src/implementations/inline-styles/Box.js
================================================
import React from 'react';
import View from './View';
const Box = ({
color,
fixed = false,
layout = 'column',
outer = false,
...other
}) => (
<View
{...other}
style={{
...styles[`color${color}`],
...(fixed && styles.fixed),
...(layout === 'row' && styles.row),
...(outer && styles.outer)
}}
/>
);
const styles = {
outer: {
alignSelf: 'flex-start',
padding: 4
},
row: {
flexDirection: 'row'
},
color0: {
backgroundColor: '#14171A'
},
color1: {
backgroundColor: '#AAB8C2'
},
color2: {
backgroundColor: '#E6ECF0'
},
color3: {
backgroundColor: '#FFAD1F'
},
color4: {
backgroundColor: '#F45D22'
},
color5: {
backgroundColor: '#E0245E'
},
fixed: {
width: 6,
height: 6
}
};
export default Box;
================================================
FILE: packages/benchmarks/src/implementations/inline-styles/Dot.js
================================================
import React from 'react';
const Dot = ({ size, x, y, children, color }) => (
<div
style={Object.assign({}, styles.root, {
borderBottomColor: color,
borderRightWidth: `${size / 2}px`,
borderBottomWidth: `${size / 2}px`,
borderLeftWidth: `${size / 2}px`,
marginLeft: `${x}px`,
marginTop: `${y}px`
})}
>
{children}
</div>
);
const styles = {
root: {
position: 'absolute',
cursor: 'pointer',
width: 0,
height: 0,
borderColor: 'transparent',
borderStyle: 'solid',
borderTopWidth: 0,
transform: 'translate(50%, 50%)'
}
};
export default Dot;
================================================
FILE: packages/benchmarks/src/implementations/inline-styles/Provider.js
================================================
import View from './View';
export default View;
================================================
FILE: packages/benchmarks/src/implementations/inline-styles/View.js
================================================
import React from 'react';
const compose = (s1, s2) => {
if (s1 && s2) {
return { ...s1, ...s2 };
} else {
return s1 || s2;
}
};
class View extends React.Component {
render() {
const { style, ...other } = this.props;
return <div {...other} style={compose(viewStyle, style)} />;
}
}
const viewStyle = {
alignItems: 'stretch',
backgroundColor: 'transparent',
border: '0 solid black',
boxSizing: 'border-box',
display: 'flex',
flexBasis: 'auto',
flexDirection: 'column',
flexShrink: 0,
listStyle: 'none',
margin: 0,
minHeight: 0,
minWidth: 0,
padding: 0,
position: 'relative',
zIndex: 0
};
export default View;
================================================
FILE: packages/benchmarks/src/implementations/inline-styles/index.js
================================================
import Box from './Box';
import Dot from './Dot';
import Provider from './Provider';
import View from './View';
export default {
Box,
Dot,
Provider,
View
};
================================================
FILE: packages/benchmarks/src/implementations/react-native-web/Box.js
================================================
import React from 'react';
import { StyleSheet, View } from 'react-native';
const Box = ({
color,
fixed = false,
layout = 'column',
outer = false,
...other
}) => (
<View
{...other}
style={[
styles[`color${color}`],
fixed && styles.fixed,
layout === 'row' && styles.row,
outer && styles.outer
]}
/>
);
const styles = StyleSheet.create({
outer: {
alignSelf: 'flex-start',
padding: 4
},
row: {
flexDirection: 'row'
},
color0: {
backgroundColor: '#14171A'
},
color1: {
backgroundColor: '#AAB8C2'
},
color2: {
backgroundColor: '#E6ECF0'
},
color3: {
backgroundColor: '#FFAD1F'
},
color4: {
backgroundColor: '#F45D22'
},
color5: {
backgroundColor: '#E0245E'
},
fixed: {
width: 6,
height: 6
}
});
export default Box;
================================================
FILE: packages/benchmarks/src/implementations/react-native-web/Dot.js
================================================
import {
unstable_createElement as createElement,
StyleSheet
} from 'react-native';
const Dot = ({ size, x, y, children, color }) =>
createElement('div', {
children,
style: [
styles.root,
{
borderBottomColor: color,
borderRightWidth: size / 2,
borderBottomWidth: size / 2,
borderLeftWidth: size / 2,
marginLeft: x,
marginTop: y
}
]
});
const styles = StyleSheet.create({
root: {
position: 'absolute',
cursor: 'pointer',
width: 0,
height: 0,
borderColor: 'transparent',
borderStyle: 'solid',
borderTopWidth: 0,
transform: [{ translateX: '50%' }, { translateY: '50%' }]
}
});
export default Dot;
================================================
FILE: packages/benchmarks/src/implementations/react-native-web/Provider.js
================================================
import { View } from 'react-native';
export default View;
================================================
FILE: packages/benchmarks/src/implementations/react-native-web/index.js
================================================
import Box from './Box';
import Dot from './Dot';
import Provider from './Provider';
import { View } from 'react-native';
export default {
Box,
Dot,
Provider,
View
};
================================================
FILE: packages/benchmarks/src/implementations/styleq/Box.js
================================================
import React from 'react';
import View from './View';
const Box = ({
color,
fixed = false,
layout = 'column',
outer = false,
...other
}) => (
<View
{...other}
style={[
styles[`color${color}`],
fixed && styles.fixed,
layout === 'row' && styles.row,
outer && styles.outer
]}
/>
);
const styles = {
outer: {
$$css: true,
alignSelf: 'r-k200y',
padding: 'r-tuq35u'
},
row: {
$$css: true,
flexDirection: 'r-18u37iz'
},
color0: {
$$css: true,
backgroundColor: 'r-1810x6o'
},
color1: {
$$css: true,
backgroundColor: 'r-dkge59'
},
color2: {
$$css: true,
backgroundColor: 'r-18z3xeu'
},
color3: {
$$css: true,
backgroundColor: 'r-1vkxrha'
},
color4: {
$$css: true,
backgroundColor: 'r-18z3xeu'
},
color5: {
$$css: true,
backgroundColor: 'r-e84r5y'
},
fixed: {
$$css: true,
width: 'r-8hc5te',
height: 'r-1xbve24'
}
};
export default Box;
================================================
FILE: packages/benchmarks/src/implementations/styleq/Dot.js
================================================
import React from 'react';
import { styleq } from 'styleq';
const Dot = ({ size, x, y, children, color }) => {
const [className, inlineStyle] = styleq([
styles.root,
{
borderBottomColor: color,
borderRightWidth: size / 2,
borderBottomWidth: size / 2,
borderLeftWidth: size / 2,
marginLeft: x,
marginTop: y
}
]);
return <div children={children} className={className} style={inlineStyle} />;
};
const styles = {
root: {
$$css: true,
'css-1co75s2': 'css-1co75s2'
}
};
export default Dot;
================================================
FILE: packages/benchmarks/src/implementations/styleq/Provider.js
================================================
import View from './View';
export default View;
================================================
FILE: packages/benchmarks/src/implementations/styleq/View.js
================================================
import React from 'react';
import { styleq } from 'styleq';
const q = styleq.factory({ disableCache: false });
function View(props) {
const [className, inlineStyle] = q([styles.root, props.style]);
return <div {...props} className={className} style={inlineStyle} />;
}
const styles = {
root: {
$$css: true,
'css-wkmxpp': 'css-wkmxpp'
}
};
export default View;
================================================
FILE: packages/benchmarks/src/implementations/styleq/index.js
================================================
import Box from './Box';
import Dot from './Dot';
import Provider from './Provider';
import View from './View';
export default {
Box,
Dot,
Provider,
View
};
================================================
FILE: packages/benchmarks/src/implementations/stylesheet/Box.js
================================================
import React from 'react';
import View from './View';
import { StyleSheet } from 'react-native-web';
const Box = ({
color,
fixed = false,
layout = 'column',
outer = false,
...other
}) => (
<View
{...other}
style={[
styles[`color${color}`],
fixed && styles.fixed,
layout === 'row' && styles.row,
outer && styles.outer
]}
/>
);
const styles = StyleSheet.create({
outer: {
alignSelf: 'flex-start',
padding: 4
},
row: {
flexDirection: 'row'
},
color0: {
backgroundColor: '#14171A'
},
color1: {
backgroundColor: '#AAB8C2'
},
color2: {
backgroundColor: '#E6ECF0'
},
color3: {
backgroundColor: '#FFAD1F'
},
color4: {
backgroundColor: '#F45D22'
},
color5: {
backgroundColor: '#E0245E'
},
fixed: {
width: 6,
height: 6
}
});
export default Box;
================================================
FILE: packages/benchmarks/src/implementations/stylesheet/Dot.js
================================================
import React from 'react';
import { StyleSheet } from 'react-native-web';
const Dot = ({ size, x, y, children, color }) => {
const [className, inlineStyle] = StyleSheet([
styles.root$raw,
{
borderBottomColor: color,
borderRightWidth: size / 2,
borderBottomWidth: size / 2,
borderLeftWidth: size / 2,
marginLeft: x,
marginTop: y
}
]);
return <div children={children} className={className} style={inlineStyle} />;
};
const styles = StyleSheet.create({
root$raw: {
position: 'absolute',
cursor: 'pointer',
width: 0,
height: 0,
borderColor: 'transparent',
borderStyle: 'solid',
borderTopWidth: 0,
transform: 'translateX(50%) translateY(50%)'
}
});
export default Dot;
================================================
FILE: packages/benchmarks/src/implementations/stylesheet/Provider.js
================================================
import View from './View';
export default View;
================================================
FILE: packages/benchmarks/src/implementations/stylesheet/View.js
================================================
import React from 'react';
import { StyleSheet } from 'react-native-web';
function View(props) {
const [className, inlineStyle] = StyleSheet([styles.root$raw, props.style]);
return <div {...props} className={className} style={inlineStyle} />;
}
const styles = StyleSheet.create({
root$raw: {
alignItems: 'stretch',
backgroundColor: 'transparent',
border: '0 solid black',
boxSizing: 'border-box',
display: 'flex',
flexBasis: 'auto',
flexDirection: 'column',
flexShrink: 0,
listStyle: 'none',
margin: 0,
minHeight: 0,
minWidth: 0,
padding: 0,
position: 'relative',
zIndex: 0
}
});
export default View;
================================================
FILE: packages/benchmarks/src/implementations/stylesheet/index.js
================================================
import Box from './Box';
import Dot from './Dot';
import Provider from './Provider';
import View from './View';
export default {
Box,
Dot,
Provider,
View
};
================================================
FILE: packages/benchmarks/src/index.js
================================================
import App from './app/App';
import impl from './impl';
import Tree from './cases/Tree';
import SierpinskiTriangle from './cases/SierpinskiTriangle';
import React from 'react';
import { createRoot } from 'react-dom/client';
const implementations = impl;
const packageNames = Object.keys(implementations);
const createTestBlock = (fn) => {
return packageNames.reduce((testSetups, packageName) => {
const { name, components, version } = implementations[packageName];
const {
Component,
getComponentProps,
sampleCount,
Provider,
benchmarkType
} = fn(components);
testSetups[packageName] = {
Component,
getComponentProps,
sampleCount,
Provider,
benchmarkType,
version,
name
};
return testSetups;
}, {});
};
const tests = {
'Mount deep tree': createTestBlock((components) => ({
benchmarkType: 'mount',
Component: Tree,
getComponentProps: () => ({
breadth: 2,
components,
depth: 7,
id: 0,
wrap: 1
}),
Provider: components.Provider,
sampleCount: 50
})),
'Mount wide tree': createTestBlock((components) => ({
benchmarkType: 'mount',
Component: Tree,
getComponentProps: () => ({
breadth: 6,
components,
depth: 3,
id: 0,
wrap: 2
}),
Provider: components.Provider,
sampleCount: 50
})),
'Update dynamic styles': createTestBlock((components) => ({
benchmarkType: 'update',
Component: SierpinskiTriangle,
getComponentProps: ({ cycle }) => {
return { components, s: 200, renderCount: cycle, x: 0, y: 0 };
},
Provider: components.Provider,
sampleCount: 100
}))
};
const root = document.querySelector('.root');
const element = <App tests={tests} />;
createRoot(root).render(element);
================================================
FILE: packages/benchmarks/webpack.config.js
================================================
const BundleAnalyzerPlugin =
require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const path = require('path');
const appDirectory = path.resolve(__dirname);
module.exports = {
mode: 'production',
context: __dirname,
entry: './src/index',
output: {
path: path.resolve(appDirectory, 'dist'),
filename: 'bundle.js'
},
optimization: {
minimize: process.env.NODE_ENV === 'production'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[hash:base64:8]'
}
}
}
]
},
{
test: /\.js$/,
include: [path.resolve(appDirectory, 'src')],
use: {
loader: 'babel-loader',
options: {
cacheDirectory: false,
extends: path.resolve(appDirectory, '../../configs/babel.config')
}
}
}
]
},
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: 'static',
openAnalyzer: false
})
],
resolve: {
alias: {
'react-native': 'react-native-web'
}
}
};
================================================
FILE: packages/dom-event-testing-library/LICENSE
================================================
MIT License
Copyright (c) Nicolas Gallagher.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: packages/dom-event-testing-library/README.md
================================================
# `dom-event-testing-library`
A library for unit testing high-level interactions via simple pointer events, e.g., `pointerdown`, that produce realistic and complete DOM event sequences.
There are number of challenges involved in unit testing modules that work with DOM events.
1. Testing environments with and without support for the `PointerEvent` API.
2. Testing various user interaction modes including mouse, touch, and pen use.
3. Testing against the event sequences browsers actually produce (e.g., emulated touch and mouse events.)
4. Testing against the event properties DOM events include (i.e., more complete mock data)
5. Testing against "virtual" events produced by tools like screen-readers.
Writing unit tests to cover all these scenarios is tedious and error prone. This event testing library is designed to avoid these issues by allowing developers to more easily dispatch events in unit tests, and to more reliably test interactions while using an API based on `PointerEvent`.
## Example
```js
import {
describeWithPointerEvent,
testWithPointerType,
clearPointers,
createEventTarget,
setPointerEvent,
} from 'dom-event-testing-library';
describeWithPointerEvent('useTap', hasPointerEvent => {
beforeEach(() => {
// basic PointerEvent mock
setPointerEvent(hasPointerEvent);
});
afterEach(() => {
// clear active pointers between test runs
clearPointers();
});
// test all the pointer types supported by the environment
testWithPointerType('pointer down', pointerType => {
const ref = createRef(null);
const onTapStart = jest.fn();
// component to test
function Component() {
useTapEvents(ref, { onTapStart });
return <div ref={ref} />
}
// render component
act(() => {
render(<Component />);
});
// create an event target
const target = createEventTarget(ref.current);
// dispatch high-level pointer event
act(() => {
target.pointerdown({ pointerType });
});
// assertion
expect(onTapStart).toBeCalled();
});
});
```
The example above tests the interaction in multiple scenarios. In each case, a realistic DOM event sequence–with complete mock events–is produced. When running in a mock environment without the `PointerEvent` API, the test runs for both `mouse` and `touch` pointer types. When `touch` is the pointer type it produces emulated mouse events. When running in a mock environment with the `PointerEvent` API, the test runs for `mouse`, `touch`, and `pen` pointer types.
It's important to cover all these scenarios because it's very easy to introduce bugs – e.g., double calling of callbacks – if not accounting for emulated mouse events, differences in target capturing between `touch` and `mouse` pointers, and the different semantics of `button` across event APIs.
Default values are provided for the expected native events properties. They can also be customized as needed in a test.
```js
target.pointerdown({
button: 0,
buttons: 1,
pageX: 10,
pageY: 10,
pointerType,
// NOTE: use x,y instead of clientX,clientY
x: 10,
y: 10
});
```
Tests that dispatch multiple pointer events will dispatch multi-touch native events on the target.
```js
// first pointer is active
target.pointerdown({pointerId: 1, pointerType});
// second pointer is active
target.pointerdown({pointerId: 2, pointerType});
```
## API
### Target and events
To create a new event target pass the DOM node to `createEventTarget(node)`. This target can then be used to dispatch event sequences and customize the event payload. The following are currently supported:
* `blur`
* `click`
* `contextmenu`
* `focus` (includes the complete sequence of focus-related events)
* `keydown`
* `keyup`
* `pointercancel`
* `pointerdown`
* `pointerhover` (moves when pointer is not down)
* `pointermove` (moves when pointer is down)
* `pointerover`
* `pointerout`
* `scroll`
* `select`
* `selectionchange`
* `tap` (equivalent to `pointerdown` followed by `pointerup`)
* `virtualclick`
The target also has `node` property equal to the node that was used to create the target, and a `setBoundClientRect({x,y,width,height})` method that can be used to mock the return value of `getBoundingClientRect`.
### Jest helpers
#### `describeWithPointerEvent`
This is just like `describe` but it will run the entire test suite twice, once in an environment with `PointerEvent` mocked and once without.
```js
describeWithPointerEvent('useTap', hasPointerEvent => {
// test suite
});
```
#### `testWithPointerType`
The is just like `test` but it will run the test for every pointer type supported by the environment. When `PointerEvent` is mocked, the pointer types will be `mouse`, `touch`, and `pen`; otherwise the pointer types will be `mouse` and `touch`.
```js
testWithPointerType('pointer down', pointerType => {
// test unit
});
```
### jsdom environment helpers
#### platform
Interactions that account for Windows / macOS differences can change the platform by calling `platform.set(value)`, where `value` can be either `'mac'` or `'windows'`. To retreive the current platform call `platform.get()`, and the clear it call `platform.clear()`.
#### hasPointerEvent / setPointerEvent
Interactions implemented using `PointerEvent` can create a basic mock for jsdom by calling `setPointerEvent(true)` (disable with `setPointerEvent(false)`), and check whether `PointerEvent` is available by calling `hasPointerEvent()`.
================================================
FILE: packages/dom-event-testing-library/index.js
================================================
export * from './src/index';
================================================
FILE: packages/dom-event-testing-library/package.json
================================================
{
"private": true,
"name": "dom-event-testing-library",
"version": "0.0.0",
"main": "index.js",
"description": "Browser event sequences for unit tests",
"author": "Nicolas Gallagher",
"license": "MIT",
"homepage": "https://github.com/necolas/react-native-web/tree/master/packages/dom-event-testing-library"
}
================================================
FILE: packages/dom-event-testing-library/src/__tests__/__snapshots__/index-test.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`describeWithPointerEvent: MouseEvent/TouchEvent provides boolean to tests 1`] = `false`;
exports[`describeWithPointerEvent: MouseEvent/TouchEvent testWithPointerType: mouse 1`] = `"mouse"`;
exports[`describeWithPointerEvent: MouseEvent/TouchEvent testWithPointerType: touch 1`] = `"touch"`;
exports[`describeWithPointerEvent: PointerEvent provides boolean to tests 1`] = `true`;
exports[`describeWithPointerEvent: PointerEvent testWithPointerType: mouse 1`] = `"mouse"`;
exports[`describeWithPointerEvent: PointerEvent testWithPointerType: pen 1`] = `"pen"`;
exports[`describeWithPointerEvent: PointerEvent testWithPointerType: touch 1`] = `"touch"`;
================================================
FILE: packages/dom-event-testing-library/src/__tests__/index-test.js
================================================
/**
* Copyright (c) Nicolas Gallagher.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
'use strict';
import { defaultBrowserChromeSize } from '../constants';
import {
clearPointers,
createEventTarget,
describeWithPointerEvent,
testWithPointerType
} from '../index';
/**
* Unit test helpers
*/
describeWithPointerEvent('describeWithPointerEvent', (pointerEvent) => {
test('provides boolean to tests', () => {
expect(pointerEvent).toMatchSnapshot();
});
testWithPointerType('testWithPointerType', (pointerType) => {
expect(pointerType).toMatchSnapshot();
});
});
/**
* createEventTarget
*/
describe('createEventTarget', () => {
let node;
beforeEach(() => {
node = document.createElement('div');
});
afterEach(() => {
node = null;
clearPointers();
});
test('returns expected API', () => {
const target = createEventTarget(node);
expect(target.node).toEqual(node);
expect(Object.keys(target)).toMatchInlineSnapshot(`
[
"node",
"blur",
"click",
"contextmenu",
"error",
"focus",
"keydown",
"keyup",
"load",
"pointercancel",
"pointerdown",
"pointerhover",
"pointermove",
"pointerover",
"pointerout",
"pointerup",
"scroll",
"select",
"selectionchange",
"tap",
"virtualclick",
"setBoundingClientRect",
]
`);
});
/**
* Simple events
*/
describe('.blur()', () => {
test('default', () => {
const target = createEventTarget(node);
node.addEventListener('blur', (e) => {
expect(e.relatedTarget).toBeNull();
});
target.blur();
});
test('custom payload', () => {
const target = createEventTarget(node);
const relatedTarget = document.createElement('div');
node.addEventListener('blur', (e) => {
expect(e.relatedTarget).toBe(relatedTarget);
});
target.blur({ relatedTarget });
});
});
describe('.click()', () => {
test('default', () => {
const target = createEventTarget(node);
node.addEventListener('click', (e) => {
expect(e.altKey).toEqual(false);
expect(e.button).toEqual(0);
expect(e.buttons).toEqual(0);
expect(e.clientX).toEqual(0);
expect(e.clientY).toEqual(0);
expect(e.ctrlKey).toEqual(false);
expect(e.detail).toEqual(1);
expect(typeof e.getModifierState).toEqual('function');
expect(e.metaKey).toEqual(false);
expect(e.movementX).toEqual(0);
expect(e.movementY).toEqual(0);
expect(e.offsetX).toEqual(0);
expect(e.offsetY).toEqual(0);
expect(e.pageX).toEqual(0);
expect(e.pageY).toEqual(0);
expect(typeof e.preventDefault).toEqual('function');
expect(e.screenX).toEqual(0);
expect(e.screenY).toEqual(defaultBrowserChromeSize);
expect(e.shiftKey).toEqual(false);
expect(typeof e.timeStamp).toEqual('number');
});
target.click();
});
test('custom payload', () => {
const target = createEventTarget(node);
node.addEventListener('click', (e) => {
expect(e.altKey).toEqual(true);
expect(e.button).toEqual(1);
expect(e.buttons).toEqual(4);
expect(e.clientX).toEqual(10);
expect(e.clientY).toEqual(20);
expect(e.ctrlKey).toEqual(true);
expect(e.metaKey).toEqual(true);
expect(e.movementX).toEqual(1);
expect(e.movementY).toEqual(2);
expect(e.offsetX).toEqual(5);
expect(e.offsetY).toEqual(5);
expect(e.pageX).toEqual(50);
expect(e.pageY).toEqual(50);
expect(e.screenX).toEqual(10);
expect(e.screenY).toEqual(20 + defaultBrowserChromeSize);
expect(e.shiftKey).toEqual(true);
});
target.click({
altKey: true,
button: 1,
buttons: 4,
x: 10,
y: 20,
ctrlKey: true,
metaKey: true,
movementX: 1,
movementY: 2,
offsetX: 5,
offsetY: 5,
pageX: 50,
pageY: 50,
shiftKey: true
});
});
});
describe('.focus()', () => {
test('default', () => {
const target = createEventTarget(node);
node.addEventListener('focus', (e) => {
expect(e.relatedTarget).toBeNull();
});
target.focus();
});
test('custom payload', () => {
const target = createEventTarget(node);
const relatedTarget = document.createElement('div');
node.addEventListener('focus', (e) => {
expect(e.relatedTarget).toBe(relatedTarget);
});
target.focus({ relatedTarget });
});
});
describe('.keydown()', () => {
test('default', () => {
const target = createEventTarget(node);
node.addEventListener('keydown', (e) => {
expect(e.altKey).toEqual(false);
expect(e.ctrlKey).toEqual(false);
expect(typeof e.getModifierState).toEqual('function');
expect(e.key).toEqual('');
expect(e.metaKey).toEqual(false);
expect(typeof e.preventDefault).toEqual('function');
expect(e.shiftKey).toEqual(false);
expect(typeof e.timeStamp).toEqual('number');
});
target.keydown();
});
test('custom payload', () => {
const target = createEventTarget(node);
node.addEventListener('keydown', (e) => {
expect(e.altKey).toEqual(true);
expect(e.ctrlKey).toEqual(true);
expect(e.isComposing).toEqual(true);
expect(e.key).toEqual('Enter');
expect(e.metaKey).toEqual(true);
expect(e.shiftKey).toEqual(true);
});
target.keydown({
altKey: true,
ctrlKey: true,
isComposing: true,
key: 'Enter',
metaKey: true,
shiftKey: true
});
});
});
describe('.keyup()', () => {
test('default', () => {
const target = createEventTarget(node);
node.addEventListener('keyup', (e) => {
expect(e.altKey).toEqual(false);
expect(e.ctrlKey).toEqual(false);
expect(typeof e.getModifierState).toEqual('function');
expect(e.key).toEqual('');
expect(e.metaKey).toEqual(false);
expect(typeof e.preventDefault).toEqual('function');
expect(e.shiftKey).toEqual(false);
expect(typeof e.timeStamp).toEqual('number');
});
target.keydown();
});
test('custom payload', () => {
const target = createEventTarget(node);
node.addEventListener('keyup', (e) => {
expect(e.altKey).toEqual(true);
expect(e.ctrlKey).toEqual(true);
expect(e.isComposing).toEqual(true);
expect(e.key).toEqual('Enter');
expect(e.metaKey).toEqual(true);
expect(e.shiftKey).toEqual(true);
});
target.keyup({
altKey: true,
ctrlKey: true,
isComposing: true,
key: 'Enter',
metaKey: true,
shiftKey: true
});
});
});
describe('.scroll()', () => {
test('default', () => {
const target = createEventTarget(node);
node.addEventListener('scroll', (e) => {
expect(e.type).toEqual('scroll');
});
target.scroll();
});
});
describe('.virtualclick()', () => {
test('default', () => {
const target = createEventTarget(node);
node.addEventListener('click', (e) => {
expect(e.altKey).toEqual(false);
expect(e.button).toEqual(0);
expect(e.buttons).toEqual(0);
expect(e.clientX).toEqual(0);
expect(e.clientY).toEqual(0);
expect(e.ctrlKey).toEqual(false);
expect(e.detail).toEqual(0);
expect(typeof e.getModifierState).toEqual('function');
expect(e.metaKey).toEqual(false);
expect(e.movementX).toEqual(0);
expect(e.movementY).toEqual(0);
expect(e.offsetX).toEqual(0);
expect(e.offsetY).toEqual(0);
expect(e.pageX).toEqual(0);
expect(e.pageY).toEqual(0);
expect(typeof e.preventDefault).toEqual('function');
expect(e.screenX).toEqual(0);
expect(e.screenY).toEqual(0);
expect(e.shiftKey).toEqual(false);
expect(typeof e.timeStamp).toEqual('number');
});
target.virtualclick();
});
test('custom payload', () => {
const target = createEventTarget(node);
node.addEventListener('click', (e) => {
// expect most of the custom payload to be ignored
expect(e.altKey).toEqual(true);
expect(e.button).toEqual(1);
expect(e.buttons).toEqual(0);
expect(e.clientX).toEqual(0);
expect(e.clientY).toEqual(0);
expect(e.ctrlKey).toEqual(true);
expect(e.detail).toEqual(0);
expect(e.metaKey).toEqual(true);
expect(e.pageX).toEqual(0);
expect(e.pageY).toEqual(0);
expect(e.screenX).toEqual(0);
expect(e.screenY).toEqual(0);
expect(e.shiftKey).toEqual(true);
});
target.virtualclick({
altKey: true,
button: 1,
buttons: 4,
x: 10,
y: 20,
ctrlKey: true,
metaKey: true,
pageX: 50,
pageY: 50,
shiftKey: true
});
});
});
/**
* TODO: Complex event sequences
*/
/**
* Other APIs
*/
test('.setBoundingClientRect()', () => {
const target = createEventTarget(node);
expect(node.getBoundingClientRect()).toMatchInlineSnapshot(`
{
"bottom": 0,
"height": 0,
"left": 0,
"right": 0,
"top": 0,
"width": 0,
"x": 0,
"y": 0,
}
`);
target.setBoundingClientRect({ x: 10, y: 20, width: 100, height: 200 });
expect(node.getBoundingClientRect()).toMatchInlineSnapshot(`
{
"bottom": 220,
"height": 200,
"left": 10,
"right": 110,
"top": 20,
"width": 100,
"x": 10,
"y": 20,
}
`);
});
});
================================================
FILE: packages/dom-event-testing-library/src/constants.js
================================================
/**
* Copyright (c) Nicolas Gallagher.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
'use strict';
export const defaultPointerId = 1;
export const defaultPointerSize = 23;
export const defaultBrowserChromeSize = 50;
/**
* Button property
* This property only guarantees to indicate which buttons are pressed during events caused by pressing or
* releasing one or multiple buttons. As such, it is not reliable for events such as 'mouseenter', 'mouseleave',
* 'mouseover', 'mouseout' or 'mousemove'. Furthermore, the semantics differ for PointerEvent, where the value
* for 'pointermove' will always be -1.
*/
export const buttonType = {
// no change since last event
none: -1,
// left-mouse
// touch contact
// pen contact
primary: 0,
// right-mouse
// pen barrel button
secondary: 2,
// middle mouse
auxiliary: 1,
// back mouse
back: 3,
// forward mouse
forward: 4,
// pen eraser
eraser: 5
};
/**
* Buttons bitmask
*/
export const buttonsType = {
none: 0,
// left-mouse
// touch contact
// pen contact
primary: 1,
// right-mouse
// pen barrel button
secondary: 2,
// middle mouse
auxiliary: 4,
// back mouse
back: 8,
// forward mouse
forward: 16,
// pen eraser
eraser: 32
};
================================================
FILE: packages/dom-event-testing-library/src/createEvent.js
================================================
/**
* Copyright (c) Nicolas Gallagher.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
'use strict';
const defaultConfig = {
constructorType: 'Event',
defaultInit: { bubbles: true, cancelable: true, composed: true }
};
const eventConfigs = {
blur: {
constructorType: 'FocusEvent',
defaultInit: { bubbles: false, cancelable: false, composed: true }
},
change: {
constructorType: 'Event',
defaultInit: { bubbles: true, cancelable: false }
},
click: {
constructorType: 'MouseEvent',
defaultInit: { bubbles: true, cancelable: true, composed: true }
},
compositionend: {
constructorType: 'CompositionEvent',
defaultInit: { bubbles: true, cancelable: true, composed: true }
},
compositionstart: {
constructorType: 'CompositionEvent',
defaultInit: { bubbles: true, cancelable: true, composed: true }
},
compositionupdate: {
constructorType: 'CompositionEvent',
defaultInit: { bubbles: true, cancelable: true, composed: true }
},
contextmenu: {
constructorType: 'MouseEvent',
defaultInit: { bubbles: true, cancelable: true, composed: true }
},
dblclick: {
constructorType: 'MouseEvent',
defaultInit: { bubbles: true, cancelable: true, composed: true }
},
drag: {
constructorType: 'MouseEvent',
defaultInit: { bubbles: true, cancelable: true, composed: true }
},
dragend: {
constructorType: 'MouseEvent',
defaultInit: { bubbles: true, cancelable: false, composed: true }
},
dragenter: {
constructorType: 'MouseEvent',
defaultInit: { bubbles: true, cancelable: true, composed: true }
},
dragexit: {
constructorType: 'MouseEvent',
defaultInit: { bubbles: true, cancelable: false, composed: true }
},
dragleave: {
constructorType: 'MouseEvent',
defaultInit: { bubbles: true, cancelable: false, composed: true }
},
dragover: {
constructorType: 'MouseEvent',
defaultInit: { bubbles: true, cancelable: true, composed: true }
},
dragstart: {
constructorType: 'MouseEvent',
defaultInit: { bubbles: true, cancelable: true, composed: true }
},
drop: {
constructorType: 'MouseEvent',
defaultInit: { bubbles: true, cancelable: true, composed: true }
},
error: {
constructorType: 'Event',
defaultInit: { bubbles: false, cancelable: false }
},
focus: {
constructorType: 'FocusEvent',
defaultInit: { bubbles: false, cancelable: false, composed: true }
},
focusin: {
constructorType: 'FocusEvent',
defaultInit: { bubbles: true, cancelable: false, composed: true }
},
focusout: {
constructorType: 'FocusEvent',
defaultInit: { bubbles: true, cancelable: false, composed: true }
},
input: {
constructorType: 'InputEvent',
defaultInit: { bubbles: true, cancelable: false, composed: true }
},
invalid: {
constructorType: 'Event',
defaultInit: { bubbles: false, cancelable: true }
},
keydown: {
constructorType: 'KeyboardEvent',
defaultInit: { bubbles: true, cancelable: true, composed: true }
},
keyup: {
constructorType: 'KeyboardEvent',
defaultInit: { bubbles: true, cancelable: true, composed: true }
},
load: {
constructorType: 'UIEvent',
defaultInit: { bubbles: false, cancelable: false }
},
mousedown: {
constructorType: 'MouseEvent',
defaultInit: { bubbles: true, cancelable: true, composed: true }
},
mouseenter: {
constructorType: 'MouseEvent',
defaultInit: { bubbles: false, cancelable: false, composed: true }
},
mouseleave: {
constructorType: 'MouseEvent',
defaultInit: { bubbles: false, cancelable: false, composed: true }
},
mousemove: {
constructorType: 'MouseEvent',
defaultInit: { bubbles: true, cancelable: true, composed: true }
},
mouseout: {
constructorType: 'MouseEvent',
defaultInit: { bubbles: true, cancelable: true, composed: true }
},
mouseover: {
constructorType: 'MouseEvent',
defaultInit: { bubbles: true, cancelable: true, composed: true }
},
mouseup: {
constructorType: 'MouseEvent',
defaultInit: { bubbles: true, cancelable: true, composed: true }
},
scroll: {
constructorType: 'UIEvent',
defaultInit: { bubbles: false, cancelable: false }
},
select: {
constructorType: 'Event',
defaultInit: { bubbles: true, cancelable: false }
},
submit: {
constructorType: 'Event',
defaultInit: { bubbles: true, cancelable: true }
},
touchcancel: {
constructorType: 'TouchEvent',
defaultInit: { bubbles: true, cancelable: false, composed: true }
},
touchend: {
constructorType: 'TouchEvent',
defaultInit: { bubbles: true, cancelable: true, composed: true }
},
touchmove: {
constructorType: 'TouchEvent',
defaultInit: { bubbles: true, cancelable: true, composed: true }
},
touchstart: {
constructorType: 'TouchEvent',
defaultInit: { bubbles: true, cancelable: true, composed: true }
},
// 'PointerEvent' constructor is not supported in jsdom
gotpointercapture: {
constructorType: 'Event',
defaultInit: { bubbles: false, cancelable: false, composed: true }
},
lostpointercapture: {
constructorType: 'Event',
defaultInit: { bubbles: false, cancelable: false, composed: true }
},
pointercancel: {
constructorType: 'Event',
defaultInit: { bubbles: true, cancelable: false, composed: true }
},
pointerdown: {
constructorType: 'Event',
defaultInit: { bubbles: true, cancelable: true, composed: true }
},
pointerenter: {
constructorType: 'Event',
defaultInit: { bubbles: false, cancelable: false }
},
pointerleave: {
constructorType: 'Event',
defaultInit: { bubbles: false, cancelable: false }
},
pointermove: {
constructorType: 'Event',
defaultInit: { bubbles: true, cancelable: true, composed: true }
},
pointerout: {
constructorType: 'Event',
defaultInit: { bubbles: true, cancelable: true, composed: true }
},
pointerover: {
constructorType: 'Event',
defaultInit: { bubbles: true, cancelable: true, composed: true }
},
pointerup: {
constructorType: 'Event',
defaultInit: { bubbles: true, cancelable: true, composed: true }
},
wheel: {
constructorType: 'WheelEvent',
defaultInit: { bubbles: true, cancelable: true, composed: true }
}
};
function getEventConfig(type) {
return eventConfigs[type] || defaultConfig;
}
export default function createEvent(type, init) {
const config = getEventConfig(type);
const { constructorType, defaultInit } = config;
const eventInit = { ...defaultInit, ...init };
const event = document.createEvent(constructorType);
const { bubbles, cancelable, ...data } = eventInit;
event.initEvent(type, bubbles, cancelable);
if (data != null) {
Object.keys(data).forEach((key) => {
const value = data[key];
// Ensure that mocks for 'preventDefault' can be called without interferring with
// the native behavior of 'preventDefault' (inc for passive events)
if (key === 'preventDefault' && typeof value === 'function') {
const originalPreventDefault = event.preventDefault.bind(event);
const preventDefault = function () {
// call the original function
originalPreventDefault();
// call the mock function
value();
};
Object.defineProperty(event, key, {
configurable: true,
value: preventDefault
});
} else if (value != null) {
Object.defineProperty(event, key, { configurable: true, value });
}
});
}
return event;
}
================================================
FILE: packages/dom-event-testing-library/src/domEnvironment.js
================================================
/**
* Copyright (c) Nicolas Gallagher.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* Change environment support for PointerEvent.
*/
const emptyFunction = function () {};
export function hasPointerEvent() {
return global != null && global.PointerEvent != null;
}
export function setPointerEvent(bool) {
const pointerCaptureFn = (name) => (id) => {
if (typeof id !== 'number') {
if (process.env.NODE_ENV !== 'production') {
console.error('A pointerId must be passed to "%s"', name);
}
}
};
global.PointerEvent = bool ? emptyFunction : undefined;
global.HTMLElement.prototype.setPointerCapture = bool
? pointerCaptureFn('setPointerCapture')
: undefined;
global.HTMLElement.prototype.releasePointerCapture = bool
? pointerCaptureFn('releasePointerCapture')
: undefined;
}
/**
* Change environment host platform.
*/
const platformGetter = jest.spyOn(global.navigator, 'platform', 'get');
export const platform = {
clear() {
platformGetter.mockClear();
},
get() {
return global.navigator.platform === 'MacIntel' ? 'mac' : 'windows';
},
set(name) {
switch (name) {
case 'mac': {
platformGetter.mockReturnValue('MacIntel');
break;
}
case 'windows': {
platformGetter.mockReturnValue('Win32');
break;
}
default: {
break;
}
}
}
};
================================================
FILE: packages/dom-event-testing-library/src/domEventSequences.js
================================================
/**
* Copyright (c) Nicolas Gallagher.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
'use strict';
import {
buttonType,
buttonsType,
defaultPointerId,
defaultPointerSize,
defaultBrowserChromeSize
} from './constants';
import * as domEvents from './domEvents';
import { hasPointerEvent, platform } from './domEnvironment';
import * as touchStore from './touchStore';
/**
* Converts a PointerEvent payload to a Touch
*/
function createTouch(target, payload) {
const {
height = defaultPointerSize,
pageX,
pageY,
pointerId,
pressure = 1,
twist = 0,
width = defaultPointerSize,
x = 0,
y = 0
} = payload;
return {
clientX: x,
clientY: y,
force: pressure,
identifier: pointerId,
pageX: pageX || x,
pageY: pageY || y,
radiusX: width / 2,
radiusY: height / 2,
rotationAngle: twist,
target,
screenX: x,
screenY: y + defaultBrowserChromeSize
};
}
/**
* Converts a PointerEvent to a TouchEvent
*/
function createTouchEventPayload(target, touch, payload) {
const {
altKey = false,
ctrlKey = false,
metaKey = false,
preventDefault,
shiftKey = false,
timeStamp
} = payload;
return {
altKey,
changedTouches: [touch],
ctrlKey,
metaKey,
preventDefault,
shiftKey,
targetTouches: touchStore.getTargetTouches(target),
timeStamp,
touches: touchStore.getTouches()
};
}
function getPointerType(payload) {
let pointerType = 'mouse';
if (payload != null && payload.pointerType != null) {
pointerType = payload.pointerType;
}
return pointerType;
}
/**
* Pointer events sequences.
*
* Creates representative browser event sequences for high-level gestures based on pointers.
* This allows unit tests to be written in terms of simple pointer interactions while testing
* that the responses to those interactions account for the complex sequence of events that
* browsers produce as a result.
*
* Every time a new pointer touches the surface a 'touchstart' event should be dispatched.
* - 'changedTouches' contains the new touch.
* - 'targetTouches' contains all the active pointers for the target.
* - 'touches' contains all the active pointers on the surface.
*
* Every time an existing pointer moves a 'touchmove' event should be dispatched.
* - 'changedTouches' contains the updated touch.
*
* Every time an existing pointer leaves the surface a 'touchend' event should be dispatched.
* - 'changedTouches' contains the released touch.
* - 'targetTouches' contains any of the remaining active pointers for the target.
*/
export function contextmenu(target, defaultPayload = {}) {
const dispatch = (arg) => target.dispatchEvent(arg);
const pointerType = getPointerType(defaultPayload);
const {
ctrlKey,
// eslint-disable-next-line
pointerType: _,
...restPayload
} = defaultPayload;
const payload = {
pointerId: defaultPointerId,
...restPayload,
button: buttonType.primary,
buttons: buttonsType.primary,
pointerType
};
const preventDefault = payload.preventDefault;
if (pointerType === 'touch') {
if (hasPointerEvent()) {
dispatch(domEvents.pointerdown(payload));
}
const touch = createTouch(target, payload);
touchStore.addTouch(touch);
const touchEventPayload = createTouchEventPayload(target, touch, payload);
dispatch(domEvents.touchstart(touchEventPayload));
dispatch(
domEvents.mousemove({
...payload,
button: buttonType.primary,
buttons: buttonsType.none
})
);
dispatch(
domEvents.contextmenu({
...payload,
button: buttonType.primary,
buttons: buttonsType.none,
preventDefault
})
);
touchStore.removeTouch(touch);
} else if (pointerType === 'mouse') {
if (ctrlKey === true) {
const { button, buttons } = payload;
if (hasPointerEvent()) {
dispatch(domEvents.pointerdown({ ...payload, ctrlKey }));
}
dispatch(domEvents.mousedown({ ...payload, ctrlKey }));
if (platform.get() === 'mac') {
dispatch(
domEvents.contextmenu({ button, buttons, ctrlKey, preventDefault })
);
}
} else {
const button = buttonType.secondary;
const buttons = buttonsType.secondary;
if (hasPointerEvent()) {
dispatch(domEvents.pointerdown({ ...payload, button, buttons }));
}
dispatch(domEvents.mousedown({ ...payload, button, buttons }));
dispatch(
domEvents.contextmenu({ ...payload, button, buttons, preventDefault })
);
}
}
}
export function focus(target, defaultPayload = {}) {
const dispatch = (arg) => target.dispatchEvent(arg);
const { relatedTarget, ...payload } = defaultPayload;
const blurPayload = { ...payload, relatedTarget: target };
const focusPayload = { ...payload, relatedTarget };
if (relatedTarget) {
relatedTarget.dispatchEvent(domEvents.focusout(blurPayload));
}
dispatch(domEvents.focusin(focusPayload));
if (relatedTarget) {
relatedTarget.dispatchEvent(domEvents.blur(blurPayload));
}
dispatch(domEvents.focus(focusPayload));
}
export function pointercancel(target, defaultPayload) {
const dispatchEvent = (arg) => target.dispatchEvent(arg);
const pointerType = getPointerType(defaultPayload);
const payload = {
pointerId: defaultPointerId,
pointerType,
...defaultPayload
};
if (hasPointerEvent()) {
dispatchEvent(domEvents.pointercancel(payload));
}
if (pointerType === 'mouse') {
dispatchEvent(domEvents.dragstart(payload));
} else {
const touch = createTouch(target, payload);
touchStore.removeTouch(touch);
const touchEventPayload = createTouchEventPayload(target, touch, payload);
dispatchEvent(domEvents.touchcancel(touchEventPayload));
}
}
export function pointerdown(target, defaultPayload) {
const dispatch = (arg) => target.dispatchEvent(arg);
const pointerType = getPointerType(defaultPayload);
const payload = {
button: buttonType.primary,
buttons: buttonsType.primary,
pointerId: defaultPointerId,
pointerType,
...defaultPayload
};
if (pointerType === 'mouse') {
if (hasPointerEvent()) {
dispatch(domEvents.pointerover(payload));
dispatch(domEvents.pointerenter(payload));
}
dispatch(domEvents.mouseover(payload));
dispatch(domEvents.mouseenter(payload));
if (hasPointerEvent()) {
dispatch(domEvents.pointerdown(payload));
}
dispatch(domEvents.mousedown(payload));
focus(target);
} else {
if (hasPointerEvent()) {
dispatch(domEvents.pointerover(payload));
dispatch(domEvents.pointerenter(payload));
dispatch(domEvents.pointerdown(payload));
}
const touch = createTouch(target, payload);
touchStore.addTouch(touch);
const touchEventPayload = createTouchEventPayload(target, touch, payload);
dispatch(domEvents.touchstart(touchEventPayload));
if (hasPointerEvent()) {
dispatch(domEvents.gotpointercapture(payload));
}
}
}
export function pointerover(target, defaultPayload) {
const dispatch = (arg) => target.dispatchEvent(arg);
const payload = {
pointerId: defaultPointerId,
...defaultPayload
};
if (hasPointerEvent()) {
// Pointer must move before it can dispatch "over"
dispatch(domEvents.pointermove());
dispatch(domEvents.pointerover(payload));
dispatch(domEvents.pointerenter(payload));
}
dispatch(domEvents.mousemove());
dispatch(domEvents.mouseover(payload));
dispatch(domEvents.mouseenter(payload));
}
export function pointerout(target, defaultPayload) {
const dispatch = (arg) => target.dispatchEvent(arg);
const payload = {
pointerId: defaultPointerId,
...defaultPayload
};
const { relatedTarget } = payload;
if (hasPointerEvent()) {
dispatch(domEvents.pointerout(payload));
// Only call the leave event if exiting the subtree
if (!target.contains(relatedTarget)) {
dispatch(domEvents.pointerleave(payload));
}
}
dispatch(domEvents.mouseout(payload));
if (!target.contains(relatedTarget)) {
// Only call the leave event if exiting the subtree
dispatch(domEvents.mouseleave(payload));
}
}
// pointer is not down while moving
export function pointerhover(target, defaultPayload) {
const dispatch = (arg) => target.dispatchEvent(arg);
const payload = {
pointerId: defaultPointerId,
...defaultPayload
};
if (hasPointerEvent()) {
dispatch(domEvents.pointermove(payload));
}
dispatch(domEvents.mousemove(payload));
}
// pointer is down while moving
export function pointermove(target, defaultPayload) {
const dispatch = (arg) => target.dispatchEvent(arg);
const pointerType = getPointerType(defaultPayload);
const payload = {
button: buttonType.primary,
buttons: buttonsType.primary,
pointerId: defaultPointerId,
pointerType,
...defaultPayload
};
if (pointerType === 'mouse') {
if (hasPointerEvent()) {
dispatch(
domEvents.pointermove({ pressure: 0.5, button: -1, ...payload })
);
}
dispatch(domEvents.mousemove(payload));
} else {
if (hasPointerEvent()) {
dispatch(
domEvents.pointermove({
pressure: 1,
button: -1,
...payload
})
);
}
const touch = createTouch(target, payload);
touchStore.updateTouch(touch);
const touchEventPayload = createTouchEventPayload(target, touch, payload);
dispatch(domEvents.touchmove(touchEventPayload));
}
}
export function pointerup(target, defaultPayload) {
const dispatch = (arg) => target.dispatchEvent(arg);
const pointerType = getPointerType(defaultPayload);
const payload = {
pointerId: defaultPointerId,
pointerType,
...defaultPayload
};
const isPrimaryButton = payload.button === buttonType.primary;
const isContextMenuAction =
platform.get() === 'mac' && payload.ctrlKey === true;
if (pointerType === 'mouse') {
if (hasPointerEvent()) {
dispatch(domEvents.pointerup(payload));
}
dispatch(domEvents.mouseup(payload));
if (isPrimaryButton && !isContextMenuAction) {
dispatch(domEvents.click(payload));
}
} else {
if (hasPointerEvent()) {
dispatch(domEvents.pointerup(payload));
dispatch(domEvents.lostpointercapture(payload));
dispatch(domEvents.pointerout(payload));
dispatch(domEvents.pointerleave(payload));
}
const touch = createTouch(target, payload);
const isGesture = touchStore.removeTouch(touch);
const touchEventPayload = createTouchEventPayload(target, touch, payload);
dispatch(domEvents.touchend(touchEventPayload));
// emulated mouse events don't occur for multi-touch or after 'touchmove'
if (!isGesture) {
dispatch(domEvents.mouseover(payload));
dispatch(domEvents.mousemove(payload));
dispatch(domEvents.mousedown(payload));
}
focus(target);
if (!isGesture) {
dispatch(domEvents.mouseup(payload));
}
if (isPrimaryButton && !isContextMenuAction) {
dispatch(domEvents.click(payload));
}
}
}
/**
* This function should be called after each test to ensure the touchStore is cleared
* in cases where the mock pointers weren't released before the test completed
* (e.g., a test failed or ran a partial gesture).
*/
export function clearPointers() {
touchStore.clear();
}
================================================
FILE: packages/dom-event-testing-library/src/domEvents.js
================================================
/**
* Copyright (c) Nicolas Gallagher.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
'use strict';
import createEvent from './createEvent';
import {
buttonType,
buttonsType,
defaultPointerSize,
defaultBrowserChromeSize
} from './constants';
/**
* Native event object mocks for higher-level events.
*
* 1. Each event type defines the exact object that it accepts. This ensures
* that no arbitrary properties can be assigned to events, and the properties
* that don't exist on specific event types (e.g., 'pointerType') are not added
* to the respective native event.
*
* 2. Properties that cannot be relied on due to inconsistent browser support (e.g., 'x' and 'y') are not
* added to the native event. Others that shouldn't be arbitrarily customized (e.g., 'screenX')
* are automatically inferred from associated values.
*
* 3. PointerEvent and TouchEvent fields are normalized (e.g., 'rotationAngle' -> 'twist')
*/
function emptyFunction() {}
function createGetModifierState(keyArg, data) {
if (keyArg === 'Alt') {
return data.altKey || false;
}
if (keyArg === 'Control') {
return data.ctrlKey || false;
}
if (keyArg === 'Meta') {
return data.metaKey || false;
}
if (keyArg === 'Shift') {
return data.shiftKey || false;
}
}
/**
* KeyboardEvent
*/
function createKeyboardEvent(
type,
{
altKey = false,
ctrlKey = false,
isComposing = false,
key = '',
metaKey = false,
preventDefault = emptyFunction,
shiftKey = false
} = {}
) {
const modifierState = { altKey, ctrlKey, metaKey, shiftKey };
const eventPayload = {
altKey,
ctrlKey,
getModifierState(keyArg) {
return createGetModifierState(keyArg, modifierState);
},
isComposing,
key,
metaKey,
preventDefault,
shiftKey
};
if (isComposing) {
eventPayload.keyCode = 229;
}
return createEvent(type, eventPayload);
}
/**
* MouseEvent
*/
function createMouseEvent(
type,
{
altKey = false,
button = buttonType.none,
buttons = buttonsType.none,
ctrlKey = false,
detail = 1,
metaKey = false,
movementX = 0,
movementY = 0,
offsetX = 0,
offsetY = 0,
pageX,
pageY,
preventDefault = emptyFunction,
relatedTarget,
screenX,
screenY,
shiftKey = false,
timeStamp,
x = 0,
y = 0
} = {}
) {
const modifierState = { altKey, ctrlKey, metaKey, shiftKey };
return createEvent(type, {
altKey,
button,
buttons,
clientX: x,
clientY: y,
ctrlKey,
detail,
getModifierState(keyArg) {
return createGetModifierState(keyArg, modifierState);
},
metaKey,
movementX,
movementY,
offsetX,
offsetY,
pageX: pageX || x,
pageY: pageY || y,
preventDefault,
relatedTarget,
screenX: screenX === 0 ? screenX : x,
screenY: screenY === 0 ? screenY : y + defaultBrowserChromeSize,
shiftKey,
timeStamp
});
}
/**
* PointerEvent
*/
function createPointerEvent(
type,
{
altKey = false,
button = buttonType.none,
buttons = buttonsType.none,
ctrlKey = false,
detail = 1,
height,
metaKey = false,
movementX = 0,
movementY = 0,
offsetX = 0,
offsetY = 0,
pageX,
pageY,
pointerId,
pressure = 0,
preventDefault = emptyFunction,
pointerType = 'mouse',
relatedTarget,
screenX,
screenY,
shiftKey = false,
tangentialPressure = 0,
tiltX = 0,
tiltY = 0,
timeStamp,
twist = 0,
width,
x = 0,
y = 0
} = {}
) {
const modifierState = { altKey, ctrlKey, metaKey, shiftKey };
const isMouse = pointerType === 'mouse';
return createEvent(type, {
altKey,
button,
buttons,
clientX: x,
clientY: y,
ctrlKey,
detail,
getModifierState(keyArg) {
return createGetModifierState(keyArg, modifierState);
},
height: isMouse ? 1 : height != null ? height : defaultPointerSize,
metaKey,
movementX,
movementY,
offsetX,
offsetY,
pageX: pageX || x,
pageY: pageY || y,
pointerId,
pointerType,
pressure,
preventDefault,
relatedTarget,
releasePointerCapture: emptyFunction,
screenX: screenX === 0 ? screenX : x,
screenY: screenY === 0 ? screenY : y + defaultBrowserChromeSize,
setPointerCapture: emptyFunction,
shiftKey,
tangentialPressure,
tiltX,
tiltY,
timeStamp,
twist,
width: isMouse ? 1 : width != null ? width : defaultPointerSize
});
}
/**
* TouchEvent
*/
function createTouchEvent(type, payload) {
return createEvent(type, {
...payload,
detail: 0,
sourceCapabilities: {
firesTouchEvents: true
}
});
}
/**
* DOM events
*/
export function blur({ relatedTarget } = {}) {
return createEvent('blur', { relatedTarget });
}
export function click(payload) {
return createMouseEvent('click', {
button: buttonType.primary,
...payload
});
}
export function contextmenu(payload) {
return createMouseEvent('contextmenu', {
...payload,
detail: 0
});
}
export function dragstart(payload) {
return createMouseEvent('dragstart', {
...payload,
detail: 0
});
}
export function error() {
return createEvent('error');
}
export function focus({ relatedTarget } = {}) {
return createEvent('focus', { relatedTarget });
}
export function focusin({ relatedTarget } = {}) {
return createEvent('focusin', { relatedTarget });
}
export function focusout({ relatedTarget } = {}) {
return createEvent('focusout', { relatedTarget });
}
export function gotpointercapture(payload) {
return createPointerEvent('gotpointercapture', payload);
}
export function keydown(payload) {
return createKeyboardEvent('keydown', payload);
}
export function keyup(payload) {
return createKeyboardEvent('keyup', payload);
}
export function load(payload) {
return createEvent('load', payload);
}
export function lostpointercapture(payload) {
return createPointerEvent('lostpointercapture', payload);
}
export function mousedown(payload) {
// The value of 'button' and 'buttons' for 'mousedown' must not be none.
const button =
payload != null && payload.button !== buttonType.none
? payload.button
: buttonType.primary;
const buttons =
payload != null && payload.buttons !== buttonsType.none
? payload.buttons
: buttonsType.primary;
return createMouseEvent('mousedown', {
...payload,
button,
buttons
});
}
export function mouseenter(payload) {
return createMouseEvent('mouseenter', payload);
}
export function mouseleave(payload) {
return createMouseEvent('mouseleave', payload);
}
export function mousemove(payload) {
return createMouseEvent('mousemove', {
// 0 is also the uninitialized value (i.e., don't assume it means primary button down)
button: 0,
buttons: 0,
...payload
});
}
export function mouseout(payload) {
return createMouseEvent('mouseout', payload);
}
export function mouseover(payload) {
return createMouseEvent('mouseover', payload);
}
export function mouseup(payload) {
return createMouseEvent('mouseup', {
button: buttonType.primary,
...payload,
buttons: buttonsType.none
});
}
export function pointercancel(payload) {
return createPointerEvent('pointercancel', {
...payload,
buttons: 0,
detail: 0,
height: 1,
pageX: 0,
pageY: 0,
pressure: 0,
screenX: 0,
screenY: 0,
width: 1,
x: 0,
y: 0
});
}
export function pointerdown(payload) {
const isTouch = payload != null && payload.pointerType === 'touch';
return createPointerEvent('pointerdown', {
button: buttonType.primary,
buttons: buttonsType.primary,
pressure: isTouch ? 1 : 0.5,
...payload
});
}
export function pointerenter(payload) {
return createPointerEvent('pointerenter', payload);
}
export function pointerleave(payload) {
return createPointerEvent('pointerleave', payload);
}
export function pointermove(payload) {
return createPointerEvent('pointermove', {
...payload,
button: buttonType.none,
buttons: buttonsType.none
});
}
export function pointerout(payload) {
return createPointerEvent('pointerout', payload);
}
export function pointerover(payload) {
return createPointerEvent('pointerover', payload);
}
export function pointerup(payload) {
return createPointerEvent('pointerup', {
button: buttonType.primary,
...payload,
buttons: buttonsType.none,
pressure: 0
});
}
export function scroll() {
return createEvent('scroll', { bubbles: false });
}
export function select() {
return createEvent('select');
}
export function selectionchange() {
return createEvent('selectionchange');
}
export function touchcancel(payload) {
return createTouchEvent('touchcancel', payload);
}
export function touchend(payload) {
return createTouchEvent('touchend', payload);
}
export function touchmove(payload) {
return createTouchEvent('touchmove', payload);
}
export function touchstart(payload) {
return createTouchEvent('touchstart', payload);
}
export function virtualclick(payload) {
return createMouseEvent('click', {
button: 0,
...payload,
buttons: 0,
detail: 0,
height: 1,
pageX: 0,
pageY: 0,
pressure: 0,
screenX: 0,
screenY: 0,
width: 1,
x: 0,
y: 0
});
}
================================================
FILE: packages/dom-event-testing-library/src/index.js
================================================
/**
* Copyright (c) Nicolas Gallagher.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
'use strict';
import { buttonType, buttonsType } from './constants';
import * as domEvents from './domEvents';
import * as domEventSequences from './domEventSequences';
import { hasPointerEvent, setPointerEvent, platform } from './domEnvironment';
import { describeWithPointerEvent, testWithPointerType } from './testHelpers';
const createEventTarget = (node) => ({
node,
/**
* Simple events abstraction.
*/
blur(payload) {
node.dispatchEvent(domEvents.blur(payload));
},
click(payload) {
node.dispatchEvent(domEvents.click(payload));
},
contextmenu(payload) {
domEventSequences.contextmenu(node, payload);
},
error() {
node.dispatchEvent(domEvents.error());
},
focus(payload) {
domEventSequences.focus(node, payload);
},
keydown(payload) {
node.dispatchEvent(domEvents.keydown(payload));
},
keyup(payload) {
node.dispatchEvent(domEvents.keyup(payload));
},
load(payload) {
node.dispatchEvent(domEvents.load(payload));
},
/**
* PointerEvent abstraction.
* Dispatches the expected sequence of PointerEvents, MouseEvents, and
* TouchEvents for a given environment.
*/
// node no longer receives events for the pointer
pointercancel(payload) {
domEventSequences.pointercancel(node, payload);
},
// node dispatches down events
pointerdown(payload) {
domEventSequences.pointerdown(node, payload);
},
// node dispatches move events (pointer is not down)
pointerhover(payload) {
domEventSequences.pointerhover(node, payload);
},
// node dispatches move events (pointer is down)
pointermove(payload) {
domEventSequences.pointermove(node, payload);
},
// node dispatches enter & over events
pointerover(payload) {
domEventSequences.pointerover(node, payload);
},
// node dispatches exit & leave events
pointerout(payload) {
domEventSequences.pointerout(node, payload);
},
// node dispatches up events
pointerup(payload) {
domEventSequences.pointerup(node, payload);
},
scroll(payload) {
node.dispatchEvent(domEvents.scroll(payload));
},
select(payload) {
node.dispatchEvent(domEvents.select(payload));
},
// selectionchange is only dispatched on 'document'
selectionchange(payload) {
document.dispatchEvent(domEvents.selectionchange(payload));
},
/**
* Gesture abstractions.
* Helpers for event sequences expected in a gesture.
* target.tap({ pointerType: 'touch' })
*/
tap(payload) {
domEventSequences.pointerdown(payload);
domEventSequences.pointerup(payload);
},
virtualclick(payload) {
node.dispatchEvent(domEvents.virtualclick(payload));
},
/**
* Utilities
*/
setBoundingClientRect({ x, y, width, height }) {
node.getBoundingClientRect = function () {
return {
width,
height,
left: x,
right: x + width,
top: y,
bottom: y + height,
x,
y
};
};
}
});
const clearPointers = domEventSequences.clearPointers;
export {
buttonType,
buttonsType,
clearPointers,
createEventTarget,
describeWithPointerEvent,
platform,
hasPointerEvent,
setPointerEvent,
testWithPointerType
};
================================================
FILE: packages/dom-event-testing-library/src/testHelpers.js
================================================
/**
* Copyright (c) Nicolas Gallagher.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
'use strict';
import { hasPointerEvent, setPointerEvent } from './domEnvironment';
export function describeWithPointerEvent(message, describeFn) {
const pointerEvent = 'PointerEvent';
const fallback = 'MouseEvent/TouchEvent';
describe.each`
value | name
${true} | ${pointerEvent}
${false} | ${fallback}
`(`${message}: $name`, (entry) => {
const hasPointerEvents = entry.value;
setPointerEvent(hasPointerEvents);
describeFn(hasPointerEvents);
});
}
export function testWithPointerType(message, testFn) {
const table = hasPointerEvent()
? ['mouse', 'touch', 'pen']
: ['mouse', 'touch'];
test.each(table)(`${message}: %s`, (pointerType) => {
testFn(pointerType);
});
}
================================================
FILE: packages/dom-event-testing-library/src/touchStore.js
================================================
/**
* Copyright (c) Nicolas Gallagher.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
'use strict';
/**
* Touch events state machine.
*
* Keeps track of the active pointers and allows them to be reflected in touch events.
*/
let isGesture = false;
const activeTouches = new Map();
export function addTouch(touch) {
const identifier = touch.identifier;
const target = touch.target;
if (!activeTouches.has(target)) {
activeTouches.set(target, new Map());
}
if (activeTouches.get(target).get(identifier)) {
// Do not allow existing touches to be overwritten
console.error(
'Touch with identifier %s already exists. Did not record touch start.',
identifier
);
} else {
activeTouches.get(target).set(identifier, touch);
}
isGesture = activeTouches.size > 1;
}
export function updateTouch(touch) {
const identifier = touch.identifier;
const target = touch.target;
if (activeTouches.get(target) != null) {
activeTouches.get(target).set(identifier, touch);
isGesture = true;
} else {
console.error(
'Touch with identifier %s does not exist. Cannot record touch move without a touch start.',
identifier
);
}
}
export function removeTouch(touch) {
const identifier = touch.identifier;
const target = touch.target;
if (activeTouches.get(target) != null) {
if (activeTouches.get(target).has(identifier)) {
activeTouches.get(target).delete(identifier);
} else {
console.error(
'Touch with identifier %s does not exist. Cannot record touch end without a touch start.',
identifier
);
}
}
return isGesture;
}
export function getTouches() {
const touches = [];
activeTouches.forEach((_, target) => {
touches.push(...getTargetTouches(target));
});
return touches;
}
export function getTargetTouches(target) {
if (activeTouches.get(target) != null) {
return Array.from(activeTouches.get(target).values());
}
return [];
}
export function clear() {
activeTouches.clear();
}
================================================
FILE: packages/react-native-web/LICENSE
================================================
MIT License
Copyright (c) Nicolas Gallagher.
Copyright (c) Meta Platforms, Inc. and affiliates.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: packages/react-native-web/README.md
================================================
# React Native for Web
[![npm version][package-badge]][package-url] [![Build Status][ci-badge]][ci-url] [](https://reactjs.org/docs/how-to-contribute.html#your-first-pull-request)
"React Native for Web" makes it possible to run [React Native][react-native-url] components and APIs on the web using React DOM.
## Documentation
The [documentation site](https://necolas.github.io/react-native-web/) ([source](https://github.com/necolas/react-native-web/blob/master/packages/react-native-web-docs)) covers installation, guides, and APIs.
## Example
The [examples app](https://p9t5cp.sse.codesandbox.io/) ([source](https://github.com/necolas/react-native-web/blob/master/packages/react-native-web-examples)) demonstrates many available features. Fork the [codesandbox](https://codesandbox.io/s/github/necolas/react-native-web/tree/master/packages/react-native-web-examples) to make changes and see the results.
You'll notice that there is no reference to `react-dom` in components. The `App` component that is shown below is defined using the APIs and Components of React Native, but it can also be rendered on the web using React Native for Web.
```js
// Example component
import React from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
class App extends React.Component {
render() {
return (
<View style={styles.box}>
<Text style={styles.text}>Hello, world!</Text>
</View>
);
}
}
const styles = StyleSheet.create({
box: { padding: 10 },
text: { fontWeight: 'bold' }
});
AppRegistry.registerComponent('App', () => App);
AppRegistry.runApplication('App', { rootTag: document.getElementById('react-root') });
```
## Contributing
Development happens in the open on GitHub and we are grateful for contributions including bugfixes, improvements, and ideas. Read below to learn how you can take part in improving React Native for Web.
### Code of conduct
This project expects all participants to adhere to Meta's OSS [Code of Conduct][code-of-conduct]. Please read the full text so that you can understand what actions will and will not be tolerated.
### Contributing guide
Read the [contributing guide][contributing-url] to learn about the development process, how to propose bugfixes and improvements, and how to build and test your changes to React Native for Web.
### Good first issues
To help you get you familiar with the contribution process, there is a list of [good first issues][good-first-issue-url] that contain bugs which have a relatively limited scope. This is a great place to get started.
## License
React Native for Web is [MIT licensed](./LICENSE). By contributing to React Native for Web, you agree that your contributions will be licensed under its MIT license.
[package-badge]: https://img.shields.io/npm/v/react-native-web.svg?style=flat
[package-url]: https://www.npmjs.com/package/react-native-web
[ci-badge]: https://github.com/necolas/react-native-web/workflows/tests/badge.svg
[ci-url]: https://github.com/necolas/react-native-web/actions
[react-native-url]: https://reactnative.dev/
[contributing-url]: https://github.com/necolas/react-native-web/blob/master/.github/CONTRIBUTING.md
[good-first-issue-url]: https://github.com/necolas/react-native-web/labels/good%20first%20issue
[code-of-conduct]: https://opensource.fb.com/code-of-conduct/
================================================
FILE: packages/react-native-web/package.json
================================================
{
"publishConfig": {
"registry": "https://registry.npmjs.org/"
},
"name": "react-native-web",
"version": "0.21.2",
"description": "React Native for Web",
"module": "dist/index.js",
"main": "dist/cjs/index.js",
"sideEffects": false,
"files": [
"dist",
"src",
"!**/__tests__"
],
"scripts": {
"clean": "del-cli ./dist",
"build": "npm-run-all clean -p \"build:* {@}\" --",
"build:commonjs": "cross-env BABEL_ENV=commonjs babel src --config-file ../../configs/babel.config.js --out-dir dist/cjs --ignore \"**/__tests__\"",
"build:es": "babel src --config-file ../../configs/babel.config.js --out-dir dist --ignore \"**/__tests__\"",
"build:flow": "gen-flow-files ./src --out-dir ./dist",
"dev": "npm-run-all clean -p \"build:* {@} -- --watch\""
},
"dependencies": {
"@babel/runtime": "^7.18.6",
"@react-native/normalize-colors": "^0.74.1",
"fbjs": "^3.0.4",
"inline-style-prefixer": "^7.0.1",
"memoize-one": "^6.0.0",
"nullthrows": "^1.1.1",
"postcss-value-parser": "^4.2.0",
"styleq": "^0.1.3"
},
"peerDependencies": {
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"author": "Nicolas Gallagher",
"license": "MIT",
"repository": {
"type": "git",
"url": "git://github.com/necolas/react-native-web.git"
},
"tags": [
"react"
],
"keywords": [
"react",
"react-component",
"react-native",
"web"
]
}
================================================
FILE: packages/react-native-web/src/exports/AccessibilityInfo/index.js
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/
'use client';
import canUseDOM from '../../modules/canUseDom';
function isScreenReaderEnabled(): Promise<*> {
return new Promise((resolve, reject) => {
resolve(true);
});
}
const prefersReducedMotionMedia =
canUseDOM && typeof window.matchMedia === 'function'
? window.matchMedia('(prefers-reduced-motion: reduce)')
: null;
function isReduceMotionEnabled(): Promise<*> {
return new Promise((resolve, reject) => {
resolve(
prefersReducedMotionMedia ? prefersReducedMotionMedia.matches : true
);
});
}
function addChangeListener(fn) {
if (prefersReducedMotionMedia != null) {
prefersReducedMotionMedia.addEventListener != null
? prefersReducedMotionMedia.addEventListener('change', fn)
: prefersReducedMotionMedia.addListener(fn);
}
}
function removeChangeListener(fn) {
if (prefersReducedMotionMedia != null) {
prefersReducedMotionMedia.removeEventListener != null
? prefersReducedMotionMedia.removeEventListener('change', fn)
: prefersReducedMotionMedia.removeListener(fn);
}
}
const handlers = {};
const AccessibilityInfo = {
/**
* Query whether a screen reader is currently enabled.
*
* Returns a promise which resolves to a boolean.
* The result is `true` when a screen reader is enabled and `false` otherwise.
*/
isScreenReaderEnabled,
/**
* Query whether the user prefers reduced motion.
*
* Returns a promise which resolves to a boolean.
* The result is `true` when a screen reader is enabled and `false` otherwise.
*/
isReduceMotionEnabled,
/**
* Deprecated
*/
fetch: isScreenReaderEnabled,
/**
* Add an event handler. Supported events: reduceMotionChanged
*/
addEventListener: function (eventName: string, handler: Function): Object {
if (eventName === 'reduceMotionChanged') {
if (!prefersReducedMotionMedia) {
return;
}
const listener = (event) => {
handler(event.matches);
};
addChangeListener(listener);
handlers[handler] = listener;
}
return {
remove: () => AccessibilityInfo.removeEventListener(eventName, handler)
};
},
/**
* Set accessibility focus to a react component.
*/
setAccessibilityFocus: function (reactTag: number): void {},
/**
* Post a string to be announced by the screen reader.
*/
announceForAccessibility: function (announcement: string): void {},
/**
* Remove an event handler.
*/
removeEventListener: function (eventName: string, handler: Function): void {
if (eventName === 'reduceMotionChanged') {
const listener = handlers[handler];
if (!listener || !prefersReducedMotionMedia) {
return;
}
removeChangeListener(listener);
}
return;
}
};
export default AccessibilityInfo;
================================================
FILE: packages/react-native-web/src/exports/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/ActivityIndicator prop "accessibilityLabel" value is set 1`] = `
<div
aria-label="accessibility label"
aria-valuemax="1"
aria-valuemin="0"
class="css-view-g5y9jx r-alignItems-1awozwy r-justifyContent-1777fci"
role="progressbar"
>
<div
class="css-view-g5y9jx r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
>
<svg
height="100%"
viewBox="0 0 32 32"
width="100%"
>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; opacity: 0.2;"
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
/>
</svg>
</div>
</div>
`;
exports[`components/ActivityIndicator prop "accessibilityLiveRegion" value is set 1`] = `
<div
aria-live="polite"
aria-valuemax="1"
aria-valuemin="0"
class="css-view-g5y9jx r-alignItems-1awozwy r-justifyContent-1777fci"
role="progressbar"
>
<div
class="css-view-g5y9jx r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
>
<svg
height="100%"
viewBox="0 0 32 32"
width="100%"
>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; opacity: 0.2;"
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
/>
</svg>
</div>
</div>
`;
exports[`components/ActivityIndicator prop "animating" is "false" 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
class="css-view-g5y9jx r-alignItems-1awozwy r-justifyContent-1777fci"
role="progressbar"
>
<div
class="css-view-g5y9jx r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0 r-animationPlayState-1abnn5w r-visibility-11j9u27"
>
<svg
height="100%"
viewBox="0 0 32 32"
width="100%"
>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; opacity: 0.2;"
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
/>
</svg>
</div>
</div>
`;
exports[`components/ActivityIndicator prop "animating" is "true" 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
class="css-view-g5y9jx r-alignItems-1awozwy r-justifyContent-1777fci"
role="progressbar"
>
<div
class="css-view-g5y9jx r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
>
<svg
height="100%"
viewBox="0 0 32 32"
width="100%"
>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; opacity: 0.2;"
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
/>
</svg>
</div>
</div>
`;
exports[`components/ActivityIndicator prop "color" 1`] = `
<svg
height="100%"
viewBox="0 0 32 32"
width="100%"
>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: red; opacity: 0.2;"
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: red; stroke-dasharray: 80; stroke-dashoffset: 60;"
/>
</svg>
`;
exports[`components/ActivityIndicator prop "dataSet" value is set 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
class="css-view-g5y9jx r-alignItems-1awozwy r-justifyContent-1777fci"
data-one="one"
data-two="two"
role="progressbar"
>
<div
class="css-view-g5y9jx r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
>
<svg
height="100%"
viewBox="0 0 32 32"
width="100%"
>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; opacity: 0.2;"
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
/>
</svg>
</div>
</div>
`;
exports[`components/ActivityIndicator prop "hidesWhenStopped" is "false" 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
class="css-view-g5y9jx r-alignItems-1awozwy r-justifyContent-1777fci"
role="progressbar"
>
<div
class="css-view-g5y9jx r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0 r-animationPlayState-1abnn5w"
>
<svg
height="100%"
viewBox="0 0 32 32"
width="100%"
>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; opacity: 0.2;"
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
/>
</svg>
</div>
</div>
`;
exports[`components/ActivityIndicator prop "hidesWhenStopped" is "true" 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
class="css-view-g5y9jx r-alignItems-1awozwy r-justifyContent-1777fci"
role="progressbar"
>
<div
class="css-view-g5y9jx r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0 r-animationPlayState-1abnn5w r-visibility-11j9u27"
>
<svg
height="100%"
viewBox="0 0 32 32"
width="100%"
>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; opacity: 0.2;"
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
/>
</svg>
</div>
</div>
`;
exports[`components/ActivityIndicator prop "nativeID" value is set 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
class="css-view-g5y9jx r-alignItems-1awozwy r-justifyContent-1777fci"
id="123"
role="progressbar"
>
<div
class="css-view-g5y9jx r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
>
<svg
height="100%"
viewBox="0 0 32 32"
width="100%"
>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; opacity: 0.2;"
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
/>
</svg>
</div>
</div>
`;
exports[`components/ActivityIndicator prop "size" is "large" 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
class="css-view-g5y9jx r-alignItems-1awozwy r-justifyContent-1777fci"
role="progressbar"
>
<div
class="css-view-g5y9jx r-height-1r8g8re r-width-1acpoxo r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
>
<svg
height="100%"
viewBox="0 0 32 32"
width="100%"
>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; opacity: 0.2;"
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
/>
</svg>
</div>
</div>
`;
exports[`components/ActivityIndicator prop "size" is a number 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
class="css-view-g5y9jx r-alignItems-1awozwy r-justifyContent-1777fci"
role="progressbar"
>
<div
class="css-view-g5y9jx r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
style="height: 30px; width: 30px;"
>
<svg
height="100%"
viewBox="0 0 32 32"
width="100%"
>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; opacity: 0.2;"
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
/>
</svg>
</div>
</div>
`;
exports[`components/ActivityIndicator prop "style" value is set 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
class="css-view-g5y9jx r-alignItems-1awozwy r-justifyContent-1777fci"
role="progressbar"
style="border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px;"
>
<div
class="css-view-g5y9jx r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
>
<svg
height="100%"
viewBox="0 0 32 32"
width="100%"
>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; opacity: 0.2;"
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
/>
</svg>
</div>
</div>
`;
exports[`components/ActivityIndicator prop "testID" value is set 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
class="css-view-g5y9jx r-alignItems-1awozwy r-justifyContent-1777fci"
data-testid="123"
role="progressbar"
>
<div
class="css-view-g5y9jx r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
>
<svg
height="100%"
viewBox="0 0 32 32"
width="100%"
>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; opacity: 0.2;"
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
/>
</svg>
</div>
</div>
`;
================================================
FILE: packages/react-native-web/src/exports/ActivityIndicator/__tests__/index-test.js
================================================
/**
* Copyright (c) Nicolas Gallagher.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import ActivityIndicator from '..';
import React from 'react';
import { createEventTarget } from 'dom-event-testing-library';
import { act, render } from '@testing-library/react';
describe('components/ActivityIndicator', () => {
describe('prop "accessibilityLabel"', () => {
test('value is set', () => {
const { container } = render(
<ActivityIndicator accessibilityLabel="accessibility label" />
);
expect(container.firstChild).toMatchSnapshot();
});
});
describe('prop "accessibilityLiveRegion"', () => {
test('value is set', () => {
const { container } = render(
<ActivityIndicator accessibilityLiveRegion="polite" />
);
expect(container.firstChild).toMatchSnapshot();
});
});
describe('prop "animating"', () => {
test('is "true"', () => {
const { container } = render(<ActivityIndicator animating={true} />);
expect(container.firstChild).toMatchSnapshot();
});
test('is "false"', () => {
const { container } = render(<ActivityIndicator animating={false} />);
expect(container.firstChild).toMatchSnapshot();
});
});
test('prop "color"', () => {
const { container } = render(<ActivityIndicator color="red" />);
const svg = container.firstChild.querySelector('svg');
expect(svg).toMatchSnapshot();
});
describe('prop "dataSet"', () => {
test('value is set', () => {
const { container } = render(
<ActivityIndicator dataSet={{ one: 'one', two: 'two' }} />
);
expect(container.firstChild).toMatchSnapshot();
});
});
describe('prop "hidesWhenStopped"', () => {
test('is "true"', () => {
const { container } = render(
<ActivityIndicator animating={false} hidesWhenStopped={true} />
);
expect(container.firstChild).toMatchSnapshot();
});
test('is "false"', () => {
const { container } = render(
<ActivityIndicator animating={false} hidesWhenStopped={false} />
);
expect(container.firstChild).toMatchSnapshot();
});
});
describe('prop "nativeID"', () => {
test('value is set', () => {
const { container } = render(<ActivityIndicator nativeID="123" />);
expect(container.firstChild).toMatchSnapshot();
});
});
describe('prop "onBlur"', () => {
test('is called', () => {
const onBlur = jest.fn();
const ref = React.createRef();
act(() => {
render(<ActivityIndicator onBlur={onBlur} ref={ref} />);
});
const target = createEventTarget(ref.current);
const body = createEventTarget(document.body);
act(() => {
target.focus();
body.focus({ relatedTarget: target.node });
});
expect(onBlur).toBeCalled();
});
});
describe('prop "onFocus"', () => {
test('is called', () => {
const onFocus = jest.fn();
const ref = React.createRef();
act(() => {
render(<ActivityIndicator onFocus={onFocus} ref={ref} />);
});
const target = createEventTarget(ref.current);
act(() => {
target.focus();
});
expect(onFocus).toBeCalled();
});
});
describe('prop "ref"', () => {
test('value is set', () => {
const ref = jest.fn();
render(<ActivityIndicator ref={ref} />);
expect(ref).toBeCalled();
});
});
describe('prop "size"', () => {
test('is "large"', () => {
const { container } = render(<ActivityIndicator size="large" />);
expect(container.firstChild).toMatchSnapshot();
});
test('is a number', () => {
const { container } = render(<ActivityIndicator size={30} />);
expect(container.firstChild).toMatchSnapshot();
});
});
describe('prop "style"', () => {
test('value is set', () => {
const { container } = render(
<ActivityIndicator style={{ borderWidth: 5 }} />
);
expect(container.firstChild).toMatchSnapshot();
});
});
describe('prop "testID"', () => {
test('value is set', () => {
const { container } = render(<ActivityIndicator testID="123" />);
expect(container.firstChild).toMatchSnapshot();
});
});
});
================================================
FILE: packages/react-native-web/src/exports/ActivityIndicator/index.js
================================================
/**
* Copyright (c) Nicolas Gallagher.
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/
'use client';
import type { ViewProps } from '../View';
import * as React from 'react';
import StyleSheet from '../StyleSheet';
import View from '../View';
const createSvgCircle = (style) => (
<circle cx="16" cy="16" fill="none" r="14" strokeWidth="4" style={style} />
);
type ActivityIndicatorProps = {
...ViewProps,
animating?: boolean,
color?: ?string,
hidesWhenStopped?: boolean,
size?: 'small' | 'large' | number
};
const ActivityIndicator: React.AbstractComponent<
ActivityIndicatorProps,
React.ElementRef<typeof View>
> = React.forwardRef((props, forwardedRef) => {
const {
animating = true,
color = '#1976D2',
hidesWhenStopped = true,
size = 'small',
style,
...other
} = props;
const svg = (
<svg height="100%" viewBox="0 0 32 32" width="100%">
{createSvgCircle({
stroke: color,
opacity: 0.2
})}
{createSvgCircle({
stroke: color,
strokeDasharray: 80,
strokeDashoffset: 60
})}
</svg>
);
return (
<View
{...other}
aria-valuemax={1}
aria-valuemin={0}
ref={forwardedRef}
role="progressbar"
style={[styles.container, style]}
>
<View
children={svg}
style={[
typeof size === 'number'
? { height: size, width: size }
: indicatorSizes[size],
styles.animation,
!animating && styles.animationPause,
!animating && hidesWhenStopped && styles.hidesWhenStopped
]}
/>
</View>
);
});
ActivityIndicator.displayName = 'ActivityIndicator';
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'center'
},
hidesWhenStopped: {
visibility: 'hidden'
},
animation: {
animationDuration: '0.75s',
animationKeyframes: [
{
'0%': { transform: 'rotate(0deg)' },
'100%': { transform: 'rotate(360deg)' }
}
],
animationTimingFunction: 'linear',
animationIterationCount: 'infinite'
},
animationPause: {
animationPlayState: 'paused'
}
});
const indicatorSizes = StyleSheet.create({
small: {
width: 20,
height: 20
},
large: {
width: 36,
height: 36
}
});
export default ActivityIndicator;
================================================
FILE: packages/react-native-web/src/exports/Alert/index.js
================================================
/**
* Copyright (c) Nicolas Gallagher.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/
class Alert {
static alert() {}
}
export default Alert;
================================================
FILE: packages/react-native-web/src/exports/Animated/__tests__/index-test.js
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
'use strict';
import Animated from '..';
import Easing from '../../Easing';
import AnimatedImplementation from '../../../vendor/react-native/Animated/AnimatedImplementation';
const AnimatedInterpolation = Animated.Interpolation;
describe('Animated', () => {
describe('Interpolation', () => {
describe('color value', () => {
test.each([[['#1E1E1E', '#1E1E1F']], [[0x1e1e1e, 0x1e1e1f]]])(
'can interpolate %s',
(outputRange) => {
const config = {
inputRange: [0, 1],
outputRange
};
const animVal = new Animated.Value(0);
const result = animVal.interpolate(config);
expect(result).toBeInstanceOf(Animated.Interpolation);
}
);
});
it('should work with defaults', () => {
const interpolation = AnimatedInterpolation.__createInterpolation({
inputRange: [0, 1],
outputRange: [0, 1]
});
expect(interpolation(0)).toBe(0);
expect(interpolation(0.5)).toBe(0.5);
expect(interpolation(0.8)).toBe(0.8);
expect(interpolation(1)).toBe(1);
});
it('should work with output range', () => {
const interpolation = AnimatedInterpolation.__createInterpolation({
inputRange: [0, 1],
outputRange: [100, 200]
});
expect(interpolation(0)).toBe(100);
expect(interpolation(0.5)).toBe(150);
expect(interpolation(0.8)).toBe(180);
expect(interpolation(1)).toBe(200);
});
it('should work with input range', () => {
const interpolation = AnimatedInterpolation.__createInterpolation({
inputRange: [100, 200],
outputRange: [0, 1]
});
expect(interpolation(100)).toBe(0);
expect(interpolation(150)).toBe(0.5);
expect(interpolation(180)).toBe(0.8);
expect(interpolation(200)).toBe(1);
});
it('should throw for non monotonic input ranges', () => {
expect(() =>
AnimatedInterpolation.__createInterpolation({
inputRange: [0, 2, 1],
outputRange: [0, 1, 2]
})
).toThrow();
expect(() =>
AnimatedInterpolation.__createInterpolation({
inputRange: [0, 1, 2],
outputRange: [0, 3, 1]
})
).not.toThrow();
});
it('should work with empty input range', () => {
const interpolation = AnimatedInterpolation.__createInterpolation({
inputRange: [0, 10, 10],
outputRange: [1, 2, 3],
extrapolate: 'extend'
});
expect(interpolation(0)).toBe(1);
expect(interpolation(5)).toBe(1.5);
expect(interpolation(10)).toBe(2);
expect(interpolation(10.1)).toBe(3);
expect(interpolation(15)).toBe(3);
});
it('should work with empty output range', () => {
const interpolation = AnimatedInterpolation.__createInterpolation({
inputRange: [1, 2, 3],
outputRange: [0, 10, 10],
extrapolate: 'extend'
});
expect(interpolation(0)).toBe(-10);
expect(interpolation(1.5)).toBe(5);
expect(interpolation(2)).toBe(10);
expect(interpolation(2.5)).toBe(10);
expect(interpolation(3)).toBe(10);
expect(interpolation(4)).toBe(10);
});
it('should work with easing', () => {
const interpolation = AnimatedInterpolation.__createInterpolation({
inputRange: [0, 1],
outputRange: [0, 1],
easing: Easing.quad
});
expect(interpolation(0)).toBe(0);
expect(interpolation(0.5)).toBe(0.25);
expect(interpolation(0.9)).toBe(0.81);
expect(interpolation(1)).toBe(1);
});
it('should work with extrapolate', () => {
let interpolation = AnimatedInterpolation.__createInterpolation({
inputRange: [0, 1],
outputRange: [0, 1],
extrapolate: 'extend',
easing: Easing.quad
});
expect(interpolation(-2)).toBe(4);
expect(interpolation(2)).toBe(4);
interpolation = AnimatedInterpolation.__createInterpolation({
inputRange: [0, 1],
outputRange: [0, 1],
extrapolate: 'clamp',
easing: Easing.quad
});
expect(interpolation(-2)).toBe(0);
expect(interpolation(2)).toBe(1);
interpolation = AnimatedInterpolation.__createInterpolation({
inputRange: [0, 1],
outputRange: [0, 1],
extrapolate: 'identity',
easing: Easing.quad
});
expect(interpolation(-2)).toBe(-2);
expect(interpolation(2)).toBe(2);
});
it('should work with keyframes with extrapolate', () => {
const interpolation = AnimatedInterpolation.__createInterpolation({
inputRange: [0, 10, 100, 1000],
outputRange: [0, 5, 50, 500],
extrapolate: true
});
expect(interpolation(-5)).toBe(-2.5);
expect(interpolation(0)).toBe(0);
expect(interpolation(5)).toBe(2.5);
expect(interpolation(10)).toBe(5);
expect(interpolation(50)).toBe(25);
expect(interpolation(100)).toBe(50);
expect(interpolation(500)).toBe(250);
expect(interpolation(1000)).toBe(500);
expect(interpolation(2000)).toBe(1000);
});
it('should work with keyframes without extrapolate', () => {
const interpolation = AnimatedInterpolation.__createInterpolation({
inputRange: [0, 1, 2],
outputRange: [0.2, 1, 0.2],
extrapolate: 'clamp'
});
expect(interpolation(5)).toBeCloseTo(0.2);
});
it('should throw for an infinite input range', () => {
expect(() =>
AnimatedInterpolation.__createInterpolation({
inputRange: [-Infinity, Infinity],
outputRange: [0, 1]
})
).toThrow();
expect(() =>
AnimatedInterpolation.__createInterpolation({
inputRange: [-Infinity, 0, Infinity],
outputRange: [1, 2, 3]
})
).not.toThrow();
});
it('should work with negative infinite', () => {
const interpolation = AnimatedInterpolation.__createInterpolation({
inputRange: [-Infinity, 0],
outputRange: [-Infinity, 0],
easing: Easing.quad,
extrapolate: 'identity'
});
expect(interpolation(-Infinity)).toBe(-Infinity);
expect(interpolation(-100)).toBeCloseTo(-10000);
expect(interpolation(-10)).toBeCloseTo(-100);
expect(interpolation(
gitextract_agiijy7o/
├── .codesandbox/
│ └── ci.json
├── .github/
│ ├── CONTRIBUTING.md
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug.yml
│ │ ├── config.yml
│ │ └── feature.yml
│ ├── labels-config.yml
│ └── workflows/
│ ├── labels.yml
│ ├── performance.yml
│ ├── react-integration.yml
│ └── tests.yml
├── .gitignore
├── .watchmanconfig
├── LICENSE
├── README.md
├── configs/
│ ├── .eslintignore
│ ├── .eslintrc
│ ├── .flowconfig
│ ├── .prettierignore
│ ├── babel.config.js
│ ├── husky/
│ │ └── pre-commit
│ ├── jest-setupFiles.dom.js
│ ├── jest.config.js
│ └── jest.config.node.js
├── flow-typed/
│ └── npm/
│ ├── create-react-class_v15.x.x.js
│ ├── prop-types_v15.x.x.js
│ └── styleq.js
├── package.json
├── packages/
│ ├── babel-plugin-react-native-web/
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── index.js
│ │ ├── package.json
│ │ └── src/
│ │ ├── __tests__/
│ │ │ ├── __snapshots__/
│ │ │ │ └── index-test.js.snap
│ │ │ └── index-test.js
│ │ ├── index.js
│ │ └── moduleMap.js
│ ├── benchmarks/
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── app/
│ │ │ │ ├── App.js
│ │ │ │ ├── Benchmark/
│ │ │ │ │ ├── index.js
│ │ │ │ │ ├── math.js
│ │ │ │ │ ├── timing.js
│ │ │ │ │ └── types.js
│ │ │ │ ├── Button.js
│ │ │ │ ├── Icons.js
│ │ │ │ ├── Layout.js
│ │ │ │ ├── ReportCard.js
│ │ │ │ ├── Text.js
│ │ │ │ └── theme.js
│ │ │ ├── cases/
│ │ │ │ ├── SierpinskiTriangle.js
│ │ │ │ └── Tree.js
│ │ │ ├── impl.js
│ │ │ ├── implementations/
│ │ │ │ ├── css-modules/
│ │ │ │ │ ├── Box.js
│ │ │ │ │ ├── Dot.js
│ │ │ │ │ ├── Provider.js
│ │ │ │ │ ├── View.js
│ │ │ │ │ ├── box-styles.css
│ │ │ │ │ ├── dot-styles.css
│ │ │ │ │ ├── index.js
│ │ │ │ │ └── view-styles.css
│ │ │ │ ├── inline-styles/
│ │ │ │ │ ├── Box.js
│ │ │ │ │ ├── Dot.js
│ │ │ │ │ ├── Provider.js
│ │ │ │ │ ├── View.js
│ │ │ │ │ └── index.js
│ │ │ │ ├── react-native-web/
│ │ │ │ │ ├── Box.js
│ │ │ │ │ ├── Dot.js
│ │ │ │ │ ├── Provider.js
│ │ │ │ │ └── index.js
│ │ │ │ ├── styleq/
│ │ │ │ │ ├── Box.js
│ │ │ │ │ ├── Dot.js
│ │ │ │ │ ├── Provider.js
│ │ │ │ │ ├── View.js
│ │ │ │ │ └── index.js
│ │ │ │ └── stylesheet/
│ │ │ │ ├── Box.js
│ │ │ │ ├── Dot.js
│ │ │ │ ├── Provider.js
│ │ │ │ ├── View.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ └── webpack.config.js
│ ├── dom-event-testing-library/
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── index.js
│ │ ├── package.json
│ │ └── src/
│ │ ├── __tests__/
│ │ │ ├── __snapshots__/
│ │ │ │ └── index-test.js.snap
│ │ │ └── index-test.js
│ │ ├── constants.js
│ │ ├── createEvent.js
│ │ ├── domEnvironment.js
│ │ ├── domEventSequences.js
│ │ ├── domEvents.js
│ │ ├── index.js
│ │ ├── testHelpers.js
│ │ └── touchStore.js
│ ├── react-native-web/
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── package.json
│ │ └── src/
│ │ ├── exports/
│ │ │ ├── AccessibilityInfo/
│ │ │ │ └── index.js
│ │ │ ├── ActivityIndicator/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ └── index-test.js.snap
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── Alert/
│ │ │ │ └── index.js
│ │ │ ├── Animated/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── AppRegistry/
│ │ │ │ ├── AppContainer.js
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ └── index-test.js.snap
│ │ │ │ │ ├── index-test.js
│ │ │ │ │ └── index-test.node.js
│ │ │ │ ├── index.js
│ │ │ │ └── renderApplication.js
│ │ │ ├── AppState/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── Appearance/
│ │ │ │ └── index.js
│ │ │ ├── BackHandler/
│ │ │ │ └── index.js
│ │ │ ├── Button/
│ │ │ │ └── index.js
│ │ │ ├── CheckBox/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ └── index-test.js.snap
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── Clipboard/
│ │ │ │ └── index.js
│ │ │ ├── DeviceEventEmitter/
│ │ │ │ └── index.js
│ │ │ ├── Dimensions/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── Easing/
│ │ │ │ └── index.js
│ │ │ ├── FlatList/
│ │ │ │ └── index.js
│ │ │ ├── I18nManager/
│ │ │ │ └── index.js
│ │ │ ├── Image/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ └── index-test.js.snap
│ │ │ │ │ └── index-test.js
│ │ │ │ ├── index.js
│ │ │ │ └── types.js
│ │ │ ├── ImageBackground/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── InputAccessoryView/
│ │ │ │ └── index.js
│ │ │ ├── InteractionManager/
│ │ │ │ ├── TaskQueue.js
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── TaskQueue-test.js
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── Keyboard/
│ │ │ │ └── index.js
│ │ │ ├── KeyboardAvoidingView/
│ │ │ │ └── index.js
│ │ │ ├── LayoutAnimation/
│ │ │ │ └── index.js
│ │ │ ├── Linking/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── LogBox/
│ │ │ │ └── index.js
│ │ │ ├── Modal/
│ │ │ │ ├── ModalAnimation.js
│ │ │ │ ├── ModalContent.js
│ │ │ │ ├── ModalFocusTrap.js
│ │ │ │ ├── ModalPortal.js
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ └── index-test.js.snap
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── NativeEventEmitter/
│ │ │ │ └── index.js
│ │ │ ├── NativeModules/
│ │ │ │ └── index.js
│ │ │ ├── PanResponder/
│ │ │ │ ├── Alternative.js
│ │ │ │ └── index.js
│ │ │ ├── Picker/
│ │ │ │ ├── PickerItem.js
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ └── index-test.js.snap
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── PixelRatio/
│ │ │ │ └── index.js
│ │ │ ├── Platform/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── Pressable/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ └── index-test.js.snap
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── ProgressBar/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── RefreshControl/
│ │ │ │ └── index.js
│ │ │ ├── SafeAreaView/
│ │ │ │ └── index.js
│ │ │ ├── ScrollView/
│ │ │ │ ├── ScrollViewBase.js
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ └── index-test.js.snap
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── SectionList/
│ │ │ │ └── index.js
│ │ │ ├── Share/
│ │ │ │ └── index.js
│ │ │ ├── StatusBar/
│ │ │ │ └── index.js
│ │ │ ├── StyleSheet/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── compiler-createReactDOMStyle-test.js
│ │ │ │ │ ├── compiler-test.js
│ │ │ │ │ ├── dom-createOrderedCSSStyleSheet-test.js
│ │ │ │ │ ├── dom-test.js
│ │ │ │ │ ├── dom-test.node.js
│ │ │ │ │ ├── index-test.js
│ │ │ │ │ ├── preprocess-test.js
│ │ │ │ │ └── validate-test.js
│ │ │ │ ├── compiler/
│ │ │ │ │ ├── createReactDOMStyle.js
│ │ │ │ │ ├── hash.js
│ │ │ │ │ ├── hyphenateStyleName.js
│ │ │ │ │ ├── index.js
│ │ │ │ │ ├── normalizeColor.js
│ │ │ │ │ ├── normalizeValueWithProperty.js
│ │ │ │ │ ├── resolveShadowValue.js
│ │ │ │ │ └── unitlessNumbers.js
│ │ │ │ ├── dom/
│ │ │ │ │ ├── createCSSStyleSheet.js
│ │ │ │ │ ├── createOrderedCSSStyleSheet.js
│ │ │ │ │ └── index.js
│ │ │ │ ├── index.js
│ │ │ │ ├── preprocess.js
│ │ │ │ └── validate.js
│ │ │ ├── Switch/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ └── index-test.js.snap
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── Text/
│ │ │ │ ├── TextAncestorContext.js
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ └── index-test.js.snap
│ │ │ │ │ └── index-test.js
│ │ │ │ ├── index.js
│ │ │ │ └── types.js
│ │ │ ├── TextInput/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ ├── index.js
│ │ │ │ └── types.js
│ │ │ ├── Touchable/
│ │ │ │ ├── BoundingDimensions.js
│ │ │ │ ├── Position.js
│ │ │ │ ├── ensurePositiveDelayProps.js
│ │ │ │ └── index.js
│ │ │ ├── TouchableHighlight/
│ │ │ │ └── index.js
│ │ │ ├── TouchableNativeFeedback/
│ │ │ │ └── index.js
│ │ │ ├── TouchableOpacity/
│ │ │ │ └── index.js
│ │ │ ├── TouchableWithoutFeedback/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── UIManager/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── Vibration/
│ │ │ │ └── index.js
│ │ │ ├── View/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ └── index-test.js.snap
│ │ │ │ │ └── index-test.js
│ │ │ │ ├── index.js
│ │ │ │ └── types.js
│ │ │ ├── VirtualizedList/
│ │ │ │ └── index.js
│ │ │ ├── YellowBox/
│ │ │ │ └── index.js
│ │ │ ├── createElement/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ └── index-test.js.snap
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── findNodeHandle/
│ │ │ │ └── index.js
│ │ │ ├── processColor/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── render/
│ │ │ │ └── index.js
│ │ │ ├── unmountComponentAtNode/
│ │ │ │ └── index.js
│ │ │ ├── useColorScheme/
│ │ │ │ └── index.js
│ │ │ ├── useLocaleContext/
│ │ │ │ └── index.js
│ │ │ └── useWindowDimensions/
│ │ │ └── index.js
│ │ ├── index.js
│ │ ├── modules/
│ │ │ ├── AccessibilityUtil/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── propsToAccessibilityComponent-test.js
│ │ │ │ │ └── propsToAriaRole-test.js
│ │ │ │ ├── index.js
│ │ │ │ ├── isDisabled.js
│ │ │ │ ├── propsToAccessibilityComponent.js
│ │ │ │ └── propsToAriaRole.js
│ │ │ ├── AssetRegistry/
│ │ │ │ └── index.js
│ │ │ ├── ImageLoader/
│ │ │ │ └── index.js
│ │ │ ├── TextInputState/
│ │ │ │ └── index.js
│ │ │ ├── UnimplementedView/
│ │ │ │ └── index.js
│ │ │ ├── addEventListener/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── index-test.js
│ │ │ │ │ └── index-test.node.js
│ │ │ │ └── index.js
│ │ │ ├── canUseDom/
│ │ │ │ └── index.js
│ │ │ ├── createDOMProps/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── dismissKeyboard/
│ │ │ │ └── index.js
│ │ │ ├── forwardedProps/
│ │ │ │ └── index.js
│ │ │ ├── getBoundingClientRect/
│ │ │ │ └── index.js
│ │ │ ├── isSelectionValid/
│ │ │ │ └── index.js
│ │ │ ├── isWebColor/
│ │ │ │ └── index.js
│ │ │ ├── mergeRefs/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── modality/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── multiplyStyleLengthValue/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── normalizeColor/
│ │ │ │ └── index.js
│ │ │ ├── pick/
│ │ │ │ └── index.js
│ │ │ ├── prefixStyles/
│ │ │ │ ├── index.js
│ │ │ │ └── static.js
│ │ │ ├── requestIdleCallback/
│ │ │ │ └── index.js
│ │ │ ├── setValueForStyles/
│ │ │ │ ├── dangerousStyleValue.js
│ │ │ │ └── index.js
│ │ │ ├── unitlessNumbers/
│ │ │ │ └── index.js
│ │ │ ├── useElementLayout/
│ │ │ │ └── index.js
│ │ │ ├── useEvent/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── useHover/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── useLayoutEffect/
│ │ │ │ └── index.js
│ │ │ ├── useLocale/
│ │ │ │ ├── index.js
│ │ │ │ └── isLocaleRTL.js
│ │ │ ├── useMergeRefs/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ ├── usePlatformMethods/
│ │ │ │ └── index.js
│ │ │ ├── usePressEvents/
│ │ │ │ ├── PressResponder.js
│ │ │ │ └── index.js
│ │ │ ├── useResponderEvents/
│ │ │ │ ├── README.md
│ │ │ │ ├── ResponderEventTypes.js
│ │ │ │ ├── ResponderSystem.js
│ │ │ │ ├── ResponderTouchHistoryStore.js
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ ├── createResponderEvent.js
│ │ │ │ ├── index.js
│ │ │ │ └── utils.js
│ │ │ ├── useStable/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── index-test.js
│ │ │ │ └── index.js
│ │ │ └── warnOnce/
│ │ │ └── index.js
│ │ ├── types/
│ │ │ ├── index.js
│ │ │ └── styles.js
│ │ └── vendor/
│ │ ├── hash/
│ │ │ └── index.js
│ │ └── react-native/
│ │ ├── Animated/
│ │ │ ├── Animated.js
│ │ │ ├── AnimatedEvent.js
│ │ │ ├── AnimatedImplementation.js
│ │ │ ├── AnimatedMock.js
│ │ │ ├── AnimatedPlatformConfig.js
│ │ │ ├── Easing.js
│ │ │ ├── NativeAnimatedHelper.js
│ │ │ ├── NativeAnimatedModule.js
│ │ │ ├── NativeAnimatedTurboModule.js
│ │ │ ├── SpringConfig.js
│ │ │ ├── animations/
│ │ │ │ ├── Animation.js
│ │ │ │ ├── DecayAnimation.js
│ │ │ │ ├── SpringAnimation.js
│ │ │ │ └── TimingAnimation.js
│ │ │ ├── bezier.js
│ │ │ ├── components/
│ │ │ │ ├── AnimatedFlatList.js
│ │ │ │ ├── AnimatedImage.js
│ │ │ │ ├── AnimatedScrollView.js
│ │ │ │ ├── AnimatedSectionList.js
│ │ │ │ ├── AnimatedText.js
│ │ │ │ └── AnimatedView.js
│ │ │ ├── createAnimatedComponent.js
│ │ │ ├── nodes/
│ │ │ │ ├── AnimatedAddition.js
│ │ │ │ ├── AnimatedColor.js
│ │ │ │ ├── AnimatedDiffClamp.js
│ │ │ │ ├── AnimatedDivision.js
│ │ │ │ ├── AnimatedInterpolation.js
│ │ │ │ ├── AnimatedModulo.js
│ │ │ │ ├── AnimatedMultiplication.js
│ │ │ │ ├── AnimatedNode.js
│ │ │ │ ├── AnimatedProps.js
│ │ │ │ ├── AnimatedStyle.js
│ │ │ │ ├── AnimatedSubtraction.js
│ │ │ │ ├── AnimatedTracking.js
│ │ │ │ ├── AnimatedTransform.js
│ │ │ │ ├── AnimatedValue.js
│ │ │ │ ├── AnimatedValueXY.js
│ │ │ │ └── AnimatedWithChildren.js
│ │ │ └── useAnimatedProps.js
│ │ ├── Batchinator/
│ │ │ └── index.js
│ │ ├── EventEmitter/
│ │ │ ├── NativeEventEmitter.js
│ │ │ └── RCTDeviceEventEmitter.js
│ │ ├── FillRateHelper/
│ │ │ └── index.js
│ │ ├── FlatList/
│ │ │ └── index.js
│ │ ├── JSEventLoopWatchdog/
│ │ │ └── index.js
│ │ ├── LayoutAnimation/
│ │ │ └── index.js
│ │ ├── PanResponder/
│ │ │ └── index.js
│ │ ├── PooledClass/
│ │ │ └── index.js
│ │ ├── ReactNative/
│ │ │ └── ReactNativeFeatureFlags.js
│ │ ├── SHA
│ │ ├── SectionList/
│ │ │ └── index.js
│ │ ├── StaticContainer/
│ │ │ └── index.js
│ │ ├── StaticRenderer/
│ │ │ └── index.js
│ │ ├── TouchHistoryMath/
│ │ │ └── index.js
│ │ ├── TurboModule/
│ │ │ ├── RCTExport.js
│ │ │ └── TurboModuleRegistry.js
│ │ ├── Types/
│ │ │ └── CoreEventTypes.js
│ │ ├── Utilities/
│ │ │ ├── Platform.js
│ │ │ ├── clamp.js
│ │ │ ├── setAndForwardRef.js
│ │ │ ├── useMergeRefs.js
│ │ │ └── useRefEffect.js
│ │ ├── ViewabilityHelper/
│ │ │ └── index.js
│ │ ├── VirtualizeUtils/
│ │ │ └── index.js
│ │ ├── VirtualizedList/
│ │ │ ├── CellRenderMask.js
│ │ │ ├── ChildListCollection.js
│ │ │ ├── StateSafePureComponent.js
│ │ │ ├── VirtualizedListCellRenderer.js
│ │ │ ├── VirtualizedListContext.js
│ │ │ ├── VirtualizedListProps.js
│ │ │ └── index.js
│ │ ├── VirtualizedSectionList/
│ │ │ └── index.js
│ │ ├── deepDiffer/
│ │ │ └── index.js
│ │ ├── infoLog/
│ │ │ └── index.js
│ │ └── vendor/
│ │ └── emitter/
│ │ └── EventEmitter.js
│ ├── react-native-web-docs/
│ │ ├── .eleventy.js
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── package.json
│ │ └── src/
│ │ ├── data/
│ │ │ └── site.js
│ │ ├── includes/
│ │ │ ├── assets/
│ │ │ │ ├── inline.css
│ │ │ │ └── inline.js
│ │ │ ├── fragments/
│ │ │ │ ├── footer.html
│ │ │ │ ├── macros.html
│ │ │ │ └── nav.html
│ │ │ └── layouts/
│ │ │ ├── 404.html
│ │ │ ├── home.html
│ │ │ ├── page.html
│ │ │ └── shell.html
│ │ └── pages/
│ │ ├── 404.md
│ │ ├── docs/
│ │ │ ├── apis/
│ │ │ │ ├── _.md
│ │ │ │ ├── animated.md
│ │ │ │ ├── app-registry.md
│ │ │ │ ├── app-state.md
│ │ │ │ ├── appearance.md
│ │ │ │ ├── clipboard.md
│ │ │ │ ├── dimensions.md
│ │ │ │ ├── linking.md
│ │ │ │ ├── pan-responder.md
│ │ │ │ ├── pixel-ratio.md
│ │ │ │ ├── platform.md
│ │ │ │ ├── style-sheet.md
│ │ │ │ └── vibration.md
│ │ │ ├── appendix/
│ │ │ │ ├── _.md
│ │ │ │ ├── about-project.md
│ │ │ │ └── unstable-apis.md
│ │ │ ├── components/
│ │ │ │ ├── _.md
│ │ │ │ ├── activity-indicator.md
│ │ │ │ ├── checkbox.md
│ │ │ │ ├── image-background.md
│ │ │ │ ├── image.md
│ │ │ │ ├── lists.md
│ │ │ │ ├── modal.md
│ │ │ │ ├── picker.md
│ │ │ │ ├── pressable.md
│ │ │ │ ├── progress-bar.md
│ │ │ │ ├── scroll-view.md
│ │ │ │ ├── switch.md
│ │ │ │ ├── text-input.md
│ │ │ │ ├── text.md
│ │ │ │ └── view.md
│ │ │ ├── concepts/
│ │ │ │ ├── _.md
│ │ │ │ ├── accessibility.md
│ │ │ │ ├── interactions.md
│ │ │ │ ├── localization.md
│ │ │ │ ├── rendering.md
│ │ │ │ └── styling.md
│ │ │ ├── getting-started/
│ │ │ │ ├── _.md
│ │ │ │ ├── browser-compatibility.md
│ │ │ │ ├── help.md
│ │ │ │ ├── installation.md
│ │ │ │ ├── introduction.md
│ │ │ │ ├── multi-platform.md
│ │ │ │ ├── react-native-compatibility.md
│ │ │ │ ├── setup.md
│ │ │ │ └── typescript-support.md
│ │ │ └── hooks/
│ │ │ ├── _.md
│ │ │ ├── use-color-scheme.md
│ │ │ ├── use-locale-context.md
│ │ │ └── use-window-dimensions.md
│ │ ├── home.md
│ │ └── pages.json
│ └── react-native-web-examples/
│ ├── .babelrc
│ ├── LICENSE
│ ├── README.md
│ ├── next.config.js
│ ├── package.json
│ ├── pages/
│ │ ├── _document.js
│ │ ├── activity-indicator/
│ │ │ └── index.js
│ │ ├── animated/
│ │ │ └── index.js
│ │ ├── app-registry/
│ │ │ └── index.js
│ │ ├── app-state/
│ │ │ └── index.js
│ │ ├── checkbox/
│ │ │ └── index.js
│ │ ├── clipboard/
│ │ │ └── index.js
│ │ ├── dimensions/
│ │ │ └── index.js
│ │ ├── flatlist/
│ │ │ └── index.js
│ │ ├── image/
│ │ │ └── index.js
│ │ ├── image-background/
│ │ │ └── index.js
│ │ ├── index.js
│ │ ├── linking/
│ │ │ └── index.js
│ │ ├── lists/
│ │ │ └── index.js
│ │ ├── localization/
│ │ │ └── index.js
│ │ ├── modal/
│ │ │ └── index.js
│ │ ├── pan-responder/
│ │ │ └── index.js
│ │ ├── pressable/
│ │ │ └── index.js
│ │ ├── progress-bar/
│ │ │ └── index.js
│ │ ├── scroll-view/
│ │ │ └── index.js
│ │ ├── section-list/
│ │ │ └── index.js
│ │ ├── switch/
│ │ │ └── index.js
│ │ ├── text/
│ │ │ └── index.js
│ │ ├── text-input/
│ │ │ └── index.js
│ │ └── view/
│ │ └── index.js
│ ├── sandbox.config.json
│ └── shared/
│ ├── button.js
│ └── example.js
└── scripts/
├── createBabelReactNativeWebModuleMap.js
├── createInlineStylePrefixerData.js
└── releaseReactNativeWebPackages.js
SYMBOL INDEX (956 symbols across 186 files)
FILE: configs/jest-setupFiles.dom.js
class ResizeObserver (line 9) | class ResizeObserver {
method disconnect (line 10) | disconnect() {}
method observe (line 11) | observe() {}
method unobserve (line 12) | unobserve() {}
FILE: packages/babel-plugin-react-native-web/src/index.js
method ImportDeclaration (line 42) | ImportDeclaration(path, state) {
method ExportNamedDeclaration (line 72) | ExportNamedDeclaration(path, state) {
method VariableDeclaration (line 106) | VariableDeclaration(path, state) {
FILE: packages/benchmarks/src/app/App.js
class App (line 13) | class App extends Component {
method constructor (line 16) | constructor(props, context) {
method render (line 27) | render() {
FILE: packages/benchmarks/src/app/Benchmark/index.js
class Benchmark (line 104) | class Benchmark extends Component<
FILE: packages/benchmarks/src/app/Benchmark/timing.js
function now (line 4) | function now(): number {
FILE: packages/benchmarks/src/app/Layout.js
class Layout (line 5) | class Layout extends Component {
method render (line 10) | render() {
FILE: packages/benchmarks/src/app/ReportCard.js
class ReportCard (line 12) | class ReportCard extends React.PureComponent {
method render (line 13) | render() {
FILE: packages/benchmarks/src/app/Text.js
class AppText (line 6) | class AppText extends React.Component {
method render (line 13) | render() {
FILE: packages/benchmarks/src/cases/SierpinskiTriangle.js
class SierpinskiTriangle (line 11) | class SierpinskiTriangle extends React.Component {
method render (line 21) | render() {
FILE: packages/benchmarks/src/cases/Tree.js
class Tree (line 4) | class Tree extends Component {
method render (line 9) | render() {
FILE: packages/benchmarks/src/implementations/css-modules/View.js
class View (line 5) | class View extends React.Component {
method render (line 6) | render() {
FILE: packages/benchmarks/src/implementations/inline-styles/View.js
class View (line 11) | class View extends React.Component {
method render (line 12) | render() {
FILE: packages/benchmarks/src/implementations/styleq/View.js
function View (line 6) | function View(props) {
FILE: packages/benchmarks/src/implementations/stylesheet/View.js
function View (line 4) | function View(props) {
FILE: packages/dom-event-testing-library/src/createEvent.js
function getEventConfig (line 219) | function getEventConfig(type) {
function createEvent (line 223) | function createEvent(type, init) {
FILE: packages/dom-event-testing-library/src/domEnvironment.js
function hasPointerEvent (line 14) | function hasPointerEvent() {
function setPointerEvent (line 18) | function setPointerEvent(bool) {
method clear (line 42) | clear() {
method get (line 45) | get() {
method set (line 48) | set(name) {
FILE: packages/dom-event-testing-library/src/domEventSequences.js
function createTouch (line 24) | function createTouch(target, payload) {
function createTouchEventPayload (line 56) | function createTouchEventPayload(target, touch, payload) {
function getPointerType (line 79) | function getPointerType(payload) {
function contextmenu (line 108) | function contextmenu(target, defaultPayload = {}) {
function focus (line 179) | function focus(target, defaultPayload = {}) {
function pointercancel (line 194) | function pointercancel(target, defaultPayload) {
function pointerdown (line 217) | function pointerdown(target, defaultPayload) {
function pointerover (line 257) | function pointerover(target, defaultPayload) {
function pointerout (line 276) | function pointerout(target, defaultPayload) {
function pointerhover (line 301) | function pointerhover(target, defaultPayload) {
function pointermove (line 316) | function pointermove(target, defaultPayload) {
function pointerup (line 352) | function pointerup(target, defaultPayload) {
function clearPointers (line 406) | function clearPointers() {
FILE: packages/dom-event-testing-library/src/domEvents.js
function emptyFunction (line 33) | function emptyFunction() {}
function createGetModifierState (line 35) | function createGetModifierState(keyArg, data) {
function createKeyboardEvent (line 54) | function createKeyboardEvent(
function createMouseEvent (line 92) | function createMouseEvent(
function createPointerEvent (line 150) | function createPointerEvent(
function createTouchEvent (line 229) | function createTouchEvent(type, payload) {
function blur (line 243) | function blur({ relatedTarget } = {}) {
function click (line 247) | function click(payload) {
function contextmenu (line 254) | function contextmenu(payload) {
function dragstart (line 261) | function dragstart(payload) {
function error (line 268) | function error() {
function focus (line 272) | function focus({ relatedTarget } = {}) {
function focusin (line 276) | function focusin({ relatedTarget } = {}) {
function focusout (line 280) | function focusout({ relatedTarget } = {}) {
function gotpointercapture (line 284) | function gotpointercapture(payload) {
function keydown (line 288) | function keydown(payload) {
function keyup (line 292) | function keyup(payload) {
function load (line 296) | function load(payload) {
function lostpointercapture (line 300) | function lostpointercapture(payload) {
function mousedown (line 304) | function mousedown(payload) {
function mouseenter (line 322) | function mouseenter(payload) {
function mouseleave (line 326) | function mouseleave(payload) {
function mousemove (line 330) | function mousemove(payload) {
function mouseout (line 339) | function mouseout(payload) {
function mouseover (line 343) | function mouseover(payload) {
function mouseup (line 347) | function mouseup(payload) {
function pointercancel (line 354) | function pointercancel(payload) {
function pointerdown (line 371) | function pointerdown(payload) {
function pointerenter (line 381) | function pointerenter(payload) {
function pointerleave (line 385) | function pointerleave(payload) {
function pointermove (line 389) | function pointermove(payload) {
function pointerout (line 397) | function pointerout(payload) {
function pointerover (line 401) | function pointerover(payload) {
function pointerup (line 405) | function pointerup(payload) {
function scroll (line 414) | function scroll() {
function select (line 418) | function select() {
function selectionchange (line 422) | function selectionchange() {
function touchcancel (line 426) | function touchcancel(payload) {
function touchend (line 430) | function touchend(payload) {
function touchmove (line 434) | function touchmove(payload) {
function touchstart (line 438) | function touchstart(payload) {
function virtualclick (line 442) | function virtualclick(payload) {
FILE: packages/dom-event-testing-library/src/index.js
method blur (line 21) | blur(payload) {
method click (line 24) | click(payload) {
method contextmenu (line 27) | contextmenu(payload) {
method error (line 30) | error() {
method focus (line 33) | focus(payload) {
method keydown (line 36) | keydown(payload) {
method keyup (line 39) | keyup(payload) {
method load (line 42) | load(payload) {
method pointercancel (line 51) | pointercancel(payload) {
method pointerdown (line 55) | pointerdown(payload) {
method pointerhover (line 59) | pointerhover(payload) {
method pointermove (line 63) | pointermove(payload) {
method pointerover (line 67) | pointerover(payload) {
method pointerout (line 71) | pointerout(payload) {
method pointerup (line 75) | pointerup(payload) {
method scroll (line 78) | scroll(payload) {
method select (line 81) | select(payload) {
method selectionchange (line 85) | selectionchange(payload) {
method tap (line 93) | tap(payload) {
method virtualclick (line 97) | virtualclick(payload) {
method setBoundingClientRect (line 103) | setBoundingClientRect({ x, y, width, height }) {
FILE: packages/dom-event-testing-library/src/testHelpers.js
function describeWithPointerEvent (line 12) | function describeWithPointerEvent(message, describeFn) {
function testWithPointerType (line 26) | function testWithPointerType(message, testFn) {
FILE: packages/dom-event-testing-library/src/touchStore.js
function addTouch (line 19) | function addTouch(touch) {
function updateTouch (line 37) | function updateTouch(touch) {
function removeTouch (line 51) | function removeTouch(touch) {
function getTouches (line 67) | function getTouches() {
function getTargetTouches (line 75) | function getTargetTouches(target) {
function clear (line 82) | function clear() {
FILE: packages/react-native-web-docs/.eleventy.js
function markdownitTagToClass (line 21) | function markdownitTagToClass(md, mapping = {}) {
FILE: packages/react-native-web-docs/src/includes/assets/inline.js
function setupNavigationDrawer (line 4) | function setupNavigationDrawer() {
function setupNavigationScroll (line 50) | function setupNavigationScroll() {
FILE: packages/react-native-web-examples/pages/_document.js
class MyDocument (line 4) | class MyDocument extends Document {
method getInitialProps (line 5) | static async getInitialProps(ctx) {
method render (line 14) | render() {
FILE: packages/react-native-web-examples/pages/activity-indicator/index.js
function ActivityIndicatorPage (line 5) | function ActivityIndicatorPage() {
FILE: packages/react-native-web-examples/pages/animated/index.js
function AnimatedPage (line 5) | function AnimatedPage() {
FILE: packages/react-native-web-examples/pages/app-registry/index.js
function App (line 5) | function App() {
function AppStatePage (line 18) | function AppStatePage() {
FILE: packages/react-native-web-examples/pages/app-state/index.js
function AppStatePage (line 5) | function AppStatePage() {
FILE: packages/react-native-web-examples/pages/checkbox/index.js
function Divider (line 5) | function Divider() {
function CheckboxPage (line 9) | function CheckboxPage() {
FILE: packages/react-native-web-examples/pages/clipboard/index.js
function ClipboardPage (line 6) | function ClipboardPage() {
FILE: packages/react-native-web-examples/pages/dimensions/index.js
function DimensionsPage (line 5) | function DimensionsPage() {
FILE: packages/react-native-web-examples/pages/flatlist/index.js
class MyListItem (line 13) | class MyListItem extends React.PureComponent {
method render (line 18) | render() {
class MultiSelectList (line 32) | class MultiSelectList extends React.PureComponent {
method render (line 56) | render() {
function renderExampleItem (line 68) | function renderExampleItem({ item }) {
function FlatListPage (line 98) | function FlatListPage() {
FILE: packages/react-native-web-examples/pages/image-background/index.js
function ImageBackgroundPage (line 8) | function ImageBackgroundPage() {
FILE: packages/react-native-web-examples/pages/image/index.js
function Divider (line 19) | function Divider() {
function ImagePage (line 23) | function ImagePage() {
FILE: packages/react-native-web-examples/pages/index.js
function Link (line 8) | function Link(props) {
function IndexPage (line 16) | function IndexPage() {
FILE: packages/react-native-web-examples/pages/linking/index.js
function LinkingPage (line 7) | function LinkingPage(props) {
FILE: packages/react-native-web-examples/pages/lists/index.js
constant HEADER (line 35) | const HEADER = { height: 30, width: 100 };
constant SEPARATOR_HEIGHT (line 36) | const SEPARATOR_HEIGHT = StyleSheet.hairlineWidth;
constant HORIZ_WIDTH (line 37) | const HORIZ_WIDTH = 200;
constant ITEM_HEIGHT (line 38) | const ITEM_HEIGHT = 72;
constant VIEWABILITY_CONFIG (line 39) | const VIEWABILITY_CONFIG = {
constant THUMB_URLS (line 44) | const THUMB_URLS = [
constant LOREM_IPSUM (line 58) | const LOREM_IPSUM =
function genItemData (line 65) | function genItemData(count: number, start: number = 0): Array<Item> {
method render (line 122) | render() {
method render (line 135) | render() {
method render (line 148) | render() {
method render (line 154) | render() {
method render (line 166) | render() {
method if (line 384) | if (this.state.logViewable) {
FILE: packages/react-native-web-examples/pages/localization/index.js
constant SCALE (line 26) | const SCALE = PixelRatio.get();
constant IMAGE_DIMENSION (line 27) | const IMAGE_DIMENSION = 100 * SCALE;
constant IMAGE_SIZE (line 28) | const IMAGE_SIZE = [IMAGE_DIMENSION, IMAGE_DIMENSION];
function ListItem (line 32) | function ListItem(props) {
function TextAlignmentExample (line 52) | function TextAlignmentExample(props) {
function withRTLState (line 73) | function withRTLState(Component) {
function Block (line 312) | function Block(props) {
class LayoutRTLExample (line 372) | class LayoutRTLExample extends React.Component {
method constructor (line 373) | constructor(props) {
method render (line 385) | render() {
method _onDirectionChange (line 469) | _onDirectionChange() {
function LocalizationPage (line 580) | function LocalizationPage() {
FILE: packages/react-native-web-examples/pages/modal/index.js
function Gap (line 6) | function Gap() {
function AnimatedModal (line 10) | function AnimatedModal({ animationType }) {
function AnimatedModalStack (line 34) | function AnimatedModalStack() {
constant WIGGLE_ROOM (line 46) | const WIGGLE_ROOM = 128;
function Modalception (line 48) | function Modalception({ depth = 1 }) {
function SimpleModal (line 82) | function SimpleModal() {
function TransparentModal (line 99) | function TransparentModal() {
function ModalPage (line 145) | function ModalPage() {
FILE: packages/react-native-web-examples/pages/pan-responder/index.js
constant CIRCLE_SIZE (line 8) | const CIRCLE_SIZE = 80;
class DraggableCircle (line 10) | class DraggableCircle extends React.PureComponent {
method constructor (line 17) | constructor() {
method componentDidMount (line 36) | componentDidMount() {
method render (line 40) | render() {
method _highlight (line 56) | _highlight() {
method _unHighlight (line 61) | _unHighlight() {
method _updateNativeStyles (line 66) | _updateNativeStyles() {
class LocationXY (line 103) | class LocationXY extends React.Component {
method constructor (line 104) | constructor() {
method render (line 123) | render() {
function PanResponderPage (line 166) | function PanResponderPage() {
FILE: packages/react-native-web-examples/pages/pressable/index.js
function PressablePage (line 6) | function PressablePage() {
FILE: packages/react-native-web-examples/pages/progress-bar/index.js
function Divider (line 5) | function Divider() {
function ProgressBarPage (line 9) | function ProgressBarPage() {
FILE: packages/react-native-web-examples/pages/scroll-view/index.js
constant ITEMS (line 6) | const ITEMS = [...Array(12)].map((_, i) => `Item ${i}`);
function createItemRow (line 8) | function createItemRow(msg, index) {
function Divider (line 16) | function Divider() {
function ScrollViewPage (line 20) | function ScrollViewPage() {
FILE: packages/react-native-web-examples/pages/section-list/index.js
function makeItems (line 6) | function makeItems(length) {
function renderItem (line 21) | function renderItem({ item }) {
function renderSectionHeader (line 29) | function renderSectionHeader({ section }) {
function renderSectionFooter (line 41) | function renderSectionFooter({ section }) {
function SectionListPage (line 50) | function SectionListPage() {
FILE: packages/react-native-web-examples/pages/switch/index.js
function Divider (line 5) | function Divider() {
function SwitchPage (line 9) | function SwitchPage() {
FILE: packages/react-native-web-examples/pages/text-input/index.js
function TextInputPage (line 5) | function TextInputPage() {
FILE: packages/react-native-web-examples/pages/text/index.js
function Color (line 15) | function Color() {
function FontFamily (line 25) | function FontFamily() {
function FontSize (line 55) | function FontSize() {
function FontStyle (line 65) | function FontStyle() {
function FontVariant (line 75) | function FontVariant() {
function FontWeight (line 108) | function FontWeight() {
function LetterSpacing (line 131) | function LetterSpacing() {
function LineHeight (line 168) | function LineHeight() {
function TextAlign (line 181) | function TextAlign() {
function TextDecoration (line 212) | function TextDecoration() {
function TextShadow (line 294) | function TextShadow() {
function LineExample (line 310) | function LineExample({ description, children }) {
function TextPage (line 328) | function TextPage() {
FILE: packages/react-native-web-examples/pages/view/index.js
function Box (line 12) | function Box({ pointerEvents }) {
function ViewPage (line 32) | function ViewPage() {
FILE: packages/react-native-web-examples/shared/button.js
function Button (line 3) | function Button(props) {
FILE: packages/react-native-web-examples/shared/example.js
function Example (line 3) | function Example(props) {
FILE: packages/react-native-web/src/exports/AccessibilityInfo/index.js
function isScreenReaderEnabled (line 14) | function isScreenReaderEnabled(): Promise<*> {
function isReduceMotionEnabled (line 25) | function isReduceMotionEnabled(): Promise<*> {
function addChangeListener (line 33) | function addChangeListener(fn) {
function removeChangeListener (line 41) | function removeChangeListener(fn) {
method if (line 77) | if (eventName === 'reduceMotionChanged') {
method if (line 107) | if (eventName === 'reduceMotionChanged') {
FILE: packages/react-native-web/src/exports/Alert/index.js
class Alert (line 10) | class Alert {
method alert (line 11) | static alert() {}
FILE: packages/react-native-web/src/exports/AppRegistry/index.js
method getAppKeys (line 53) | static getAppKeys(): Array<string> {
FILE: packages/react-native-web/src/exports/AppState/index.js
constant EVENT_TYPES (line 23) | const EVENT_TYPES = ['change', 'memoryWarning'];
constant VISIBILITY_CHANGE_EVENT (line 24) | const VISIBILITY_CHANGE_EVENT = isPrefixed
constant VISIBILITY_STATE_PROPERTY (line 27) | const VISIBILITY_STATE_PROPERTY = isPrefixed
class AppState (line 38) | class AppState {
method currentState (line 41) | static get currentState() {
method addEventListener (line 56) | static addEventListener(type: string, handler: Function) {
FILE: packages/react-native-web/src/exports/Appearance/index.js
function getQuery (line 24) | function getQuery(): MediaQueryList | null {
function remove (line 53) | function remove(): void {
FILE: packages/react-native-web/src/exports/BackHandler/index.js
function emptyFunction (line 11) | function emptyFunction() {}
method addEventListener (line 15) | addEventListener(): {| remove: () => void |}
FILE: packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js
function findCheckbox (line 13) | function findCheckbox(container) {
FILE: packages/react-native-web/src/exports/CheckBox/index.js
function handleChange (line 47) | function handleChange(event: Object) {
FILE: packages/react-native-web/src/exports/Clipboard/index.js
class Clipboard (line 15) | class Clipboard {
method isAvailable (line 16) | static isAvailable(): boolean {
method getString (line 25) | static getString(): Promise<string> {
method setString (line 29) | static setString(text: string): boolean {
FILE: packages/react-native-web/src/exports/Dimensions/index.js
function update (line 51) | function update() {
function handleResize (line 96) | function handleResize() {
method get (line 104) | static get(dimension: DimensionKey): DisplayMetrics {
method if (line 114) | if (initialDimensions) {
method if (line 146) | if (Array.isArray(listeners[type])) {
FILE: packages/react-native-web/src/exports/I18nManager/index.js
method allowRTL (line 22) | allowRTL() {
method forceRTL (line 25) | forceRTL() {
FILE: packages/react-native-web/src/exports/Image/index.js
constant ERRORED (line 28) | const ERRORED = 'ERRORED';
constant LOADED (line 29) | const LOADED = 'LOADED';
constant LOADING (line 30) | const LOADING = 'LOADING';
constant IDLE (line 31) | const IDLE = 'IDLE';
function createTintColorSVG (line 36) | function createTintColorSVG(tintColor, id) {
function extractNonStandardStyleProps (line 56) | function extractNonStandardStyleProps(
function resolveAssetDimensions (line 106) | function resolveAssetDimensions(source) {
function handleLayout (line 268) | function handleLayout(e) {
function abortPendingRequest (line 314) | function abortPendingRequest() {
FILE: packages/react-native-web/src/exports/ImageBackground/__tests__/index-test.js
function findImage (line 13) | function findImage(container) {
FILE: packages/react-native-web/src/exports/InteractionManager/__tests__/TaskQueue-test.js
function expectToBeCalledOnce (line 8) | function expectToBeCalledOnce(fn) {
function clearTaskQueue (line 12) | function clearTaskQueue(taskQueue) {
function createSequenceTask (line 25) | function createSequenceTask(expectedSequenceId) {
FILE: packages/react-native-web/src/exports/InteractionManager/__tests__/index-test.js
function expectToBeCalledOnce (line 8) | function expectToBeCalledOnce(fn) {
function createSequenceTask (line 163) | function createSequenceTask(expectedSequenceId) {
FILE: packages/react-native-web/src/exports/InteractionManager/index.js
function _scheduleUpdate (line 100) | function _scheduleUpdate() {
function _processUpdate (line 113) | function _processUpdate() {
FILE: packages/react-native-web/src/exports/Linking/index.js
class Linking (line 18) | class Linking {
method remove (line 50) | remove() {
method if (line 92) | if (arguments.length === 1) {
FILE: packages/react-native-web/src/exports/LogBox/index.js
method ignoreLogs (line 11) | ignoreLogs() {}
method ignoreAllLogs (line 12) | ignoreAllLogs() {}
method uninstall (line 13) | uninstall() {}
method install (line 14) | install() {}
FILE: packages/react-native-web/src/exports/Modal/ModalAnimation.js
constant ANIMATION_DURATION (line 15) | const ANIMATION_DURATION = 250;
function getAnimationStyle (line 17) | function getAnimationStyle(animationType, visible) {
function ModalAnimation (line 35) | function ModalAnimation(props: ModalAnimationProps): React.Node {
FILE: packages/react-native-web/src/exports/Modal/ModalFocusTrap.js
function attemptFocus (line 34) | function attemptFocus(element: any) {
function focusFirstDescendant (line 48) | function focusFirstDescendant(element: any) {
function focusLastDescendant (line 58) | function focusLastDescendant(element: any) {
FILE: packages/react-native-web/src/exports/Modal/ModalPortal.js
function ModalPortal (line 19) | function ModalPortal(props: ModalPortalProps): React.Node {
FILE: packages/react-native-web/src/exports/Modal/__tests__/index-test.js
function TestComponent (line 599) | function TestComponent() {
FILE: packages/react-native-web/src/exports/PanResponder/Alternative.js
method _initializeGestureState (line 122) | _initializeGestureState(gestureState: GestureState) {
FILE: packages/react-native-web/src/exports/Picker/PickerItem.js
function PickerItem (line 22) | function PickerItem(props: Props) {
FILE: packages/react-native-web/src/exports/Picker/__tests__/index-test.js
function findSelect (line 12) | function findSelect(container) {
FILE: packages/react-native-web/src/exports/Picker/index.js
function handleChange (line 57) | function handleChange(e: Object) {
FILE: packages/react-native-web/src/exports/PixelRatio/index.js
class PixelRatio (line 16) | class PixelRatio {
method get (line 20) | static get(): number {
method getFontScale (line 27) | static getFontScale(): number {
method getPixelSizeForLayoutSize (line 35) | static getPixelSizeForLayoutSize(layoutSize: number): number {
method roundToNearestPixel (line 45) | static roundToNearestPixel(layoutSize: number): number {
FILE: packages/react-native-web/src/exports/Platform/index.js
method isTesting (line 14) | get isTesting(): boolean {
method Version (line 20) | get Version(): string {
FILE: packages/react-native-web/src/exports/Pressable/__tests__/index-test.js
function TestCase (line 211) | function TestCase() {
function TestCase (line 254) | function TestCase() {
function TestCase (line 284) | function TestCase() {
FILE: packages/react-native-web/src/exports/Pressable/index.js
function Pressable (line 71) | function Pressable(props: Props, forwardedRef): React.Node {
FILE: packages/react-native-web/src/exports/ScrollView/ScrollViewBase.js
method x (line 36) | get x() {
method y (line 39) | get y() {
method height (line 44) | get height() {
method width (line 47) | get width() {
method height (line 52) | get height() {
method width (line 55) | get width() {
function createPreventableScrollHandler (line 92) | function createPreventableScrollHandler(handler: Function) {
function handleScroll (line 102) | function handleScroll(e: Object) {
function handleScrollStart (line 130) | function handleScrollStart(e: Object) {
function handleScrollTick (line 135) | function handleScrollTick(e: Object) {
function handleScrollEnd (line 142) | function handleScrollEnd(e: Object) {
FILE: packages/react-native-web/src/exports/ScrollView/index.js
method if (line 301) | if (typeof x === 'number') {
method if (line 312) | if (typeof node.scroll === 'function') {
method if (line 453) | if (e) {
FILE: packages/react-native-web/src/exports/Share/index.js
class Share (line 17) | class Share {
method share (line 18) | static share(content: Content, options: Object = {}): Promise<Object> {
method sharedAction (line 52) | static get sharedAction(): string {
method dismissedAction (line 60) | static get dismissedAction(): string {
FILE: packages/react-native-web/src/exports/StatusBar/index.js
function StatusBar (line 12) | function StatusBar(): null {
FILE: packages/react-native-web/src/exports/StyleSheet/compiler/createReactDOMStyle.js
constant MONOSPACE_FONT_STACK (line 35) | const MONOSPACE_FONT_STACK = 'monospace,monospace';
constant SYSTEM_FONT_STACK (line 37) | const SYSTEM_FONT_STACK =
constant STYLE_SHORT_FORM_EXPANSIONS (line 40) | const STYLE_SHORT_FORM_EXPANSIONS = {
FILE: packages/react-native-web/src/exports/StyleSheet/compiler/hash.js
function murmurhash2_32_gc (line 18) | function murmurhash2_32_gc(str, seed) {
FILE: packages/react-native-web/src/exports/StyleSheet/compiler/hyphenateStyleName.js
function toHyphenLower (line 14) | function toHyphenLower(match) {
function hyphenateStyleName (line 18) | function hyphenateStyleName(name: string): string {
FILE: packages/react-native-web/src/exports/StyleSheet/compiler/index.js
constant PROPERTIES_VALUE (line 138) | const PROPERTIES_VALUE = ['clear', 'float', 'textAlign'];
function atomic (line 140) | function atomic(style: Style): CompilerOutput {
function classic (line 238) | function classic(style: Style, name: string): CompilerOutput {
method if (line 285) | if (originalValue === 'start') {
FILE: packages/react-native-web/src/exports/StyleSheet/dom/createCSSStyleSheet.js
method if (line 17) | if (canUseDOM) {
FILE: packages/react-native-web/src/exports/StyleSheet/dom/createOrderedCSSStyleSheet.js
function sheetInsert (line 62) | function sheetInsert(sheet, group, text) {
function encodeGroupRule (line 153) | function encodeGroupRule(group) {
function decodeGroupRule (line 158) | function decodeGroupRule(cssRule) {
function getOrderedGroups (line 162) | function getOrderedGroups(obj: { [key: number]: any }) {
function getSelectorText (line 169) | function getSelectorText(cssText) {
function insertRuleAt (line 174) | function insertRuleAt(root, cssText: string, position: number): boolean {
FILE: packages/react-native-web/src/exports/StyleSheet/dom/index.js
method getTextContent (line 80) | getTextContent() {
FILE: packages/react-native-web/src/exports/StyleSheet/index.js
function customStyleq (line 23) | function customStyleq(styles, options: Options = {}) {
function insertRules (line 40) | function insertRules(compiledOrderedRules) {
function compileAndInsertAtomic (line 50) | function compileAndInsertAtomic(style) {
function compileAndInsertReset (line 58) | function compileAndInsertReset(style, key) {
FILE: packages/react-native-web/src/exports/StyleSheet/validate.js
function error (line 48) | function error(message) {
function validate (line 52) | function validate(obj: Object) {
FILE: packages/react-native-web/src/exports/Switch/__tests__/index-test.js
function findCheckbox (line 12) | function findCheckbox(container) {
function findSwitchTrack (line 16) | function findSwitchTrack(container) {
function findSwitchThumb (line 20) | function findSwitchThumb(container) {
FILE: packages/react-native-web/src/exports/Switch/index.js
function handleChange (line 64) | function handleChange(event: Object) {
function handleFocusState (line 70) | function handleFocusState(event: Object) {
FILE: packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
function findInput (line 13) | function findInput(container) {
function findTextArea (line 17) | function findTextArea(container) {
function createEvent (line 29) | function createEvent(type, data = {}) {
function createKeyboardEvent (line 44) | function createKeyboardEvent(
function keydown (line 69) | function keydown(payload) {
function onSelectionChange (line 572) | function onSelectionChange(e) {
function onSubmitEditing (line 597) | function onSubmitEditing(e) {
FILE: packages/react-native-web/src/exports/TextInput/index.js
function isEventComposing (line 88) | function isEventComposing(nativeEvent) {
function handleBlur (line 257) | function handleBlur(e) {
function handleChange (line 265) | function handleChange(e) {
function handleFocus (line 278) | function handleFocus(e) {
function handleKeyDown (line 305) | function handleKeyDown(e) {
function handleSelectionChange (line 340) | function handleSelectionChange(e) {
FILE: packages/react-native-web/src/exports/Touchable/BoundingDimensions.js
function BoundingDimensions (line 18) | function BoundingDimensions(width: number, height: number) {
FILE: packages/react-native-web/src/exports/Touchable/Position.js
function Position (line 14) | function Position(left, top) {
FILE: packages/react-native-web/src/exports/Touchable/index.js
constant HIGHLIGHT_DELAY_MS (line 296) | const HIGHLIGHT_DELAY_MS = 130;
constant PRESS_EXPAND_PX (line 298) | const PRESS_EXPAND_PX = 20;
constant LONG_PRESS_THRESHOLD (line 300) | const LONG_PRESS_THRESHOLD = 500;
constant LONG_PRESS_DELAY_MS (line 302) | const LONG_PRESS_DELAY_MS = LONG_PRESS_THRESHOLD - HIGHLIGHT_DELAY_MS;
constant LONG_PRESS_ALLOWED_MOVEMENT (line 304) | const LONG_PRESS_ALLOWED_MOVEMENT = 10;
method if (line 882) | if (!newIsHighlight && !curIsHighlight) {
method if (line 924) | if (type === 'keydown') {
method if (line 935) | if (this._isTouchableKeyboardActive) {
FILE: packages/react-native-web/src/exports/TouchableHighlight/index.js
method onPressStart (line 142) | onPressStart(event) {
method onPressEnd (line 148) | onPressEnd(event) {
FILE: packages/react-native-web/src/exports/TouchableOpacity/index.js
method onPressStart (line 97) | onPressStart(event) {
method onPressEnd (line 107) | onPressEnd(event) {
FILE: packages/react-native-web/src/exports/TouchableWithoutFeedback/index.js
function TouchableWithoutFeedback (line 64) | function TouchableWithoutFeedback(props: Props, forwardedRef): React.Node {
FILE: packages/react-native-web/src/exports/UIManager/index.js
method blur (line 56) | blur(node) {
method focus (line 62) | focus(node) {
method measure (line 79) | measure(node, callback) {
method measureInWindow (line 83) | measureInWindow(node, callback) {
method measureLayout (line 92) | measureLayout(node, relativeToNativeNode, onFail, onSuccess) {
method updateView (line 96) | updateView(node, props) {
method configureNextLayoutAnimation (line 124) | configureNextLayoutAnimation(config, onAnimationDidEnd) {
method setLayoutAnimationEnabledExperimental (line 129) | setLayoutAnimationEnabledExperimental() {}
FILE: packages/react-native-web/src/exports/Vibration/index.js
method cancel (line 20) | cancel() {
method vibrate (line 23) | vibrate(pattern: VibratePattern = 400) {
FILE: packages/react-native-web/src/exports/YellowBox/index.js
function YellowBox (line 16) | function YellowBox(props: Object): Node {
FILE: packages/react-native-web/src/exports/createElement/__tests__/index-test.js
function getAttribute (line 12) | function getAttribute(container, attribute) {
function getProperty (line 16) | function getProperty(container, prop) {
FILE: packages/react-native-web/src/exports/render/index.js
function hydrate (line 19) | function hydrate(element, root) {
function render (line 24) | function render(element, root) {
FILE: packages/react-native-web/src/exports/unmountComponentAtNode/index.js
function unmountComponentAtNode (line 10) | function unmountComponentAtNode(rootTag) {
FILE: packages/react-native-web/src/exports/useColorScheme/index.js
function useColorScheme (line 17) | function useColorScheme(): ColorSchemeName {
FILE: packages/react-native-web/src/exports/useWindowDimensions/index.js
function useWindowDimensions (line 18) | function useWindowDimensions(): DisplayMetrics {
FILE: packages/react-native-web/src/modules/AssetRegistry/index.js
function getAssetByID (line 30) | function getAssetByID(assetId: number): PackagerAsset {
FILE: packages/react-native-web/src/modules/ImageLoader/index.js
class ImageUriCache (line 12) | class ImageUriCache {
method has (line 16) | static has(uri: string): boolean {
method add (line 22) | static add(uri: string) {
method remove (line 36) | static remove(uri: string) {
method _cleanUpIfNeeded (line 45) | static _cleanUpIfNeeded() {
method abort (line 77) | abort(requestId: number) {
FILE: packages/react-native-web/src/modules/TextInputState/index.js
method if (line 29) | if (document.activeElement !== this._currentlyFocusedNode) {
FILE: packages/react-native-web/src/modules/UnimplementedView/index.js
function UnimplementedView (line 18) | function UnimplementedView({ style, ...props }: ViewProps): Node {
FILE: packages/react-native-web/src/modules/addEventListener/__tests__/index-test.js
function Component (line 21) | function Component() {
function Component (line 45) | function Component() {
function Component (line 93) | function Component() {
function Component (line 136) | function Component() {
function Component (line 162) | function Component({ target }) {
function Component (line 183) | function Component({ target }) {
function Component (line 204) | function Component() {
function Component (line 234) | function Component() {
function Component (line 290) | function Component() {
function Component (line 338) | function Component() {
function Component (line 369) | function Component() {
FILE: packages/react-native-web/src/modules/addEventListener/__tests__/index-test.node.js
function Component (line 19) | function Component() {
FILE: packages/react-native-web/src/modules/addEventListener/index.js
function supportsPassiveEvents (line 23) | function supportsPassiveEvents(): boolean {
function getOptions (line 45) | function getOptions(options: ?EventOptions): EventOptions | boolean {
function isPropagationStopped (line 57) | function isPropagationStopped() {
function isDefaultPrevented (line 60) | function isDefaultPrevented() {
function normalizeEvent (line 63) | function normalizeEvent(event: any) {
FILE: packages/react-native-web/src/modules/createDOMProps/index.js
function toHyphenLower (line 19) | function toHyphenLower(match) {
function hyphenateString (line 22) | function hyphenateString(str: string): string {
method if (line 45) | if (!props) {
method if (line 815) | if (hasOwnProperty.call(dataSet, dataProp)) {
method if (line 852) | if (focusable === false || accessibilityDisabled === true) {
FILE: packages/react-native-web/src/modules/isSelectionValid/index.js
function isSelectionValid (line 10) | function isSelectionValid(): boolean {
FILE: packages/react-native-web/src/modules/mergeRefs/__tests__/index-test.js
function Component (line 17) | function Component() {
FILE: packages/react-native-web/src/modules/mergeRefs/index.js
method if (line 17) | if (ref == null) {
method ref (line 21) | ref(node);
FILE: packages/react-native-web/src/modules/modality/index.js
constant KEYBOARD (line 25) | const KEYBOARD = 'keyboard';
constant MOUSE (line 26) | const MOUSE = 'mouse';
constant TOUCH (line 27) | const TOUCH = 'touch';
constant BLUR (line 29) | const BLUR = 'blur';
constant CONTEXTMENU (line 30) | const CONTEXTMENU = 'contextmenu';
constant FOCUS (line 31) | const FOCUS = 'focus';
constant KEYDOWN (line 32) | const KEYDOWN = 'keydown';
constant MOUSEDOWN (line 33) | const MOUSEDOWN = 'mousedown';
constant MOUSEMOVE (line 34) | const MOUSEMOVE = 'mousemove';
constant MOUSEUP (line 35) | const MOUSEUP = 'mouseup';
constant POINTERDOWN (line 36) | const POINTERDOWN = 'pointerdown';
constant POINTERMOVE (line 37) | const POINTERMOVE = 'pointermove';
constant SCROLL (line 38) | const SCROLL = 'scroll';
constant SELECTIONCHANGE (line 39) | const SELECTIONCHANGE = 'selectionchange';
constant TOUCHCANCEL (line 40) | const TOUCHCANCEL = 'touchcancel';
constant TOUCHMOVE (line 41) | const TOUCHMOVE = 'touchmove';
constant TOUCHSTART (line 42) | const TOUCHSTART = 'touchstart';
constant VISIBILITYCHANGE (line 43) | const VISIBILITYCHANGE = 'visibilitychange';
function restoreModality (line 48) | function restoreModality() {
function onBlurWindow (line 62) | function onBlurWindow() {
function onFocusWindow (line 72) | function onFocusWindow() {
function onKeyDown (line 76) | function onKeyDown(event) {
function onVisibilityChange (line 87) | function onVisibilityChange() {
function onPointerish (line 93) | function onPointerish(event: any) {
function callListeners (line 187) | function callListeners() {
function getActiveModality (line 194) | function getActiveModality(): Modality {
function getModality (line 198) | function getModality(): Modality {
function testOnly_resetActiveModality (line 211) | function testOnly_resetActiveModality() {
FILE: packages/react-native-web/src/modules/multiplyStyleLengthValue/index.js
constant CSS_UNIT_RE (line 10) | const CSS_UNIT_RE = /^[+-]?\d*(?:\.\d+)?(?:[Ee][+-]?\d+)?(%|\w*)/;
method if (line 19) | if (typeof value === 'string') {
FILE: packages/react-native-web/src/modules/pick/index.js
function pick (line 10) | function pick(obj: Object, list: { [string]: boolean }): Object {
FILE: packages/react-native-web/src/modules/requestIdleCallback/index.js
method timeRemaining (line 16) | timeRemaining() {
FILE: packages/react-native-web/src/modules/setValueForStyles/dangerousStyleValue.js
function dangerousStyleValue (line 24) | function dangerousStyleValue(name, value, isCustomProperty) {
FILE: packages/react-native-web/src/modules/setValueForStyles/index.js
function setValueForStyles (line 22) | function setValueForStyles(node, styles) {
FILE: packages/react-native-web/src/modules/useElementLayout/index.js
constant DOM_LAYOUT_HANDLER_NAME (line 17) | const DOM_LAYOUT_HANDLER_NAME = '__reactLayoutHandler';
function useElementLayout (line 65) | function useElementLayout(
FILE: packages/react-native-web/src/modules/useEvent/__tests__/index-test.js
function Component (line 21) | function Component() {
function Component (line 46) | function Component() {
function Component (line 84) | function Component() {
function Component (line 117) | function Component() {
function Component (line 144) | function Component({ target }) {
function Component (line 166) | function Component({ target }) {
function Component (line 189) | function Component({ onClick }) {
function Component (line 218) | function Component({ off }) {
function Component (line 248) | function Component() {
function Component (line 279) | function Component() {
function Component (line 334) | function Component() {
function Component (line 376) | function Component() {
function Component (line 406) | function Component() {
function Component (line 438) | function Component() {
FILE: packages/react-native-web/src/modules/useLocale/index.js
function getLocaleDirection (line 37) | function getLocaleDirection(locale: Locale): WritingDirection {
function LocaleProvider (line 41) | function LocaleProvider(props: ProviderProps): Node {
function useLocaleContext (line 58) | function useLocaleContext(): LocaleValue {
FILE: packages/react-native-web/src/modules/useLocale/isLocaleRTL.js
function isLocaleRTL (line 54) | function isLocaleRTL(locale: string): boolean {
FILE: packages/react-native-web/src/modules/useMergeRefs/__tests__/index-test.js
function TestComponent (line 13) | function TestComponent({ refs, ...rest }) {
FILE: packages/react-native-web/src/modules/usePressEvents/PressResponder.js
constant DELAY (line 70) | const DELAY = 'DELAY';
constant ERROR (line 71) | const ERROR = 'ERROR';
constant LONG_PRESS_DETECTED (line 72) | const LONG_PRESS_DETECTED = 'LONG_PRESS_DETECTED';
constant NOT_RESPONDER (line 73) | const NOT_RESPONDER = 'NOT_RESPONDER';
constant RESPONDER_ACTIVE_LONG_PRESS_START (line 74) | const RESPONDER_ACTIVE_LONG_PRESS_START = 'RESPONDER_ACTIVE_LONG_PRESS_S...
constant RESPONDER_ACTIVE_PRESS_START (line 75) | const RESPONDER_ACTIVE_PRESS_START = 'RESPONDER_ACTIVE_PRESS_START';
constant RESPONDER_INACTIVE_PRESS_START (line 76) | const RESPONDER_INACTIVE_PRESS_START = 'RESPONDER_INACTIVE_PRESS_START';
constant RESPONDER_GRANT (line 77) | const RESPONDER_GRANT = 'RESPONDER_GRANT';
constant RESPONDER_RELEASE (line 78) | const RESPONDER_RELEASE = 'RESPONDER_RELEASE';
constant RESPONDER_TERMINATED (line 79) | const RESPONDER_TERMINATED = 'RESPONDER_TERMINATED';
constant DEFAULT_LONG_PRESS_DELAY_MS (line 145) | const DEFAULT_LONG_PRESS_DELAY_MS = 450;
constant DEFAULT_PRESS_DELAY_MS (line 146) | const DEFAULT_PRESS_DELAY_MS = 50;
function end (line 563) | function end() {
method if (line 582) | if (
function normalizeDelay (line 612) | function normalizeDelay(delay: ?number, min = 0, fallback = 0): number {
function getTouchFromResponderEvent (line 616) | function getTouchFromResponderEvent(event: ResponderEvent) {
FILE: packages/react-native-web/src/modules/usePressEvents/index.js
function usePressEvents (line 18) | function usePressEvents(
FILE: packages/react-native-web/src/modules/useResponderEvents/ResponderEventTypes.js
constant BLUR (line 44) | const BLUR = 'blur';
constant CONTEXT_MENU (line 45) | const CONTEXT_MENU = 'contextmenu';
constant FOCUS_OUT (line 46) | const FOCUS_OUT = 'focusout';
constant MOUSE_DOWN (line 47) | const MOUSE_DOWN = 'mousedown';
constant MOUSE_MOVE (line 48) | const MOUSE_MOVE = 'mousemove';
constant MOUSE_UP (line 49) | const MOUSE_UP = 'mouseup';
constant MOUSE_CANCEL (line 50) | const MOUSE_CANCEL = 'dragstart';
constant TOUCH_START (line 51) | const TOUCH_START = 'touchstart';
constant TOUCH_MOVE (line 52) | const TOUCH_MOVE = 'touchmove';
constant TOUCH_END (line 53) | const TOUCH_END = 'touchend';
constant TOUCH_CANCEL (line 54) | const TOUCH_CANCEL = 'touchcancel';
constant SCROLL (line 55) | const SCROLL = 'scroll';
constant SELECT (line 56) | const SELECT = 'select';
constant SELECTION_CHANGE (line 57) | const SELECTION_CHANGE = 'selectionchange';
function isStartish (line 59) | function isStartish(eventType: mixed): boolean {
function isMoveish (line 63) | function isMoveish(eventType: mixed): boolean {
function isEndish (line 67) | function isEndish(eventType: mixed): boolean {
function isCancelish (line 73) | function isCancelish(eventType: mixed): boolean {
function isScroll (line 77) | function isScroll(eventType: mixed): boolean {
function isSelectionChange (line 81) | function isSelectionChange(eventType: mixed): boolean {
FILE: packages/react-native-web/src/modules/useResponderEvents/ResponderSystem.js
function changeCurrentResponder (line 237) | function changeCurrentResponder(responder: ResponderInstance) {
function getResponderConfig (line 241) | function getResponderConfig(id: ResponderId): ResponderConfig | Object {
function eventListener (line 256) | function eventListener(domEvent: any) {
function findWantsResponder (line 479) | function findWantsResponder(eventPaths, domEvent, responderEvent) {
function attemptTransfer (line 542) | function attemptTransfer(
function attachListeners (line 629) | function attachListeners() {
function addNode (line 645) | function addNode(id: ResponderId, node: any, config: ResponderConfig) {
function removeNode (line 653) | function removeNode(id: ResponderId) {
function terminateResponder (line 667) | function terminateResponder() {
function getResponderNode (line 686) | function getResponderNode(): any {
FILE: packages/react-native-web/src/modules/useResponderEvents/ResponderTouchHistoryStore.js
constant MAX_TOUCH_BANK (line 40) | const MAX_TOUCH_BANK = 20;
function timestampForTouch (line 42) | function timestampForTouch(touch: Touch): number {
function createTouchRecord (line 52) | function createTouchRecord(touch: Touch): TouchRecord {
function resetTouchRecord (line 67) | function resetTouchRecord(touchRecord: TouchRecord, touch: Touch): void {
function getTouchIdentifier (line 80) | function getTouchIdentifier({ identifier }: Touch): number {
function recordTouchStart (line 97) | function recordTouchStart(touch: Touch, touchHistory): void {
function recordTouchMove (line 108) | function recordTouchMove(touch: Touch, touchHistory): void {
function recordTouchEnd (line 128) | function recordTouchEnd(touch: Touch, touchHistory): void {
function printTouch (line 148) | function printTouch(touch: Touch): string {
function printTouchBank (line 157) | function printTouchBank(touchHistory): string {
class ResponderTouchHistoryStore (line 166) | class ResponderTouchHistoryStore {
method recordTouchTrack (line 177) | recordTouchTrack(topLevelType: string, nativeEvent: TouchEvent): void {
method touchHistory (line 216) | get touchHistory(): TouchHistory {
FILE: packages/react-native-web/src/modules/useResponderEvents/__tests__/index-test.js
method toString (line 1333) | toString() {
function assertAndCleanUp (line 1584) | function assertAndCleanUp() {
method onStartShouldSetResponderCapture (line 1642) | onStartShouldSetResponderCapture() {
method onStartShouldSetResponder (line 1646) | onStartShouldSetResponder() {
method onMoveShouldSetResponderCapture (line 1650) | onMoveShouldSetResponderCapture() {
method onMoveShouldSetResponder (line 1654) | onMoveShouldSetResponder() {
method onResponderGrant (line 1658) | onResponderGrant() {
method onResponderStart (line 1661) | onResponderStart() {
method onResponderMove (line 1664) | onResponderMove() {
method onResponderEnd (line 1667) | onResponderEnd() {
method onResponderRelease (line 1670) | onResponderRelease() {
method onResponderTerminate (line 1673) | onResponderTerminate() {
method onResponderTerminationRequest (line 1676) | onResponderTerminationRequest() {
method onStartShouldSetResponderCapture (line 1682) | onStartShouldSetResponderCapture() {
method onStartShouldSetResponder (line 1686) | onStartShouldSetResponder() {
method onMoveShouldSetResponderCapture (line 1690) | onMoveShouldSetResponderCapture() {
method onMoveShouldSetResponder (line 1694) | onMoveShouldSetResponder() {
method onResponderGrant (line 1698) | onResponderGrant() {
method onResponderStart (line 1701) | onResponderStart() {
method onResponderMove (line 1704) | onResponderMove() {
method onResponderEnd (line 1707) | onResponderEnd() {
method onResponderRelease (line 1710) | onResponderRelease() {
method onResponderTerminate (line 1713) | onResponderTerminate() {
method onResponderTerminationRequest (line 1716) | onResponderTerminationRequest() {
method onStartShouldSetResponderCapture (line 1722) | onStartShouldSetResponderCapture() {
method onStartShouldSetResponder (line 1726) | onStartShouldSetResponder() {
method onMoveShouldSetResponderCapture (line 1730) | onMoveShouldSetResponderCapture() {
method onMoveShouldSetResponder (line 1734) | onMoveShouldSetResponder() {
method onResponderGrant (line 1738) | onResponderGrant() {
method onResponderStart (line 1741) | onResponderStart() {
method onResponderMove (line 1744) | onResponderMove() {
method onResponderEnd (line 1747) | onResponderEnd() {
method onResponderRelease (line 1750) | onResponderRelease() {
method onResponderTerminate (line 1753) | onResponderTerminate() {
method onResponderTerminationRequest (line 1756) | onResponderTerminationRequest() {
method onStartShouldSetResponderCapture (line 1814) | onStartShouldSetResponderCapture() {
method onStartShouldSetResponder (line 1818) | onStartShouldSetResponder() {
method onMoveShouldSetResponderCapture (line 1822) | onMoveShouldSetResponderCapture() {
method onMoveShouldSetResponder (line 1826) | onMoveShouldSetResponder() {
method onResponderGrant (line 1830) | onResponderGrant() {
method onResponderStart (line 1833) | onResponderStart() {
method onResponderMove (line 1836) | onResponderMove() {
method onResponderEnd (line 1839) | onResponderEnd() {
method onResponderRelease (line 1842) | onResponderRelease() {
method onResponderTerminate (line 1845) | onResponderTerminate() {
method onResponderTerminationRequest (line 1848) | onResponderTerminationRequest() {
method onStartShouldSetResponderCapture (line 1854) | onStartShouldSetResponderCapture() {
method onStartShouldSetResponder (line 1858) | onStartShouldSetResponder() {
method onMoveShouldSetResponderCapture (line 1862) | onMoveShouldSetResponderCapture() {
method onMoveShouldSetResponder (line 1866) | onMoveShouldSetResponder() {
method onResponderGrant (line 1870) | onResponderGrant() {
method onResponderStart (line 1873) | onResponderStart() {
method onResponderMove (line 1876) | onResponderMove() {
method onResponderEnd (line 1879) | onResponderEnd() {
method onResponderRelease (line 1882) | onResponderRelease() {
method onResponderTerminate (line 1885) | onResponderTerminate() {
method onResponderTerminationRequest (line 1888) | onResponderTerminationRequest() {
method onStartShouldSetResponderCapture (line 1894) | onStartShouldSetResponderCapture() {
method onStartShouldSetResponder (line 1898) | onStartShouldSetResponder() {
method onMoveShouldSetResponderCapture (line 1902) | onMoveShouldSetResponderCapture() {
method onMoveShouldSetResponder (line 1906) | onMoveShouldSetResponder() {
method onResponderGrant (line 1910) | onResponderGrant() {
method onResponderStart (line 1913) | onResponderStart() {
method onResponderMove (line 1916) | onResponderMove() {
method onResponderEnd (line 1919) | onResponderEnd() {
method onResponderRelease (line 1922) | onResponderRelease() {
method onResponderTerminate (line 1925) | onResponderTerminate() {
method onResponderTerminationRequest (line 1928) | onResponderTerminationRequest() {
method onStartShouldSetResponderCapture (line 2036) | onStartShouldSetResponderCapture() {
method onStartShouldSetResponder (line 2040) | onStartShouldSetResponder() {
method onMoveShouldSetResponderCapture (line 2044) | onMoveShouldSetResponderCapture() {
method onMoveShouldSetResponder (line 2048) | onMoveShouldSetResponder() {
method onStartShouldSetResponderCapture (line 2054) | onStartShouldSetResponderCapture() {
method onStartShouldSetResponder (line 2058) | onStartShouldSetResponder() {
method onMoveShouldSetResponderCapture (line 2062) | onMoveShouldSetResponderCapture() {
method onMoveShouldSetResponder (line 2066) | onMoveShouldSetResponder() {
method onStartShouldSetResponderCapture (line 2072) | onStartShouldSetResponderCapture() {
method onStartShouldSetResponder (line 2076) | onStartShouldSetResponder() {
method onResponderGrant (line 2080) | onResponderGrant() {
method onResponderStart (line 2083) | onResponderStart() {
method onResponderMove (line 2086) | onResponderMove() {
method onResponderEnd (line 2089) | onResponderEnd() {
method onResponderRelease (line 2092) | onResponderRelease() {
method onStartShouldSetResponderCapture (line 2200) | onStartShouldSetResponderCapture() {
method onStartShouldSetResponder (line 2204) | onStartShouldSetResponder() {
method onMoveShouldSetResponderCapture (line 2208) | onMoveShouldSetResponderCapture() {
method onMoveShouldSetResponder (line 2212) | onMoveShouldSetResponder() {
method onStartShouldSetResponderCapture (line 2218) | onStartShouldSetResponderCapture() {
method onStartShouldSetResponder (line 2222) | onStartShouldSetResponder() {
method onMoveShouldSetResponderCapture (line 2226) | onMoveShouldSetResponderCapture() {
method onMoveShouldSetResponder (line 2230) | onMoveShouldSetResponder() {
method onResponderGrant (line 2234) | onResponderGrant() {
method onResponderStart (line 2237) | onResponderStart() {
method onStartShouldSetResponderCapture (line 2242) | onStartShouldSetResponderCapture() {
method onStartShouldSetResponder (line 2246) | onStartShouldSetResponder() {
method onMoveShouldSetResponderCapture (line 2250) | onMoveShouldSetResponderCapture() {
method onMoveShouldSetResponder (line 2254) | onMoveShouldSetResponder() {
method onResponderGrant (line 2258) | onResponderGrant() {
method onResponderStart (line 2261) | onResponderStart() {
method onResponderMove (line 2264) | onResponderMove() {
method onStartShouldSetResponderCapture (line 2269) | onStartShouldSetResponderCapture() {
method onResponderGrant (line 2273) | onResponderGrant() {
method onResponderStart (line 2276) | onResponderStart() {
method onStartShouldSetResponderCapture (line 2370) | onStartShouldSetResponderCapture(e) {
method onStartShouldSetResponder (line 2374) | onStartShouldSetResponder(e) {
method onMoveShouldSetResponderCapture (line 2378) | onMoveShouldSetResponderCapture(e) {
method onMoveShouldSetResponder (line 2382) | onMoveShouldSetResponder(e) {
method onResponderGrant (line 2386) | onResponderGrant(e) {
method onResponderStart (line 2389) | onResponderStart(e) {
method onResponderMove (line 2392) | onResponderMove(e) {
method onStartShouldSetResponderCapture (line 2397) | onStartShouldSetResponderCapture(e) {
method onStartShouldSetResponder (line 2401) | onStartShouldSetResponder(e) {
method onMoveShouldSetResponderCapture (line 2405) | onMoveShouldSetResponderCapture(e) {
method onMoveShouldSetResponder (line 2409) | onMoveShouldSetResponder(e) {
method onResponderGrant (line 2413) | onResponderGrant(e) {
method onResponderStart (line 2416) | onResponderStart(e) {
method onResponderMove (line 2419) | onResponderMove(e) {
method onStartShouldSetResponderCapture (line 2466) | onStartShouldSetResponderCapture() {
method onStartShouldSetResponder (line 2470) | onStartShouldSetResponder() {
method onMoveShouldSetResponderCapture (line 2474) | onMoveShouldSetResponderCapture() {
method onMoveShouldSetResponder (line 2478) | onMoveShouldSetResponder() {
method onStartShouldSetResponderCapture (line 2484) | onStartShouldSetResponderCapture() {
method onStartShouldSetResponder (line 2488) | onStartShouldSetResponder() {
method onMoveShouldSetResponderCapture (line 2492) | onMoveShouldSetResponderCapture() {
method onMoveShouldSetResponder (line 2496) | onMoveShouldSetResponder() {
method onResponderReject (line 2500) | onResponderReject() {
method onStartShouldSetResponderCapture (line 2505) | onStartShouldSetResponderCapture() {
method onStartShouldSetResponder (line 2509) | onStartShouldSetResponder() {
method onResponderGrant (line 2513) | onResponderGrant() {
method onResponderStart (line 2516) | onResponderStart() {
method onResponderMove (line 2519) | onResponderMove() {
method onResponderTerminationRequest (line 2522) | onResponderTerminationRequest() {
method onStartShouldSetResponderCapture (line 2594) | onStartShouldSetResponderCapture() {
method onStartShouldSetResponder (line 2598) | onStartShouldSetResponder() {
method onScrollShouldSetResponderCapture (line 2602) | onScrollShouldSetResponderCapture() {
method onScrollShouldSetResponder (line 2606) | onScrollShouldSetResponder() {
method onStartShouldSetResponderCapture (line 2612) | onStartShouldSetResponderCapture() {
method onStartShouldSetResponder (line 2616) | onStartShouldSetResponder() {
method onScrollShouldSetResponderCapture (line 2620) | onScrollShouldSetResponderCapture() {
method onScrollShouldSetResponder (line 2624) | onScrollShouldSetResponder() {
method onResponderGrant (line 2628) | onResponderGrant() {
method onResponderReject (line 2631) | onResponderReject() {
method onStartShouldSetResponderCapture (line 2636) | onStartShouldSetResponderCapture() {
method onStartShouldSetResponder (line 2640) | onStartShouldSetResponder() {
method onResponderGrant (line 2644) | onResponderGrant() {
method onResponderStart (line 2647) | onResponderStart() {
method onResponderMove (line 2650) | onResponderMove() {
method onResponderTerminate (line 2653) | onResponderTerminate() {
method onResponderTerminationRequest (line 2656) | onResponderTerminationRequest() {
method onStartShouldSetResponderCapture (line 2733) | onStartShouldSetResponderCapture() {
method onStartShouldSetResponder (line 2737) | onStartShouldSetResponder() {
method onStartShouldSetResponderCapture (line 2743) | onStartShouldSetResponderCapture(e) {
method onStartShouldSetResponder (line 2748) | onStartShouldSetResponder() {
method onStartShouldSetResponderCapture (line 2754) | onStartShouldSetResponderCapture() {
method onStartShouldSetResponder (line 2758) | onStartShouldSetResponder() {
FILE: packages/react-native-web/src/modules/useResponderEvents/createResponderEvent.js
function normalizeIdentifier (line 52) | function normalizeIdentifier(identifier) {
function createResponderEvent (line 60) | function createResponderEvent(
FILE: packages/react-native-web/src/modules/useResponderEvents/index.js
function useResponderEvents (line 36) | function useResponderEvents(
FILE: packages/react-native-web/src/modules/useResponderEvents/utils.js
function getEventPath (line 14) | function getEventPath(domEvent: any): Array<any> {
function composedPathFallback (line 30) | function composedPathFallback(target: any): Array<any> {
function setResponderId (line 52) | function setResponderId(node: any, id: number) {
function getResponderPaths (line 61) | function getResponderPaths(domEvent: any): {|
method if (line 121) | if (itemA === itemB) {
method if (line 141) | if (target.contains(node)) {
FILE: packages/react-native-web/src/modules/useStable/index.js
constant UNINITIALIZED (line 12) | const UNINITIALIZED =
FILE: packages/react-native-web/src/modules/warnOnce/index.js
function warnOnce (line 19) | function warnOnce(key: string, message: string) {
FILE: packages/react-native-web/src/vendor/hash/index.js
function murmurhash2_32_gc (line 18) | function murmurhash2_32_gc(str, seed) {
FILE: packages/react-native-web/src/vendor/react-native/Animated/AnimatedEvent.js
function attachNativeEvent (line 28) | function attachNativeEvent(
method detach (line 71) | detach() {
function validateMapping (line 86) | function validateMapping(argMapping, args) {
method if (line 185) | if (this.__isNative) {
FILE: packages/react-native-web/src/vendor/react-native/Animated/AnimatedImplementation.js
method if (line 112) | if (value instanceof AnimatedValueXY) {
method if (line 524) | if (!event) {
method if (line 541) | if (event && event instanceof AnimatedEvent) {
FILE: packages/react-native-web/src/vendor/react-native/Animated/AnimatedMock.js
method if (line 49) | if (inAnimationCallback) {
FILE: packages/react-native-web/src/vendor/react-native/Animated/Easing.js
method step0 (line 66) | static step0(n: number): number {
method step1 (line 73) | static step1(n: number): number {
method linear (line 83) | static linear(t: number): number {
method ease (line 93) | static ease(t: number): number {
method quad (line 106) | static quad(t: number): number {
method cubic (line 116) | static cubic(t: number): number {
method poly (line 126) | static poly(n: number): (t: number) => number {
method sin (line 135) | static sin(t: number): number {
method circle (line 144) | static circle(t: number): number {
method exp (line 153) | static exp(t: number): number {
method elastic (line 167) | static elastic(bounciness: number = 1): (t: number) => number {
method back (line 180) | static back(s: number = 1.70158): (t: number) => number {
method bounce (line 189) | static bounce(t: number): number {
method bezier (line 215) | static bezier(
FILE: packages/react-native-web/src/vendor/react-native/Animated/NativeAnimatedHelper.js
method if (line 101) | if (saveValueCallback) {
method if (line 181) | if (useSingleOpBatching) {
method for (line 478) | for (const key in styles) {
method for (line 490) | for (const key in config) {
method if (line 524) | if (!_warnedMissingNativeAnimated) {
method nativeEventEmitter (line 593) | get nativeEventEmitter(): NativeEventEmitter {
FILE: packages/react-native-web/src/vendor/react-native/Animated/SpringConfig.js
function stiffnessFromOrigamiValue (line 19) | function stiffnessFromOrigamiValue(oValue) {
function dampingFromOrigamiValue (line 23) | function dampingFromOrigamiValue(oValue) {
function fromOrigamiTensionAndFriction (line 27) | function fromOrigamiTensionAndFriction(
function fromBouncinessAndSpeed (line 37) | function fromBouncinessAndSpeed(
FILE: packages/react-native-web/src/vendor/react-native/Animated/animations/Animation.js
class Animation (line 33) | class Animation {
method start (line 39) | start(
method stop (line 46) | stop(): void {
method __getNativeAnimationConfig (line 51) | __getNativeAnimationConfig(): any {
method __debouncedOnEnd (line 57) | __debouncedOnEnd(result: EndResult): void {
method __startNativeAnimation (line 62) | __startNativeAnimation(animatedValue: AnimatedValue): void {
FILE: packages/react-native-web/src/vendor/react-native/Animated/animations/DecayAnimation.js
method constructor (line 48) | constructor(config: DecayAnimationConfigSingle) {
method __getNativeAnimationConfig (line 57) | __getNativeAnimationConfig(): {|
method start (line 71) | start(
method onUpdate (line 91) | onUpdate(): void {
method stop (line 112) | stop(): void {
FILE: packages/react-native-web/src/vendor/react-native/Animated/animations/SpringAnimation.js
method if (line 339) | if (this._startPosition < this._toValue) {
method if (line 353) | if (this._stiffness !== 0) {
FILE: packages/react-native-web/src/vendor/react-native/Animated/bezier.js
constant NEWTON_ITERATIONS (line 20) | const NEWTON_ITERATIONS = 4;
constant NEWTON_MIN_SLOPE (line 21) | const NEWTON_MIN_SLOPE = 0.001;
constant SUBDIVISION_PRECISION (line 22) | const SUBDIVISION_PRECISION = 0.0000001;
constant SUBDIVISION_MAX_ITERATIONS (line 23) | const SUBDIVISION_MAX_ITERATIONS = 10;
function A (line 30) | function A(aA1, aA2) {
function B (line 33) | function B(aA1, aA2) {
function C (line 36) | function C(aA1) {
function calcBezier (line 41) | function calcBezier(aT, aA1, aA2) {
function getSlope (line 46) | function getSlope(aT, aA1, aA2) {
function binarySubdivide (line 50) | function binarySubdivide(aX, _aA, _aB, mX1, mX2) {
function newtonRaphsonIterate (line 71) | function newtonRaphsonIterate(aX, _aGuessT, mX1, mX2) {
function bezier (line 84) | function bezier(
FILE: packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedAddition.js
class AnimatedAddition (line 22) | class AnimatedAddition extends AnimatedWithChildren {
method constructor (line 26) | constructor(a: AnimatedNode | number, b: AnimatedNode | number) {
method __makeNative (line 32) | __makeNative(platformConfig: ?PlatformConfig) {
method __getValue (line 38) | __getValue(): number {
method interpolate (line 42) | interpolate<OutputT: number | string>(
method __attach (line 48) | __attach(): void {
method __detach (line 53) | __detach(): void {
method __getNativeConfig (line 59) | __getNativeConfig(): any {
FILE: packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedColor.js
method if (line 61) | if (color === undefined || color === null) {
FILE: packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedDiffClamp.js
class AnimatedDiffClamp (line 21) | class AnimatedDiffClamp extends AnimatedWithChildren {
method constructor (line 28) | constructor(a: AnimatedNode, min: number, max: number) {
method __makeNative (line 37) | __makeNative(platformConfig: ?PlatformConfig) {
method interpolate (line 42) | interpolate<OutputT: number | string>(
method __getValue (line 48) | __getValue(): number {
method __attach (line 56) | __attach(): void {
method __detach (line 60) | __detach(): void {
method __getNativeConfig (line 65) | __getNativeConfig(): any {
FILE: packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedDivision.js
class AnimatedDivision (line 21) | class AnimatedDivision extends AnimatedWithChildren {
method constructor (line 26) | constructor(a: AnimatedNode | number, b: AnimatedNode | number) {
method __makeNative (line 35) | __makeNative(platformConfig: ?PlatformConfig) {
method __getValue (line 41) | __getValue(): number {
method interpolate (line 57) | interpolate<OutputT: number | string>(
method __attach (line 63) | __attach(): void {
method __detach (line 68) | __detach(): void {
method __getNativeConfig (line 74) | __getNativeConfig(): any {
FILE: packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedInterpolation.js
method if (line 120) | if (extrapolateLeft === 'identity') {
method if (line 276) | if (inputRange[i] >= input) {
FILE: packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedModulo.js
class AnimatedModulo (line 21) | class AnimatedModulo extends AnimatedWithChildren {
method constructor (line 25) | constructor(a: AnimatedNode, modulus: number) {
method __makeNative (line 31) | __makeNative(platformConfig: ?PlatformConfig) {
method __getValue (line 36) | __getValue(): number {
method interpolate (line 42) | interpolate<OutputT: number | string>(
method __attach (line 48) | __attach(): void {
method __detach (line 52) | __detach(): void {
method __getNativeConfig (line 57) | __getNativeConfig(): any {
FILE: packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedMultiplication.js
class AnimatedMultiplication (line 22) | class AnimatedMultiplication extends AnimatedWithChildren {
method constructor (line 26) | constructor(a: AnimatedNode | number, b: AnimatedNode | number) {
method __makeNative (line 32) | __makeNative(platformConfig: ?PlatformConfig) {
method __getValue (line 38) | __getValue(): number {
method interpolate (line 42) | interpolate<OutputT: number | string>(
method __attach (line 47) | __attach(): void {
method __detach (line 52) | __detach(): void {
method __getNativeConfig (line 58) | __getNativeConfig(): any {
FILE: packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedNode.js
class AnimatedNode (line 26) | class AnimatedNode {
method if (line 32) | if (this.__isNative && this.__nativeTag != null) {
FILE: packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedProps.js
class AnimatedProps (line 20) | class AnimatedProps extends AnimatedNode {
method constructor (line 25) | constructor(props: Object, callback: () => void) {
method __getValue (line 37) | __getValue(): Object {
method __getAnimatedValue (line 56) | __getAnimatedValue(): Object {
method __attach (line 67) | __attach(): void {
method __detach (line 76) | __detach(): void {
method update (line 90) | update(): void {
method __makeNative (line 94) | __makeNative(): void {
method setNativeView (line 109) | setNativeView(animatedView: any): void {
method __connectAnimatedView (line 119) | __connectAnimatedView(): void {
method __disconnectAnimatedView (line 132) | __disconnectAnimatedView(): void {
method __restoreDefaultValues (line 145) | __restoreDefaultValues(): void {
method __getNativeConfig (line 155) | __getNativeConfig(): Object {
FILE: packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedStyle.js
function createAnimatedStyle (line 22) | function createAnimatedStyle(inputStyle: any): Object {
class AnimatedStyle (line 40) | class AnimatedStyle extends AnimatedWithChildren {
method constructor (line 44) | constructor(style: any) {
method _walkStyleAndGetValues (line 51) | _walkStyleAndGetValues(style) {
method __getValue (line 71) | __getValue(): Array<Object> {
method _walkStyleAndGetAnimatedValues (line 79) | _walkStyleAndGetAnimatedValues(style) {
method __getAnimatedValue (line 93) | __getAnimatedValue(): Object {
method __attach (line 97) | __attach(): void {
method __detach (line 106) | __detach(): void {
method __makeNative (line 116) | __makeNative() {
method __getNativeConfig (line 126) | __getNativeConfig(): Object {
FILE: packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedSubtraction.js
class AnimatedSubtraction (line 21) | class AnimatedSubtraction extends AnimatedWithChildren {
method constructor (line 25) | constructor(a: AnimatedNode | number, b: AnimatedNode | number) {
method __makeNative (line 31) | __makeNative(platformConfig: ?PlatformConfig) {
method __getValue (line 37) | __getValue(): number {
method interpolate (line 41) | interpolate<OutputT: number | string>(
method __attach (line 47) | __attach(): void {
method __detach (line 52) | __detach(): void {
method __getNativeConfig (line 58) | __getNativeConfig(): any {
FILE: packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedTracking.js
class AnimatedTracking (line 22) | class AnimatedTracking extends AnimatedNode {
method constructor (line 30) | constructor(
method __makeNative (line 47) | __makeNative() {
method __getValue (line 54) | __getValue(): Object {
method __attach (line 58) | __attach(): void {
method __detach (line 70) | __detach(): void {
method update (line 75) | update(): void {
method __getNativeConfig (line 85) | __getNativeConfig(): any {
FILE: packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedValue.js
function _flush (line 51) | function _flush(rootNode: AnimatedValue): void {
function _executeAsAnimatedBatch (line 73) | function _executeAsAnimatedBatch(id: string, operation: () => void) {
method constructor (line 94) | constructor(value: number, config?: ?AnimatedValueConfig) {
method __detach (line 107) | __detach() {
method __getValue (line 117) | __getValue(): number {
method setValue (line 127) | setValue(value: number): void {
method setOffset (line 150) | setOffset(offset: number): void {
method flattenOffset (line 163) | flattenOffset(): void {
method extractOffset (line 177) | extractOffset(): void {
method if (line 197) | if (this.__isNative) {
FILE: packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedWithChildren.js
class AnimatedWithChildren (line 18) | class AnimatedWithChildren extends AnimatedNode {
method constructor (line 21) | constructor() {
method __makeNative (line 26) | __makeNative(platformConfig: ?PlatformConfig) {
method __addChild (line 40) | __addChild(child: AnimatedNode): void {
method __removeChild (line 55) | __removeChild(child: AnimatedNode): void {
method __getChildren (line 73) | __getChildren(): Array<AnimatedNode> {
method __callListeners (line 77) | __callListeners(value: number): void {
FILE: packages/react-native-web/src/vendor/react-native/Animated/useAnimatedProps.js
function useAnimatedPropsLifecycle (line 121) | function useAnimatedPropsLifecycle(node: AnimatedProps): void {
function isFabricInstance (line 168) | function isFabricInstance(instance: any): boolean {
function hasFabricHandle (line 185) | function hasFabricHandle(instance: any): boolean {
FILE: packages/react-native-web/src/vendor/react-native/Batchinator/index.js
class Batchinator (line 37) | class Batchinator {
FILE: packages/react-native-web/src/vendor/react-native/FillRateHelper/index.js
class Info (line 17) | class Info {
constant DEBUG (line 37) | const DEBUG = false;
method if (line 63) | if (_sampleRate === null) {
method push (line 66) | push(callback);
method setSampleRate (line 74) | static setSampleRate(sampleRate: number) {
method setMinSampleCount (line 78) | static setMinSampleCount(minSampleCount: number) {
method activate (line 90) | activate() {
method deactivateAndFlush (line 97) | deactivateAndFlush() {
method number (line 158) | number {
FILE: packages/react-native-web/src/vendor/react-native/FlatList/index.js
function removeClippedSubviewsOrDefault (line 159) | function removeClippedSubviewsOrDefault(removeClippedSubviews: ?boolean) {
function numColumnsOrDefault (line 164) | function numColumnsOrDefault(numColumns: ?number) {
function isArrayLike (line 168) | function isArrayLike(data: mixed): boolean {
method if (line 310) | if (this._listRef) {
method if (line 330) | if (this._listRef) {
method if (line 348) | if (this._listRef) {
method if (line 359) | if (this._listRef) {
method if (line 370) | if (this._listRef) {
method if (line 381) | if (this._listRef) {
method if (line 390) | if (this._listRef) {
method if (line 401) | if (this._listRef) {
method if (line 583) | if (numColumns > 1) {
method if (line 623) | if (cols > 1) {
FILE: packages/react-native-web/src/vendor/react-native/LayoutAnimation/index.js
function configureNext (line 44) | function configureNext(
function create (line 57) | function create(
method checkConfig (line 133) | checkConfig(...args: Array<mixed>) {
FILE: packages/react-native-web/src/vendor/react-native/PanResponder/index.js
method _initializeGestureState (line 280) | _initializeGestureState(gestureState: GestureState) {
method if (line 440) | if (event.nativeEvent.touches.length === 1) {
method if (line 468) | if (!interactionState.handle) {
method if (line 471) | if (interactionState.timeout) {
FILE: packages/react-native-web/src/vendor/react-native/SectionList/index.js
method if (line 190) | if (this._wrapperListRef != null) {
FILE: packages/react-native-web/src/vendor/react-native/Utilities/clamp.js
function clamp (line 13) | function clamp(min: number, value: number, max: number): number {
FILE: packages/react-native-web/src/vendor/react-native/ViewabilityHelper/index.js
method constructor (line 84) | constructor(
method dispose (line 93) | dispose() {
method props (line 149) | props);
method getItemCount (line 209) | getItemCount(props.data);
method if (line 305) | if (!prevItems.has(key)) {
method if (line 310) | if (!nextItems.has(key)) {
FILE: packages/react-native-web/src/vendor/react-native/VirtualizeUtils/index.js
method if (line 187) | if (first <= overscanFirst && last >= overscanLast) {
method if (line 209) | if (firstWillAddMore) {
method if (line 218) | if (lastWillAddMore) {
FILE: packages/react-native-web/src/vendor/react-native/VirtualizedList/ChildListCollection.js
method for (line 46) | for (const list of listSet) {
method if (line 62) | if (fn(list)) {
FILE: packages/react-native-web/src/vendor/react-native/VirtualizedList/StateSafePureComponent.js
method if (line 38) | if (typeof partialState === 'function') {
method get (line 61) | get() {
method set (line 68) | set(newProps: Props) {
method get (line 73) | get() {
method set (line 80) | set(newState: State) {
FILE: packages/react-native-web/src/vendor/react-native/VirtualizedList/VirtualizedListCellRenderer.js
method if (line 134) | if (renderItem && ListItemComponent) {
method if (line 141) | if (ListItemComponent) {
method if (line 155) | if (renderItem) {
FILE: packages/react-native-web/src/vendor/react-native/VirtualizedList/VirtualizedListContext.js
function VirtualizedListContextResetter (line 50) | function VirtualizedListContextResetter({
function VirtualizedListContextProvider (line 65) | function VirtualizedListContextProvider({
function VirtualizedListCellContextProvider (line 100) | function VirtualizedListCellContextProvider({
FILE: packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js
constant ON_EDGE_REACHED_EPSILON (line 56) | const ON_EDGE_REACHED_EPSILON = 0.001;
function initialNumToRenderOrDefault (line 90) | function initialNumToRenderOrDefault(initialNumToRender: ?number) {
function maxToRenderPerBatchOrDefault (line 95) | function maxToRenderPerBatchOrDefault(maxToRenderPerBatch: ?number) {
function onStartReachedThresholdOrDefault (line 100) | function onStartReachedThresholdOrDefault(onStartReachedThreshold: ?numb...
function onEndReachedThresholdOrDefault (line 105) | function onEndReachedThresholdOrDefault(onEndReachedThreshold: ?number) {
function getScrollingThreshold (line 110) | function getScrollingThreshold(threshold: number, visibleLength: number) {
function scrollEventThrottleOrDefault (line 115) | function scrollEventThrottleOrDefault(scrollEventThrottle: ?number) {
function windowSizeOrDefault (line 120) | function windowSizeOrDefault(windowSize: ?number) {
class VirtualizedList (line 166) | class VirtualizedList extends StateSafePureComponent<Props, State> {
method if (line 173) | if (veryLast < 0) {
method if (line 185) | if (this._scrollRef == null) {
method if (line 189) | if (this._scrollRef.scrollTo == null) {
method if (line 290) | if (getItem(data, index) === item) {
method if (line 341) | if (this._scrollRef == null) {
method if (line 354) | if (this._scrollRef && this._scrollRef.getScrollResponder) {
method if (line 360) | if (this._scrollRef && this._scrollRef.getScrollableNode) {
method if (line 370) | if (this._scrollRef && this._scrollRef.getScrollRef) {
method if (line 392) | if (this._isNestedWithSameOrientation()) {
method if (line 992) | if (section.isSpacer) {
method if (line 1342) | if (!this._scrollRef) {
method if (line 1919) | if (getItemLayout) {
method if (line 1938) | if (
FILE: packages/react-native-web/src/vendor/react-native/VirtualizedSectionList/index.js
method scrollToLocation (line 131) | scrollToLocation(params: ScrollToLocationParamsType) {
method Item (line 216) | Item {
FILE: packages/react-native-web/src/vendor/react-native/vendor/emitter/EventEmitter.js
method for (line 104) | for (const registration of [...registrations]) {
method if (line 116) | if (eventType == null) {
Condensed preview — 479 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (1,853K chars).
[
{
"path": ".codesandbox/ci.json",
"chars": 190,
"preview": "{\n \"packages\": [\"packages/react-native-web\", \"packages/babel-plugin-react-native-web\"],\n \"buildCommand\": \"build\",\n \"s"
},
{
"path": ".github/CONTRIBUTING.md",
"chars": 2683,
"preview": "# Contributing\n\n## Reporting Issues and Asking Questions\n\nBefore opening an issue, please search the [issue tracker](htt"
},
{
"path": ".github/ISSUE_TEMPLATE/bug.yml",
"chars": 1657,
"preview": "name: Bug report\ndescription: File a bug report\nlabels: [\"bug\"]\nbody:\n - type: markdown\n attributes:\n value: |\n"
},
{
"path": ".github/ISSUE_TEMPLATE/config.yml",
"chars": 28,
"preview": "blank_issues_enabled: false\n"
},
{
"path": ".github/ISSUE_TEMPLATE/feature.yml",
"chars": 685,
"preview": "name: Feature request\ndescription: If you have a suggestion…\nlabels: [\"enhancement\"]\nbody:\n - type: markdown\n attrib"
},
{
"path": ".github/labels-config.yml",
"chars": 552,
"preview": "# Configuration for Label Actions - https://github.com/marketplace/actions/label-actions\n\n\"needs: issue template\":\n com"
},
{
"path": ".github/workflows/labels.yml",
"chars": 420,
"preview": "name: labels\n\non:\n issues:\n types: [labeled, unlabeled]\n pull_request:\n types: [labeled, unlabeled]\n\npermissions"
},
{
"path": ".github/workflows/performance.yml",
"chars": 424,
"preview": "name: performance\n\non: [pull_request]\n\njobs:\n compressed-size:\n runs-on: ubuntu-latest\n steps:\n - uses: action"
},
{
"path": ".github/workflows/react-integration.yml",
"chars": 489,
"preview": "name: react@next integration\n\non:\n schedule:\n # Run every Monday at 12:00 (see https://crontab.guru)\n - cron: '0 "
},
{
"path": ".github/workflows/tests.yml",
"chars": 924,
"preview": "name: tests\n\non:\n push:\n branches:\n - \"master\"\n pull_request:\n types: [opened, synchronize, reopened]\n\njobs"
},
{
"path": ".gitignore",
"chars": 39,
"preview": ".next\nbuild\ncoverage\ndist\nnode_modules\n"
},
{
"path": ".watchmanconfig",
"chars": 3,
"preview": "{}\n"
},
{
"path": "LICENSE",
"chars": 1070,
"preview": "MIT License\n\nCopyright (c) Nicolas Gallagher.\n\nPermission is hereby granted, free of charge, to any person obtaining a c"
},
{
"path": "README.md",
"chars": 2103,
"preview": "# Development monorepo\n\nThis is the development monorepo for \"React Native for Web\" and related projects.\n\n## Structure\n"
},
{
"path": "configs/.eslintignore",
"chars": 77,
"preview": "coverage\ndist\nflow-typed\nnode_modules\npackages/**/vendor/*\npackages/**/.next\n"
},
{
"path": "configs/.eslintrc",
"chars": 4305,
"preview": "{\n \"settings\": {\n \"react\": {\n \"pragma\": \"React\",\n \"version\": \"18.0\",\n \"flowVersion\": \"0.148.0\" // Flo"
},
{
"path": "configs/.flowconfig",
"chars": 304,
"preview": "[version]\n0.148.0\n\n[ignore]\n<PROJECT_ROOT>/.*/__tests__/.*\n<PROJECT_ROOT>/packages/.*/dist/.*\n<PROJECT_ROOT>/packages/re"
},
{
"path": "configs/.prettierignore",
"chars": 98,
"preview": "../coverage\n../**/dist\n../flow-typed\n../node_modules\n../packages/**/vendor/*\n../packages/**/.next\n"
},
{
"path": "configs/babel.config.js",
"chars": 1461,
"preview": "const createConfig = ({ modules }) => {\n const plugins = [\n '@babel/plugin-transform-flow-strip-types',\n ['@babel"
},
{
"path": "configs/husky/pre-commit",
"chars": 74,
"preview": "#!/usr/bin/env sh\n. \"$(dirname -- \"$0\")/_/husky.sh\"\n\nnpx --no lint-staged\n"
},
{
"path": "configs/jest-setupFiles.dom.js",
"chars": 702,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "configs/jest.config.js",
"chars": 804,
"preview": "'use strict';\n\nconst babelConfig = require('./babel.config.js');\n\nmodule.exports = {\n coveragePathIgnorePatterns: [\n "
},
{
"path": "configs/jest.config.node.js",
"chars": 747,
"preview": "'use strict';\n\nconst babelConfig = require('./babel.config.js');\n\nmodule.exports = {\n coveragePathIgnorePatterns: [\n "
},
{
"path": "flow-typed/npm/create-react-class_v15.x.x.js",
"chars": 221,
"preview": "// flow-typed signature: 59a949eac1b23f4800e93fe3c647f055\n// flow-typed version: c6154227d1/create-react-class_v15.x.x/f"
},
{
"path": "flow-typed/npm/prop-types_v15.x.x.js",
"chars": 1562,
"preview": "// flow-typed signature: c93a723cbeb4d2f95d6a472157f6052f\n// flow-typed version: 61b795e5b6/prop-types_v15.x.x/flow_>=v0"
},
{
"path": "flow-typed/npm/styleq.js",
"chars": 920,
"preview": "type CompiledStyle = {\n $$css: boolean,\n [key: string]: string,\n};\n\ntype InlineStyle = {\n [key: string]: mixed,\n};\n\nt"
},
{
"path": "package.json",
"chars": 3464,
"preview": "{\n \"private\": true,\n \"version\": \"0.0.0\",\n \"name\": \"react-ui-monorepo\",\n \"scripts\": {\n \"clean\": \"del-cli ./package"
},
{
"path": "packages/babel-plugin-react-native-web/LICENSE",
"chars": 1070,
"preview": "MIT License\n\nCopyright (c) Nicolas Gallagher.\n\nPermission is hereby granted, free of charge, to any person obtaining a c"
},
{
"path": "packages/babel-plugin-react-native-web/README.md",
"chars": 1476,
"preview": "# babel-plugin-react-native-web\n\n[![npm version][package-badge]][package-url] [![PRs Welcome](https://img.shields.io/bad"
},
{
"path": "packages/babel-plugin-react-native-web/index.js",
"chars": 35,
"preview": "module.exports = require('./src');\n"
},
{
"path": "packages/babel-plugin-react-native-web/package.json",
"chars": 440,
"preview": "{\n \"publishConfig\": {\n \"registry\": \"https://registry.npmjs.org/\"\n },\n \"name\": \"babel-plugin-react-native-web\",\n \""
},
{
"path": "packages/babel-plugin-react-native-web/src/__tests__/__snapshots__/index-test.js.snap",
"chars": 5274,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Rewrite react-native to react-native-web export from \"react-native\""
},
{
"path": "packages/babel-plugin-react-native-web/src/__tests__/index-test.js",
"chars": 2423,
"preview": "const plugin = require('..');\nconst pluginTester = require('babel-plugin-tester').default;\n\nconst tests = [\n // import "
},
{
"path": "packages/babel-plugin-react-native-web/src/index.js",
"chars": 5003,
"preview": "const moduleMap = require('./moduleMap');\n\nconst isCommonJS = (opts) => opts.commonjs === true;\n\nconst getDistLocation ="
},
{
"path": "packages/babel-plugin-react-native-web/src/moduleMap.js",
"chars": 1404,
"preview": "// THIS FILE IS AUTOMATICALLY GENERATED. DO NOT EDIT.\nmodule.exports = {\n AccessibilityInfo: true,\n ActivityIndicator:"
},
{
"path": "packages/benchmarks/LICENSE",
"chars": 1070,
"preview": "MIT License\n\nCopyright (c) Nicolas Gallagher.\n\nPermission is hereby granted, free of charge, to any person obtaining a c"
},
{
"path": "packages/benchmarks/README.md",
"chars": 2654,
"preview": "# Benchmarks\n\nTry the [benchmarks app](https://necolas.github.io/react-native-web/benchmarks) online.\n\nTo work on the be"
},
{
"path": "packages/benchmarks/index.html",
"chars": 381,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Performance tests</title>\n <meta name=\"viewpo"
},
{
"path": "packages/benchmarks/package.json",
"chars": 779,
"preview": "{\n \"private\": true,\n \"name\": \"benchmarks\",\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"clean\": \"del-cli ./dist\",\n \"bu"
},
{
"path": "packages/benchmarks/src/app/App.js",
"chars": 8866,
"preview": "import Benchmark from './Benchmark';\nimport { Picker, StyleSheet, ScrollView, Pressable, View } from 'react-native';\nimp"
},
{
"path": "packages/benchmarks/src/app/Benchmark/index.js",
"chars": 7281,
"preview": "/**\n * The MIT License (MIT)\n * Copyright (c) 2017 Paul Armstrong\n * https://github.com/paularmstrong/react-component-be"
},
{
"path": "packages/benchmarks/src/app/Benchmark/math.js",
"chars": 737,
"preview": "// @flow\ntype ValuesType = Array<number>;\n\nexport const getStdDev = (values: ValuesType): number => {\n const avg = getM"
},
{
"path": "packages/benchmarks/src/app/Benchmark/timing.js",
"chars": 221,
"preview": "// @flow\n\n// Returns a high resolution time (if possible) in milliseconds\nexport function now(): number {\n if (window &"
},
{
"path": "packages/benchmarks/src/app/Benchmark/types.js",
"chars": 557,
"preview": "/**\n * @flow\n */\nexport type BenchResultsType = {\n startTime: number,\n endTime: number,\n runTime: number,\n sampleCou"
},
{
"path": "packages/benchmarks/src/app/Button.js",
"chars": 1284,
"preview": "import { StyleSheet, TouchableHighlight, Text } from 'react-native';\nimport React, { Component } from 'react';\n\nexport d"
},
{
"path": "packages/benchmarks/src/app/Icons.js",
"chars": 2450,
"preview": "import React, { Fragment } from 'react';\nimport {\n unstable_createElement as createElement,\n StyleSheet\n} from 'react-"
},
{
"path": "packages/benchmarks/src/app/Layout.js",
"chars": 1495,
"preview": "import { colors } from './theme';\nimport React, { Component } from 'react';\nimport { StyleSheet, View } from 'react-nati"
},
{
"path": "packages/benchmarks/src/app/ReportCard.js",
"chars": 1916,
"preview": "/* @noflow */\n\nimport Text from './Text';\nimport { StyleSheet, View } from 'react-native';\nimport React, { Fragment } fr"
},
{
"path": "packages/benchmarks/src/app/Text.js",
"chars": 648,
"preview": "import React from 'react';\nimport { StyleSheet, Text } from 'react-native';\nimport { bool } from 'prop-types';\nimport { "
},
{
"path": "packages/benchmarks/src/app/theme.js",
"chars": 2856,
"preview": "import { Dimensions, Platform } from 'react-native';\n\nconst baseFontSize = 14;\nconst baseUnit = 1.3125;\nconst canUseDOM "
},
{
"path": "packages/benchmarks/src/cases/SierpinskiTriangle.js",
"chars": 2066,
"preview": "import { BenchmarkType } from '../app/Benchmark';\nimport React from 'react';\nimport {\n interpolatePurples,\n interpolat"
},
{
"path": "packages/benchmarks/src/cases/Tree.js",
"chars": 917,
"preview": "import { BenchmarkType } from '../app/Benchmark';\nimport React, { Component } from 'react';\n\nclass Tree extends Componen"
},
{
"path": "packages/benchmarks/src/impl.js",
"chars": 919,
"preview": "/* @noflow */\n\nimport { type Component } from 'react';\nimport packageJson from '../package.json';\n\nconst context = requi"
},
{
"path": "packages/benchmarks/src/implementations/css-modules/Box.js",
"chars": 437,
"preview": "import classnames from 'classnames';\nimport React from 'react';\nimport View from './View';\nimport styles from './box-sty"
},
{
"path": "packages/benchmarks/src/implementations/css-modules/Dot.js",
"chars": 434,
"preview": "import React from 'react';\nimport styles from './dot-styles.css';\n\nconst Dot = ({ size, x, y, children, color }) => (\n "
},
{
"path": "packages/benchmarks/src/implementations/css-modules/Provider.js",
"chars": 48,
"preview": "import View from './View';\nexport default View;\n"
},
{
"path": "packages/benchmarks/src/implementations/css-modules/View.js",
"chars": 314,
"preview": "import classnames from 'classnames';\nimport React from 'react';\nimport styles from './view-styles.css';\n\nclass View exte"
},
{
"path": "packages/benchmarks/src/implementations/css-modules/box-styles.css",
"chars": 379,
"preview": ".outer {\n align-self: flex-start;\n padding: 4px;\n}\n\n.row {\n flex-direction: row;\n}\n\n.color0 {\n background-color: #14"
},
{
"path": "packages/benchmarks/src/implementations/css-modules/dot-styles.css",
"chars": 185,
"preview": ".root {\n position: absolute;\n cursor: pointer;\n width: 0;\n height: 0;\n border-color: transparent;\n border-style: s"
},
{
"path": "packages/benchmarks/src/implementations/css-modules/index.js",
"chars": 166,
"preview": "import Box from './Box';\nimport Dot from './Dot';\nimport Provider from './Provider';\nimport View from './View';\n\nexport "
},
{
"path": "packages/benchmarks/src/implementations/css-modules/view-styles.css",
"chars": 335,
"preview": ".initial {\n align-items: stretch;\n background-color: transparent;\n border-width: 0;\n border-style: solid;\n box-sizi"
},
{
"path": "packages/benchmarks/src/implementations/inline-styles/Box.js",
"chars": 820,
"preview": "import React from 'react';\nimport View from './View';\n\nconst Box = ({\n color,\n fixed = false,\n layout = 'column',\n o"
},
{
"path": "packages/benchmarks/src/implementations/inline-styles/Dot.js",
"chars": 630,
"preview": "import React from 'react';\n\nconst Dot = ({ size, x, y, children, color }) => (\n <div\n style={Object.assign({}, style"
},
{
"path": "packages/benchmarks/src/implementations/inline-styles/Provider.js",
"chars": 48,
"preview": "import View from './View';\nexport default View;\n"
},
{
"path": "packages/benchmarks/src/implementations/inline-styles/View.js",
"chars": 668,
"preview": "import React from 'react';\n\nconst compose = (s1, s2) => {\n if (s1 && s2) {\n return { ...s1, ...s2 };\n } else {\n "
},
{
"path": "packages/benchmarks/src/implementations/inline-styles/index.js",
"chars": 166,
"preview": "import Box from './Box';\nimport Dot from './Dot';\nimport Provider from './Provider';\nimport View from './View';\n\nexport "
},
{
"path": "packages/benchmarks/src/implementations/react-native-web/Box.js",
"chars": 843,
"preview": "import React from 'react';\nimport { StyleSheet, View } from 'react-native';\n\nconst Box = ({\n color,\n fixed = false,\n "
},
{
"path": "packages/benchmarks/src/implementations/react-native-web/Dot.js",
"chars": 719,
"preview": "import {\n unstable_createElement as createElement,\n StyleSheet\n} from 'react-native';\n\nconst Dot = ({ size, x, y, chil"
},
{
"path": "packages/benchmarks/src/implementations/react-native-web/Provider.js",
"chars": 58,
"preview": "import { View } from 'react-native';\nexport default View;\n"
},
{
"path": "packages/benchmarks/src/implementations/react-native-web/index.js",
"chars": 176,
"preview": "import Box from './Box';\nimport Dot from './Dot';\nimport Provider from './Provider';\nimport { View } from 'react-native'"
},
{
"path": "packages/benchmarks/src/implementations/styleq/Box.js",
"chars": 996,
"preview": "import React from 'react';\nimport View from './View';\n\nconst Box = ({\n color,\n fixed = false,\n layout = 'column',\n o"
},
{
"path": "packages/benchmarks/src/implementations/styleq/Dot.js",
"chars": 555,
"preview": "import React from 'react';\nimport { styleq } from 'styleq';\n\nconst Dot = ({ size, x, y, children, color }) => {\n const "
},
{
"path": "packages/benchmarks/src/implementations/styleq/Provider.js",
"chars": 48,
"preview": "import View from './View';\nexport default View;\n"
},
{
"path": "packages/benchmarks/src/implementations/styleq/View.js",
"chars": 380,
"preview": "import React from 'react';\nimport { styleq } from 'styleq';\n\nconst q = styleq.factory({ disableCache: false });\n\nfunctio"
},
{
"path": "packages/benchmarks/src/implementations/styleq/index.js",
"chars": 166,
"preview": "import Box from './Box';\nimport Dot from './Dot';\nimport Provider from './Provider';\nimport View from './View';\n\nexport "
},
{
"path": "packages/benchmarks/src/implementations/stylesheet/Box.js",
"chars": 868,
"preview": "import React from 'react';\nimport View from './View';\nimport { StyleSheet } from 'react-native-web';\n\nconst Box = ({\n c"
},
{
"path": "packages/benchmarks/src/implementations/stylesheet/Dot.js",
"chars": 758,
"preview": "import React from 'react';\nimport { StyleSheet } from 'react-native-web';\n\nconst Dot = ({ size, x, y, children, color })"
},
{
"path": "packages/benchmarks/src/implementations/stylesheet/Provider.js",
"chars": 48,
"preview": "import View from './View';\nexport default View;\n"
},
{
"path": "packages/benchmarks/src/implementations/stylesheet/View.js",
"chars": 672,
"preview": "import React from 'react';\nimport { StyleSheet } from 'react-native-web';\n\nfunction View(props) {\n const [className, in"
},
{
"path": "packages/benchmarks/src/implementations/stylesheet/index.js",
"chars": 166,
"preview": "import Box from './Box';\nimport Dot from './Dot';\nimport Provider from './Provider';\nimport View from './View';\n\nexport "
},
{
"path": "packages/benchmarks/src/index.js",
"chars": 1824,
"preview": "import App from './app/App';\nimport impl from './impl';\nimport Tree from './cases/Tree';\nimport SierpinskiTriangle from "
},
{
"path": "packages/benchmarks/webpack.config.js",
"chars": 1221,
"preview": "const BundleAnalyzerPlugin =\n require('webpack-bundle-analyzer').BundleAnalyzerPlugin;\nconst path = require('path');\n\nc"
},
{
"path": "packages/dom-event-testing-library/LICENSE",
"chars": 1070,
"preview": "MIT License\n\nCopyright (c) Nicolas Gallagher.\n\nPermission is hereby granted, free of charge, to any person obtaining a c"
},
{
"path": "packages/dom-event-testing-library/README.md",
"chars": 5472,
"preview": "# `dom-event-testing-library`\n\nA library for unit testing high-level interactions via simple pointer events, e.g., `poin"
},
{
"path": "packages/dom-event-testing-library/index.js",
"chars": 29,
"preview": "export * from './src/index';\n"
},
{
"path": "packages/dom-event-testing-library/package.json",
"chars": 325,
"preview": "{\n \"private\": true,\n \"name\": \"dom-event-testing-library\",\n \"version\": \"0.0.0\",\n \"main\": \"index.js\",\n \"description\":"
},
{
"path": "packages/dom-event-testing-library/src/__tests__/__snapshots__/index-test.js.snap",
"chars": 710,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`describeWithPointerEvent: MouseEvent/TouchEvent provides boolean to"
},
{
"path": "packages/dom-event-testing-library/src/__tests__/index-test.js",
"chars": 10110,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/dom-event-testing-library/src/constants.js",
"chars": 1343,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/dom-event-testing-library/src/createEvent.js",
"chars": 7693,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/dom-event-testing-library/src/domEnvironment.js",
"chars": 1486,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/dom-event-testing-library/src/domEventSequences.js",
"chars": 11540,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/dom-event-testing-library/src/domEvents.js",
"chars": 9459,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/dom-event-testing-library/src/index.js",
"chars": 3370,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/dom-event-testing-library/src/testHelpers.js",
"chars": 899,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/dom-event-testing-library/src/touchStore.js",
"chars": 2119,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/LICENSE",
"chars": 1121,
"preview": "MIT License\n\nCopyright (c) Nicolas Gallagher.\nCopyright (c) Meta Platforms, Inc. and affiliates.\n\nPermission is hereby g"
},
{
"path": "packages/react-native-web/README.md",
"chars": 3421,
"preview": "# React Native for Web\n\n[![npm version][package-badge]][package-url] [![Build Status][ci-badge]][ci-url] [![PRs Welcome]"
},
{
"path": "packages/react-native-web/package.json",
"chars": 1466,
"preview": "{\n \"publishConfig\": {\n \"registry\": \"https://registry.npmjs.org/\"\n },\n \"name\": \"react-native-web\",\n \"version\": \"0."
},
{
"path": "packages/react-native-web/src/exports/AccessibilityInfo/index.js",
"chars": 3014,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "packages/react-native-web/src/exports/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap",
"chars": 11362,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`components/ActivityIndicator prop \"accessibilityLabel\" value is set"
},
{
"path": "packages/react-native-web/src/exports/ActivityIndicator/__tests__/index-test.js",
"chars": 4345,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/ActivityIndicator/index.js",
"chars": 2519,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/Alert/index.js",
"chars": 245,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/Animated/__tests__/index-test.js",
"chars": 13320,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "packages/react-native-web/src/exports/Animated/index.js",
"chars": 294,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/AppRegistry/AppContainer.js",
"chars": 1309,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap",
"chars": 3337,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`AppRegistry runApplication styles roots in different documents 1`] "
},
{
"path": "packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js",
"chars": 3132,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.node.js",
"chars": 11753,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/AppRegistry/index.js",
"chars": 4716,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/AppRegistry/renderApplication.js",
"chars": 1871,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/AppState/__tests__/index-test.js",
"chars": 758,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/AppState/index.js",
"chars": 2021,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/Appearance/index.js",
"chars": 1667,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/BackHandler/index.js",
"chars": 582,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/Button/index.js",
"chars": 1845,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/CheckBox/__tests__/__snapshots__/index-test.js.snap",
"chars": 4942,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`CheckBox prop \"accessibilityLabel\" value is set 1`] = `\n<div\n aria"
},
{
"path": "packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js",
"chars": 5146,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/CheckBox/index.js",
"chars": 4033,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/Clipboard/index.js",
"chars": 1548,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/DeviceEventEmitter/index.js",
"chars": 136,
"preview": "import RCTDeviceEventEmitter from '../../vendor/react-native/EventEmitter/RCTDeviceEventEmitter';\nexport default RCTDevi"
},
{
"path": "packages/react-native-web/src/exports/Dimensions/__tests__/index-test.js",
"chars": 1540,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/Dimensions/index.js",
"chars": 3899,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/Easing/index.js",
"chars": 273,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/FlatList/index.js",
"chars": 339,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/I18nManager/index.js",
"chars": 625,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap",
"chars": 16158,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`components/Image prop \"aria-label\" 1`] = `\n<div\n aria-label=\"acces"
},
{
"path": "packages/react-native-web/src/exports/Image/__tests__/index-test.js",
"chars": 12543,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/Image/index.js",
"chars": 11435,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/Image/types.js",
"chars": 3333,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/ImageBackground/__tests__/index-test.js",
"chars": 1447,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/ImageBackground/index.js",
"chars": 1998,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "packages/react-native-web/src/exports/InputAccessoryView/index.js",
"chars": 99,
"preview": "import UnimplementedView from '../../modules/UnimplementedView';\nexport default UnimplementedView;\n"
},
{
"path": "packages/react-native-web/src/exports/InteractionManager/TaskQueue.js",
"chars": 2949,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/InteractionManager/__tests__/TaskQueue-test.js",
"chars": 5113,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/InteractionManager/__tests__/index-test.js",
"chars": 9474,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/InteractionManager/index.js",
"chars": 3879,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/Keyboard/index.js",
"chars": 639,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/KeyboardAvoidingView/index.js",
"chars": 1489,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/LayoutAnimation/index.js",
"chars": 345,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/Linking/__tests__/index-test.js",
"chars": 1276,
"preview": "/* eslint-env jasmine, jest */\n\nimport Linking from '..';\n\ndescribe('apis/Linking', () => {\n describe('openURL', () => "
},
{
"path": "packages/react-native-web/src/exports/Linking/index.js",
"chars": 3537,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/LogBox/index.js",
"chars": 318,
"preview": "/**\n * Copyright (c) 2016-present, Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in "
},
{
"path": "packages/react-native-web/src/exports/Modal/ModalAnimation.js",
"chars": 3942,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/Modal/ModalContent.js",
"chars": 1985,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/Modal/ModalFocusTrap.js",
"chars": 4909,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/Modal/ModalPortal.js",
"chars": 1152,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/Modal/__tests__/__snapshots__/index-test.js.snap",
"chars": 418,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`components/Modal forwards props 1`] = `\n<div\n aria-label=\"label\"\n "
},
{
"path": "packages/react-native-web/src/exports/Modal/__tests__/index-test.js",
"chars": 19510,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/Modal/index.js",
"chars": 3743,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/NativeEventEmitter/index.js",
"chars": 331,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "packages/react-native-web/src/exports/NativeModules/index.js",
"chars": 319,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/PanResponder/Alternative.js",
"chars": 15542,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "packages/react-native-web/src/exports/PanResponder/index.js",
"chars": 113,
"preview": "// @flow strict\n\nimport PanResponder from '../../vendor/react-native/PanResponder';\nexport default PanResponder;\n"
},
{
"path": "packages/react-native-web/src/exports/Picker/PickerItem.js",
"chars": 646,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/Picker/__tests__/__snapshots__/index-test.js.snap",
"chars": 269,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`components/Picker prop \"children\" items 1`] = `\n<option\n value=\"va"
},
{
"path": "packages/react-native-web/src/exports/Picker/__tests__/index-test.js",
"chars": 2867,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/Picker/index.js",
"chars": 2119,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/PixelRatio/index.js",
"chars": 1316,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/Platform/__tests__/index-test.js",
"chars": 1083,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/Platform/index.js",
"chars": 543,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/Pressable/__tests__/__snapshots__/index-test.js.snap",
"chars": 4521,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`components/Pressable default 1`] = `\n<div\n class=\"css-view-g5y9jx "
},
{
"path": "packages/react-native-web/src/exports/Pressable/__tests__/index-test.js",
"chars": 9857,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/Pressable/index.js",
"chars": 6443,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "packages/react-native-web/src/exports/ProgressBar/__tests__/index-test.js",
"chars": 830,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/ProgressBar/index.js",
"chars": 1979,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/RefreshControl/index.js",
"chars": 1096,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/SafeAreaView/index.js",
"chars": 1271,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/ScrollView/ScrollViewBase.js",
"chars": 4593,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/ScrollView/__tests__/__snapshots__/index-test.js.snap",
"chars": 1544,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`components/ScrollView prop \"centerContent\" with 1`] = `\n<div\n clas"
},
{
"path": "packages/react-native-web/src/exports/ScrollView/__tests__/index-test.js",
"chars": 4119,
"preview": "import React from 'react';\nimport ScrollView from '../';\nimport { createEventTarget } from 'dom-event-testing-library';\n"
},
{
"path": "packages/react-native-web/src/exports/ScrollView/index.js",
"chars": 27010,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/SectionList/index.js",
"chars": 312,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "packages/react-native-web/src/exports/Share/index.js",
"chars": 1617,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/StatusBar/index.js",
"chars": 519,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-createReactDOMStyle-test.js",
"chars": 5108,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-test.js",
"chars": 15036,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/StyleSheet/__tests__/dom-createOrderedCSSStyleSheet-test.js",
"chars": 4871,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/StyleSheet/__tests__/dom-test.js",
"chars": 2536,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/StyleSheet/__tests__/dom-test.node.js",
"chars": 1517,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/StyleSheet/__tests__/index-test.js",
"chars": 11019,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/StyleSheet/__tests__/preprocess-test.js",
"chars": 9593,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/StyleSheet/__tests__/validate-test.js",
"chars": 1160,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/StyleSheet/compiler/createReactDOMStyle.js",
"chars": 7064,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/StyleSheet/compiler/hash.js",
"chars": 1595,
"preview": "/* eslint-disable */\n\n/**\n * JS Implementation of MurmurHash2\n *\n * @author <a href=\"mailto:gary.court@gmail.com\">Gary C"
},
{
"path": "packages/react-native-web/src/exports/StyleSheet/compiler/hyphenateStyleName.js",
"chars": 619,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/StyleSheet/compiler/index.js",
"chars": 16175,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/StyleSheet/compiler/normalizeColor.js",
"chars": 849,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/StyleSheet/compiler/normalizeValueWithProperty.js",
"chars": 938,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/StyleSheet/compiler/resolveShadowValue.js",
"chars": 1002,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/StyleSheet/compiler/unitlessNumbers.js",
"chars": 1725,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is "
},
{
"path": "packages/react-native-web/src/exports/StyleSheet/dom/createCSSStyleSheet.js",
"chars": 1193,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/StyleSheet/dom/createOrderedCSSStyleSheet.js",
"chars": 5851,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/StyleSheet/dom/index.js",
"chars": 2719,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/StyleSheet/index.js",
"chars": 5231,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/StyleSheet/preprocess.js",
"chars": 8014,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/StyleSheet/validate.js",
"chars": 2266,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
},
{
"path": "packages/react-native-web/src/exports/Switch/__tests__/__snapshots__/index-test.js.snap",
"chars": 3045,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`components/Switch disabled when \"true\" and value=\"false\", a disable"
},
{
"path": "packages/react-native-web/src/exports/Switch/__tests__/index-test.js",
"chars": 4359,
"preview": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE"
}
]
// ... and 279 more files (download for full content)
About this extraction
This page contains the full source code of the necolas/react-native-web GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 479 files (1.7 MB), approximately 454.1k tokens, and a symbol index with 956 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.