React Native

1. React Native: A Short Tutorial

• What is React Native?

  • An open-source framework developed by Facebook (now Meta).

  • It allows developers to build native mobile applications (iOS and Android) using JavaScript and the React library.

  • Instead of using web views (rendering HTML/CSS inside a native container), React Native renders native UI components.

• What is it Used For?

  • Building truly cross-platform mobile applications (iOS and Android) from a single codebase.

  • Creating apps that look and feel native to each platform, leveraging native device features (camera, GPS, sensors, etc.).

  • Developing high-performance mobile apps using web technologies.

• Key Advantages:

  • Cross-Platform: Write code once, deploy to both iOS and Android (reducing development time and cost).

  • Native Performance: Renders native components, offering better performance than web views.

  • React Ecosystem: Leverages familiar React concepts (components, state, props).

  • Hot Reloading: Speeds up

import React, { useState } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  Button,
  FlatList,
  TouchableOpacity,
} from 'react-native';

const App = () => {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  const addTodo = () => {
    if (newTodo.trim()) {
      // Only add if the input is not empty and not just whitespace
      setTodos([...todos, { id: Date.now().toString(), text: newTodo.trim() }]);
      setNewTodo(''); // Clear the input field
    }
  };

  const removeTodo = id => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  const renderItem = ({ item }) => (
    <View style={styles.todoItem}>
      <Text style={styles.todoText}>{item.text}</Text>
      <TouchableOpacity onPress={() => removeTodo(item.id)} style={styles.removeButton}>
        <Text style={styles.removeText}>Remove</Text>
      </TouchableOpacity>
    </View>
  );

  return (
    <View style={styles.container}>
      <Text style={styles.title}>My TODO App</Text>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          placeholder="Enter a new todo"
          value={newTodo}
          onChangeText={setNewTodo}
        />
        <Button title="Add" onPress={addTodo} />
      </View>
      <FlatList
        data={todos}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        style={styles.list}
        ListEmptyComponent={<Text style={styles.emptyText}>No todos yet! Add one above.</Text>}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
  },
  inputContainer: {
    flexDirection: 'row',
    marginBottom: 20,
  },
  input: {
    flex: 1,
    height: 40,
    borderColor: '#ccc',
    borderWidth: 1,
    padding: 8,
    marginRight: 5,
    backgroundColor: '#fff',
  },
  list: {
    flex: 1,
  },
  todoItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: '#fff',
    padding: 10,
    marginBottom: 10,
    borderWidth: 1,
    borderColor: '#eee',
    borderRadius: 5,
  },
  todoText: {
    flex: 1,
    fontSize: 16,
  },
  removeButton: {
    backgroundColor: '#ff4d4d',
    paddingHorizontal: 10,
    paddingVertical: 5,
    borderRadius: 5,
  },
  removeText: {
    color: '#fff',
    fontWeight: 'bold',
  },
  emptyText: {
    textAlign: 'center',
    marginTop: 50,
    fontSize: 16,
    color: '#888',
  },
});

export default App;

To Run This App:

1. Make sure you have Node.js and npm/yarn installed.

2. Install the Expo CLI: npm install -g expo-cli

3. Create a new Expo project: npx expo init MyTodoApp

4. Navigate into the project directory: cd MyTodoApp

5. Replace the contents of App.js with the code above.

6. Start the app: npm start or yarn start

7. Use the Expo Go app on your phone to scan the QR code, or run it in a simulator/emulator.

3. React Native vs. HTML/CSS Comparison Table

Key Differences:

• Styling: React Native uses StyleSheet.create with JavaScript objects and the style prop, while HTML/CSS uses <style> tags or external CSS files and class attributes.

• Components: React Native uses specific React components (<View>, <Text>, <Image>, etc.), while HTML/CSS uses standard HTML tags (<div>, <p>, <img>, etc.).

• Event Handling: React Native uses camelCase prop names (onPress, onChangeText), while HTML/CSS uses lowercase attribute names (onclick, oninput).

• Lists: React Native uses <FlatList> or <SectionList> for efficient rendering of large lists, while HTML/CSS uses <ul> or <ol> with <li> elements.