Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

0.19 dev #2377

Merged
merged 27 commits into from
Mar 27, 2023
Merged

0.19 dev #2377

merged 27 commits into from
Mar 27, 2023

Conversation

necolas
Copy link
Owner

@necolas necolas commented Aug 24, 2022

Canary: npm install react-native-web@0.0.0-47671ca4

Best compatibility: react-native@>=0.71

React 18 support

  • [change] React 18 createRoot support.
  • [change] Update Animated to support React 18, including new AnimatedColor node.
  • [change] Update ScrollView to Class component for React 18 support.

New features

  • [add] Map 'button' and 'paragraph' role to equivalent semantic HTML elements.
  • [add] Add support for aria-* props.
  • [add] Add support for role prop.
  • [add] Add support for id prop.
  • [add] Add support for tabIndex prop (only values 0 and -1).
  • [add] Support for PointerEvent props.
  • [add] Add support for pointerEvents style.
  • [add] Add support for userSelect style.
  • [add] Add polyfilled support for W3C logical styles (e.g., insetInline.)
  • [add] Add <Image> support for tintColor prop.
  • [add] Add <TextInput> support for enterKeyHint prop.
  • [add] Add <TextInput> support for inputMode prop.
  • [add] Add <TextInput> support for readOnly prop.
  • [add] Add <TextInput> support for rows prop.

Deprecations

  • [change] Deprecate Touchable* components. Use Pressable.
  • [change] Deprecate Button component. Use Pressable.
  • [change] Deprecate StyleSheet.compose(). Use style array syntax.
  • [change] Deprecate accessibility* props. Use aria-* and role props.
  • [change] Deprecate nativeId prop. Use id prop.
  • [change] Deprecate focusable props. Use tabIndex prop.
  • [change] Deprecate pointerEvents prop. Use pointerEvents style.
  • [change] Deprecate selectable prop. Use userSelect style.
  • [change] Deprecate fontVariant style array values. Use space-separated string values.
  • [change] Deprecate textAlignVertical style. Use verticalAlign style.
  • [change] Deprecate transform style array values. Use space-separated string functions.
  • [change] Deprecate non-standard logical styles, e.g., 'marginStart'.
  • [change] Deprecate <Image> style resizeMode. Use resizeMode prop.
  • [change] Deprecate <Image> style tintColor. Use tintColor prop.
  • [change] Deprecate <TextInput> prop keyboardType. Use inputMode prop.
  • [change] Deprecate <TextInput> prop returnKeyType. Use enterKeyHint prop.
  • [change] Deprecate <TextInput> prop editable. Use readOnly prop.
  • [change] Deprecate <TextInput> prop numberOfLines. Use rows prop.

Breaking changes

  • [change] Remove previously deprecated Android/iOS platform-specific exports.
  • [change] Remove previously deprecated setNativeProps API.
  • [change] Remove previously deprecated AppState.removeListener API.
  • [change] Text is position relative by default
  • [change] Add task queue for InteractionManager

Fixes

  • [fix] Animated now works with compiled styles.
  • [fix] Text inheritance of textAlign.

Todo:

@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 24, 2022

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit f156ed4:

Sandbox Source
react-native-web-examples Configuration

@github-actions
Copy link

github-actions bot commented Aug 24, 2022

Size change: +4.06 kB
Total size: 118.71 kB

