"id" attribute of View component disappear in Browser's Dom

[cloudle]

The problem
"id" attribute of View element was lost in Browser's DOM - since react-native-web@0.8.0.

How to reproduce

Simplified test case: https://codesandbox.io/s/xjpnqj2l4o

Steps to reproduce:

1. Inspect the result in inspection tool (e.g Chrome)
2. Select the RED box - which include the text "Hey, just text!"

Expected behavior
The RED box should have attribute id="should-exist-in-dom" in Browser's DOM - but it won't.

Environment (include versions). Did this work in previous versions?
Still work fine in @0.7.3 and older one.. in that codesandbox example - change react-native-web version back to @0.7.3 (package.json) will fix that, and we'll see id="should-exist-in-dom" as we should.

• React Native for Web (version): 0.8.0 and up
• React (version): 16.4.0
• Browser: Chrome, Safari (I guess other one too, but not verifed yet)

[necolas]

That's not supported anymore. The release notes for 0.8.0 describe the change

[cloudle]

@necolas thanks for the info.. couldn't we just add "id" to the whitelist?

I think it is an important attribute and we'll need that to play well with legacy Web library from our react-native-web website.

[necolas]

How are you using id?

[cloudle]

I made web-based application using react-native-web (with server-side-rendering), like this.

There will be chance that we need to mark an element with the id attribute and use it in hybrid with legacy javascript library..
And sometime, on server side stuffs, e.g. crawling bot may expect that our site have element marked by id instead of class.

A quick example, when I'm trying to add particles.js to one of the site.. particle.js is using id internally (document.getElementById) to select the element we want to apply the particle effect to.

in this particular case, we could make pull request to the library which add support for class - cause it quite simple, but I belive we can't always do that.

[necolas]

You can set native attributes using the setNativeProps API, or use <div>, or use the createElement API. I don't think bots have any real expectations about id.

For your use case I think you can create a separate component that doesn't use RNW and uses div to bind your particle library. Then you can import that into RN components without directly leaking DOM details.

One area I think id could be useful is in use with certain aria properties, but usually accessibilityLabel is sufficient.

[cloudle]

@necolas yep, you convinced me.
at first - it seem inconvenient when couldn't just use id directly like I could - but after a while I agree that I didn't really need that like I thought.

Thanks for your great work ;)

[GuillaumeSarfati]

Hello guys !!!! it's useful for anchor link ;)

[necolas]

There's nativeID. It's in the docs