Cross-Platform Mobile Development

React Native
Flutter
Performance Optimization
State Management
Navigation
Deployment

React Native

Basic Component

// App.tsx
import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet } from 'react-native';

const App = () => {
    const [text, setText] = useState('');
    const [items, setItems] = useState([]);

    const handleAdd = () => {
        if (text.trim()) {
            setItems([...items, text]);
            setText('');
        }
    };

    return (
        
            
                
                
                    Add
                
            
            
            
                {items.map((item, index) => (
                    
                        {item}
                    
                ))}
            
        
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20,
        backgroundColor: '#fff'
    },
    inputContainer: {
        flexDirection: 'row',
        marginBottom: 20
    },
    input: {
        flex: 1,
        borderWidth: 1,
        borderColor: '#ddd',
        padding: 10,
        marginRight: 10,
        borderRadius: 5
    },
    button: {
        backgroundColor: '#007AFF',
        padding: 10,
        borderRadius: 5,
        justifyContent: 'center'
    },
    buttonText: {
        color: '#fff'
    },
    listContainer: {
        flex: 1
    },
    item: {
        padding: 15,
        borderBottomWidth: 1,
        borderBottomColor: '#eee'
    }
});

Custom Hook

// useAPI.ts
import { useState, useEffect } from 'react';

interface APIResponse {
    data: T | null;
    loading: boolean;
    error: Error | null;
}

const useAPI = (url: string): APIResponse => {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch(url);
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const json = await response.json();
                setData(json);
            } catch (err) {
                setError(err instanceof Error ? err : new Error(String(err)));
            } finally {
                setLoading(false);
            }
        };

        fetchData();
    }, [url]);

    return { data, loading, error };
};

Flutter

Basic Widget

// main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  final _textController = TextEditingController();
  final List _items = [];

  void _addItem() {
    if (_textController.text.trim().isNotEmpty) {
      setState(() {
        _items.add(_textController.text);
        _textController.clear();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Column(
        children: [
          Padding(
            padding: EdgeInsets.all(16.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _textController,
                    decoration: InputDecoration(
                      hintText: 'Enter item',
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                SizedBox(width: 10),
                ElevatedButton(
                  onPressed: _addItem,
                  child: Text('Add'),
                ),
              ],
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: _items.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(_items[index]),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _textController.dispose();
    super.dispose();
  }
}

State Management (Provider)

// item_provider.dart
import 'package:flutter/foundation.dart';

class ItemProvider with ChangeNotifier {
  List _items = [];

  List get items => [..._items];

  void addItem(String item) {
    _items.add(item);
    notifyListeners();
  }

  void removeItem(int index) {
    _items.removeAt(index);
    notifyListeners();
  }
}

// main.dart
void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => ItemProvider(),
      child: MyApp(),
    ),
  );
}

// Using the provider
class ItemList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer(
      builder: (context, itemProvider, child) {
        return ListView.builder(
          itemCount: itemProvider.items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(itemProvider.items[index]),
              trailing: IconButton(
                icon: Icon(Icons.delete),
                onPress: () => itemProvider.removeItem(index),
              ),
            );
          },
        );
      },
    );
  }
}

Performance Optimization

React Native

Use useCallback and useMemo
Implement React.memo for pure components
Optimize images and assets
Use FlatList instead of ScrollView
Implement lazy loading

Flutter

Use const constructors
Implement ListView.builder
Use cached_network_image
Optimize build methods
Use ValueNotifier for small state changes

State Management

React Native - Redux

// store.ts
import { configureStore } from '@reduxjs/toolkit';
import { createSlice } from '@reduxjs/toolkit';

const itemsSlice = createSlice({
    name: 'items',
    initialState: [],
    reducers: {
        addItem: (state, action) => {
            state.push(action.payload);
        },
        removeItem: (state, action) => {
            state.splice(action.payload, 1);
        }
    }
});

export const store = configureStore({
    reducer: {
        items: itemsSlice.reducer
    }
});

// Usage
const ItemList = () => {
    const items = useSelector(state => state.items);
    const dispatch = useDispatch();

    return (
        
            {items.map((item, index) => (
                 dispatch(removeItem(index))}
                >
                    {item}
                
            ))}
        
    );
};

Flutter - Bloc

// items_bloc.dart
abstract class ItemsEvent {}
class AddItem extends ItemsEvent {
    final String item;
    AddItem(this.item);
}
class RemoveItem extends ItemsEvent {
    final int index;
    RemoveItem(this.index);
}

class ItemsBloc extends Bloc> {
    ItemsBloc() : super([]);

    @override
    Stream> mapEventToState(ItemsEvent event) async* {
        if (event is AddItem) {
            List newState = List.from(state);
            newState.add(event.item);
            yield newState;
        } else if (event is RemoveItem) {
            List newState = List.from(state);
            newState.removeAt(event.index);
            yield newState;
        }
    }
}

Cross-Platform Mobile Development

Contents

React Native

Basic Component

Custom Hook

Flutter

Basic Widget

State Management (Provider)

Performance Optimization

React Native

Flutter

State Management

React Native - Redux

Flutter - Bloc