DEV Community

Cover image for SQLite e React Native
Emerson Vieira
Emerson Vieira

Posted on

SQLite e React Native

No Tutorial a seguir, será criado um exemplo simples de como criar um app usando React Native e salvando os dados em um banco(SQLite) local.

Espera-se que voce já tenha seu projeto criado ou crie um novo :)

Utilizaremos um biblioteca para fazermos uso do SQLite em nosso app.
Para adicionar o mesmo no projeto, basta inserir o comando abaixo na raiz do seu projeto.

yarn add react-native-sqlite-storage
Enter fullscreen mode Exit fullscreen mode

Estrutura de pastas do projeto

Alt Text

Arquivos

schemas.js

export const SupportedTypes = {
    INTEGER: {
        value: 'INTEGER',
        type: 'INTEGER',
        default_value: null
    },
    LONG: {
        value: 'LONG',
        type: 'INTEGER',
        default_value: null
    },
    DOUBLE: {
        value: 'DOUBLE',
        type: 'REAL',
        default_value: null
    },
    TEXT: {
        value: 'TEXT',
        type: 'TEXT',
        default_value: null
    },
    BOOLEAN: {
        value: 'BOOLEAN',
        type: 'INTEGER',
        default_value: null
    },
    DATETIME: {
        value: 'DATETIME',
        type: 'TEXT',
        default_value: null
    },
    SYNC_STATUS: {
        value: 'STATUS',
        type: 'TEXT',
        default_value: null
    },
    JSON: {
        value: 'JSON',
        type: 'TEXT',
        default_value: null
    },
};

export const Tables = {
    Movie: {
        name: {
            type: SupportedTypes.TEXT,
            primary_key: false,
            default_value: null,
        },
        description: {
            type: SupportedTypes.TEXT,
            primary_key: false,
            default_value: null,
        },
    },
};
Enter fullscreen mode Exit fullscreen mode

SQLiteManager.js

import SQLite from 'react-native-sqlite-storage';

SQLite.DEBUG(true);
SQLite.enablePromise(true);

import * as schema from './schemas';

const database_name = 'Example.db';
const database_version = '1.0';
const database_displayname = 'ExampleDB';
const database_size = 200000;

class SQLiteManager {
    constructor() {
        this.type = 'SingletonDefaultExportInstance';
        this.db = null;
    }

    initDB() {
        let db;
        return new Promise((resolve) => {
            SQLite.echoTest()
                .then(() => {
                    SQLite.openDatabase(
                            database_name,
                            database_version,
                            database_displayname,
                            database_size,
                        )
                        .then((DB) => {
                            this.db = DB;
                            db = DB;
                            db.executeSql('SELECT 1 FROM Movie LIMIT 1')
                                .then(() => {
                                    //
                                })
                                .catch((error) => {
                                    db.transaction((tx) => {
                                            for (const name in schema.Tables) {
                                                this.createTable(tx, schema.Tables[name], name);
                                            }
                                        })
                                        .then(() => {
                                            //
                                        })
                                        .catch(() => {
                                            //
                                        });
                                });
                            resolve(db);
                        })
                        .catch((error) => {
                            //
                        });
                })
                .catch((error) => {
                    //
                });
        });
    }

    closeDatabase(db) {
        if (db) {
            db.close()
                .then((status) => {
                    //
                })
                .catch((error) => {
                    this.errorCB(error);
                });
        } else {
            //
        }
    }

    addMovieReview(movie) {
        return new Promise((resolve) => {
            this.db
                .transaction((tx) => {
                    for (let i = 0; i < movie.length; i++) {
                        tx.executeSql('INSERT OR REPLACE INTO Movie VALUES (?, ?)', [
                            movie[i].name,
                            movie[i].description,
                        ]).then(([tx, results]) => {
                            //
                            resolve(results);
                        });
                    }
                })
                .then((result) => {
                    //
                })
                .catch(() => {
                    //
                });
        });
    }

    createTablesFromSchema() {
        if (this.db) {
            this.db.transaction((tx) => {
                for (const name in schema.Tables) {
                    this.createTable(tx, schema.Tables[name], name);
                }
            });
        }
    }

    dropDatabase() {
        return new Promise((resolve, reject) => {
            SQLite.deleteDatabase(database_name)
                .then(() => {
                    SQLite.openDatabase(
                        database_name,
                        database_version,
                        database_displayname,
                        database_size,
                    );
                })
                .then(() => {
                    resolve();
                })
                .catch((err) => {
                    reject(err);
                });
        }).catch((error) => {
            //
        });
    }

    createTable(tx, table, tableName) {
        let sql = `CREATE TABLE IF NOT EXISTS ${tableName} `;
        const createColumns = [];
        for (const key in table) {
            createColumns.push(
                `${key} ${table[key].type.type} ${
          table[key].primary_key ? 'PRIMARY KEY NOT NULL' : ''
        } default ${table[key].default_value}`,
            );
        }
        sql += `(${createColumns.join(', ')});`;
        tx.executeSql(
            sql,
            [],
            () => {
                //
            },
            () => {
                //
            },
        );
    }
}

export default new SQLiteManager();
Enter fullscreen mode Exit fullscreen mode

MovieRepository.js

import SQLiteManager from '../SQLiteManager';

