Heroes.js

import React, { useContext, useEffect, useState } from 'react';
import {
    Alert,
    Dimensions,
    Image,
    ScrollView,
    StatusBar,
    StyleSheet,
    Text,
    TextInput,
    TouchableOpacity,
    View,
} from 'react-native';
import { AppContext } from './App';

const { width, height } = Dimensions.get('window');

const getRandomColor = () => {
    const letters = '0123456789ABCDEF';
    let color = '#';
    while (color.length < 7) color += letters[Math.floor(Math.random() * 16)];
    return color;
};

export const Heroes = () => {
    const { db } = useContext(AppContext);
    const [name, setName] = useState('');
    const [heroes, setHeroes] = useState([]);

    useEffect(() => {
        let sub;
        if (db && db.heroes) {
            sub = db.heroes
                .find()
                .sort({ name: 1 })
                .$.subscribe((rxdbHeroes) => {
                    setHeroes(rxdbHeroes);
                });
        }
        return () => {
            if (sub && sub.unsubscribe) sub.unsubscribe();
        };
    }, [db]);

    const addHero = async () => {
        console.log('addHero: ' + name);
        const color = getRandomColor();
        console.log('color: ' + color);
        await db.heroes.insert({ name, color });
        setName('');
    };

    const removeHero = async (hero) => {
        Alert.alert(
            'Delete hero?',
            `Are you sure you want to delete ${hero.get('name')}`,
            [
                {
                    text: 'Cancel',
                    style: 'cancel',
                },
                {
                    text: 'OK',
                    onPress: async () => {
                        const doc = db.heroes.findOne({
                            selector: {
                                name: hero.get('name'),
                            },
                        });
                        await doc.remove();
                    },
                },
            ]
        );
    };

    return (
        <View style={styles.topContainer}>
            <StatusBar backgroundColor="#55C7F7" barStyle="light-content" />
            <Text style={styles.title}>React native rxdb example</Text>

            <ScrollView style={styles.heroesList}>
                <View style={styles.card}>
                    <TextInput
                        style={styles.input}
                        value={name}
                        onChangeText={(name) => setName(name)}
                        placeholder="Type to add a hero..."
                        onSubmitEditing={addHero}
                    />
                    {name.length > 1 && (
                        <TouchableOpacity onPress={addHero}>
                            <Image
                                style={styles.plusImage}
                                source={require('./src/plusIcon.png')}
                            />
                        </TouchableOpacity>
                    )}
                </View>
                {heroes.length === 0 && <Text>No heroes to display ...</Text>}
                {heroes.map((hero, index) => (
                    <View style={styles.card} key={index}>
                        <View
                            style={[
                                styles.colorBadge,
                                {
                                    backgroundColor: hero.get('color'),
                                },
                            ]}
                        />
                        <Text style={styles.heroName}>{hero.get('name')}</Text>
                        <TouchableOpacity
                            onPress={() => removeHero(hero)}
                            style={styles.alignRight}
                        >
                            <Image
                                style={styles.deleteImage}
                                source={require('./assets/deleteIcon.png')}
                            />
                        </TouchableOpacity>
                    </View>
                ))}
            </ScrollView>
        </View>
    );
};
const styles = StyleSheet.create({
    topContainer: {
        alignItems: 'center',
        backgroundColor: '#55C7F7',
        flex: 1,
    },
    title: {
        marginTop: 55,
        fontSize: 25,
        color: 'white',
        fontWeight: '500',
    },
    heroesList: {
        marginTop: 30,
        borderRadius: 5,
        flex: 1,
        width: width - 30,
        paddingLeft: 15,
        marginHorizontal: 15,
        backgroundColor: 'white',
    },
    plusImage: {
        width: 30,
        height: 30,
        marginRight: 15,
        marginLeft: 'auto',
    },
    deleteImage: {
        width: 30,
        height: 30,
        marginRight: 15,
    },
    alignRight: {
        marginLeft: 'auto',
    },
    input: {
        flex: 1,
        color: '#D2DCE1',
    },
    card: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-start',

        marginLeft: 12,
        paddingVertical: 15,
        borderBottomColor: '#D2DCE1',
        borderBottomWidth: 0.5,
    },
    colorBadge: {
        height: 30,
        width: 30,
        borderRadius: 15,
        marginRight: 15,
    },
    heroName: {
        fontSize: 18,
        fontWeight: '200',
        marginTop: 3,
    },
});

export default Heroes;