Filename: gzip (minify) kB size kB change % change
./packages/react-native-web/dist/exports/AppRegistry/AppContainer.js 0.32 (0.63) +0.03 (+0.07) +10.3% (+13.3%) 🔴
./packages/react-native-web/dist/exports/AppRegistry/index.js 0.81 (2.20) +0.02 (+0.03) +2.0% (+1.5%) 🟡
./packages/react-native-web/dist/exports/AppRegistry/renderApplication.js 0.46 (0.92) +0.04 (+0.11) +9.9% (+13.3%) 🔴
./packages/react-native-web/dist/exports/AppState/index.js 0.58 (1.23) -0.13 (-0.38) -17.6% (-23.6%) 🟢
./packages/react-native-web/dist/exports/BackHandler/index.js 0.00 (0.00) -0.13 (-0.17) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/exports/Button/index.js 0.50 (0.96) +0.05 (+0.11) +10.4% (+13.0%) 🔴
./packages/react-native-web/dist/exports/DeviceEventEmitter/index.js 0.10 (0.13) -0.00 (-0.01) -3.0% (-4.3%)
./packages/react-native-web/dist/exports/DeviceInfo/index.js 0.00 (0.00) -0.30 (-0.67) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/exports/DrawerLayoutAndroid/index.js 0.00 (0.00) -0.08 (-0.10) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/exports/Image/index.js 2.52 (6.04) +0.09 (+0.32) +3.7% (+5.6%) 🔴
./packages/react-native-web/dist/exports/InteractionManager/index.js 0.73 (1.85) +0.42 (+1.28) +133.2% (+221.5%) 🔴
./packages/react-native-web/dist/exports/NativeEventEmitter/index.js 0.09 (0.12) +0.00 (+0.01) +3.4% (+11.7%)
./packages/react-native-web/dist/exports/PermissionsAndroid/index.js 0.00 (0.00) -0.14 (-0.21) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/exports/render/index.js 0.27 (0.71) +0.11 (+0.45) +75.5% (+177.3%) 🔴
./packages/react-native-web/dist/exports/SafeAreaView/index.js 0.43 (0.93) -0.01 (-0.02) -1.1% (-1.9%) 🟢
./packages/react-native-web/dist/exports/ScrollView/index.js 3.08 (10.59) +0.94 (+4.34) +43.9% (+69.4%) 🔴
./packages/react-native-web/dist/exports/Settings/index.js 0.00 (0.00) -0.04 (-0.02) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/exports/StyleSheet/compiler/createReactDOMStyle.js 1.17 (3.39) -0.05 (+0.46) -4.0% (+15.6%) 🟢
./packages/react-native-web/dist/exports/StyleSheet/compiler/index.js 2.34 (7.05) +0.12 (+0.79) +5.2% (+12.7%) 🔴
./packages/react-native-web/dist/exports/StyleSheet/index.js 1.10 (2.42) +0.04 (+0.07) +3.8% (+3.2%) 🔴
./packages/react-native-web/dist/exports/StyleSheet/preprocess.js 1.24 (3.56) +0.69 (+2.07) +127.3% (+139.2%) 🔴
./packages/react-native-web/dist/exports/StyleSheet/validate.js 0.63 (1.25) +0.01 (+0.04) +1.9% (+3.1%) 🟡
./packages/react-native-web/dist/exports/Switch/index.js 1.31 (3.32) +0.01 (+0.01) +0.5% (+0.3%)
./packages/react-native-web/dist/exports/Systrace/index.js 0.00 (0.00) -0.04 (-0.02) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/exports/Text/index.js 1.66 (4.62) +0.07 (+0.17) +4.5% (+3.9%) 🔴
./packages/react-native-web/dist/exports/TextInput/index.js 2.41 (6.38) +0.18 (+0.55) +8.1% (+9.5%) 🔴
./packages/react-native-web/dist/exports/ToastAndroid/index.js 0.00 (0.00) -0.08 (-0.10) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/exports/Touchable/index.js 3.17 (13.22) +0.03 (+0.01) +0.9% (+0.1%) 🔴
./packages/react-native-web/dist/exports/TouchableHighlight/index.js 1.06 (2.48) +0.04 (+0.12) +3.6% (+4.9%) 🔴
./packages/react-native-web/dist/exports/TouchableOpacity/index.js 0.97 (2.14) +0.05 (+0.13) +5.2% (+6.5%) 🔴
./packages/react-native-web/dist/exports/TouchableWithoutFeedback/index.js 0.65 (1.49) +0.04 (+0.15) +7.3% (+10.8%) 🔴
./packages/react-native-web/dist/exports/TVEventHandler/index.js 0.00 (0.00) -0.04 (-0.02) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/exports/View/index.js 1.34 (3.69) -0.01 (-0.09) -0.5% (-2.3%) 🟢
./packages/react-native-web/dist/index.js 0.74 (3.53) -0.10 (-0.56) -11.4% (-13.7%) 🟢
./packages/react-native-web/dist/modules/AccessibilityUtil/propsToAccessibilityComponent.js 0.40 (0.69) +0.02 (+0.03) +4.2% (+4.5%) 🟡
./packages/react-native-web/dist/modules/AccessibilityUtil/propsToAriaRole.js 0.24 (0.38) +0.01 (+0.01) +2.5% (+3.3%)
./packages/react-native-web/dist/modules/createDOMProps/index.js 3.42 (13.34) +1.53 (+7.50) +81.3% (+128.5%) 🔴
./packages/react-native-web/dist/modules/forwardedProps/index.js 0.84 (2.94) +0.26 (+1.06) +45.8% (+56.1%) 🔴
./packages/react-native-web/dist/modules/ScrollResponder/index.js 0.00 (0.00) -1.48 (-5.23) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/modules/UnimplementedView/index.js 0.26 (0.38) -0.01 (-0.02) -3.8% (-4.5%) 🟢
./packages/react-native-web/dist/modules/usePlatformMethods/index.js 0.21 (0.34) -0.32 (-0.76) -60.4% (-69.4%) 🟢
./packages/react-native-web/dist/vendor/react-native/Animated/AnimatedEvent.js 1.10 (2.96) -0.03 (-0.08) -2.7% (-2.8%) 🟢
./packages/react-native-web/dist/vendor/react-native/Animated/AnimatedImplementation.js 1.72 (6.27) +0.11 (+0.38) +6.7% (+6.4%) 🔴
./packages/react-native-web/dist/vendor/react-native/Animated/AnimatedMock.js 0.77 (2.45) +0.17 (+0.50) +27.2% (+25.9%) 🔴
./packages/react-native-web/dist/vendor/react-native/Animated/animations/Animation.js 0.40 (0.90) +0.01 (+0.02) +3.4% (+2.7%) 🟡
./packages/react-native-web/dist/vendor/react-native/Animated/animations/SpringAnimation.js 1.53 (4.67) +0.00 (-0.05) +0.1% (-1.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/animations/TimingAnimation.js 0.81 (2.27) +0.03 (+0.12) +3.9% (+5.8%) 🔴
./packages/react-native-web/dist/vendor/react-native/Animated/components/AnimatedImage.js 0.11 (0.18) -0.02 (-0.02) -13.1% (-8.5%) 🟢
./packages/react-native-web/dist/vendor/react-native/Animated/components/AnimatedScrollView.js 0.23 (0.40) -0.01 (-0.02) -5.0% (-4.0%) 🟢
./packages/react-native-web/dist/vendor/react-native/Animated/components/AnimatedText.js 0.11 (0.18) -0.02 (-0.02) -13.4% (-8.6%) 🟢
./packages/react-native-web/dist/vendor/react-native/Animated/components/AnimatedView.js 0.11 (0.18) -0.02 (-0.02) -13.2% (-8.6%) 🟢
./packages/react-native-web/dist/vendor/react-native/Animated/createAnimatedComponent.js 0.37 (0.73) -1.26 (-4.18) -77.2% (-85.1%) 🟢
./packages/react-native-web/dist/vendor/react-native/Animated/NativeAnimatedHelper.js 2.43 (10.63) +0.73 (+2.98) +42.8% (+39.0%) 🔴
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedAddition.js 0.33 (0.83) -0.01 (-0.04) -2.1% (-4.3%) 🟢
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedDiffClamp.js 0.35 (0.80) -0.01 (-0.04) -2.5% (-4.5%) 🟢
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedDivision.js 0.46 (1.22) -0.00 (+0.00) -0.2% (+0.3%)
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedInterpolation.js 1.53 (4.04) -0.01 (-0.02) -0.6% (-0.5%) 🟢
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedModulo.js 0.29 (0.65) -0.01 (-0.04) -1.7% (-5.5%) 🟢
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedMultiplication.js 0.34 (0.85) -0.01 (-0.04) -2.0% (-4.2%) 🟢
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedNode.js 0.86 (2.76) +0.05 (+0.19) +6.1% (+7.5%) 🔴
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedProps.js 0.71 (2.35) -0.02 (-0.10) -2.9% (-3.9%) 🟢
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedStyle.js 0.60 (1.89) +0.01 (+0.12) +2.5% (+6.5%) 🟡
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedSubtraction.js 0.33 (0.84) -0.01 (-0.04) -2.1% (-4.2%) 🟢
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedValue.js 0.92 (2.94) +0.12 (+0.46) +14.6% (+18.7%) 🔴
./packages/react-native-web/dist/vendor/react-native/emitter/_EmitterSubscription.js 0.00 (0.00) -0.17 (-0.28) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/vendor/react-native/emitter/_EventEmitter.js 0.00 (0.00) -0.57 (-1.30) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/vendor/react-native/emitter/_EventSubscription.js 0.00 (0.00) -0.12 (-0.16) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/vendor/react-native/emitter/_EventSubscriptionVendor.js 0.00 (0.00) -0.32 (-0.72) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/vendor/react-native/emitter/EventEmitter.js 0.00 (0.00) -0.08 (-0.08) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/vendor/react-native/emitter/EventSubscription.js 0.00 (0.00) -0.03 (-0.01) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/vendor/react-native/FlatList/index.js 1.75 (5.57) -0.01 (-0.08) -0.9% (-1.5%) 🟢
./packages/react-native-web/dist/vendor/react-native/NativeEventEmitter/index.js 0.00 (0.00) -0.45 (-1.11) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/vendor/react-native/NativeEventEmitter/RCTDeviceEventEmitter.js 0.00 (0.00) -0.07 (-0.08) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/vendor/react-native/SectionList/index.js 0.51 (1.33) -0.02 (-0.10) -4.3% (-7.2%) 🟢
./packages/react-native-web/dist/vendor/react-native/VirtualizedList/index.js 7.71 (28.42) -0.04 (-0.20) -0.5% (-0.7%) 🟢
./packages/react-native-web/dist/exports/InteractionManager/TaskQueue.js 0.66 (1.40) +0.66 (+1.40) +100.0% (+100.0%) 🔴
./packages/react-native-web/dist/modules/warnOnce/index.js 0.13 (0.15) +0.13 (+0.15) +100.0% (+100.0%) 🔴
./packages/react-native-web/dist/vendor/react-native/Animated/AnimatedPlatformConfig.js 0.03 (0.01) +0.03 (+0.01) +100.0% (+100.0%) 🔴
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedColor.js 1.14 (3.93) +1.14 (+3.93) +100.0% (+100.0%) 🔴
./packages/react-native-web/dist/vendor/react-native/Animated/useAnimatedProps.js 0.80 (1.93) +0.80 (+1.93) +100.0% (+100.0%) 🔴
./packages/react-native-web/dist/vendor/react-native/EventEmitter/NativeEventEmitter.js 0.45 (1.11) +0.45 (+1.11) +100.0% (+100.0%) 🔴
./packages/react-native-web/dist/vendor/react-native/EventEmitter/RCTDeviceEventEmitter.js 0.08 (0.09) +0.08 (+0.09) +100.0% (+100.0%) 🔴
./packages/react-native-web/dist/vendor/react-native/ReactNative/ReactNativeFeatureFlags.js 0.20 (0.27) +0.20 (+0.27) +100.0% (+100.0%) 🔴
./packages/react-native-web/dist/vendor/react-native/Utilities/Platform.js 0.07 (0.07) +0.07 (+0.07) +100.0% (+100.0%) 🔴
./packages/react-native-web/dist/vendor/react-native/Utilities/useMergeRefs.js 0.21 (0.27) +0.21 (+0.27) +100.0% (+100.0%) 🔴
./packages/react-native-web/dist/vendor/react-native/Utilities/useRefEffect.js 0.16 (0.20) +0.16 (+0.20) +100.0% (+100.0%) 🔴
./packages/react-native-web/dist/vendor/react-native/vendor/emitter/EventEmitter.js 0.35 (0.60) +0.35 (+0.60) +100.0% (+100.0%) 🔴
View unchanged
Filename: gzip (minify) kB size kB change % change
./packages/react-native-web/dist/exports/AccessibilityInfo/index.js 0.47 (1.44) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/ActivityIndicator/index.js 0.83 (1.73) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Alert/index.js 0.06 (0.05) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Animated/index.js 0.08 (0.09) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Appearance/index.js 0.33 (0.59) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/CheckBox/index.js 1.47 (2.89) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Clipboard/index.js 0.39 (0.72) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/createElement/index.js 0.27 (0.50) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Dimensions/index.js 0.62 (1.46) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Easing/index.js 0.09 (0.08) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/findNodeHandle/index.js 0.12 (0.14) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/FlatList/index.js 0.08 (0.08) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/I18nManager/index.js 0.10 (0.10) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Image/types.js 0.02 (0.00) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/ImageBackground/index.js 0.42 (0.83) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/InputAccessoryView/index.js 0.08 (0.10) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Keyboard/index.js 0.14 (0.20) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/KeyboardAvoidingView/index.js 0.44 (0.84) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/LayoutAnimation/index.js 0.09 (0.10) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Linking/index.js 0.59 (1.16) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/LogBox/index.js 0.08 (0.09) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Modal/index.js 0.72 (1.84) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Modal/ModalAnimation.js 0.72 (1.85) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Modal/ModalContent.js 0.60 (1.19) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Modal/ModalFocusTrap.js 0.71 (1.91) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Modal/ModalPortal.js 0.28 (0.52) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/NativeModules/index.js 0.09 (0.10) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/PanResponder/Alternative.js 0.93 (3.23) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/PanResponder/index.js 0.09 (0.09) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Picker/index.js 0.56 (1.16) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Picker/PickerItem.js 0.16 (0.20) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/PixelRatio/index.js 0.20 (0.36) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Platform/index.js 0.14 (0.14) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Pressable/index.js 1.06 (2.47) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/processColor/index.js 0.15 (0.18) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/ProgressBar/index.js 0.66 (1.34) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/RefreshControl/index.js 0.30 (0.56) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/ScrollView/ScrollViewBase.js 0.86 (2.09) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/SectionList/index.js 0.09 (0.09) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Share/index.js 0.38 (0.74) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/StatusBar/index.js 0.17 (0.29) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/StyleSheet/compiler/hash.js 0.29 (0.70) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/StyleSheet/compiler/hyphenateStyleName.js 0.20 (0.29) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/StyleSheet/compiler/normalizeColor.js 0.24 (0.37) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/StyleSheet/compiler/normalizeValueWithProperty.js 0.26 (0.46) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/StyleSheet/compiler/resolveShadowValue.js 0.26 (0.52) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/StyleSheet/compiler/unitlessNumbers.js 0.45 (0.92) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/StyleSheet/dom/createCSSStyleSheet.js 0.29 (0.43) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/StyleSheet/dom/createOrderedCSSStyleSheet.js 0.72 (1.43) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/StyleSheet/dom/index.js 0.56 (1.34) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Text/TextAncestorContext.js 0.09 (0.11) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Text/types.js 0.02 (0.00) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/TextInput/types.js 0.02 (0.00) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Touchable/BoundingDimensions.js 0.25 (0.48) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Touchable/ensurePositiveDelayProps.js 0.18 (0.25) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Touchable/Position.js 0.19 (0.31) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/TouchableNativeFeedback/index.js 0.08 (0.10) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/UIManager/index.js 0.68 (1.32) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/unmountComponentAtNode/index.js 0.08 (0.08) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/useColorScheme/index.js 0.19 (0.27) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/useLocaleContext/index.js 0.08 (0.09) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/useWindowDimensions/index.js 0.23 (0.39) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Vibration/index.js 0.14 (0.18) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/View/types.js 0.02 (0.00) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/VirtualizedList/index.js 0.09 (0.10) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/YellowBox/index.js 0.16 (0.21) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/AccessibilityUtil/index.js 0.14 (0.33) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/AccessibilityUtil/isDisabled.js 0.12 (0.14) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/AssetRegistry/index.js 0.10 (0.12) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/canUseDom/index.js 0.11 (0.12) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/createEventHandle/index.js 0.50 (1.06) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/dismissKeyboard/index.js 0.13 (0.17) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/getBoundingClientRect/index.js 0.13 (0.17) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/ImageLoader/index.js 0.73 (1.58) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/isSelectionValid/index.js 0.17 (0.23) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/isWebColor/index.js 0.11 (0.12) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/mergeRefs/index.js 0.26 (0.34) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/modality/index.js 1.18 (4.35) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/multiplyStyleLengthValue/index.js 0.23 (0.29) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/normalizeColor/index.js 0.23 (0.36) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/pick/index.js 0.12 (0.11) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/prefixStyles/index.js 0.12 (0.17) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/prefixStyles/static.js 0.56 (1.64) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/requestIdleCallback/index.js 0.26 (0.51) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/setValueForStyles/dangerousStyleValue.js 0.19 (0.27) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/setValueForStyles/index.js 0.20 (0.29) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/TextInputState/index.js 0.22 (0.49) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/unitlessNumbers/index.js 0.45 (0.92) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/useElementLayout/index.js 0.66 (1.30) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/useEvent/index.js 0.24 (0.42) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/useHover/index.js 0.71 (1.64) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/useLayoutEffect/index.js 0.12 (0.18) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/useLocale/index.js 0.27 (0.52) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/useLocale/isLocaleRTL.js 0.31 (0.48) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/useMergeRefs/index.js 0.17 (0.22) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/usePressEvents/index.js 0.23 (0.36) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/usePressEvents/PressResponder.js 1.93 (7.14) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/useResponderEvents/createResponderEvent.js 0.74 (1.76) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/useResponderEvents/index.js 0.44 (1.05) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/useResponderEvents/ResponderEventTypes.js 0.34 (0.88) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/useResponderEvents/ResponderSystem.js 1.88 (6.11) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/useResponderEvents/ResponderTouchHistoryStore.js 1.07 (3.38) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/useResponderEvents/utils.js 0.68 (1.43) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/useStable/index.js 0.19 (0.26) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/types/index.js 0.02 (0.00) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/types/styles.js 0.02 (0.00) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/hash/index.js 0.29 (0.70) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/Animated.js 0.28 (0.72) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/animations/DecayAnimation.js 0.55 (1.33) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/bezier.js 0.69 (1.43) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/components/AnimatedFlatList.js 0.23 (0.39) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/components/AnimatedSectionList.js 0.23 (0.41) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/Easing.js 0.46 (1.00) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/NativeAnimatedModule.js 0.10 (0.13) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/NativeAnimatedTurboModule.js 0.10 (0.14) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedTracking.js 0.48 (1.30) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedTransform.js 0.45 (1.33) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedValueXY.js 0.57 (1.57) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedWithChildren.js 0.51 (1.39) 0.00 (+0.03) 0.0% (+2.1%)
./packages/react-native-web/dist/vendor/react-native/Animated/SpringConfig.js 0.41 (0.92) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Batchinator/index.js 0.28 (0.53) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/deepDiffer/index.js 0.28 (0.54) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/FillRateHelper/index.js 1.19 (3.41) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/infoLog/index.js 0.10 (0.09) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/JSEventLoopWatchdog/index.js 0.48 (1.10) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/LayoutAnimation/index.js 0.52 (1.23) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/PanResponder/index.js 1.06 (4.00) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/PooledClass/index.js 0.32 (0.62) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/StaticContainer/index.js 0.19 (0.25) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/StaticRenderer/index.js 0.15 (0.20) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/TouchHistoryMath/index.js 0.39 (1.16) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/TurboModule/RCTExport.js 0.03 (0.01) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/TurboModule/TurboModuleRegistry.js 0.22 (0.30) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Types/CoreEventTypes.js 0.03 (0.01) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Utilities/setAndForwardRef.js 0.17 (0.22) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/ViewabilityHelper/index.js 1.11 (2.49) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/VirtualizedList/VirtualizedListContext.js 0.50 (1.48) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/VirtualizedSectionList/index.js 2.12 (6.50) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/VirtualizeUtils/index.js 0.86 (1.55) 0.00 (0.00) 0.0% (0.0%)

compressed-size-action

@necolas necolas added this to the 0.19: React 18 milestone Aug 26, 2022
@necolas necolas self-assigned this Aug 26, 2022
@necolas necolas force-pushed the 0.19-dev branch 7 times, most recently from 87d35b4 to d87542b Compare September 1, 2022 22:13
@necolas
Copy link
Owner Author

necolas commented Dec 27, 2022

react-native-web@0.0.0-c26cb9b08 is the latest canary with a lot of additional changes, including support for PointerEvent props and CSS logical properties. 0.19 will be the release that is compatible with the W3C props/styles changes that will be part of React Native 0.71.

I've been juggling a dozen things recently and will need more help than in previous releases to canary test changes and find bugs.

The canary currently includes many deprecation warnings. I'm also looking for feedback on that. I'm open to a couple of different approaches:

Either: 0.19 is released with deprecation warnings in console; 0.20 goes out with all deprecated props/styles removed and no warnings.

Or: 0.19 is released with no warnings in console; 0.20 is immediately released with all the warnings in console output; 0.21 removes all the deprecated APIs.

cc @EvanBacon for Expo perspective on how disruptive different approaches might be for their SDK users.

@dereknelson
Copy link

dereknelson commented Jan 4, 2023

great work, really exciting stuff! out of curiosity, why are the touchables* being deprecated? to reduce fragmentation, more context

@rolandpoulter
Copy link

Trying to usereact-native-web@0.0.0-c26cb9b08 along with react-native-paper but it does not work seemingly because of the this commit: 16d3c23

It fails when react-native-paper imports BackHandler which is exported from react-native. Are there any plans to restore this compatibility?

@necolas
Copy link
Owner Author

necolas commented Jan 6, 2023

You should create an issue against react-native-paper

@rolandpoulter
Copy link

rolandpoulter commented Jan 8, 2023

I don't think react-native-paper is using react-native incorrectly, and I thought the goal of this project was to provide the react-native API in the web. I'm happy to create an issue on their end but I think this issue could end up breaking other react-native dependencies running in the web using react-native-web.

Are you suggesting I create an issue for the react-native-paper developers to stop using BackHandler in their Modal components?

@necolas
Copy link
Owner Author

necolas commented Jan 8, 2023

Are you suggesting I create an issue for the react-native-paper developers to stop using BackHandler in their Modal components?

Yep. It never did anything on web and shouldn't be imported or used in web components anymore.

@rolandpoulter
Copy link

rolandpoulter commented Jan 9, 2023

BackHandler doesn't do anything in iOS either but it is still possible to import in iOS despite it not doing anything in that environment.

See:
https://github.com/callstack/react-native-paper/blob/cb9b028d3f708757ff08cd76b90906b4803bd2bf/src/components/Modal.tsx#L4

I understand the code doesn't do anything in the web, but it also doesn't do anything in iOS but it is implemented as a no-op:

https://github.com/facebook/react-native/blob/8bd3edec88148d0ab1f225d2119435681fbbba33/Libraries/Utilities/BackHandler.ios.js

What other reasons is there for removing the BackHandler from the web? I think it sounds like a trade-off between compatibility and maintainability.

@lgxm3z
Copy link

lgxm3z commented Jan 9, 2023

BackHandler doesn't do anything in iOS either but it is still possible to import in iOS despite it not doing anything in that environment.

See: https://github.com/callstack/react-native-paper/blob/cb9b028d3f708757ff08cd76b90906b4803bd2bf/src/components/Modal.tsx#L4

I understand the code doesn't do anything in the web, but it also doesn't do anything in iOS but it is implemented as a no-op:

https://github.com/facebook/react-native/blob/8bd3edec88148d0ab1f225d2119435681fbbba33/Libraries/Utilities/BackHandler.ios.js

What other reasons is there for removing the BackHandler from the web? I think it sounds like a trade-off between compatibility and maintainability.

@necolas Would be the solution use conditional import? Wouldn't that make other people's code unnecessarily complex?

@necolas
Copy link
Owner Author

necolas commented Jan 18, 2023

Please create issues against other projects so they have time to make changes before this release goes out. This PR has been open for nearly 6 months, there have been several canary releases, and ample time for testing.

The release after this (0.20) will likely remove all the above-mentioned deprecated APIs entirely, so that RNWeb can get significantly smaller and faster.

@rolandpoulter
Copy link

rolandpoulter commented Jan 20, 2023

I don't think it will be significantly smaller and faster, in-fact it will be easier to wrap this library in the short term than to deal with this compatibility issue in every other project.

By all means, remove the deprecated APIs once they are no longer available in RN.

Also, correct me if I am wrong. The BackHandler is not deprecated. It could be wired up to a custom event handler in the web so that developers can choose to support it. Similar to the iOS implementation, or just leave it as a function stub.

necolas and others added 17 commits March 20, 2023 12:25
These components have been replaced by Pressable and will be removed
from React Native.

Fix #2382
Port ScrollView from legacy createReactClass to ES6 Class syntax.
* Add support for 'aria-*' and 'role' props.
* Add support for 'id' and 'tabIndex' props.
* Add support for 'pointerEvents' and 'userSelect' styles.
* Deprecate 'accessibility*' props.
* Deprecate 'nativeId' and 'focusable' props.
* Deprecate 'pointerEvents' and 'selectable' props.

Ref #2379
* Add support for 'enterKeyHint' prop.
* Add support for 'inputMode' prop.
* Add support for 'readOnly' prop.
* Add support for 'rows' prop.
* Deprecate 'keyboardType' prop.
* Deprecate 'returnKeyType' prop.
* Deprecate 'editable' prop.
* Deprecate 'numberOfLines' prop.

Ref #2379
* Add support for space-separated values.
* Deprecate array values.

Ref #2379
* Add support for verticalAlign style.
* Deprecate textAlignVertical style.

Ref #2379
Use space-separated values per W3C standard.

Ref #2379
* Support logical styles like 'marginInlineStart' and
  'insetInlineStart' via polyfills.
* Deprecate non-standard 'marginStart' etc. properties.

Ref #2379
This patch reorganizes the style compiler so that the 'preprocess' step
is responsible for all the work needed to transform any non-standard CSS
from React Native into a form that can be 'compiled' to rules for the
CSSStyleSheet.

Over time the 'preprocess' step should eventually be unnecessary as
React Native aligns its APIs with CSS APIs. And any external style
compilers should be able to run the 'preprocess' function over the style
input to produce valid CSS as input for the compiler.
Adds support for PointerEvent prop handlers and removes `onClickCapture`.

Ref #2377
Match default Text rendering in React Native.

Fix #2498
Set textAlign on the default Text element. Prevents inheritance of
textAlign set on a parent View.

Fix #2498
@necolas
Copy link
Owner Author

necolas commented Mar 20, 2023

Latest / last anticipated canary: 0.0.0-47671ca4

Planning to get 0.19 out this week barring any unexpected issues

@necolas necolas merged commit f156ed4 into master Mar 27, 2023
@agusvazquez
Copy link

Hello @necolas First of all, thanks for this awesome lib, I have been using it for a while and it really rocks! Good job!

Regarding the BackHandler, as mentioned above, I believe the purpose of this library is to provide support with react-native. And right now BackHandler is not deprecated on RN.

I have tried the latest version (19) for react native web and getting the BackHandler issue. I think it would be nice to reenable support for it, since it is an API that is supported on React Native itself.

@burakgormek
Copy link
Contributor

It would be nice align Linking api to RN before 0.19 publish :/

Deprecated Linking listeners still there... and we don't have remove() to remove subscription returned by Linking.addEventListener.

@necolas
Copy link
Owner Author

necolas commented Apr 10, 2023

@burakgormek no one reported that issue or submitted a PR. You should do it

Repository owner locked as resolved and limited conversation to collaborators Apr 10, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.