The <App /> component consists of three blocks. Each already has its own color and width.
For some reason, these blocks are not displayed.
This is most likely due to the fact that neither a height nor a flex property is specified.
Let’s fix this situation.
The second block should be twice the height of the first, the third three.

This task is part of the Full-Stack JavaScript Course
If you have any issues with it, you can ask for community help below the post
Feel free to help others if you’ve already solved the task

App.js

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

const { width } = Dimensions.get('window');

export default function App() {
  return (
    <View style={styles.container}>
      <View style={{ backgroundColor: '#5B37B6', width: 0.2 * width }} />
      <View style={{ backgroundColor: '#C8379D', width: 0.4 * width }} />
      <View style={{ backgroundColor: '#E39A28', width: 0.6 * width }} />
    </View>
  );
}

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

app.json

{
  "expo": {
    "name": "1",
    "slug": "1",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}