export default class MovieRepository {
    addMovieReview(movie) {
        return new Promise((resolve, reject) => {
            SQLiteManager.addMovieReview(movie)
                .then((sqlite) => {
                    resolve(sqlite);
                })
                .catch((error) => {
                    reject(error);
                });
        });
    }
}
Enter fullscreen mode Exit fullscreen mode

MovieController.js

import MovieRepository from '../database/repository/MovieRepository';

export default class MovieController {
    constructor() {
        this.repository = new MovieRepository();
    }
    addMovieReview(movie) {
        return this.repository.addMovieReview(movie);
    }
}
Enter fullscreen mode Exit fullscreen mode

Main.js

import React from 'react';
import SQLiteManager from '../../database/SQLiteManager';
import {
    Text,
    StyleSheet,
    TouchableOpacity,
    StatusBar,
    TextInput,
    View,
} from 'react-native';

import MovieController from '../../controller/MovieController';

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    fileName: {
        fontWeight: 'bold',
        marginTop: 5,
    },
    instructions: {
        color: '#000',
        fontSize: 14,
        marginTop: 20,
        textAlign: 'center',
    },
    welcome: {
        marginTop: 40,
        color: '#000',
        fontSize: 22,
        fontWeight: 'bold',
        textAlign: 'center',
    },
    input: {
        margin: 15,
        height: 40,
        borderColor: '#000',
        borderWidth: 1,
    },
    submitButton: {
        backgroundColor: '#000',
        padding: 10,
        margin: 15,
        height: 40,
    },
    submitButtonText: {
        color: 'white',
        textAlign: 'center',
    },
});

class Main extends React.Component {
    constructor(props) {
        super(props);
        this.movieController = new MovieController();
        this.state = {
            name: '',
            description: ''
        };
    }

    componentDidMount() {
        SQLiteManager.initDB();
    }

    handleName = (text) => {
        this.setState({
            name: text
        });
    };
    handleDescription = (text) => {
        this.setState({
            description: text
        });
    };
    save = (name, description) => {
        const data = {
            name,
            description
        };
        const arrData = [];
        arrData.push(data);
        this.movieController
            .addMovieReview(arrData)
            .then(() => {
                alert('Reseha salva :)');
                this.setState({
                    name: '',
                    description: ''
                });
            })
            .catch(() => {
                alert('Error ao salvar resenha :(');
            });
    };

    render() {
        return ( <
                View style = {
                    styles.container
                } >
                <
                StatusBar barStyle = "light-content"
                backgroundColor = "#000" / >
                <
                Text style = {
                    styles.welcome
                } > SQLite e React Native < /Text> <
                Text style = {
                    styles.instructions
                } >
                Insira sua resenha sobre um filme = ) <
            /Text> <
            TextInput
        style = {
            styles.input
        }
        underlineColorAndroid = "transparent"
        placeholder = "Nome do Filme"
        placeholderTextColor = "#000"
        autoCapitalize = "none"
        value = {
            this.state.name
        }
        onChangeText = {
            this.handleName
        }
        />

        <
        TextInput
        style = {
            styles.input
        }
        underlineColorAndroid = "transparent"
        placeholder = "Descricao"
        placeholderTextColor = "#000"
        autoCapitalize = "none"
        value = {
            this.state.description
        }
        onChangeText = {
            this.handleDescription
        }
        /> <
        TouchableOpacity
        style = {
            styles.submitButton
        }
        onPress = {
                () => this.save(this.state.name, this.state.description)
            } >
            <
            Text style = {
                styles.submitButtonText
            } > Salvar < /Text> <
            /TouchableOpacity> <
            /View>
    );
}
}

export default Main;
Enter fullscreen mode Exit fullscreen mode

Screens

Alt Text

Alt Text

Alt Text

Até a próxima :)

Um tutorial bem direto ao ponto. Tem possibilidade para melhorar o código, mas para algo rápido e direto, está bem claro. Dúvidas, críticas ou sugestões...basta comentar :p

Link do projeto: https://github.com/mensonones/RNSQLite

Top comments (4)

Collapse
 
rickper80465077 profile image
Rick Pereira • Edited

Criei um aplicativo financeiro ligado ao banco de dados no servidor WEB, mas tem como ligar ao banco de dados SQLLite Local e incluir junto ao aplicativo para rodar somente no celular? e como faria isto? Aliás como eu crio as tabelas e campo no banco de dados e ligo ao aplicativo.

Collapse
 
mensonones profile image
Emerson Vieira

Oi, Rick! Tudo bem? O Schema do banco não fugirá muito do que está no servidor, basta você adaptar para o SQLite. Feito isso, basta você criar os métodos que farão o crud no banco ou algo mais específico que você queira, o restante é apenas a criação das telas e a chamada dos métodos criados para interagir com o banco SQLite. Acredito que seguindo esse tutorial, evoluindo ele ou fazendo esse tutorial ou outros, você irá pegar o jeito de como trabalhar com SQLite e React Native e irá conseguir adaptar sua ideia pra usar SQLite. :)

Collapse
 
rickper80465077 profile image
Rick Pereira

Pior é que eu não tenho nem ideia de como começar..

Collapse
 
lov111vol profile image
Marcin Szolke/Scholke

SQLIte database in SharedFolder
What is your experience with such a solution, how many people can use this application in parallel ?