React Native Full Course for Beginners
1. Introduction to React Native
What is React Native?
Why choose React Native?
Differences between React Native, React.js, and Native development
Setting up the development environment
o Installing Node.js and npm
o Installing Android Studio / Xcode
o Setting up Expo CLI or React Native CLI
2. Basic Concepts of React Native
JSX and components
Functional vs Class components
State and Props
Lifecycle methods (for class components)
Hooks (useState, useEffect)
3. Building Your First App
Creating a new React Native project
Running app on Android and iOS simulators/emulators
Structure of a React Native project
Basic app layout with View, Text, and Image
4. Styling in React Native
StyleSheet API
Flexbox layout
Styling best practices
Responsive design tips
5. User Interaction
Touchable components (Button, TouchableOpacity, TouchableHighlight)
Handling events and user input
Forms and input validation
6. Navigation
Introduction to React Navigation
Stack Navigator
Tab Navigator
Drawer Navigator
Passing data between screens
7. Working with Data
Fetching data with fetch API / Axios
Displaying lists with FlatList and SectionList
Managing state with Context API or Redux (basic intro)
8. Using Native Features
Accessing device features (camera, location, contacts)
Using Expo APIs or React Native Modules
9. Storage & Persistence
AsyncStorage
SecureStore
SQLite databases
10. Handling Animations
Animated API
Layout animations
React Native Reanimated (basic intro)
11. Deployment & Publishing
Preparing app for release
Building APK and IPA files
Publishing to Google Play Store and Apple App Store
12. Final Projects & Practice
Building a weather app
To-do list app
Social media feed clone
Resources & Tutorials
Official Documentation: React Native Docs
Tutorials:
o React Native Crash Course (freeCodeCamp)
o The Net Ninja React Native Tutorials
o Academind React Native Guide
Sample Projects for Practice
Personal Portfolio App
To-Do List with Persistence
Weather Forecast App (using API)
Chat Messaging UI
React Native Beginner Course
Notes with Code Snippets
1. Introduction to React Native
Notes:
React Native allows building mobile apps using JavaScript and React.
Uses native components for better performance.
Can run on iOS and Android with a single codebase.
Setup:
Install Node.js, npm
Install Expo CLI: npm install -g expo-cli
Create project: expo init MyApp
Run: expo start
2. Basic Concepts of React Native
JSX and Components
CopyRunimport React from 'react';
import { View, Text } from 'react-native';
const HelloWorld = () => (
<View>
<Text>Hello, React Native!</Text>
</View>
);
export default HelloWorld;
Props & State
CopyRunimport React, { useState } from 'react';
import { View, Button, Text } from 'react-native';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<View>
<Text>Count: {count}</Text>
<Button title="Increment" onPress={() => setCount(count +
1)} />
</View>
);
};
3. Building Your First App
Key points:
Use expo init to set up
Use <View>, <Text>, <Image> for layout
CopyRunimport React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
const App = () => (
<View style={styles.container}>
<Text>Hello, World!</Text>
<Image source={{ uri:
'https://reactnative.dev/img/tiny_logo.png' }}
style={styles.logo} />
</View>
);
const styles = StyleSheet.create({
container: { flex: 1, justifyContent: 'center', alignItems:
'center' },
logo: { width: 50, height: 50, marginTop: 20 },
});
export default App;
4. Styling in React Native
Notes:
Use StyleSheet.create()
Flexbox for layout
Common styles: margin, padding, backgroundColor, borderRadius
CopyRunconst styles = StyleSheet.create({
button: {
backgroundColor: '#2196F3',
padding: 10,
borderRadius: 5,
},
buttonText: {
color: '#fff',
fontSize: 16,
},
});
5. User Interaction
CopyRunimport React, { useState } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
const ButtonExample = () => {
const [message, setMessage] = useState('Press the button');
return (
<View>
<Text>{message}</Text>
<TouchableOpacity onPress={() => setMessage('Button
Pressed!')}>
<View style={{ backgroundColor: 'blue', padding: 10,
marginTop: 10 }}>
<Text style={{ color: '#fff' }}>Press me</Text>
</View>
</TouchableOpacity>
</View>
);
};
6. Navigation
Using React Navigation:
CopyRunnpm install @react-navigation/native
@react-navigation/stack react-native-screens react-native-safe-
area-context
CopyRunimport { NavigationContainer } from
'@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
function HomeScreen() {
return <Text>Home Screen</Text>;
}
function DetailsScreen() {
return <Text>Details Screen</Text>;
}
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
7. Working with Data
Fetching Data
CopyRunimport React, { useEffect, useState } from 'react';
import { View, Text, FlatList } from 'react-native';
const DataFetchingExample = () => {
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then(res => res.json())
.then(json => setData(json))
.catch(console.error);
}, []);
return (
<FlatList
data={data}
keyExtractor={item => item.id.toString()}
renderItem={({ item }) => (
<View style={{ padding: 10, borderBottomWidth: 1 }}>
<Text style={{ fontWeight:
'bold' }}>{item.title}</Text>
<Text>{item.body}</Text>
</View>
)}
/>
);
};
8. Using Native Features
Example: Access device location using Expo Location API
CopyRunexpo install expo-location
CopyRunimport React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';
import * as Location from 'expo-location';
const LocationExample = () => {
const [location, setLocation] = useState(null);
useEffect(() => {
(async () => {
let { status } = await
Location.requestForegroundPermissionsAsync();
if (status !== 'granted') {
alert('Permission to access location was denied');
return;
}
let loc = await Location.getCurrentPositionAsync({});
setLocation(loc);
})();
}, []);
return (
<View>
{location ? (
<Text>Lat: {location.coords.latitude}, Lon:
{location.coords.longitude}</Text>
) : (
<Text>Loading location...</Text>
)}
</View>
);
};
9. Storage & Persistence
Using AsyncStorage (deprecated, use @react-native-async-storage/async-
storage)
CopyRunnpm install @react-native-async-storage/async-storage
CopyRunimport AsyncStorage from
'@react-native-async-storage/async-storage';
const storeData = async () => {
try {
await AsyncStorage.setItem('@storage_Key', 'Stored Value');
} catch (e) {
// saving error
}
};
const getData = async () => {
try {
const value = await AsyncStorage.getItem('@storage_Key');
if (value !== null) {
alert(value);
}
} catch (e) {
// error reading value
}
};
10. Handling Animations
CopyRunimport React, { useRef } from 'react';
import { Animated, Button, View } from 'react-native';
const FadeInView = () => {
const fadeAnim = useRef(new Animated.Value(0)).current;
const fadeIn = () => {
Animated.timing(fadeAnim, {
toValue: 1,
duration: 1000,
useNativeDriver: true,
}).start();
};
return (
<View>
<Animated.View style={{ opacity: fadeAnim, backgroundColor:
'blue', height: 100, width: 100 }} />
<Button title="Fade In" onPress={fadeIn} />
</View>
);
};
11. Deployment & Publishing
Notes:
Use expo build:android or expo build:ios for building release APK/IPA
Follow app store guidelines for submission
12. Final Projects & Practice
Build simple apps like a To-Do list, Weather app, or Chat UI to reinforce
concepts.
