necolas Github contribution chart
necolas Github Stats
necolas Most Used Languages

Activity

29 Sep 2022

Issue Comment

Necolas

feat: added `textShadow` property in `TextStyleProps`

Summary

This PR is for adding the support fortextShadow property in TextStyleProps as required in the issue https://github.com/facebook/react-native/issues/34425. Unit Test cases and an example are also added in this PR.

Changelog

[General] [added] - Added support for textShadow property in style prop for Text Component,

Test Plan

  1. Added unit test cases for the function processTextShadow.
  2. Added an example in the RNTester app.

Forked On 29 Sep 2022 at 03:31:49

Necolas

I think https://github.com/postcss/postcss would be a better choice. Similarly https://colorjs.io/ might be useful for colors. It depends on what you all think we should do in JS vs native code in the long term

Commented On 29 Sep 2022 at 03:31:49

Necolas

feat : add aria labelled as alias for accessibilityLabelledBy

Summary

This adds the aria-labelledby prop to the components where it's used as requested on https://github.com/facebook/react-native/issues/34424, equivalent accessibilityLabelledBy

Changelog

[General] [Added] - Add aria-modal prop to basic component

TestPlan

  • Enable talkback.
  • Open the RNTester app and navigate to the Api's tab
  • Go to the TextInput with aria-labelledby attribute section

Merged On 29 Sep 2022 at 03:26:09

Necolas

Commented On 29 Sep 2022 at 03:26:09

Necolas

make reanimated work in web

Summary

Up until now, trying to use reanimated with react-native-svg in react-native-web resulted in an error. This adds a setNativeProps function to the web implementation to directly modify the transform and style props on a SVGElement ref.

Since there is a need to track the "last merged props" and those need to be reset on every render, the render method has been moved into the WebShape class and a tag string property has been added.

As g had some extra handling for x and y, a prepareProps function was added as well.

Test Plan

Here is a video of me dragging a <g> with a nested <image> in chome: https://www.loom.com/share/675405537d9d41a792432ebf41636047

What's required for testing (prerequisites)?

Just run any reanimated svg in the browser instead of a device.

What are the steps to reproduce (after prerequisites)?

Run any animation.

Compatibility

| OS | Implemented | | ------- | :---------: | | iOS | (untouched) | | Android | (untouched) | | Web | ✅ |

Checklist

  • [ ] I have tested this on a device and a simulator
  • [X] I have tested this on a web browser
  • [ ] I added documentation in README.md
  • [ ] I updated the typed files (typescript)
  • [ ] I added a test for the API in the __tests__ folder

Forked On 29 Sep 2022 at 03:17:48

Necolas

FYI setNativeProps will not be supported in the new RN architecture and is being removed from RNWeb too

Commented On 29 Sep 2022 at 03:17:48

Necolas

Adding pager, scrollview, viewgroup, webview, drawer roles

Summary

  • adds missing roles
  • adds custom roles that don't exist in TalkBack (see the compositor.json and string.xml files).
  • fixes issues with Drawer
  • fixes issues with ScrollView missing roles
  • seek control already exist as adjustable https://github.com/facebook/react-native/pull/34477/commits/d460d097ac0f5df8002e072711023517905f9ca9

Relevant https://github.com/facebook/react-native/issues/30839#issuecomment-1222293556 fixes https://github.com/facebook/react-native/issues/30839

Changelog

[Android] [Fixed] - Adding pager, scrollview, viewgroup, webview, drawer roles

Test Plan

Android

  • Drawer Layout and ScrollView (02/09/22) https://github.com/facebook/react-native/pull/34477#issuecomment-1235293165
  • sliding drawer, drawer layout, icon menu https://github.com/facebook/react-native/pull/34477#issuecomment-1224112650
  • Horizontal and Vertical ScrollView https://github.com/facebook/react-native/pull/34477#issuecomment-1225478289
  • Toast https://github.com/facebook/react-native/pull/34477#issuecomment-1225369629
  • CheckedTextView https://github.com/facebook/react-native/pull/34477#discussion_r959329833
  • Spinner (dropdownlist) https://github.com/facebook/react-native/pull/34477#discussion_r959374894
  • EditText https://github.com/facebook/react-native/pull/34477#discussion_r959412185
  • WebView https://github.com/facebook/react-native/pull/34477#discussion_r959417518
  • Testing chime_up and chime_down sound feedback in Scrollable https://github.com/facebook/react-native/pull/34477#issuecomment-1238882030

iOS https://github.com/facebook/react-native/pull/34477#issuecomment-1232418595

Forked On 28 Sep 2022 at 09:29:27

Necolas

