CODEWITHSUNDEEP
javascriptreactjsreact-nativeviewstyles
user17674027
user17674027

Reputation: 1

Why are views not displayed in react-native?

I am learning react-native and am very new to it. So, when I was learning to use flexbox, I ran into an issue. The issue was, the views are not being displayed when inside another view. My code =

import React from "react";
import { View, StyleSheet } from "react-native";

class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View backgroundColor="red" />
        <View backgroundColor="blue" />
        <View backgroundColor="green" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});

export default App;

If you run this program, you will get a blank screen. I don't know why this is happening, and I also want to know how to fix it. By the way, I am running it in Iphone 11 simulator

Upvotes: 0

Views: 1467

Answers (1)

yesIamFaded
yesIamFaded

Reputation: 2068

You have set BackgroundColor directly to the View which is not possible. It has to be in the "Style" param. Also you have no height and width set to the View.

You can either do it inside the View directly like this:

<View style={{ backgroundColor: "red", height: 20, width: "100%"}} />

or create a new Style in your StyleSheet and then pass that to the View.

Upvotes: 3

Related Questions