View component in React Native

Introduction

The View component is like a box that holds other things on the screen. It helps organize and arrange parts of your app visually.

To group buttons and text together in one area.

To create sections or containers in your app layout.

To add background colors or borders around parts of the screen.

To control spacing and alignment of items inside the app.

To build complex layouts by nesting multiple Views.

Syntax

React Native

import { View } from 'react-native';

export default function Example() {
  return (
    <View style={{ width: 100, height: 100, backgroundColor: 'blue' }}>
      {/* Child components go here */}
    </View>
  );
}

The component can contain other components like Text, Image, or even other Views.

Use the style prop to control size, color, layout, and spacing.

Examples

This View adds padding and a background color around the text.

React Native

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

export default function Example() {
  return (
    <View style={{ padding: 10, backgroundColor: 'lightgray' }}>
      <Text>Hello inside a View!</Text>
    </View>
  );
}

This View arranges two texts side by side with space between them.

React Native

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

export default function Example() {
  return (
    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
      <Text>Left</Text>
      <Text>Right</Text>
    </View>
  );
}

Sample App

This app shows two colored boxes stacked vertically in the center. Each box uses a View to create a colored area with centered text inside.

React Native

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

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <Text style={styles.text}>Box 1</Text>
      </View>
      <View style={[styles.box, styles.box2]}>
        <Text style={styles.text}>Box 2</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0'
  },
  box: {
    width: 150,
    height: 150,
    backgroundColor: 'skyblue',
    justifyContent: 'center',
    alignItems: 'center',
    margin: 10
  },
  box2: {
    backgroundColor: 'steelblue'
  },
  text: {
    color: 'white',
    fontSize: 18
  }
});

Important Notes

View is the most basic building block for layout in React Native.

Use flexbox styles on View to control layout direction and alignment.

Always give Views a size or flex value to make them visible.

Summary

The View component is a container for layout and styling.

It can hold other components and arrange them visually.

Use style props to control size, color, and layout inside Views.

Practice

1. What is the primary purpose of the View component in React Native?

easy

A. To act as a container for layout and styling

B. To display text content

C. To handle user input events

D. To fetch data from the internet

Solution

1. Step 1: Understand the role of View

   The View component is designed to hold other components and arrange them visually.

2. Step 2: Differentiate from other components

   Text displays text, input handles user input, and data fetching is done elsewhere, not by View.

3. Final Answer:

   To act as a container for layout and styling -> Option A

4. Quick Check:

   View = container for layout [OK]

Hint: View is like a box to hold and arrange items [OK]

Common Mistakes:

• Confusing View with Text component
• Thinking View handles user input directly
• Assuming View fetches data

2. Which of the following is the correct way to create a View with a red background in React Native?

easy

A.

B.

C.

D.

Solution

1. Step 1: Check React Native style syntax

   React Native uses a style prop with an object, e.g., style={{backgroundColor: 'red'}}.

2. Step 2: Identify incorrect syntax

   Props like bgColor or background are not valid; style as string is invalid in React Native.

3. Final Answer:

   <View style={{backgroundColor: 'red'}}></View> -> Option C

4. Quick Check:

   Use style={{backgroundColor: 'color'}} [OK]

Hint: Use style={{backgroundColor: 'color'}} for colors [OK]

Common Mistakes:

• Using HTML style string instead of object
• Using invalid props like bgColor
• Forgetting double curly braces for style

3. What will be the visible result of this code?

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

export default function App() {
  return (
    
      One
      Two
      Three
    
  );
}

medium

A. The texts appear stacked vertically

B. The texts 'One', 'Two', 'Three' appear side by side horizontally

C. Only 'One' is visible

D. The app crashes due to syntax error

Solution

1. Step 1: Understand flexDirection in View

   Setting flexDirection to 'row' arranges children horizontally in a row.

2. Step 2: Check children components

   Three Text components will appear side by side: 'One', 'Two', 'Three'.

3. Final Answer:

   The texts 'One', 'Two', 'Three' appear side by side horizontally -> Option B

4. Quick Check:

   flexDirection: 'row' = horizontal layout [OK]

Hint: flexDirection: 'row' arranges children horizontally [OK]

Common Mistakes:

• Assuming default vertical stacking
• Confusing flexDirection values
• Thinking only one child shows

4. Identify the error in this React Native code snippet:

return (
  
    First
    Second
    Third
  
  Outside
);

medium

A. Multiple root elements without a wrapper

B. Invalid style property 'flexDirection'

C. Text components cannot be children of View

D. Missing import for Text component

Solution

1. Step 1: Check JSX root elements

   JSX must return a single root element; here, View and Text are siblings without a wrapper.

2. Step 2: Validate style and imports

   flexDirection: 'column' is valid; Text inside View is allowed; assume imports are correct.

3. Final Answer:

   Multiple root elements without a wrapper -> Option A

4. Quick Check:

   JSX needs one root element [OK]

Hint: Wrap siblings in one parent View or Fragment [OK]

Common Mistakes:

• Trying to return multiple root elements
• Misunderstanding flexDirection usage
• Assuming Text can't be inside View

5. You want to create a View that fills the entire screen and centers its child Text both vertically and horizontally. Which style object achieves this?

hard

A. {flexGrow: 0, justifyContent: 'flex-start', alignItems: 'flex-start'}

B. {width: '100%', height: '100%', textAlign: 'center'}

C. {position: 'absolute', top: 0, left: 0}

D. {flex: 1, justifyContent: 'center', alignItems: 'center'}

Solution

1. Step 1: Make View fill screen

   Using flex: 1 makes the View expand to fill available space.

2. Step 2: Center children vertically and horizontally

   justifyContent: 'center' centers vertically; alignItems: 'center' centers horizontally.

3. Final Answer:

   {flex: 1, justifyContent: 'center', alignItems: 'center'} -> Option D

4. Quick Check:

   flex:1 + justifyContent + alignItems centers content [OK]

Hint: Use flex:1 with justifyContent and alignItems center [OK]

Common Mistakes:

• Using textAlign on View instead of Text
• Not setting flex to fill space
• Using position absolute without centering