React Native database using React Hooks
You've to install some required packages:
npm install @react-native-community/async-storage react-native-get-random-values
See more about Async Storage here
After that, install our package:
npm install react-native-hooksdb
import React from 'react';
import {View, Text} from 'react-native';
import {useCollection} from 'react-native-hooksdb';
export default function Users() {
const {users} = useCollection('users');
return (
<View>
{users.map((user) => (
<Text key={user.id}>{user.name}</Text>
))}
</View>
);
}
import React, {useCallback, useState} from 'react';
import {View, TextInput, Button} from 'react-native';
import {useCollection} from 'react-native-hooksdb';
export default function InsertUser() {
const {insertOne} = useCollection('users');
const [name, setName] = useState('');
const insertUser = useCallback(
async function () {
await insertOne({name});
setName('');
},
[insertOne, name],
);
return (
<View>
<TextInput onChangeText={setName} value={name} />
<Button onPress={insertUser} title="Insert user" />
</View>
);
}
import React, {useCallback, useState} from 'react';
import {View, TextInput, Button} from 'react-native';
import {useCollection} from 'react-native-hooksdb';
export default function UpdateUser() {
const {updateById} = useCollection('users');
const [id, setId] = useState('');
const [name, setName] = useState('');
const updateUser = useCallback(
async function () {
await updateById(id, {name});
setId('');
setName('');
},
[id, name, updateById],
);
return (
<View>
<TextInput onChangeText={setId} value={id} />
<TextInput onChangeText={setName} value={name} />
<Button onPress={updateUser} title="Update user" />
</View>
);
}
import React, {useCallback, useState} from 'react';
import {View, TextInput, Button} from 'react-native';
import {useCollection} from 'react-native-hooksdb';
export default function RemoveUser() {
const {removeById} = useCollection('users');
const [id, setId] = useState('');
const removeUser = useCallback(
async function () {
await removeById(id);
setId('');
},
[id, removeById],
);
return (
<View>
<TextInput onChangeText={setId} value={id} />
<Button onPress={removeUser} title="Remove user" />
</View>
);
}