⚛️ React Native Functional Components

? Quick Overview

Functional Components are the modern and recommended way to create UI components in React Native. They are simple JavaScript functions that return JSX and can use React Hooks for state and lifecycle features.

? Key Concepts

• Written as JavaScript functions
• Return JSX UI
• Use Hooks like useState and useEffect
• No this keyword
• Easy to read and test

? Syntax / Theory

A functional component is a normal JavaScript function that returns JSX. It can accept props as parameters.

// Basic functional component syntax
function MyComponent() {
return (
<Text>Hello World</Text>
);
}

? Code Example(s)

// Functional component with props
import React from "react";
import { Text, View } from "react-native";

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

export default Greeting;

? Live Output / Explanation

This component displays a greeting message using props. When you pass name="Meghraj", it will render:

Hello, Meghraj!

? Interactive Example

Below is the code for a Counter. Underneath the code block, try the Live Simulator to see how useState works in real-time!

// Interactive counter using useState hook
import React, { useState } from "react";
import { Text, Button, View } from "react-native";

function Counter() {
// Initialize state variable 'count' with 0
const [count, setCount] = useState(0);

return (
<View>
<Text>Count: {count}</Text>
<Button title="Increase" onPress={() => setCount(count + 1)} />
</View>
);
}

export default Counter;

? Live Simulator

? Use Cases

• Reusable UI components
• Handling user interactions
• Displaying dynamic data
• Creating screens and layouts