CODEWITHSUNDEEP
reactjsreact-native
Ghulam Asghar Dahri
Ghulam Asghar Dahri

Reputation: 55

does View in react native work same as Div in HTML?

I want to render multiple element with different styles but View and child View is not working as div working in html. please guide or share some resources to learn how multiple View work in a return.

import React from 'react'
import { Button, StyleSheet, Text, View,ScrollView } from 'react-native';
export default function Home() {
    return (
        <View>
 
            <View style={styles.container}>
              <Text >
                Books are the best Mentors
              </Text>
            </View>
            <View>
            <Text style={{backgroundColor:'red'}} >
                Books are the best Mentors
            </Text>
            </View>
        </View>
          );
        };
        
    

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

Upvotes: 2

Views: 3218

Answers (1)

AndreyProgr
AndreyProgr

Reputation: 672

TL;DR <div> is not the same as <View>

It looks like the possible issue here is that <div> have different default styling, and you should always remember about this. For example the default value for flexDirection in RN is column, not row like we have with <div>s.

Even though the official RN documentation about View tells us this:

View maps directly to the native view equivalent on whatever platform React Native is running on, whether that is a UIView, <div>, android.view, etc.

We should always keep in mind the specifics of the particular platform we work with.

I would also recommend you to check out this tutorial regarding Flex styling in React Native to get better experience working with it.

Upvotes: 5

Related Questions