Sqlite make my app freeze on a screen after several insert.

Please provide the following:

  1. SDK Version:38.0.8
  2. Platforms(Android/iOS/web/all): Android

Hello,

I use sqlite in a React Native app that is still in developement.
I succesfully used sqlite with the example in expo, the problem come after a few insert in one table : The app stays on the screen make use of the database and my visual studio code’s log doesn’t show any error…
The problem happen on Android studio (using Nexus 5 api 27) and my own phone (Huawei Y5).

Here is the code of one of my page using sqlite :

import React, { useState, useEffect, useRef } from 'react';
import {ImageBackground,Animated, StyleSheet, Text, View, PanResponder, TouchableOpacity, Modal,   TouchableHighlight,} from 'react-native';
import * as SQLite from 'expo-sqlite';


const image = { uri: "BasicSpaceBackground.png"}

const db = SQLite.openDatabase("SpaceTravelerDB");


const toto= "rominou";


class Cockpit extends React.Component {
 
  constructor(props){
    super(props);

    navigation = this.props.navigation;
  
    this.state = {
      modalVisible: false,
      modalName: "",

     
      players: [],

     
    };

  }




GetRandomSituation = () =>{

  let result = "";
  let randomNumber =  Math.random();
  console.log(randomNumber);

  if(randomNumber < 0.25){
    result = "planet";
    return result;
  }
  else if(randomNumber >= 0.25 && randomNumber <0.5){
    result ="spacecship";
    return result;
  }
  else if(randomNumber >= 0.5 && randomNumber < 0.75){
    result="asteroid";
    return result;
  }
  else if(randomNumber >= 0.75){
    result="none";
    return result;
  }


}

Explore = (random, known) =>{
  let situation = this.GetRandomSituation();
  console.log("Situation : ", situation)
  if(situation==="planet"){

    this.props.navigation.navigate('Planet');

  }
  else if (situation==="asteroid"){


    alert("asteroid");


  }
  else if (situation==="none"){
    alert("nothing found");
    
  }
  else if (situation==="spaceship"){
    alert("spaceship");
    
  }



}



//*********SQLite functions********** */

  componentDidMount(){

  /*db.transaction(tx => {
   
  });*/
  

}
  searchUser = () => {
 
 /* db.transaction(tx => {
    tx.executeSql(
      `select * from player`,[],
      (_, {rows : { _array }}) => {
        this.setState({players: _array});
      
      } 
    );
    
  });*/

 
};

add() { 
  

  /*db.transaction(
    tx => {
      tx.executeSql("insert into player (name) values (?)", [toto]);
    

    })*/
}
//********************************************** */






  setModalVisible = (visible, name) => {
    this.setState({ modalVisible: visible, modalName: name });
  }

