1. Introduction

Cross-platform mobile development allows you to build iOS & Android apps using a single codebase.

• Flutter & Dart – Google’s framework for high-performance UI.
• React Native – Facebook’s framework using JavaScript & React.

2. Key Comparisons: Flutter vs. React Native

3. Flutter & Dart Basics

    3.1 Setup

•  Install Flutter SDK → Download here.
• Install Android Studio or VS Code.

Run:

flutter create my_app
cd my_app
flutter run

void main() {
  String name = "Flutter";
  print("Hello, $name!");
}
// Function
int add(int a, int b) => a + b;
print(add(5, 3));

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Flutter App")),
        body: Center(
          child: Text("Hello, Flutter!"),
        ),
      ),
    );
  }
}

4. React Native Basics

   4.1 Setup

• Install Node.js & Expo CLI → Download here.
• Create & Run Project:

npx react-native init MyApp
cd MyApp
npx react-native run-android // or run-ios

const name = "React Native";
console.log(`Hello, ${name}!`);
// Function
const add = (a, b) => a + b;
console.log(add(5, 3));

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const App = () => {
  return (
    <View style={styles.container}>
      <Text>Hello, React Native!</Text>
    </View>
  );
};
const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
});
export default App;

5. Networking (API Calls)

   5.1 Flutter (Dart – Using HTTP Package)

import 'package:http/http.dart' as http;
import 'dart:convert';
void fetchData() async {
  final response = await http.get(Uri.parse("https://api.example.com/data"));
  if (response.statusCode == 200) {
    var data = jsonDecode(response.body);
    print(data);
  }
}

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

6. State Management

  6.1 Flutter (Provider Example)

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() => runApp(MyApp());
class Counter with ChangeNotifier {
  int count = 0;
  void increment() {
    count++;
    notifyListeners();
  }
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MaterialApp(home: CounterScreen()),
    );
  }
}
class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("${context.watch<Counter>().count}"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read<Counter>().increment(),
        child: Icon(Icons.add),
      ),
    );
  }
}

import { createStore } from 'redux';
import { Provider, useDispatch, useSelector } from 'react-redux';
const reducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT': return { count: state.count + 1 };
    default: return state;
  }
};
const store = createStore(reducer);
const Counter = () => {
  const dispatch = useDispatch();
  const count = useSelector(state => state.count);
  return (
    <View>
      <Text>{count}</Text>
      <Button title="Increment" onPress={() => dispatch({ type: 'INCREMENT' })} />
    </View>
  );
};
const App = () => (
  <Provider store={store}>
    <Counter />
  </Provider>
);
export default App;

7. App Deployment

  7.1 Flutter
        7.1.1  Android:

flutter build apk
flutter build appbundle

• Open ios/ in Xcode → Archive & Upload to App Store

   7.2 React Native
       7.2.1 Android:

cd android && ./gradlew assembleRelease

• Open ios/ in Xcode → Archive & Upload

8. Debugging & Tools

   8.1 Common Debugging Commands

• Flutter: flutter doctor (Check system setup).
• React Native: adb logcat (Android logs).

9. Performance Optimization Tips

   9.1 Flutter

• Use const Widgets to avoid unnecessary rebuilds.
• Use lazy loading for lists (ListView.builder).
• Optimize animations with TweenAnimationBuilder.
• Minimize large UI rebuilds with ChangeNotifierProvider.

   9.2 React Native

• Use FlatList instead of map() for rendering lists.
• Optimize images with react-native-fast-image.
• Avoid unnecessary re-renders with useMemo() & useCallback().
• Enable Hermes engine for better JS performance.

10. Essential Commands & Shortcuts

11. Tips for Success

• Choose based on project needs (performance vs. JS ecosystem).
• Use efficient state management (Provider/Redux).
• Optimize performance (lazy loading, caching).
• Follow platform-specific UI guidelines.
• Stay updated – Follow Flutter Docs & React Native Docs.

12. Learning Resources

•  Flutter Official Docs.
• Dart Language Guide.
• React Native Docs.
• Udemy: Flutter & React Native Courses.

Download Elysium Spark Note