The `role` prop is [typed separately](https://github.com/facebook/react-native/blob/main/Libraries/Components/View/ViewAccessibility.js#L50) and equivalent values are then mapped to `accessibilityRole` values, so at a glance this looks ok as it's adding values to the latter.
On 28 Sep 2022 at 09:29:27

Necolas

Adding pager, scrollview, viewgroup, webview, drawer roles

Summary

  • adds missing roles
  • adds custom roles that don't exist in TalkBack (see the compositor.json and string.xml files).
  • fixes issues with Drawer
  • fixes issues with ScrollView missing roles
  • seek control already exist as adjustable https://github.com/facebook/react-native/pull/34477/commits/d460d097ac0f5df8002e072711023517905f9ca9

Relevant https://github.com/facebook/react-native/issues/30839#issuecomment-1222293556 fixes https://github.com/facebook/react-native/issues/30839

Changelog

[Android] [Fixed] - Adding pager, scrollview, viewgroup, webview, drawer roles

Test Plan

Android

  • Drawer Layout and ScrollView (02/09/22) https://github.com/facebook/react-native/pull/34477#issuecomment-1235293165
  • sliding drawer, drawer layout, icon menu https://github.com/facebook/react-native/pull/34477#issuecomment-1224112650
  • Horizontal and Vertical ScrollView https://github.com/facebook/react-native/pull/34477#issuecomment-1225478289
  • Toast https://github.com/facebook/react-native/pull/34477#issuecomment-1225369629
  • CheckedTextView https://github.com/facebook/react-native/pull/34477#discussion_r959329833
  • Spinner (dropdownlist) https://github.com/facebook/react-native/pull/34477#discussion_r959374894
  • EditText https://github.com/facebook/react-native/pull/34477#discussion_r959412185
  • WebView https://github.com/facebook/react-native/pull/34477#discussion_r959417518
  • Testing chime_up and chime_down sound feedback in Scrollable https://github.com/facebook/react-native/pull/34477#issuecomment-1238882030

iOS https://github.com/facebook/react-native/pull/34477#issuecomment-1232418595

Merged On 28 Sep 2022 at 09:29:28

Necolas

Commented On 28 Sep 2022 at 09:29:28
Issue Comment

Necolas

[w3c] ☂️ Web Props umbrella issue

Add support for Web props to core components

Contingent on RFC feedback. This is the umbrella issue for basic React DOM / Web props support on React Native components, as described in this proposal: "RFC: Reduce fragmentation across platforms".

Each of the tasks listed below can be tackled with individual PRs that link back to this issue. Not every task has a known solution or implementation yet, so feel free to discuss implementation details in the comments. Each new prop should take priority over any existing equivalents.

Common props

These props should be supported by core components, i.e., <Image>, <View>, <Text>, <TextInput>, etc.

Prop aliases

Accessibility State. https://github.com/facebook/react-native/pull/34524

Accessibility Value. https://github.com/facebook/react-native/pull/34535

Prop equivalents

  • [x] Add aria-hidden. https://github.com/facebook/react-native/pull/34552
  • [x] Add aria-live. https://github.com/facebook/react-native/pull/34555
  • [x] Add role. https://github.com/facebook/react-native/pull/34538#issuecomment-1232918518
    • [x] Alias for accessibilityRole but with full list of ARIA roles allowed.
    • [x] Map role='slider' to accessibilityRole='adjustable'
    • [x] Map role='img' to accessibilityRole='image'
    • [x] Map role='presentation' to accessibilityRole='none'
    • [x] Map role='summary' to accessibilityRole='region'
  • [x] Add tabIndex. https://github.com/facebook/react-native/pull/34486
    • [x] Only support for 0 and -1 values only.
    • [x] Map tabIndex={0} to focusable={true} (Android)
    • [x] Map tabIndex={-1} to focusable={false} (Android)

Example:

<View
  aria-hidden={true}
  aria-busy={false}
  aria-label="Accessibility label"
  aria-valuetext="Middle"
  id="native-id"
  role="slider"
  tabIndex={0}
>

// same as

<View
  accessibilityElementsHidden={true}
  accessibilityLabel="Accessibility label"
  accessibilityRole="adjustable"
  accessibilityState={{ busy: false }}
  accessibilityValue={{ text: "Middle" }}
  focusable={true}
  importantforAccessibility='no-hide-descendants'
  nativeId="native-id"
> 

<Image> props

These props should be supported by <Image>.

  • [x] Add alt. https://github.com/facebook/react-native/pull/34550
    • [x] Support alternative text support.
  • [x] Add tintColor prop to replace non-standard style.tintColor. The tintColor style is currently forwarded to a native prop and should instead be exposed as a prop so that React Native for Web does not have to deopt styles for Image rendering. https://github.com/facebook/react-native/pull/34534#issuecomment-1232902094

These props are inter-related:crossOrigin and referrerPolicy should only apply if src or srcSet are defined; and src should be ignored if a valid srcSet is defined. The user-provided source prop should be ignored if a valid src or srcSet prop is also defined.

https://github.com/facebook/react-native/pull/34481

  • [x] Add crossOrigin.
    • [x] Potentially map crossOrigin='use-credentials' to source.headers['Access-Control-Allow-Credentials'] = true.
  • [x] Add height.
  • [x] Add referrerPolicy.
    • [x] Potentially map referrerPolicy to source.headers['Referrer-Policy'] = referrerPolicy.
  • [x] Add src.
    • [x] Map src to source.uri.
  • [x] Add srcSet.
    • [x] Map srcSet='path1 x1, path1 x2' to source=[{ uri: path1, scale: 1 }, { uri: path2, scale: 2 }].
  • [x] Add width.

Example mapping to source:

const { crossOrigin, height, referrerPolicy, src, srcSet, width } = props;
let source = null;
if (src != null) {
  const headers = {};
  if (crossOrigin === 'use-credentials') {
    headers['Access-Control-Allow-Credentials'] = true;
  }
  if (referrerPolicy != null) {
    headers['Referrer-Policy'] = referrerPolicy;
  }
  nextProps.progressiveRenderingEnabled = true;
  source = { headers, height, uri: src, width };
}
if (srcSet != null) {
  source = [];
  const srcList = srcSet.split(', ');
  srcList.forEach((src) => {
    const [uri, xscale] = src.split(' ');
    const scale = parseInt(xscale.split('x')[0], 10);
    const headers = {};
    if (crossOrigin === 'use-credentials') {
      headers['Access-Control-Allow-Credentials'] = true;
    }
    if (referrerPolicy != null) {
      headers['Referrer-Policy'] = referrerPolicy;
    }
    source.push({ headers, height, scale, uri, width });
  });
} 

Example:

<Image
  alt="Alternative text"
  crossOrigin="use-credentials"
  height={300}
  referrerPolicy="origin"
  srcSet="https://image.png 1x, https://image2.png 2x"
  width={500}
>

// same as

<Image
  source={[
    {
      uri: "https://image.png",
      scale: 1,
      height: 300,
      headers: {
        'Access-Control-Allow-Credentials': true,
        'Referrer-Policy': 'origin'
      },
      width: 500
    }
    {
      uri: "https://image2.png",
      scale: 2,
      height: 300,
      headers: {
        'Access-Control-Allow-Credentials': true,
        'Referrer-Policy': 'origin'
      },
      width: 500
    }
  ]}
> 

<TextInput> props

These props should be supported by <TextInput>.

  • [x] Redefine autoComplete. https://github.com/facebook/react-native/pull/34523
  • [x] Add enterKeyHint. https://github.com/facebook/react-native/pull/34482
    • [x] Map to equivalent returnKeyType values.
    • [x] Map enterKeyHint === 'enter' to returnKeyType = 'default'
    • [x] Map enterKeyHint === 'done' to returnKeyType = 'done'
    • [x] Map enterKeyHint === 'go' to returnKeyType = 'go'
    • [x] Map enterKeyHint === 'next' to returnKeyType = 'next'
    • [x] Map enterKeyHint === 'previous' to returnKeyType = 'previous'
    • [x] Map enterKeyHint === 'search' to returnKeyType = 'search'
    • [x] Map enterKeyHint === 'send' to returnKeyType = 'send'
  • [x] Add inputMode. https://github.com/facebook/react-native/pull/34460
    • [x] Map to equivalent keyboardType values.
    • [x] Map inputMode === 'none' to keyboardType = 'none'
    • [x] Map inputMode === 'text' to keyboardType = 'text'
    • [x] Map inputMode === 'decimal' to keyboardType = 'decimal-pad'
    • [x] Map inputMode === 'email' to keyboardType = 'email-address'
    • [x] Map inputMode === 'numeric' to keyboardType = 'numeric'
    • [x] Map inputMode === 'search' to keyboardType = 'search'
    • [x] Map inputMode === 'tel'to keyboardType = 'phone-pad'
    • [x] Map inputMode === 'url' to keyboardType = 'url'
  • [x] Add readOnly. https://github.com/facebook/react-native/pull/34444
    • [x] Map readOnly={false} to editable={true}.
    • [x] Map readOnly={true} to editable={false}.
  • [x] Add rows (for multiline={true}). https://github.com/facebook/react-native/pull/34488

Example autoComplete mapping:

// https://reactnative.dev/docs/textinput#autocomplete-android
const autoCompleteAndroid = {
 // web: android
  'address-line1': 'postal-address-region',
  'address-line2': 'postal-address-locality',
  bday: 'birthdate-full',
  'bday-day': 'birthdate-day',
  'bday-month': 'birthdate-month',
  'bday-year': 'birthdate-year',
  'cc-csc': 'cc-csc',
  'cc-exp': 'cc-exp',
  'cc-exp-month': 'cc-exp-month',
  'cc-exp-year': 'cc-exp-year',
  'cc-number': 'cc-number',
  country: 'postal-address-country',
  'current-password': 'password',
  email: 'email',
  name: 'name',
  'additional-name': 'name-middle',
  'family-name': 'name-family',
  'given-name': 'name-given',
  'honorific-prefix': 'namePrefix',
  'honorific-suffix': 'nameSuffix',
  'new-password': 'password-new',
  off: 'off',
  'one-time-code': 'sms-otp',
  'postal-code': 'postal-code',
  sex: 'gender',
  'street-address': 'street-address',
  tel: 'tel',
  'tel-country-code': 'tel-country-code',
  'tel-national': 'tel-national',
  username: 'username'
};

// https://reactnative.dev/docs/textinput#textcontenttype-ios
const autoCompleteIOS = {
 // web: ios
  'address-line1': 'streetAddressLine1',
  'address-line2': 'streetAddressLine2',
  'cc-number': 'creditCardNumber',
  'current-password': 'password',
  country: 'countryName',
  email: 'emailAddress',
  name: 'name',
  'additional-name': 'middleName',
  'family-name': 'familyName',
  'given-name': 'givenName',
  nickname: 'nickname',
  'honorific-prefix': 'name-prefix',
  'honorific-suffix': 'name-suffix',
  'new-password': 'newPassword',
  off: 'none',
  'one-time-code': 'oneTimeCode',
  organization: 'organizationName',
  'organization-title': 'jobTitle',
  'postal-code': 'postalCode',
  'street-address': 'fullStreetAddress',
  tel: 'telephoneNumber',
  url: 'URL',
  username: 'username'
}; 

Examples:

<TextArea
  autoComplete="email"
  inputMode="email"
/>

// same as

<TextArea
  autoComplete="email"
  keyboardType="email-address"
  textContentType="emailAddress"
/> 
<TextArea
  multiline
  readOnly={true}
  rows={3}
/>

// same as

<TextArea
  editable={false}
  multiline
  numberOfLines={3}
/> 

Documentation

  • [ ] Update react-native-website docs to include all these props. @gabrieldonadel has several PRs open for individual props, which we may want to consolidate into a single PR and add remaining props, so it can be merged in one commit.

Forked On 28 Sep 2022 at 09:26:56

Necolas

I think role support is missing from Text (which appears to support accessibilityRole): https://github.com/facebook/react-native/blob/main/Libraries/Text/TextProps.js

This logic in View may need to be moved to a shared place so it can be used in Text too

Commented On 28 Sep 2022 at 09:26:56
Issue Comment

Necolas

[w3c] ☂️ Web Styles umbrella issue

Add support for Web styles to components

Contingent on RFC feedback. This is the umbrella issue for basic React DOM / Web style additions to React Native components, as described in this proposal: "RFC: Reduce fragmentation across platforms".

Each of the tasks listed below can be tackled with individual PRs that link back to this issue. Not every task has a known solution or implementation yet, so feel free to discuss implementation details in the comments. Each new style property should take priority over any existing equivalents.

Styles

Basic extensions

  • [x] aspectRatio support for string values, i.e., '16 / 9', to align with CSS. https://github.com/facebook/react-native/pull/34629
  • [x] fontVariant support for space-separated string values, i.e., 'small-caps common-ligatures'. https://github.com/facebook/react-native/pull/34641
  • [x] fontWeight support for number values, i.e., 900. https://github.com/facebook/react-native/pull/34598
  • [x] transform support for string values, i.e., 'scaleX(2) translateX(20px)'. https://github.com/facebook/react-native/pull/34660#pullrequestreview-1104804653

Examples:

<View
  style={{
    aspectRatio: '16 / 9',
    transform: 'scaleX(2) translateX(20px)'
  }}
>

<Text
  style={{
    fontVariant: 'small-caps common-ligatures',
    fontWeight: 900
  }}
> 

Equivalents

  • [ ] Add CSS Logical Properties. https://github.com/facebook/react-native/pull/34590/
    • [ ] Map marginInlineStart to marginStart.
    • [ ] Map marginInlineEnd to marginEnd.
    • [ ] Map marginBlockStart to marginTop.
    • [ ] Map marginBlockEnd to marginBottom.
    • [ ] Map marginBlock to marginVertical.
    • [ ] Map marginInline to marginHorizontal.
    • [ ] Map paddingInlineStart to paddingStart.
    • [ ] Map paddingInlineEnd to paddingEnd.
    • [ ] Map paddingBlockStart to paddingTop.
    • [ ] Map paddingBlockEnd to paddingBottom.
    • [ ] Map paddingBlock to paddingVertical.
    • [ ] Map paddingInline to paddingHorizontal.
  • [x] Add objectFit. Partial equivalent to the resizeMode style and prop of <Image>. https://github.com/facebook/react-native/pull/34576
    • [x] Map objectFit === 'contain' to resizeMode = 'contain'.
    • [x] Map objectFit === 'cover' to resizeMode = 'cover'
    • [x] Map objectFit === 'fill' to resizeMode = 'stretch'
    • [x] Map objectFit === 'scale-down' to resizeMode = 'contain'
    • [ ] Support setting object position via objectPosition
  • [x] Add pointerEvents. Equivalent to the pointerEvents prop of <View>. https://github.com/facebook/react-native/pull/34586/
    • [x] Retain the React Native specific box-none and box-only values.
  • [x] Add userSelect. Equivalent to using selectable prop on <Text>. https://github.com/facebook/react-native/pull/34575
  • [ ] Add verticalAlign. https://github.com/facebook/react-native/pull/34567
    • [x] Map verticalAlign to textAlignVertical.
    • [x] Map verticalAlign === 'middle' to textAlignVertical = 'center';

Examples:

<View
  style={{
    pointerEvents: 'none'
  }}
>

<Text
  style={{
    userSelect: 'none',
    verticalAlign: 'middle'
  }}
>

<Image
  style={{
    objectFit: 'cover'
  }}
> 

New features

  • [x] Add expanded support for CSS Colors, e.g., hsla(). Potentially via Colorjs.io. https://github.com/facebook/react-native/pull/34600
  • [ ] Add backgroundImage.
    • [ ] Support setting background images via url() string function.
    • [ ] Support setting background position via backgroundPosition
  • [ ] Add boxShadow.
    • [ ] Add native support for single/multiple CSS box shadows.
    • [ ] Cross-platform shadows to replace Android elevation style, and buggy iOS shadow* styles.
  • [ ] Add flow layout mode
    • [ ] Supports display:block.
    • [ ] Supports display:inline.
  • [ ] Conform to W3C flexbox layout mode
    • [ ] Add gap. https://github.com/facebook/yoga/pull/1116
    • [ ] Fix behavior to match browsers.
  • [ ] Add textShadow. https://github.com/facebook/react-native/pull/34645
<View
  style={{
    boxShadow: '1px 1px 1px 1px #eee',
    backgroundColor: 'hsla(50,50,50,0.5)',
    backgroundImage: 'url(https://image.png)',
    pointerEvents: 'none',
    transform: 'scale(0.9)',
    width: '5rem'
  }}
>

<Text
  style={{
    textShadow: '1px 1px 1px #eee',
    userSelect: 'none',
    verticalAlign: 'middle'
  }}
>

<Image
  style={{
    objectFit: 'cover'
  }}
> 

Animated

The Animated API should be made to work on web via a few relatively simple changes.

  • [x] Convert all files in the Animated directory to use ESModule imports/exports. At the moment it is using a mixture of the 2 module formats. https://github.com/facebook/react-native/pull/34539
  • [ ] Prevent crashes outside of native environments. This is mostly caused by TurboModule calls in NativeAnimatedHelper. We could either use a *.web.js mock or Platform guards. React Native for Web currently comments out the flushQueue function body to prevent crashes.
  • [ ] Patch AnimatedStyle to avoid discarding the initial style information which destroys the output of web style compilers and breaks rendering. React Native for Web has a patch for this that can be upstreamed.
  • [ ] Move Animated to a separate package within this monorepo and publish it to npm. Use the package to create the Animated components within React Native and React Native for Web.

Forked On 28 Sep 2022 at 06:35:14

Necolas

I like this idea. inset-inline and inset-block would also be useful. I'll add a bunch more logical properties too once we have an idea of how to support them

Commented On 28 Sep 2022 at 06:35:14
Issue Comment

Necolas

feat: added `textShadow` property in `TextStyleProps`

Summary

This PR is for adding the support fortextShadow property in TextStyleProps as required in the issue https://github.com/facebook/react-native/issues/34425. Unit Test cases and an example are also added in this PR.

Changelog

[General] [added] - Added support for textShadow property in style prop for Text Component,

Test Plan

  1. Added unit test cases for the function processTextShadow.
  2. Added an example in the RNTester app.

Forked On 28 Sep 2022 at 06:32:06

Necolas

Splitting with a comma will not work when the shadow color is in rgb or hsl format.

Good point! I think eventually a lot of this stuff will move into native code. Note that CSS Color 4 allows space separated rgb values, which would make things easier if we didn't also have comma-separated. Ideas for another day.

Commented On 28 Sep 2022 at 06:32:06
Issue Comment

Necolas

feat: added `textShadow` property in `TextStyleProps`

Summary

This PR is for adding the support fortextShadow property in TextStyleProps as required in the issue https://github.com/facebook/react-native/issues/34425. Unit Test cases and an example are also added in this PR.

Changelog

[General] [added] - Added support for textShadow property in style prop for Text Component,

Test Plan

  1. Added unit test cases for the function processTextShadow.
  2. Added an example in the RNTester app.

Forked On 28 Sep 2022 at 12:32:40

Necolas

so the following are valid values: '1, 1,1, red', 1,1, 1,rgb(1,1,0)

No, multiple shadows are separated by commas. You can split on comma to detect multiple shadows and print a warning that only the first shadow will be supported by RN. The trickier part will be detecting which part of the shadow is a color. Best to refer to the spec for details about the syntax

Commented On 28 Sep 2022 at 12:32:40

Necolas

feat : add aria labelled as alias for accessibilityLabelledBy

Summary

This adds the aria-labelledby prop to the components where it's used as requested on https://github.com/facebook/react-native/issues/34424, equivalent accessibilityLabelledBy

Changelog

[General] [Added] - Add aria-modal prop to basic component

TestPlan

  • Enable talkback.
  • Open the RNTester app and navigate to the Api's tab
  • Go to the TextInput with aria-labelledby attribute section

Forked On 26 Sep 2022 at 08:40:28

Necolas

Where is the support for this implemented in TextInput, Text, Image components?
On 26 Sep 2022 at 08:40:28

Necolas

feat : add aria labelled as alias for accessibilityLabelledBy

Summary

This adds the aria-labelledby prop to the components where it's used as requested on https://github.com/facebook/react-native/issues/34424, equivalent accessibilityLabelledBy

Changelog

[General] [Added] - Add aria-modal prop to basic component

TestPlan

  • Enable talkback.
  • Open the RNTester app and navigate to the Api's tab
  • Go to the TextInput with aria-labelledby attribute section

Merged On 26 Sep 2022 at 08:40:32

Necolas

Commented On 26 Sep 2022 at 08:40:32

Necolas

feat : add aria labelled as alias for accessibilityLabelledBy

Summary

This adds the aria-labelledby prop to the components where it's used as requested on https://github.com/facebook/react-native/issues/34424, equivalent accessibilityLabelledBy

Changelog

[General] [Added] - Add aria-modal prop to basic component

TestPlan

  • Enable talkback.
  • Open the RNTester app and navigate to the Api's tab
  • Go to the TextInput with aria-labelledby attribute section

Forked On 26 Sep 2022 at 08:38:36

Necolas

Please can we alpha-sort props so it's easier to see the aria props grouped together etc. Same for the props applied to the native component. I'm surprised this isn't a lint rule.
On 26 Sep 2022 at 08:38:36

Necolas

feat : add aria labelled as alias for accessibilityLabelledBy

Summary

This adds the aria-labelledby prop to the components where it's used as requested on https://github.com/facebook/react-native/issues/34424, equivalent accessibilityLabelledBy

Changelog

[General] [Added] - Add aria-modal prop to basic component

TestPlan

  • Enable talkback.
  • Open the RNTester app and navigate to the Api's tab
  • Go to the TextInput with aria-labelledby attribute section

Merged On 26 Sep 2022 at 08:40:32

Necolas

Commented On 26 Sep 2022 at 08:40:32

Necolas

feat: Add string support for aspectRatio

Summary

This updates aspectRatio to support string values and ratio formats, i.e., '16 / 9', thus aligning it with the CSS Box Sizing Module Level 4 specification as requested on https://github.com/facebook/react-native/issues/34425. This also adds unit tests to the processAspectRatio function ensuring the style processing works as expected.

Changelog

[General] [Added] - Add string support for aspectRatio

Test Plan

This can be tested either through processAspectRatio-tests or by using the following code:

 <View
   style={{
     backgroundColor: '#527FE4', 
     aspectRatio: '16 / 9',
  }} /> 

https://user-images.githubusercontent.com/11707729/189029904-da1dc0a6-85de-46aa-8ec2-3567802c8719.mov

Merged On 23 Sep 2022 at 10:13:54

Necolas

Commented On 23 Sep 2022 at 10:13:54

Necolas

feat: Add string support for aspectRatio

Summary

This updates aspectRatio to support string values and ratio formats, i.e., '16 / 9', thus aligning it with the CSS Box Sizing Module Level 4 specification as requested on https://github.com/facebook/react-native/issues/34425. This also adds unit tests to the processAspectRatio function ensuring the style processing works as expected.

Changelog

[General] [Added] - Add string support for aspectRatio

Test Plan

This can be tested either through processAspectRatio-tests or by using the following code:

 <View
   style={{
     backgroundColor: '#527FE4', 
     aspectRatio: '16 / 9',
  }} /> 

https://user-images.githubusercontent.com/11707729/189029904-da1dc0a6-85de-46aa-8ec2-3567802c8719.mov

Forked On 23 Sep 2022 at 10:13:48

Necolas

It actually looks like we don't need to trim, as Number apparently does that internally
On 23 Sep 2022 at 10:13:48

Necolas

feat: Add string support for aspectRatio

Summary

This updates aspectRatio to support string values and ratio formats, i.e., '16 / 9', thus aligning it with the CSS Box Sizing Module Level 4 specification as requested on https://github.com/facebook/react-native/issues/34425. This also adds unit tests to the processAspectRatio function ensuring the style processing works as expected.

Changelog

[General] [Added] - Add string support for aspectRatio

Test Plan

This can be tested either through processAspectRatio-tests or by using the following code:

 <View
   style={{
     backgroundColor: '#527FE4', 
     aspectRatio: '16 / 9',
  }} /> 

https://user-images.githubusercontent.com/11707729/189029904-da1dc0a6-85de-46aa-8ec2-3567802c8719.mov

Merged On 23 Sep 2022 at 10:13:48

Necolas

Commented On 23 Sep 2022 at 10:13:48

Necolas

feat: Add string support for aspectRatio

Summary

This updates aspectRatio to support string values and ratio formats, i.e., '16 / 9', thus aligning it with the CSS Box Sizing Module Level 4 specification as requested on https://github.com/facebook/react-native/issues/34425. This also adds unit tests to the processAspectRatio function ensuring the style processing works as expected.

Changelog

[General] [Added] - Add string support for aspectRatio

Test Plan

This can be tested either through processAspectRatio-tests or by using the following code:

 <View
   style={{
     backgroundColor: '#527FE4', 
     aspectRatio: '16 / 9',
  }} /> 

https://user-images.githubusercontent.com/11707729/189029904-da1dc0a6-85de-46aa-8ec2-3567802c8719.mov

Forked On 23 Sep 2022 at 04:37:13

Necolas

`auto` can just do nothing since it's the default. And because there is no concept of a "replaced element" in RN, `auto <ratio>` should probably not be allowed. You can split on `/`, trim white space if needed, and parse the float
On 23 Sep 2022 at 04:37:13

Necolas

feat: Add string support for aspectRatio

Summary

This updates aspectRatio to support string values and ratio formats, i.e., '16 / 9', thus aligning it with the CSS Box Sizing Module Level 4 specification as requested on https://github.com/facebook/react-native/issues/34425. This also adds unit tests to the processAspectRatio function ensuring the style processing works as expected.

Changelog

[General] [Added] - Add string support for aspectRatio

Test Plan

This can be tested either through processAspectRatio-tests or by using the following code:

 <View
   style={{
     backgroundColor: '#527FE4', 
     aspectRatio: '16 / 9',
  }} /> 

https://user-images.githubusercontent.com/11707729/189029904-da1dc0a6-85de-46aa-8ec2-3567802c8719.mov

Merged On 23 Sep 2022 at 04:37:13

Necolas

Commented On 23 Sep 2022 at 04:37:13
Issue Comment

Necolas

How can I add a custom prefix to generated css classNames?

Is there an existing request?

  • [X] I have searched for this request

Describe the feature request

I've added a bundled module to the current project and it seems some classNames in the module are overridden onto the current project because that has the same name. So I need to add a prefix to the classNames in the current project

Forked On 23 Sep 2022 at 04:25:01

Necolas

I don't understand the request

Commented On 23 Sep 2022 at 04:25:01
Issue Comment

Necolas

Dimensions.get calls `change` listeners the first time

Is there an existing issue for this?

  • [X] I have searched the existing issues

Describe the issue

All change listeners on Dimensions are called on the first call to Dimensions.get, even though there hasn't been any dimension-related change that might trigger layout events.

Some libraries, notably react-native-popover-view, assume that dimension changes will result in onLayout being called for views, but because no layout has actually changed this will not happen.

Expected behavior

The one-time initialisation probably shouldn't be calling listeners when something is simply reading the dimensions.

This behaviour of RNW is inconsistent with RN, in my testing.

Steps to reproduce

let count = 0;
Dimensions.addEventListener('change', () => { ++count });
assert(count === 0);
Dimsensions.get('window');
assert(count === 1); 

Test case

https://codesandbox.io/s/nostalgic-microservice-du4zvs

Additional comments

I'd be happy to do a PR for this, I just wanted to report it in case there was some context about the behaviour that I may have missed, or if there is some nuance to discuss that I'm unaware of.

Forked On 23 Sep 2022 at 04:24:20

Necolas

Yeah maybe. Not much context was provided by the PR author

Commented On 23 Sep 2022 at 04:24:20
Issue Comment

Necolas

Dimensions.get calls `change` listeners the first time

Is there an existing issue for this?

  • [X] I have searched the existing issues

Describe the issue

All change listeners on Dimensions are called on the first call to Dimensions.get, even though there hasn't been any dimension-related change that might trigger layout events.

Some libraries, notably react-native-popover-view, assume that dimension changes will result in onLayout being called for views, but because no layout has actually changed this will not happen.

Expected behavior

The one-time initialisation probably shouldn't be calling listeners when something is simply reading the dimensions.

This behaviour of RNW is inconsistent with RN, in my testing.

Steps to reproduce

let count = 0;
Dimensions.addEventListener('change', () => { ++count });
assert(count === 0);
Dimsensions.get('window');
assert(count === 1); 

Test case

https://codesandbox.io/s/nostalgic-microservice-du4zvs

Additional comments

I'd be happy to do a PR for this, I just wanted to report it in case there was some context about the behaviour that I may have missed, or if there is some nuance to discuss that I'm unaware of.

Forked On 23 Sep 2022 at 05:40:21

Necolas

https://github.com/necolas/react-native-web/commit/59af091fdb4dd91118b105596a28c093426978b0

Commented On 23 Sep 2022 at 05:40:21

Necolas

feat : add aria labelled as alias for accessibilityLabelledBy

Summary

This adds the aria-labelledby prop to the components where it's used as requested on https://github.com/facebook/react-native/issues/34424, equivalent accessibilityLabelledBy

Changelog

[General] [Added] - Add aria-modal prop to basic component

TestPlan

  • Enable talkback.
  • Open the RNTester app and navigate to the Api's tab
  • Go to the TextInput with aria-labelledby attribute section

Forked On 20 Sep 2022 at 12:26:59

Necolas

Array of string isn't the web type. It would be comma separated IDs in a single string
On 20 Sep 2022 at 12:26:59

Necolas

feat : add aria labelled as alias for accessibilityLabelledBy

Summary

This adds the aria-labelledby prop to the components where it's used as requested on https://github.com/facebook/react-native/issues/34424, equivalent accessibilityLabelledBy

Changelog

[General] [Added] - Add aria-modal prop to basic component

TestPlan

  • Enable talkback.
  • Open the RNTester app and navigate to the Api's tab
  • Go to the TextInput with aria-labelledby attribute section

Merged On 20 Sep 2022 at 12:27:00

Necolas

Commented On 20 Sep 2022 at 12:27:00
Issue Comment

Necolas

feat: Add alt prop to Image component

Summary

This adds the alt prop to the Image component as requested on https://github.com/facebook/react-native/issues/34424. Using this new alt prop enables the accessibility prop and passes down the alt text to accessibilityLabel. This PR also updates RNTester ImageExample in order to facilitate the manual QA.

Open questions

  • ~~On web alt text is displayed on the page if the image can't be loaded for some reason, should we implement this same behavior if the Image component fails to load source?~~ Not for now

Changelog

[General] [Added] - Add alt prop to Image component

Test Plan

  1. Open the RNTester app and navigate to the Image page
  2. Test the alt prop through the Accessibility Label via alt prop section, this can be tested either by enabling Voice Over if you're using a real device or through the Accessibility Inspector if you're using a simulator

https://user-images.githubusercontent.com/11707729/187790249-0d851363-c30e-41b6-8c24-73e72467f4ba.mov

Forked On 20 Sep 2022 at 12:25:06

Necolas

The TS types are already out of sync with the Flow types, as they don't have props from the other merged Web PRs

Commented On 20 Sep 2022 at 12:25:06

Necolas

Daksh/add aria labelled by prop

Summary

This adds the aria-labelledby prop to the components where it's used as requested on https://github.com/facebook/react-native/issues/34424, equivalent accessibilityLabelledBy

Changelog

[General] [Added] - Add aria-modal prop to basic component

TestPlan

  • Enable talkback.
  • Open the RNTester app and navigate to the Api's tab
  • Go to the TextInput with aria-labelledby attribute section

Forked On 19 Sep 2022 at 04:35:11

Necolas

L174 is overriding this and some of the other props. The restProps stuff is a bit of a mess right now. Please could you fix that in this PR by moving all the prop extraction (including for accessibility value, state, etc) up to the block that is around L47. Then "otherProps" should be spread into the native component before all the specific accessibility props too. This is the kind of bug that snapshot tests could be detecting
On 19 Sep 2022 at 04:35:11

Necolas

Daksh/add aria labelled by prop

Summary

This adds the aria-labelledby prop to the components where it's used as requested on https://github.com/facebook/react-native/issues/34424, equivalent accessibilityLabelledBy

Changelog

[General] [Added] - Add aria-modal prop to basic component

TestPlan

  • Enable talkback.
  • Open the RNTester app and navigate to the Api's tab
  • Go to the TextInput with aria-labelledby attribute section

Merged On 19 Sep 2022 at 04:37:13

Necolas

Let's add unit test snapshots because a number of these new props look like they are being overridden by the "restProps".

This prop should also be added to TextInput, Image, and Text. If there's no support for the underlying prop in RN, just adding the types will be enough.

Commented On 19 Sep 2022 at 04:37:13

Necolas

Daksh/add aria labelled by prop

Summary

This adds the aria-labelledby prop to the components where it's used as requested on https://github.com/facebook/react-native/issues/34424, equivalent accessibilityLabelledBy

Changelog

[General] [Added] - Add aria-modal prop to basic component

TestPlan

  • Enable talkback.
  • Open the RNTester app and navigate to the Api's tab
  • Go to the TextInput with aria-labelledby attribute section

Merged On 19 Sep 2022 at 04:37:13

Necolas

Let's add unit test snapshots because a number of these new props look like they are being overridden by the "restProps".

This prop should also be added to TextInput, Image, and Text. If there's no support for the underlying prop in RN, just adding the types will be enough.

Commented On 19 Sep 2022 at 04:37:13

Necolas

fix: add mixed to aria-checked typings

Summary

aria-checked prop should accept mixed as value as given here and also accessibilityState.checked accepts mixed to represent checkboxes. This change refers to issue #34424 and PR https://github.com/facebook/react-native/pull/34524

Changelog

[General] [Added] - Added mixed value for aria-checked.

Test Plan

<TouchableOpacity
  accessibilityRole="checkbox"
  aria-checked="mixed"
  accessibilityHint="click me to change state">
  <Text>Checkbox example</Text>
</TouchableOpacity> 

Merged On 17 Sep 2022 at 07:40:12

Necolas

Commented On 17 Sep 2022 at 07:40:12
Issue Comment

Necolas

[w3c] ☂️ Web Props umbrella issue

Add support for Web props to core components

Contingent on RFC feedback. This is the umbrella issue for basic React DOM / Web props support on React Native components, as described in this proposal: "RFC: Reduce fragmentation across platforms".

Each of the tasks listed below can be tackled with individual PRs that link back to this issue. Not every task has a known solution or implementation yet, so feel free to discuss implementation details in the comments. Each new prop should take priority over any existing equivalents.

Common props

These props should be supported by core components, i.e., <Image>, <View>, <Text>, <TextInput>, etc.

Prop aliases

Accessibility State. https://github.com/facebook/react-native/pull/34524

Accessibility Value. https://github.com/facebook/react-native/pull/34535

Prop equivalents

  • [x] Add aria-hidden. https://github.com/facebook/react-native/pull/34552
  • [x] Add aria-live. https://github.com/facebook/react-native/pull/34555
  • [x] Add role. https://github.com/facebook/react-native/pull/34538#issuecomment-1232918518
    • [x] Alias for accessibilityRole but with full list of ARIA roles allowed.
    • [x] Map role='slider' to accessibilityRole='adjustable'
    • [x] Map role='img' to accessibilityRole='image'
    • [x] Map role='presentation' to accessibilityRole='none'
    • [x] Map role='summary' to accessibilityRole='region'
  • [x] Add tabIndex. https://github.com/facebook/react-native/pull/34486
    • [x] Only support for 0 and -1 values only.
    • [x] Map tabIndex={0} to focusable={true} (Android)
    • [x] Map tabIndex={-1} to focusable={false} (Android)

Example:

<View
  aria-hidden={true}
  aria-busy={false}
  aria-label="Accessibility label"
  aria-valuetext="Middle"
  id="native-id"
  role="slider"
  tabIndex={0}
>

// same as

<View
  accessibilityElementsHidden={true}
  accessibilityLabel="Accessibility label"
  accessibilityRole="adjustable"
  accessibilityState={{ busy: false }}
  accessibilityValue={{ text: "Middle" }}
  focusable={true}
  importantforAccessibility='no-hide-descendants'
  nativeId="native-id"
> 

<Image> props

These props should be supported by <Image>.

  • [ ] Add alt. https://github.com/facebook/react-native/pull/34550
    • [ ] Support alternative text support.
  • [x] Add tintColor prop to replace non-standard style.tintColor. The tintColor style is currently forwarded to a native prop and should instead be exposed as a prop so that React Native for Web does not have to deopt styles for Image rendering. https://github.com/facebook/react-native/pull/34534#issuecomment-1232902094

These props are inter-related:crossOrigin and referrerPolicy should only apply if src or srcSet are defined; and src should be ignored if a valid srcSet is defined. The user-provided source prop should be ignored if a valid src or srcSet prop is also defined.

https://github.com/facebook/react-native/pull/34481

  • [x] Add crossOrigin.
    • [x] Potentially map crossOrigin='use-credentials' to source.headers['Access-Control-Allow-Credentials'] = true.
  • [x] Add height.
  • [x] Add referrerPolicy.
    • [x] Potentially map referrerPolicy to source.headers['Referrer-Policy'] = referrerPolicy.
  • [x] Add src.
    • [x] Map src to source.uri.
  • [x] Add srcSet.
    • [x] Map srcSet='path1 x1, path1 x2' to source=[{ uri: path1, scale: 1 }, { uri: path2, scale: 2 }].
  • [x] Add width.

Example mapping to source:

const { crossOrigin, height, referrerPolicy, src, srcSet, width } = props;
let source = null;
if (src != null) {
  const headers = {};
  if (crossOrigin === 'use-credentials') {
    headers['Access-Control-Allow-Credentials'] = true;
  }
  if (referrerPolicy != null) {
    headers['Referrer-Policy'] = referrerPolicy;
  }
  nextProps.progressiveRenderingEnabled = true;
  source = { headers, height, uri: src, width };
}
if (srcSet != null) {
  source = [];
  const srcList = srcSet.split(', ');
  srcList.forEach((src) => {
    const [uri, xscale] = src.split(' ');
    const scale = parseInt(xscale.split('x')[0], 10);
    const headers = {};
    if (crossOrigin === 'use-credentials') {
      headers['Access-Control-Allow-Credentials'] = true;
    }
    if (referrerPolicy != null) {
      headers['Referrer-Policy'] = referrerPolicy;
    }
    source.push({ headers, height, scale, uri, width });
  });
} 

Example:

<Image
  alt="Alternative text"
  crossOrigin="use-credentials"
  height={300}
  referrerPolicy="origin"
  srcSet="https://image.png 1x, https://image2.png 2x"
  width={500}
>

// same as

<Image
  source={[
    {
      uri: "https://image.png",
      scale: 1,
      height: 300,
      headers: {
        'Access-Control-Allow-Credentials': true,
        'Referrer-Policy': 'origin'
      },
      width: 500
    }
    {
      uri: "https://image2.png",
      scale: 2,
      height: 300,
      headers: {
        'Access-Control-Allow-Credentials': true,
        'Referrer-Policy': 'origin'
      },
      width: 500
    }
  ]}
> 

<TextInput> props

These props should be supported by <TextInput>.

  • [x] Redefine autoComplete. https://github.com/facebook/react-native/pull/34523
  • [x] Add enterKeyHint. https://github.com/facebook/react-native/pull/34482
    • [x] Map to equivalent returnKeyType values.
    • [x] Map enterKeyHint === 'enter' to returnKeyType = 'default'
    • [x] Map enterKeyHint === 'done' to returnKeyType = 'done'
    • [x] Map enterKeyHint === 'go' to returnKeyType = 'go'
    • [x] Map enterKeyHint === 'next' to returnKeyType = 'next'
    • [x] Map enterKeyHint === 'previous' to returnKeyType = 'previous'
    • [x] Map enterKeyHint === 'search' to returnKeyType = 'search'
    • [x] Map enterKeyHint === 'send' to returnKeyType = 'send'
  • [x] Add inputMode. https://github.com/facebook/react-native/pull/34460
    • [x] Map to equivalent keyboardType values.
    • [x] Map inputMode === 'none' to keyboardType = 'none'
    • [x] Map inputMode === 'text' to keyboardType = 'text'
    • [x] Map inputMode === 'decimal' to keyboardType = 'decimal-pad'
    • [x] Map inputMode === 'email' to keyboardType = 'email-address'
    • [x] Map inputMode === 'numeric' to keyboardType = 'numeric'
    • [x] Map inputMode === 'search' to keyboardType = 'search'
    • [x] Map inputMode === 'tel'to keyboardType = 'phone-pad'
    • [x] Map inputMode === 'url' to keyboardType = 'url'
  • [x] Add readOnly. https://github.com/facebook/react-native/pull/34444
    • [x] Map readOnly={false} to editable={true}.
    • [x] Map readOnly={true} to editable={false}.
  • [x] Add rows (for multiline={true}). https://github.com/facebook/react-native/pull/34488

Example autoComplete mapping:

// https://reactnative.dev/docs/textinput#autocomplete-android
const autoCompleteAndroid = {
 // web: android
  'address-line1': 'postal-address-region',
  'address-line2': 'postal-address-locality',
  bday: 'birthdate-full',
  'bday-day': 'birthdate-day',
  'bday-month': 'birthdate-month',
  'bday-year': 'birthdate-year',
  'cc-csc': 'cc-csc',
  'cc-exp': 'cc-exp',
  'cc-exp-month': 'cc-exp-month',
  'cc-exp-year': 'cc-exp-year',
  'cc-number': 'cc-number',
  country: 'postal-address-country',
  'current-password': 'password',
  email: 'email',
  name: 'name',
  'additional-name': 'name-middle',
  'family-name': 'name-family',
  'given-name': 'name-given',
  'honorific-prefix': 'namePrefix',
  'honorific-suffix': 'nameSuffix',
  'new-password': 'password-new',
  off: 'off',
  'one-time-code': 'sms-otp',
  'postal-code': 'postal-code',
  sex: 'gender',
  'street-address': 'street-address',
  tel: 'tel',
  'tel-country-code': 'tel-country-code',
  'tel-national': 'tel-national',
  username: 'username'
};

// https://reactnative.dev/docs/textinput#textcontenttype-ios
const autoCompleteIOS = {
 // web: ios
  'address-line1': 'streetAddressLine1',
  'address-line2': 'streetAddressLine2',
  'cc-number': 'creditCardNumber',
  'current-password': 'password',
  country: 'countryName',
  email: 'emailAddress',
  name: 'name',
  'additional-name': 'middleName',
  'family-name': 'familyName',
  'given-name': 'givenName',
  nickname: 'nickname',
  'honorific-prefix': 'name-prefix',
  'honorific-suffix': 'name-suffix',
  'new-password': 'newPassword',
  off: 'none',
  'one-time-code': 'oneTimeCode',
  organization: 'organizationName',
  'organization-title': 'jobTitle',
  'postal-code': 'postalCode',
  'street-address': 'fullStreetAddress',
  tel: 'telephoneNumber',
  url: 'URL',
  username: 'username'
}; 

Examples:

<TextArea
  autoComplete="email"
  inputMode="email"
/>

// same as

<TextArea
  autoComplete="email"
  keyboardType="email-address"
  textContentType="emailAddress"
/> 
<TextArea
  multiline
  readOnly={true}
  rows={3}
/>

// same as

<TextArea
  editable={false}
  multiline
  numberOfLines={3}
/> 

Documentation

  • [ ] Update react-native-website docs to include all these props. @gabrieldonadel has several PRs open for individual props, which we may want to consolidate into a single PR and add remaining props, so it can be merged in one commit.

Forked On 17 Sep 2022 at 07:06:08

Necolas

Good idea

Commented On 17 Sep 2022 at 07:06:08

Necolas

feat: Add alt prop to Image component

Summary

This adds the alt prop to the Image component as requested on https://github.com/facebook/react-native/issues/34424. Using this new alt prop enables the accessibility prop and passes down the alt text to accessibilityLabel. This PR also updates RNTester ImageExample in order to facilitate the manual QA.

Open questions

  • ~~On web alt text is displayed on the page if the image can't be loaded for some reason, should we implement this same behavior if the Image component fails to load source?~~ Not for now

Changelog

[General] [Added] - Add alt prop to Image component

Test Plan

  1. Open the RNTester app and navigate to the Image page
  2. Test the alt prop through the Accessibility Label via alt prop section, this can be tested either by enabling Voice Over if you're using a real device or through the Accessibility Inspector if you're using a simulator

https://user-images.githubusercontent.com/11707729/187790249-0d851363-c30e-41b6-8c24-73e72467f4ba.mov

Merged On 16 Sep 2022 at 04:44:39

Necolas

Commented On 16 Sep 2022 at 04:44:39