  render = () =>{
 
    return (
   
    
      <View style={styles.container}>

          <ImageBackground source={require("../assets/images/BasicSpaceBackground.png")} style={styles.window}>
          </ImageBackground>


          <Modal
            animationType="slide"
            transparent={true}
            visible={this.state.modalVisible}
            onRequestClose={() => {
              Alert.alert("Modal has been closed.");
            }}
          
            >
              <View style={styles.centeredView}>
                <View style={styles.modalView}>
                  <Text style={styles.modalTitle}> {this.state.modalName}</Text>
                  <Text style={styles.modalText}> Lol mdr 
                  
                 
            
                  </Text>
                 

                  <TouchableHighlight
                    style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
                    onPress={() => {
                     
                      this.setModalVisible(false);
                     
                    }}
                  >
                    <Text style={styles.textStyle}>Close {this.state.modalName}</Text>
                  </TouchableHighlight>
                </View>
              </View>
            </Modal>


          <View style={styles.controlsPanel}>
            <View style={{flex:1, flexDirection: "row"}}>
                 <View style={styles.square}></View>
                 <View style={styles.square}></View>
                 <View style={styles.square}></View>
                 <View style={styles.square}></View>
                 <View style={styles.square}></View>
                 <View style={styles.square}></View>
                 <View style={styles.square}></View>
               
            </View>

          
            <View style={styles.BlockBigButtons}>
                <View style={styles.BigButton}></View>
                 <View style={styles.BigButton}></View>
               

            </View>  
            
          </View>
          <View style={styles.ActionsButtonsBlock}>

              <TouchableOpacity style={styles.ActionsButtons} 
              onPress={() => {
               
                this.Explore(true,"lol");
               //this.setModalVisible(true,"Explore" );
             }}>
                  <Text>Explore</Text>
              </TouchableOpacity>

              <TouchableOpacity  style={styles.ActionsButtons} name="Upgrade" onPress={() => {
                 this.searchUser();
                
              
                this.setModalVisible(true,"Upgrade" );
              }}>
                  <Text>Upgrade</Text>
              </TouchableOpacity>

              <TouchableOpacity  style={styles.ActionsButtons} name="Inventory" onPress={() => {
                this.setModalVisible(true,"Inventory" );
                //this.add();
               
              }}>
                  <Text>Inventory</Text>
              </TouchableOpacity>

              <TouchableOpacity  style={styles.ActionsButtons} name="Log" onPress={() => {
                this.setModalVisible(true,"Log" );
                console.log("********* appel 1 : ", this.state.playerName);
              }}>
                  <Text>Log</Text>
              </TouchableOpacity>
          </View>
          { this.state.players.map((joueur, index) =>{
            return(
              <Text style={styles.modalText} key={index}>{joueur.name}</Text>
            )}
            )
            }
       
      </View>
  )

  }
	}


const styles = StyleSheet.create({
  container: {
      backgroundColor: "#2e2a2a",


     flex:1,
     flexDirection:"column",
     justifyContent: 'center',
     alignItems: 'center',
  },
  text1:{
    color: "blue"

  },

  textButton:{
    color:"yellow"
  },
  image: {
    flex: 1,
    resizeMode: "cover",
    justifyContent: "center"
  },
  button:{
    color: "yellow"
  },
  window:{
    margin:5,
    resizeMode: "cover",
    justifyContent: "center",
    borderRadius: 50,
    width:300,
    height:150
 
  },
  controlsPanel:{
  
    backgroundColor:"silver",
    width:300,
    height:100
  },
  blocSquare:{
    
    flexDirection:"row", 
  },
  blocBigButtons:{
   
    flexDirection: "row",

  },

  BigButton:{
    marginLeft: 10,
    marginRight: 10,
    marginTop:5 ,
    marginBottom:5,   
    width: 60,
    height: 20,
    backgroundColor: "blue",

    
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.23,
    shadowRadius: 2.62,
  },
  square:{
    margin: 10,
    width: 20,
    height: 20,
    backgroundColor: "red",


    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.23,
    shadowRadius: 2.62,

elevation: 4,
  },
  

  ActionsButtons:{
    margin:10,
    padding:10,

    backgroundColor: "silver",


    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.23,
    shadowRadius: 2.62,

    elevation: 4,
      

  },
  ActionsButtonsBlock:{
    flexDirection: "row"
  },
  //*************** */
  //Modal Styles
//***************** */
centeredView: {
  flex: 1,
  justifyContent: "center",
  alignItems: "center",
  marginTop: 22
},
openButton: {
  backgroundColor: "#F194FF",
  borderRadius: 20,
  padding: 10,
  elevation: 2
},
modalView: {
  margin: 20,
  padding:10,

  opacity: 0.8,
  backgroundColor: "#2e2a2a",
  borderRadius: 20,
  padding: 35,
  alignItems: "center",
  shadowColor: "#000",
  shadowOffset: {
    width: 0,
    height: 2
  },
  shadowOpacity: 0.25,
  shadowRadius: 3.84,
  elevation: 5
},
modalTitle:{
  margin:10,
  fontSize: 30,
},
modalText: {
  marginBottom: 15,
  textAlign: "center",
  color: "pink"
}

//*************** */
})





export default Cockpit

I put in coments the calls to sqlite since it “bugs” now.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.