Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
  }
}
like image 531
Lost In Space Avatar asked Aug 18 '17 16:08

Lost In Space


People also ask

How do I create a div in React Native?

create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); ...you should get familiar with the components that are already built in. You are able to extend react native to support those tags but it is wierd to do so.

Will div work in React Native?

No, you cannot use the <div> element inside a react native component because React Native does not have a DOM.

What can I use instead of a div in React Native?

View is the most common element in React Native. You can consider it as an equivalent of the div element used in web development.


1 Answers

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

like image 199
Kris Randall Avatar answered Sep 30 '22 11:09

Kris Randall