The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Text, View, and Image

Next ►
►

In this section, we will explore three fundamental components in React Native: Text, View, and Image. These components are the building blocks for creating user interfaces in React Native applications.

Text Component

The Text component is used to display text in your application. It supports various styling options to customize the appearance of the text.

Basic Usage

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

const App = () => {
  return (
    <View>
      <Text>Hello, World!</Text>
    </View>
  );
};

export default App;

Styling Text

You can style the Text component using the style prop.

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, World!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
    color: 'blue',
  },
});

export default App;

Practical Exercise

Task: Create a Text component that displays your name and style it with a larger font size and a different color.

Solution:

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Your Name</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 30,
    color: 'green',
  },
});

export default App;

View Component

The View component is a container that supports layout with flexbox, style, touch handling, and accessibility controls. It is the most fundamental component for building a UI.

Basic Usage

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

const App = () => {
  return (
    <View>
      <Text>Hello, World!</Text>
    </View>
  );
};

export default App;

Nested Views

You can nest View components to create complex layouts.

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

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <Text>Box 1</Text>
      </View>
      <View style={styles.box}>
        <Text>Box 2</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'lightgray',
    justifyContent: 'center',
    alignItems: 'center',
    margin: 10,
  },
});

export default App;

Practical Exercise

Task: Create a layout with three nested View components, each containing a Text component with different background colors.

Solution:

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

const App = () => {
  return (
    <View style={styles.container}>
      <View style={[styles.box, { backgroundColor: 'red' }]}>
        <Text>Box 1</Text>
      </View>
      <View style={[styles.box, { backgroundColor: 'green' }]}>
        <Text>Box 2</Text>
      </View>
      <View style={[styles.box, { backgroundColor: 'blue' }]}>
        <Text>Box 3</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 100,
    height: 100,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 10,
  },
});

export default App;

Image Component

The Image component is used to display images in your application. It supports various image formats and can be styled similarly to other components.

Basic Usage

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

const App = () => {
  return (
    <View>
      <Image
        source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
        style={{ width: 50, height: 50 }}
      />
    </View>
  );
};

export default App;

Local Images

To use local images, you need to import them first.

import React from 'react';
import { View, Image } from 'react-native';
import logo from './assets/logo.png'; // Ensure you have an image at this path

const App = () => {
  return (
    <View>
      <Image
        source={logo}
        style={{ width: 100, height: 100 }}
      />
    </View>
  );
};

export default App;

Practical Exercise

Task: Display an image from a URL and style it with a border and some padding.

Solution:

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

const App = () => {
  return (
    <View style={styles.container}>
      <Image
        source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
        style={styles.image}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: 100,
    height: 100,
    borderWidth: 2,
    borderColor: 'black',
    padding: 10,
  },
});

export default App;

Conclusion

In this section, we covered the basics of the Text, View, and Image components in React Native. These components are essential for building user interfaces. We learned how to use and style these components, and we practiced creating layouts with nested views and displaying images. In the next section, we will dive into styling with Flexbox to create more complex and responsive layouts.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved