📱 React Native Practice

A comprehensive collection of React Native exercises and mini-projects built with Expo. This repository showcases my journey learning mobile app development, covering fundamental concepts to advanced implementations across iOS and Android platforms.

🚀 Overview

This repository contains various React Native practice projects and exercises designed to master mobile development concepts. Each project demonstrates different aspects of React Native development, from basic components to complex navigation patterns and native device features.

✨ Features & Learning Objectives

Core Concepts Mastered

📊 React Native Components - View, Text, ScrollView, FlatList, SectionList
🎨 Styling - StyleSheet, Flexbox layouts, responsive design
🔄 State Management - useState, useEffect, Context API
🧭 Navigation - Stack, Tab, and Drawer navigation with React Navigation
📲 Native Features - Camera, location, push notifications
🎯 User Input - Forms, gestures, and touch handling
🔌 API Integration - Fetch data, handle async operations
💾 Data Persistence - AsyncStorage, SQLite

Platform-Specific Development

iOS Features - iOS-specific components and styling
Android Features - Android-specific implementations
Cross-Platform - Write once, run everywhere approach

🛠️ Tech Stack

Core Technologies

React Native - Cross-platform mobile framework
Expo SDK 51 - Development platform and libraries
JavaScript/TypeScript - Programming languages
React Hooks - Modern React patterns

Key Libraries

React Navigation - Routing and navigation
Expo Router - File-based routing
React Native Elements - UI toolkit
Expo AV - Audio and video functionality
Expo Camera - Camera access
Expo Location - GPS and location services
React Native Reanimated - Smooth animations
React Native Gesture Handler - Touch gestures

Development Tools

Expo Go - Testing on physical devices
EAS Build - Cloud build service
Metro Bundler - JavaScript bundler
ESLint & Prettier - Code quality tools

📁 Project Structure

practice-react-native/
├── 01-basics/
│   ├── components-demo/
│   ├── styling-flexbox/
│   └── state-props/
├── 02-navigation/
│   ├── stack-navigation/
│   ├── tab-navigation/
│   └── drawer-navigation/
├── 03-lists-data/
│   ├── flatlist-example/
│   ├── sectionlist-demo/
│   └── api-integration/
├── 04-forms-input/
│   ├── text-input/
│   ├── form-validation/
│   └── picker-components/
├── 05-native-features/
│   ├── camera-app/
│   ├── location-tracker/
│   ├── push-notifications/
│   └── media-library/
├── 06-animations/
│   ├── basic-animations/
│   ├── gesture-animations/
│   └── layout-animations/
├── 07-mini-projects/
│   ├── todo-app/
│   ├── weather-app/
│   ├── expense-tracker/
│   └── recipe-finder/
├── assets/
│   ├── images/
│   ├── fonts/
│   └── icons/
├── components/
│   └── shared/
├── utils/
│   └── helpers.js
├── app.json
├── App.js
├── package.json
└── README.md

🎯 Practice Exercises

Exercise 1: Component Basics

Understanding core React Native components and their properties.

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

export default function ComponentDemo() {
  return (
    <ScrollView>
      <View style={styles.container}>
        <Text style={styles.title}>Hello React Native!</Text>
        <Image 
          source={{ uri: 'https://example.com/image.jpg' }}
          style={styles.image}
        />
      </View>
    </ScrollView>
  );
}

Exercise 2: Flexbox Layouts

Mastering responsive layouts with Flexbox.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 20,
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: '#3498db',
    borderRadius: 10,
  }
});

Exercise 3: Navigation Implementation

Setting up navigation between screens.

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

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>
  );
}

Exercise 4: API Integration

Fetching and displaying data from external APIs.

const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);

useEffect(() => {
  fetchData();
}, []);

const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    const json = await response.json();
    setData(json);
  } catch (error) {
    console.error(error);
  } finally {
    setLoading(false);
  }
};

Exercise 5: Native Device Features

Accessing camera and handling permissions.

import { Camera } from 'expo-camera';

const [hasPermission, setHasPermission] = useState(null);

useEffect(() => {
  (async () => {
    const { status } = await Camera.requestCameraPermissionsAsync();
    setHasPermission(status === 'granted');
  })();
}, []);

📱 Mini Projects

1. Todo App

CRUD operations
AsyncStorage for persistence
Swipe to delete
Mark as complete

2. Weather App

Current location weather
Search by city
5-day forecast
Beautiful UI with weather animations

3. Expense Tracker

Add/edit/delete expenses
Categories and tags
Monthly reports
Charts and statistics

4. Recipe Finder

Search recipes by ingredients
Save favorites
Step-by-step instructions
Shopping list generation

🔧 Installation & Setup

Prerequisites

Node.js (v14 or higher)
npm or yarn
Expo CLI
iOS Simulator (Mac) or Android Emulator
Expo Go app on your phone

Getting Started

Clone the repository

git clone https://github.com/jefercort/practice-react-native.git
cd practice-react-native

Install dependencies
```
npm install
# or
yarn install
```
Start the development server
```
npx expo start
# or
expo start
```
Run on device/emulator
- Press a for Android emulator
- Press i for iOS simulator
- Scan QR code with Expo Go app on your phone

📖 Running Individual Exercises

Navigate to specific exercise directories:

cd 01-basics/components-demo
npx expo start

🎨 Styling Approach

This project uses multiple styling approaches:

StyleSheet API - Performance optimized styles
Inline Styles - Quick prototyping
Styled Components - Component-based styling
Platform-specific styles - iOS/Android variations

🧪 Testing

# Run tests
npm test

# Run with coverage
npm run test:coverage

📚 Key Learnings

Technical Skills

Cross-platform Development - One codebase for iOS and Android
Component Lifecycle - Understanding mounting, updating, unmounting
Performance Optimization - FlatList, memo, lazy loading
Debugging - React Native Debugger, Flipper
State Management - Local and global state patterns
Async Operations - Promises, async/await, error handling

Best Practices

Component reusability
Separation of concerns
Responsive design principles
Accessibility features
Performance monitoring
Error boundaries

🚧 Future Improvements

📱 Deployment

Building for Production

# iOS
eas build --platform ios

# Android
eas build --platform android

# Both platforms
eas build --platform all

🤝 Contributing

Contributions are welcome! Feel free to submit issues and pull requests.

Fork the repository
Create your feature branch (git checkout -b feature/NewExercise)
Commit your changes (git commit -m 'Add new exercise')
Push to the branch (git push origin feature/NewExercise)
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Kevin Cortes

GitHub: @jefercort
LinkedIn: Kevin Cortes PRO
Portfolio: PRO ENGINEERING

🙏 Acknowledgments

Expo Documentation
React Native Documentation
React Native community for amazing tutorials
All open-source contributors

⭐ If you find this repository helpful, please give it a star!

🚀 Happy Coding with React Native!

Name		Name	Last commit message	Last commit date
Latest commit History 13 Commits
app		app
assets		assets
components		components
lib		lib
mock		mock
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
App.js		App.js
README.md		README.md
app.json		app.json
babel.config.js		babel.config.js
index.css		index.css
index.js		index.js
metro.config.js		metro.config.js
package-lock.json		package-lock.json
package.json		package.json
tailwind.config.js		tailwind.config.js

jefercort/practice-react-native

Folders and files

Latest commit

History

Repository files navigation