Absolutely!
Here’s a **complete React Native (Expo) app** with advanced features for **Contacts,
Sales, and Inventory** management.
Features include:
- Add/Edit/Delete records
- Search/filter
- Persistent local storage (`AsyncStorage`)
- Simple authentication (demo login/logout)
- Clean navigation between sections
---
## 1. Install Dependencies
```bash
expo install @react-native-async-storage/async-storage
npm install @react-navigation/native @react-navigation/native-stack
expo install react-native-screens react-native-safe-area-context
```
---
## 2. App Structure
- **Login Screen**
- **Home Screen** (choose Contacts, Sales, Inventory)
- **Contacts Manager**
- **Sales Manager**
- **Inventory Manager**
Each manager supports add/edit/delete/search and persistent storage.
---
## 3. Full Example Code (`[Link]`)
```javascript
import React, { useState, useEffect } from 'react';
import {
View, Text, TextInput, Button, FlatList,
TouchableOpacity, StyleSheet, SafeAreaView, Alert
} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
// --- Login Screen ---
function LoginScreen({ navigation }) {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
function handleLogin() {
if (username === 'admin' && password === '123456') {
setUsername('');
setPassword('');
[Link]('Home');
} else {
[Link]('Invalid credentials');
return (
<SafeAreaView style={[Link]}>
<Text style={[Link]}>Login</Text>
<TextInput
style={[Link]}
placeholder="Username"
value={username}
onChangeText={setUsername}
/>
<TextInput
style={[Link]}
placeholder="Password"
value={password}
onChangeText={setPassword}
secureTextEntry
/>
<Button title="Login" onPress={handleLogin} />
<Text style={{marginTop:10}}>Demo: admin / 123456</Text>
</SafeAreaView>
);
// --- Home Screen ---
function HomeScreen({ navigation }) {
return (
<SafeAreaView style={[Link]}>
<Text style={[Link]}>Business Management</Text>
<Button title="Contacts Manager" onPress={() => [Link]('Contacts')} />
<Button title="Sales Manager" onPress={() => [Link]('Sales')} />
<Button title="Inventory Manager" onPress={() => [Link]('Inventory')} />
<View style={{marginTop:20}}>
<Button title="Logout" color="#d32f2f" onPress={() => [Link]('Login')} />
</View>
</SafeAreaView>
);
// --- Contacts Manager ---
function ContactsScreen() {
const [contacts, setContacts] = useState([]);
const [name, setName] = useState('');
const [phone, setPhone] = useState('');
const [searchTerm, setSearchTerm] = useState('');
const [editingId, setEditingId] = useState(null);
useEffect(() => { loadData(); }, []);
useEffect(() => { saveData(); }, [contacts]);
async function loadData() {
try {
const jsonValue = await [Link]('contacts');
if (jsonValue != null) setContacts([Link](jsonValue));
} catch {}
}
async function saveData() {
try {
await [Link]('contacts', [Link](contacts));
} catch {}
function handleSave() {
if (!name || !phone) return;
if (editingId) {
setContacts([Link](c =>
[Link] === editingId ? { ...c, name, phone } : c
));
setEditingId(null);
} else {
setContacts([...contacts, { id: [Link]().toString(), name, phone }]);
setName('');
setPhone('');
function handleEdit(item) {
setName([Link]);
setPhone([Link]);
setEditingId([Link]);
function handleDelete(id) {
[Link]("Delete Contact", "Are you sure?", [
{ text: "Cancel", style: "cancel" },
{ text: "Delete", style: "destructive", onPress: () => {
setContacts([Link](c => [Link] !== id));
if (editingId === id) {
setEditingId(null); setName(''); setPhone('');
}}
]);
const filtered = [Link](c =>
[Link]().includes([Link]()) ||
[Link](searchTerm)
);
return (
<SafeAreaView style={[Link]}>
<Text style={[Link]}>Contacts Manager</Text>
<TextInput
style={[Link]}
placeholder="Search by name or phone"
value={searchTerm}
onChangeText={setSearchTerm}
/>
<FlatList
data={filtered}
keyExtractor={item => [Link]}
renderItem={({ item }) => (
<View style={[Link]}>
<View style={{flex:1}}>
<Text style={[Link]}>{[Link]}</Text>
<Text>{[Link]}</Text>
</View>
<TouchableOpacity onPress={() => handleEdit(item)}>
<Text style={[Link]}>Edit</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleDelete([Link])}>
<Text style={[Link]}>Delete</Text>
</TouchableOpacity>
</View>
)}
/>
<Text style={[Link]}>{editingId ? 'Edit Contact' : 'Add Contact'}</Text>
<TextInput
style={[Link]}
placeholder="Name"
value={name}
onChangeText={setName}
/>
<TextInput
style={[Link]}
placeholder="Phone"
value={phone}
onChangeText={setPhone}
keyboardType="phone-pad"
/>
<Button
title={editingId ? "Update Contact" : "Add Contact"}
onPress={handleSave}
/>
</SafeAreaView>
);
}
// --- Sales Manager ---
function SalesScreen() {
const [sales, setSales] = useState([]);
const [customer, setCustomer] = useState('');
const [amount, setAmount] = useState('');
const [date, setDate] = useState('');
const [searchTerm, setSearchTerm] = useState('');
const [editingId, setEditingId] = useState(null);
useEffect(() => { loadData(); }, []);
useEffect(() => { saveData(); }, [sales]);
async function loadData() {
try {
const jsonValue = await [Link]('sales');
if (jsonValue != null) setSales([Link](jsonValue));
} catch {}
async function saveData() {
try {
await [Link]('sales', [Link](sales));
} catch {}
function handleSave() {
if (!customer || !amount || !date) return;
if (editingId) {
setSales([Link](s =>
[Link] === editingId ? { ...s, customer, amount, date } : s
));
setEditingId(null);
} else {
setSales([...sales, { id: [Link]().toString(), customer, amount, date }]);
setCustomer(''); setAmount(''); setDate('');
function handleEdit(item) {
setCustomer([Link]);
setAmount([Link]);
setDate([Link]);
setEditingId([Link]);
function handleDelete(id) {
[Link]("Delete Sale", "Are you sure?", [
{ text: "Cancel", style: "cancel" },
{ text: "Delete", style: "destructive", onPress: () => {
setSales([Link](s => [Link] !== id));
if (editingId === id) {
setEditingId(null); setCustomer(''); setAmount(''); setDate('');
}}
]);
const filtered = [Link](s =>
[Link]().includes([Link]()) ||
[Link](searchTerm) ||
[Link](searchTerm)
);
return (
<SafeAreaView style={[Link]}>
<Text style={[Link]}>Sales Manager</Text>
<TextInput
style={[Link]}
placeholder="Search by customer, amount, or date"
value={searchTerm}
onChangeText={setSearchTerm}
/>
<FlatList
data={filtered}
keyExtractor={item => [Link]}
renderItem={({ item }) => (
<View style={[Link]}>
<View style={{flex:1}}>
<Text style={[Link]}>{[Link]}</Text>
<Text>Amount: {[Link]}</Text>
<Text>Date: {[Link]}</Text>
</View>
<TouchableOpacity onPress={() => handleEdit(item)}>
<Text style={[Link]}>Edit</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleDelete([Link])}>
<Text style={[Link]}>Delete</Text>
</TouchableOpacity>
</View>
)}
/>
<Text style={[Link]}>{editingId ? 'Edit Sale' : 'Add Sale'}</Text>
<TextInput
style={[Link]}
placeholder="Customer Name"
value={customer}
onChangeText={setCustomer}
/>
<TextInput
style={[Link]}
placeholder="Amount"
value={amount}
onChangeText={setAmount}
keyboardType="numeric"
/>
<TextInput
style={[Link]}
placeholder="Date (YYYY-MM-DD)"
value={date}
onChangeText={setDate}
/>
<Button
title={editingId ? "Update Sale" : "Add Sale"}
onPress={handleSave}
/>
</SafeAreaView>
);
}
// --- Inventory Manager ---
function InventoryScreen() {
const [items, setItems] = useState([]);
const [product, setProduct] = useState('');
const [quantity, setQuantity] = useState('');
const [location, setLocation] = useState('');
const [searchTerm, setSearchTerm] = useState('');
const [editingId, setEditingId] = useState(null);
useEffect(() => { loadData(); }, []);
useEffect(() => { saveData(); }, [items]);
async function loadData() {
try {
const jsonValue = await [Link]('inventory');
if (jsonValue != null) setItems([Link](jsonValue));
} catch {}
async function saveData() {
try {
await [Link]('inventory', [Link](items));
} catch {}
function handleSave() {
if (!product || !quantity || !location) return;
if (editingId) {
setItems([Link](i =>
[Link] === editingId ? { ...i, product, quantity, location } : i
));
setEditingId(null);
} else {
setItems([...items, { id: [Link]().toString(), product, quantity, location }]);
setProduct(''); setQuantity(''); setLocation('');
function handleEdit(item) {
setProduct([Link]);
setQuantity([Link]);
setLocation([Link]);
setEditingId([Link]);
function handleDelete(id) {
[Link]("Delete Item", "Are you sure?", [
{ text: "Cancel", style: "cancel" },
{ text: "Delete", style: "destructive", onPress: () => {
setItems([Link](i => [Link] !== id));
if (editingId === id) {
setEditingId(null); setProduct(''); setQuantity(''); setLocation('');
}}
]);
const filtered = [Link](i =>
[Link]().includes([Link]()) ||
[Link](searchTerm) ||
[Link]().includes([Link]())
);
return (
<SafeAreaView style={[Link]}>
<Text style={[Link]}>Inventory Manager</Text>
<TextInput
style={[Link]}
placeholder="Search by product, quantity, or location"
value={searchTerm}
onChangeText={setSearchTerm}
/>
<FlatList
data={filtered}
keyExtractor={item => [Link]}
renderItem={({ item }) => (
<View style={[Link]}>
<View style={{flex:1}}>
<Text style={[Link]}>{[Link]}</Text>
<Text>Qty: {[Link]}</Text>
<Text>Location: {[Link]}</Text>
</View>
<TouchableOpacity onPress={() => handleEdit(item)}>
<Text style={[Link]}>Edit</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleDelete([Link])}>
<Text style={[Link]}>Delete</Text>
</TouchableOpacity>
</View>
)}
/>
<Text style={[Link]}>{editingId ? 'Edit Item' : 'Add Item'}</Text>
<TextInput
style={[Link]}
placeholder="Product Name"
value={product}
onChangeText={setProduct}
/>
<TextInput
style={[Link]}
placeholder="Quantity"
value={quantity}
onChangeText={setQuantity}
keyboardType="numeric"
/>
<TextInput
style={[Link]}
placeholder="Location"
value={location}
onChangeText={setLocation}
/>
<Button
title={editingId ? "Update Item" : "Add Item"}
onPress={handleSave}
/>
</SafeAreaView>
);
}
// --- Main App ---
export default function App() {
return (
<NavigationContainer>
<[Link] initialRouteName="Login">
<[Link] name="Login" component={LoginScreen} options={{headerShown:false}} />
<[Link] name="Home" component={HomeScreen} options={{headerLeft:()=>null}} />
<[Link] name="Contacts" component={ContactsScreen} />
<[Link] name="Sales" component={SalesScreen} />
<[Link] name="Inventory" component={InventoryScreen} />
</[Link]>
</NavigationContainer>
);
const styles = [Link]({
container: { flex: 1, padding: 20, backgroundColor:'#fafafa' },
header: { fontSize: 24, fontWeight: 'bold', marginBottom: 15, textAlign:'center' },
input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 5, padding: 8, marginVertical: 5 },
listItem: { flexDirection: 'row', alignItems: 'center', padding: 10, borderBottomWidth: 1,
borderBottomColor: '#eee' },
listText: { fontSize: 16, fontWeight: 'bold' },
editBtn: { color: '#1976d2', marginHorizontal: 8 },
deleteBtn: { color: '#d32f2f', marginHorizontal: 8 },
sectionTitle: { fontSize: 18, fontWeight: 'bold', marginTop: 15, marginBottom: 5 },
});
```
---
## How to Use
1. **Install dependencies** as shown above.
2. Copy the code into your `[Link]`.
3. Run with `expo start`.
4. Login with username: `admin`, password: `123456`.
5. Manage Contacts, Sales, and Inventory with full CRUD and search/filter.
---
### You can further enhance this app with:
- Data validation
- Better UI libraries (e.g., React Native Paper)
- Export/import data
- User roles and permissions
If you need more advanced features or want to integrate cloud sync, let me know!