I have seen in various forums claims that using "View" in React Native is a quasi equivalent of using a 'div' in React.

While I understand the reasoning for the View component (who wants to support all of the 'div' options?) it seems that a component that can handle most of the reasonable 'div' and 'span' attributes could be made so that porting React to React native is not such tedious chore.

Does anyone have such components that they have tested and can share? All the issues about style support, mapping event and mapping children seem to be repetitive for nearly everyone jumping into React Native.

Something like

class Div extends Component {  //or Class Span extends Component

  static propTypes = {
    style : PropTypes.obj
    onClick : PropTypes.func   // ...
  }

  render (){
    return (
      <View>
      {
        /* whatever is needed to pass everything through  ... */
      }
      </View>
  }
}

I have seen in various forums claims that using "View" in React Native is a quasi equivalent of using a 'div' in React.

While I understand the reasoning for the View component (who wants to support all of the 'div' options?) it seems that a component that can handle most of the reasonable 'div' and 'span' attributes could be made so that porting React to React native is not such tedious chore.

Does anyone have such components that they have tested and can share? All the issues about style support, mapping event and mapping children seem to be repetitive for nearly everyone jumping into React Native.

Something like

class Div extends Component {  //or Class Span extends Component

  static propTypes = {
    style : PropTypes.obj
    onClick : PropTypes.func   // ...
  }

  render (){
    return (
      <View>
      {
        /* whatever is needed to pass everything through  ... */
      }
      </View>
  }
}

• javascript
• html
• reactjs
• dom
• react-native

2 Answers 2

I think you are missing the point of React Native. It is meant to have components that map to the native UI components of the mobile platform. It is not meant to be something that takes HTML and somehow converts it into something that looks like a mobile app. That is why it is called "Native" -- because it actually uses the UI from the platform. If you feel like using common HTML elements to make a mobile app, then why don't you just stick with frameworks like Cordova/Ionic, etc?

React is now like an idiom that allows you to build a user interface no matter the device. React Native merely takes that React "idiom" and knows how to render it on the mobile screen. So there's no such thing as "porting React to React Native."

If you wish to experiment, yes you can make a custom Div component and a custom Span component -- that is up to you. You can just pass the props down from that component down to a View or a Text. But I think that would be redundant. Usually you would create your own components and behind the scenes would use View and Text and TextInput, etc -- all the basic components of React Native.

While I agree 100% with the answer of @nbkhope, I see that the answer @LostInSpace is looking for is a drop in replacement for an HTML <div>

This appears to be such a thing : https://www.npmjs.com/package/react-native-div