6.2 CRUD- Operations in React Native | Create, Read, Update, Delete

6.2 CRUD Operations in React Native

Chapter Overview: This chapter covers the basics of CRUD operations in React Native apps. You will learn how to create, read, update, and delete data using an API or a local state. By the end, you will be able to build a functional list management app with fully working CRUD features.

Meta Title: CRUD Operations in React Native | Create, Read, Update, Delete

Meta Description: Learn how to implement CRUD operations in React Native. Create, read, update, and delete items using APIs or local state. Step-by-step examples included.

✅ Introduction to CRUD

CRUD stands for Create, Read, Update, Delete. These are the fundamental operations of any data-driven application. In React Native, CRUD can be implemented using local state for small apps or APIs for dynamic apps.

✅ Setting Up Sample Data

We’ll use a simple array in state for demonstration.

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

export default function CrudApp() {
  const [items, setItems] = useState([]);
  const [inputText, setInputText] = useState('');

✅ Create Operation

Adding a new item to the list:

const addItem = () => {
  if (!inputText.trim()) {
    Alert.alert('Please enter a value');
    return;
  }
  const newItem = { id: Date.now().toString(), name: inputText };
  setItems([...items, newItem]);
  setInputText('');
};

UI for adding items:

<View>
  <TextInput
    placeholder="Enter item"
    value={inputText}
    onChangeText={setInputText}
    style={{borderWidth:1, padding:8, marginBottom:8}}
  />
  <Button title="Add Item" onPress={addItem} />
</View>

✅ Read Operation

Displaying the items using FlatList:

<FlatList
  data={items}
  keyExtractor={item => item.id}
  renderItem={({item}) => <Text>{item.name}</Text>}
/>

✅ Update Operation

Editing an existing item:

const updateItem = (id, newName) => {
  setItems(items.map(item => item.id === id ? { ...item, name: newName } : item));
};

Example UI with prompt:

<Button
  title="Edit"
  onPress={() => {
    const newName = prompt('Enter new name');
    if(newName) updateItem(item.id, newName);
  }}
/>

✅ Delete Operation

Removing an item from the list:

const deleteItem = id => {
  setItems(items.filter(item => item.id !== id));
};

Button example:

<Button title="Delete" onPress={() => deleteItem(item.id)} />

✅ Full CRUD Example

return (
<View style={{padding:20}}>
  <TextInput
    placeholder="Enter item"
    value={inputText}
    onChangeText={setInputText}
    style={{borderWidth:1, padding:8, marginBottom:8}}
  />
  <Button title="Add Item" onPress={addItem} />

  <FlatList
    data={items}
    keyExtractor={item => item.id}
    renderItem={({item}) => (
      <View style={{flexDirection:'row', justifyContent:'space-between', marginVertical:5}}>
        <Text>{item.name}</Text>
        <View style={{flexDirection:'row'}}>
          <Button
            title="Edit"
            onPress={() => {
              const newName = prompt('Enter new name');
              if(newName) updateItem(item.id, newName);
            }}
          />
          <Button title="Delete" onPress={() => deleteItem(item.id)} />
        </View>
      </View>
    )}
  />
</View>
);

✅ Summary

• CRUD operations are fundamental for dynamic apps.
• Create: Add new items using state.
• Read: Display items using FlatList.
• Update: Modify existing items using map().
• Delete: Remove items using filter().
• Using state makes the app responsive without backend initially.