The Project | About Us | Contribute | Donations | License

HOME

In this section, we will explore the core components of React Native. These components are the building blocks for creating a React Native application. Understanding these components is crucial as they form the foundation upon which more complex components and applications are built.

Key Concepts

Core Components: The essential UI elements provided by React Native.
Props: Properties that can be passed to components to customize their appearance and behavior.
State: A way to manage dynamic data within a component.

Core Components

View

The View component is a fundamental building block for UI in React Native. It is a container that supports layout with Flexbox, style, touch handling, and accessibility controls.

Example:

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

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

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

export default App;

Explanation:

View is used as a container for the Text component.
StyleSheet.create is used to define styles for the View.

Text

The Text component is used to display text in your application.

Example:

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

const App = () => {
  return (
    <View>
      <Text>Hello, World!</Text>
      <Text style={{ fontWeight: 'bold' }}>Bold Text</Text>
    </View>
  );
};

export default App;

Explanation:

Text components are used to display different pieces of text.
Inline styles can be applied directly to the Text component.

Image

The Image component is used to display images.

Example:

import React from 'react';
import { Image, View, 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: 50,
    height: 50,
  },
});

export default App;

Explanation:

Image component is used to display an image from a URL.
Styles are applied to set the width and height of the image.

Button

The Button component is a basic button that can be pressed to trigger an action.

Example:

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

const App = () => {
  return (
    <View style={{ marginTop: 50 }}>
      <Button
        title="Press Me"
        onPress={() => Alert.alert('Button Pressed!')}
      />
    </View>
  );
};

export default App;

Explanation:

Button component is used to create a clickable button.
onPress prop is used to handle button press events.

TextInput

The TextInput component is used to accept user input.

Example:

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

const App = () => {
  const [text, setText] = useState('');

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Type here"
        onChangeText={text => setText(text)}
        value={text}
      />
      <Text>You typed: {text}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 20,
    paddingLeft: 10,
  },
});

export default App;

Explanation:

TextInput component is used to create an input field.
onChangeText prop is used to handle text changes.
value prop is used to control the input value.

Practical Exercise

Exercise: Create a Simple Profile Card

Create a simple profile card using the core components View, Text, Image, and Button.

Solution:

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

const ProfileCard = () => {
  return (
    <View style={styles.card}>
      <Image
        source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
        style={styles.image}
      />
      <Text style={styles.name}>John Doe</Text>
      <Text style={styles.bio}>Software Developer at XYZ Company</Text>
      <Button
        title="Follow"
        onPress={() => Alert.alert('Followed!')}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    padding: 20,
    borderRadius: 10,
    backgroundColor: '#fff',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOpacity: 0.2,
    shadowRadius: 10,
    elevation: 5,
  },
  image: {
    width: 100,
    height: 100,
    borderRadius: 50,
    marginBottom: 10,
  },
  name: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 5,
  },
  bio: {
    fontSize: 14,
    color: 'gray',
    marginBottom: 10,
    textAlign: 'center',
  },
});

export default ProfileCard;

Explanation:

View is used as the container for the profile card.
Image displays the profile picture.
Text components display the name and bio.
Button allows the user to follow the profile.

Summary

In this section, we covered the core components of React Native, including View, Text, Image, Button, and TextInput. These components are essential for building any React Native application. We also provided practical examples and an exercise to reinforce the concepts. Understanding these core components will enable you to create more complex and interactive applications as you progress through the course.

Core Components Overview

Key Concepts

Core Components

View

Text

Image

Button

TextInput

Practical Exercise

Summary

React Native Course

Module 1: Introduction to React Native

Module 2: Core Components and Styling

Module 3: State and Lifecycle

Module 4: Navigation

Module 5: Networking and Data

Module 6: Advanced Concepts

Module 7: Deployment and Publishing

Module 8: Real-World Projects