Creating 'Div' and 'Span' Components in React Native

Question

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>
  }
}

Solution 1

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.

Solution 2

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

Comments

[Lost In Space]

Or someone could help me define a component that solves my problem. I am not interested in the philosophical underpinnings of react native and why it is so wonderful. I just want to solve my specific porting problem. If after porting the user experience is not right then i have a working code base to modify.

[Lost In Space]

div and span are bare bones dom elements. What I am trying to do is to figure out what defaults i need to add/remove from 'view' to make them behave like these generic containers or something close enough to provide a working prototype for improvement. This is not a dom specific request even though it appears as such it is a mapping of empty container defaults to new container defaults request.

[Lost In Space]

thanks for the reference. I gave up on react native directly because of @nbkhope's drink the kool aid answer. React native is the epitome of passing off (in copyright terms) as something React compatible. React is a very decent platform with some very good ideas (some that still need a bit of polishing as well).

[vasilevich]

this should not be an answer as it does not answer the OP question directly. if you wish to share your opinion leave a comment. this is not the place for unaccompanied opinions which are not followed by any useful answers.