React Native Basics (Part 5): Components, Props, and State

Introduction

React Native allows you to build mobile apps using components, props, and state. Let’s explore these basic concepts to kickstart your journey.

1. Basic Components in React Native

React Native provides several basic components to create the UI of your mobile app. Here are a few essential ones:

1.1. View

• The most fundamental component for building the layout of your app.
• Works like a div in HTML, used to contain other components and arrange them.

Example:

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

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.box} />
    </View>
  );
}

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

1.2. Text

• Used to display text in the app.

Example:

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

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

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

1.3. Button

• A simple button that you can press.

Example:

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

export default function App() {
  return (
    <View style={styles.container}>
      <Button title="Press Me" onPress={() => alert("Button Pressed!")} />
    </View>
  );
}

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

1.4. TextInput

• Used to accept text input from the user.

Example:

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

export default function App() {
  const [text, setText] = useState("");

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  input: {
    height: 40,
    borderColor: "gray",
    borderWidth: 1,
    width: 200,
    marginBottom: 10,
    paddingHorizontal: 5,
  },
});

2. Understanding Props

Props are how components talk to each other. They are like function arguments, providing a way to pass data from a parent component to a child component.

Example:

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

function Greeting(props) {
  return <Text>Hello, {props.name}!</Text>;
}

export default function App() {
  return (
    <View style={styles.container}>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </View>
  );
}

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

Code Explanation

• Greeting: A custom component that accepts a name prop and displays a greeting message.
• props.name: Accesses the name prop passed to the Greeting component.

3. Using State

State is a way to store and manage data in a component. When the state changes, the component re-renders to reflect the new data.

Example:

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

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text>You clicked {count} times</Text>
      <Button title="Click Me" onPress={() => setCount(count + 1)} />
    </View>
  );
}

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

Code Explanation

• useState: A React Hook used to declare a state variable (count) and a function to update it (setCount).
• count: The current state value.
• setCount: A function to update the count state.
• When the button is pressed, setCount updates the state, causing the component to re-render and display the new count.

Summary

• Components: Building blocks of a React Native app (e.g., View, Text, Button, TextInput).
• Props: Used to pass data to components, making them reusable and customizable.
• State: Allows components to hold and manage data, updating the UI when the data changes.

Next Steps

• Experiment with more components like ScrollView, FlatList, and Image.
• Explore how to style components with StyleSheet to create more complex layouts.
• Learn about component lifecycle methods and hooks for advanced state management.

This guide provides a foundation for understanding how React Native apps are built using components, props, and state. From here, you can start building more interactive and complex mobile applications.