Please provide the following:
- SDK Version:38.0.8
- 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.