Functional components are JavaScript functions that return React Native UI. They are the most common way to create components in modern React Native applications.
View, Text, Image,
Pressable and other components.
A functional component is a JavaScript function that returns a React element.
function Welcome() {
return (
<Text>
Welcome to React Native
</Text>
);
}
Here, Welcome is a functional component.
import React from 'react';
import {
View,
Text
} from 'react-native';The React Native components required by the functional component must be imported.
function App() {
return (
<View>
<Text>
Hello React Native
</Text>
</View>
);
}
The component returns a View containing a
Text component.
A component can be exported so it can be imported and used in another file.
export default function App() {
return (
<Text>
Hello
</Text>
);
}function Greeting() {
return (
<Text>
Welcome
</Text>
);
}
export default function App() {
return (
<View>
<Greeting />
</View>
);
}
The Greeting component is rendered using
<Greeting />.
function WelcomeMessage() {
return (
<Text>
Welcome to our mobile application.
</Text>
);
}Functional components can be used to create small reusable UI elements.
function Profile() {
return (
<View>
<Text>
Student Profile
</Text>
<Text>
React Native Student
</Text>
</View>
);
}A functional component can contain multiple React Native components.
import {
View,
Text,
StyleSheet
} from 'react-native';
function Welcome() {
return (
<View style={styles.container}>
<Text style={styles.title}>
Welcome
</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
padding: 20
},
title: {
fontSize: 24,
fontWeight: 'bold'
}
});Props allow a functional component to receive data from its parent.
function Greeting({ name }) {
return (
<Text>
Hello {name}
</Text>
);
}
<Greeting name="Rahul" />function Student({
name,
course
}) {
return (
<View>
<Text>
Name: {name}
</Text>
<Text>
Course: {course}
</Text>
</View>
);
}
<Student
name="Rahul"
course="React Native"
/>A component can receive multiple props.
A default value can be provided using JavaScript default parameters.
function Greeting({
name = 'Student'
}) {
return (
<Text>
Hello {name}
</Text>
);
}
<Greeting />
If no name is provided, the component uses
Student.
function ProfileImage() {
return (
<Image
source={require('./assets/user.jpg')}
style={{
width: 100,
height: 100,
borderRadius: 50
}}
/>
);
}A functional component can encapsulate image display and styling.
function LoginButton() {
return (
<Pressable
onPress={() =>
console.log('Login')
}
>
<Text>
Login
</Text>
</Pressable>
);
}Functional components can contain interactive elements.
function SubmitButton() {
const handlePress = () => {
console.log(
'Submitted'
);
};
return (
<Pressable
onPress={handlePress}
>
<Text>
Submit
</Text>
</Pressable>
);
}Event handler functions can be defined inside functional components.
Functional components can use the useState hook to
manage changing data.
import React, {
useState
} from 'react';
function Counter() {
const [count, setCount] =
useState(0);
return (
<View>
<Text>
Count: {count}
</Text>
<Button
title="Increase"
onPress={() =>
setCount(count + 1)
}
/>
</View>
);
}
The useEffect hook can perform side effects in a
functional component.
import React, {
useEffect
} from 'react';
function App() {
useEffect(() => {
console.log(
'Component loaded'
);
}, []);
return (
<Text>
Home
</Text>
);
}An empty dependency array makes this effect run after the initial render.
Functional components can display different UI depending on conditions.
function Status({ loggedIn }) {
return (
<View>
{loggedIn ? (
<Text>
Welcome Back
</Text>
) : (
<Text>
Please Login
</Text>
)}
</View>
);
}function StudentList() {
const students = [
'Rahul',
'Amit',
'Priya'
];
return (
<View>
{students.map(
student => (
<Text
key={student}
>
{student}
</Text>
)
)}
</View>
);
}Functional components can render dynamic lists using JavaScript array methods.
function Header() {
return (
<Text>
My App
</Text>
);
}
function Profile() {
return (
<Text>
Student Profile
</Text>
);
}
function App() {
return (
<View>
<Header />
<Profile />
</View>
);
}Multiple functional components can be combined to build a screen.
function CourseCard({
title,
fee
}) {
return (
<View style={styles.card}>
<Text style={styles.title}>
{title}
</Text>
<Text>
Fee: {fee}
</Text>
</View>
);
}The component can be reused for multiple courses.
A parent component can pass a function to a child component as a prop.
function ActionButton({
onPress
}) {
return (
<Pressable
onPress={onPress}
>
<Text>
Save
</Text>
</Pressable>
);
}
function App() {
const saveData = () => {
console.log(
'Data saved'
);
};
return (
<ActionButton
onPress={saveData}
/>
);
}
The children prop allows a component to receive
nested content.
function Card({ children }) {
return (
<View style={styles.card}>
{children}
</View>
);
}
function App() {
return (
<Card>
<Text>
Student Details
</Text>
</Card>
);
}function LoginForm() {
const [email, setEmail] =
useState('');
return (
<View>
<TextInput
placeholder="Email"
value={email}
onChangeText={setEmail}
/>
<Button
title="Login"
onPress={() =>
console.log(email)
}
/>
</View>
);
}Hooks and functional components are commonly used together to create interactive forms.
function Students() {
const [students, setStudents] =
useState([]);
useEffect(() => {
fetch('https://example.com/students')
.then(response =>
response.json()
)
.then(data =>
setStudents(data)
);
}, []);
return (
<View>
<Text>
Students: {students.length}
</Text>
</View>
);
}Functional components can fetch and display data using hooks.
Functional components are commonly placed in separate files.
src/
│
├── components/
│ ├── Header.js
│ ├── Button.js
│ ├── CourseCard.js
│ └── ProfileCard.js
│
├── screens/
│ ├── Home.js
│ └── Login.js
│
└── App.jsThis organization becomes especially useful as the application grows.
import React, {
useState
} from 'react';
import {
View,
Text,
Pressable,
StyleSheet
} from 'react-native';
function CourseCard({
title,
duration,
fee
}) {
const [started, setStarted] =
useState(false);
return (
<View style={styles.card}>
<Text style={styles.title}>
{title}
</Text>
<Text>
Duration: {duration}
</Text>
<Text style={styles.fee}>
Fee: {fee}
</Text>
<Pressable
style={styles.button}
onPress={() =>
setStarted(true)
}
>
<Text style={styles.buttonText}>
{started
? 'Course Started'
: 'Start Course'}
</Text>
</Pressable>
</View>
);
}
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.heading}>
Available Courses
</Text>
<CourseCard
title="React Native"
duration="6 Months"
fee="₹15000"
/>
<CourseCard
title="JavaScript"
duration="4 Months"
fee="₹8000"
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
gap: 15
},
heading: {
fontSize: 26,
fontWeight: 'bold',
marginBottom: 10
},
card: {
padding: 20,
backgroundColor: 'white',
borderRadius: 12,
borderWidth: 1,
borderColor: '#E2E8F0'
},
title: {
fontSize: 21,
fontWeight: 'bold',
marginBottom: 8
},
fee: {
fontSize: 18,
fontWeight: 'bold',
marginTop: 8
},
button: {
marginTop: 15,
padding: 14,
borderRadius: 8,
backgroundColor: '#2563EB',
alignItems: 'center'
},
buttonText: {
color: 'white',
fontWeight: 'bold'
}
});This example demonstrates a reusable functional component using props and state.
| Functional Component | Class Component |
|---|---|
| JavaScript function | JavaScript class |
| Can use React Hooks | Uses class state and lifecycle methods |
| Generally simpler to write | Requires more class syntax |
| Common approach in modern React Native development | Still found in some existing codebases |
Identify UI Requirement
↓
Create Functional Component
↓
Import Required Components
↓
Return JSX
↓
Add Styles
↓
Receive Props if Needed
↓
Add State if Needed
↓
Handle Events
↓
Reuse Component
↓
Combine Components into ScreensFunctional components provide a simple and flexible way to build React Native applications. By combining components, props, state, hooks and events, you can create reusable UI and complete mobile application screens.
useState can manage changing data.useEffect can handle side effects.Question: What does a functional component normally return in React Native?