How to add div to React Native?

user_13835124 0
Viewed 4154

I've just started my react native app and having some troubles. I have some experience with react but that doesnt seem to be helping much. The div surrounding the Text is meant to be my app header so Im trying to style it but for some reason it throws an error saying is NOT recognised?

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Header from './components/Header';


class App extends React.Component {

return (
  <View style={styles.container}>
    
    <div>
    <Text>HELLO WORLD</Text>
    </div>
    
    
    <StatusBar style='auto' />
  </View>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

Thanks

reactjs html javascript
4 Answers

React Native and React are related in their structure and logic, but the tags that you use will be different. The div tag on React Native is the View Component.

Instead of using: <div>Test</div>

You should use <View><Text>Test<Text/></View>

And some others:

<button> will be <Button>
<input> will be <Input>
<form> does not exist, you should use <View>
<ul><li>Test Item</li></ul> you should use <Flatlist /> or a [].map
user_116386840

divs don't exist in react-native. You should use View instead.

user_110984710

Like so but...

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Header from './components/Header';

const App = () => {
  return (
    <View style={styles.container}>
      <div>
       <Text>HELLO WORLD</Text>
      </div>   
      <StatusBar style='auto' />
    </View>
  );
}

export default App;

const div = (props) => {
  return (
    <View>{props.children}</View>
  );
}

const styles = StyleSheet.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.

user_7755160

You couldn't use html element inside react native. You may be use react-native-webview to load html

user_20242190
Related