Use SQLite in Expo React Native

359 Views Asked by At

I was trying to create a mobile app with Expo React Native, but it have to be an offline app, so I need to use a local database. In my app there are three files for the 3 screens: one is the home page, in another screen the user can save in the local database some data, and in another page the user can see the saved data (As a To Do app). It've tried to create the table in the AddScreen file, but when I try to access it from the ShowScreen File it doesn't work. I was thinking to create a class in another file, where to create the table, and to create a function to add data and another function to read data; but I don't know how to do it. Could You Help Me ?

-This is the main part od the AddScren File:

import React, {Component} from 'react';
import { TouchableOpacity, View, Text, StyleSheet } from 'react-native';
import { TextInput } from 'react-native-gesture-handler';

import colors from "../config/colors";

export default class App extends Component {

    state = {
        nameValue: "",
        nicknameValue: "",
    }

    saveDataHandler = () => {

        // Encrypt elements
        let ena = this.state.nameValue
        let eni = this.state.nicknameValue

        //Save data in Database

        //Clear TextInput
    }

    render () {
        return (
            <View>
                <Text style={styles.textInpubLabel} >Name Label</Text>
                <TextInput style={styles.textInput} onChangeText={text => this.setState({nameValue: text})} />
                <Text style={styles.textInpubLabel} >Nickname Label</Text>
                <TextInput style={styles.textInput} onChangeText={text => this.setState({nicknameValue: text})} />
                <Text style={styles.textInpubLabel} >Link Label</Text>
                <TextInput style={styles.textInput} onChangeText={text => this.setState({linkValue: text})} />
                <Text style={styles.textInpubLabel} >Email Label</Text>
                <TextInput style={styles.textInput} onChangeText={text => this.setState({emailValue: text})} />
                <Text style={styles.textInpubLabel} >Password Label</Text>
                <TextInput style={styles.textInput} onChangeText={text => this.setState({passwordValue: text})} />
                <TouchableOpacity style={styles.saveButton} onPress={this.saveDataHandler}>
                    <Text style={styles.saveButtonText} >Save</Text>
                </TouchableOpacity>
            </View>

        );
    }
}

-This is the main part of the ShowScreen File:

import React, {Component} from 'react';
import { Button, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';

import colors from "../config/colors";
import { setStatusBarStyle } from 'expo-status-bar';

export default class ShowScreen extends Component {
    state = {
        data: [],
    };

    searchDataAutomate = () => {
        //Find Data In Database and Save it in this.state.data and after show it
    }

    render() {
        return (
            <View>
                <Text>{this.state.data}</Text>
            </View>
            
        );
    }
}
0

There are 0 best solutions below