Remove component prop

[necolas]

Problem

The component prop is a very web-specific feature and hole in the abstractions. When I first implemented View and Text in a mobile codebase at Twitter, this prop got badly named element because it was intended to set the HTML tag name of the resulting DOM node. It was adapted to support components and allow this kind of basic pattern:

import { Link } from 'react-router'

const MyComponent = () => <Text component={Link} to="/" size="large">Home</Text>

The idea of setting the HTML tag name was carried over to this implementation. But after implementing the core accessibility props – accessible, accessibilityLabel, and the introduction of accessibilityRole – and writing some components, I found myself either not using component in favour of the more semantic accessibilityRole, or setting them both to the same value.

Solution

@sebmarkbage and @vjeux have been tweeting related thoughts the last few days (e.g., https://twitter.com/sebmarkbage/status/646770556642045952) and Chrome's native elements have long been making heavy use of ARIA in their shadow dom implementation.

So dropping component fixes the above problems. The accessibility props can be used to provide rich semantics and accessibility annotations. We can also map the role to an HTML element (<View accessibilityRole="main" /> => <main role='main' />) to provide improved legacy support for AT like JAWS.