CODEWITHSUNDEEP
javascriptreactjsreact-native
user10883635
user10883635

Reputation:

How to use View just like div tag in Web Project

Surly, in web project it is very obvious to use div like following:

<div>
  sample text
</div>

But, it is cause to error in React Native:

<View>
  sample text
</View>

How I can modify or wrap or anything else to use View like div?

Upvotes: 2

Views: 224

Answers (2)

dentemm
dentemm

Reputation: 6379

You can compare a div indeed to a View, but there is a restriction that strings can only be displayed within a Text tag. 

<View>
  <Text>sample text</Text>
</View>

Upvotes: 0

Andrew
Andrew

Reputation: 28539

As I am sure you have already discovered you cannot use <div> inside react-native. You have to use components that you construct from <View> and <Text>

If you want to display text on the screen then it must be wrapped inside Text tags.

So you could do something like this and it would display your text on the screen. 

<View>
   <Text>sample text</Text>
</View>

Take a look at the documentation for react-native. They have many good examples https://facebook.github.io/react-native/

On their first page they show how to construct a simple component

import React, {Component} from 'react';
import {Text, View} from 'react-native';

class HelloReactNative extends Component {
  render() {
    return (
      <View>
        <Text>
          If you like React, you'll also like React Native.
        </Text>
        <Text>
          Instead of 'div' and 'span', you'll use native components
          like 'View' and 'Text'.
        </Text>
      </View>
    );
  }
}

The rest of their documentation is full of useful examples on how to set up and make your own components.

For a break down on some of the differences between React and React-Native see https://medium.com/appnroll-publication/switch-between-react-and-react-native-548267e1348a

Upvotes: 2

Related Questions