I just started react native with sqlite.
I have a function requesting my db but i dont get anything from it, i have an error but i dont know how to fix it
I think i have a problem when i try to connect to my db
Here is the part of my code i'm talking about:
import { useState } from 'react';
import { StatusBar,StyleSheet, Text, TextInput, View, Button, Range } from 'react-native';
import * as SQLite from 'expo-sqlite';
import Slider from '#react-native-community/slider'
const db = SQLite.openDatabase('database.db');
export default function App() {
const [range, setRange]= useState(Number);
const [valeurdB, setValeurdB]= useState(Number);
const setdB= () => {
db.transaction(txn =>
txn.executeSql('UPDATE settings SET number=? WHERE title == \'new\';',
[range],
(txn, res)=> {
console.log("db updated")
},
error=>{ console.log('Error on set ' + error.message) }
)
)
}
Here is what i get:
enter image description here
And my architecture :
enter image description here
Related
I need to get the MAC addresses of our devices to register them on our API. DeviceInfo.getMacAddress() works perfectly when deployed on emulators/devices directly from VS Code. When deployed from the APK file, it crashes with no error/warning. Have even tried wrapping it in a try/catch so I could report out the warning with no results with the same result; code below runs if deployed from VSCode and crashes with no message/alert if built into an APK.
Looked up permissions in React, and don't see anything required to get MAC addresses. What am I doing wrong here?
import React, {useRef, useEffect, useState} from 'react';
import { Text, View, Alert, ActivityIndicator } from 'react-native';
import MainComponent from '../../components/Main';
import ExceptionHandlerComponent from '../../components/common/ExceptionHandler';
import DeviceInfo from 'react-native-device-info';
import { loadScanner } from '../../helpers/scannerService';
import { GetUser } from '../../helpers/userRepo';
import {LogError} from '../../helpers/errorService'
import { LoginScanner } from '../../helpers/scannerService';
import { GenerateNewLog, LogAppSegment }from '../../helpers/correlationLogService'
import { set } from 'react-native-reanimated';
const Main = () => {
useEffect(() => {
try {
DeviceInfo.getMacAddress().then((mac)=>{
Alert.alert(
"Mac below",
mac );
}); }
catch (ex)
{
Alert.alert(
"Error below",
ex.message );
}
},
[]);
I am working in an existing expo project (expo version 42.0.1 ) and I am unable to get this package working. It says in the package readme that it doesn't work with Expo, because it uses native code. But the readme is from a year ago and I thought Expo sdk42 allows you to use native modules now when you build your own custom client?
Does anyone know what I need to do to get this package working?
https://github.com/KjellConnelly/react-native-shared-group-preferences
Here's what i tried so far...
I added to my project with yarn add react-native-shared-group-preferences
And in App.js :
import 'expo-dev-client';
import React from 'react';
import { styles } from './src/components/CommonStyles';
import { useState } from 'react';
import { View, TextInput, Text } from 'react-native';
import SharedGroupPreferences from 'react-native-shared-group-preferences';
export default function App() {
const [inputText, setInputText] = useState('');
const widgetData = {
displayText: inputText,
};
const appGroupIdentifier = 'group.com.myproject.newwidget';
const handleSubmit = async () => {
try {
console.log('handleSubmit' + widgetData + appGroupIdentifier);
await SharedGroupPreferences.setItem(
'savedData', // this is a key to pull from later in Swift
widgetData,
appGroupIdentifier
);
} catch (error) {
console.log({ error });
}
};
return (
...
)
when I run the project with expo start and i to open iphone simulator,
I get this error: null is not an object (evaluating 'RNReactNativeSharedGroupPreferences.setItem')"
What am I doing wrong? Any help very much appreciated. Thanks
I'm developing a cross platform mobile App.
I'm testing my code on a Android Studio emulator (google pixel 5, api level 30) and i'm using expo version : ~43.0.2 and expo-location version : ~13.0.4
I've already asked for the location permission, and it works. But when I call the following code i log "there" but never "here":
console.log("there")
const userLocation = await Location.getCurrentPositionAsync()
console.log("here")
Indeed, the function Location.getCurrentPositionAsync() seems locked
A similar issue has been know in the past according to these links:
React Native Expo-Location returns Location service unavailable during initial useEffect
https://forums.expo.dev/t/getcurrentpositionasync-doesnt-return-any-value-infinity-loading/23643
But it's also the code in the Expo doc :
https://snack.expo.dev/#charliecruzan/expo-map-and-location-example
. Bellow the entire app class :
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import {Text, TextInput, Pressable, View, Alert} from 'react-native';
import * as Location from "expo-location"
export default class App extends React.Component{
state = {
errorMessage: "",
location: {}
}
getAddress(){
return this.state.address
}
_getLocation = async ()=>{
const {status} = await Location.requestForegroundPermissionsAsync();
if (status !== "granted"){
console.log("PERMISSION LACK!")
this.setState({
errorMessage:"PERMISSION NOT GRANTED"
});
}
console.log("there")
const userLocation = await Location.getCurrentPositionAsync();
console.log("here")
console.log(JSON.stringify(userLocation))
this.setState({
location: userLocation
})
}
render(){
this._getLocation()
return (
<View>
<Text>Salut</Text>
</View>
);
}
}
What did i missed?
Add accuracy and maximumAge in parameters with Location.Accuracy.Highest and 10000 respectively as shown below:
JavaScript:
const userLocation = await Location.getCurrentPositionAsync({accuracy: Location.Accuracy.Highest, maximumAge: 10000});
The solution came from How to use getCurrentPositionAsync
function in expo-location | Tabnine.
As explained in this reddit post, the location service only works in emulators if you are logged into a google account.
I found it a little time-consuming to figure out which device was using my app, as the documentation doesn't have many clear examples and other posts are lacking as well.
You can find that getDeviceTypeAsync() should get the device type but not how to read the result.
Here is a simple solution put together from a few pieces of public code:
import React, { useEffect } from "react";
import { StyleSheet, Text, View } from "react-native";
import { DeviceType, getDeviceTypeAsync } from "expo-device";
export default function DevelopmentScreen() {
const deviceTypeMap = {
[DeviceType.UNKNOWN]: "unknown",
[DeviceType.PHONE]: "phone",
[DeviceType.TABLET]: "tablet",
[DeviceType.DESKTOP]: "desktop",
[DeviceType.TV]: "tv",
};
useEffect(() => {
getDeviceTypeAsync().then((deviceType) => {
console.log(deviceTypeMap[deviceType]);
});
}, []);
return null
}
Cheers!
I have an application with firebase connected. I am able to at each step console log and get see the data from firebase being passed around however when im in the component level it always returns empty.
import * as firebase from "firebase";
import { GET_LIST } from './types';
export const getListThunk = () => {
return (dispatch) => {
const teams = [];
const teamsObj = {};
var that = this;
var ref = firebase.database().ref('SignUp/' + "577545cf-c266-4b2e-9a7d-d24e7f8e23a5");
//var query = ref.orderByChild("uuid");
console.log("uuid thunk ");
ref.on('value', function (snapshot) {
console.log("snap ", snapshot.val())
snapshot.forEach(function (child) {
let currentlike = child.val()
console.log("schedas ", currentlike)
teams.push(currentlike);
console.log("teams ",teams);
});
dispatch({ type: GET_LIST, payload: teams})
})
}
}
At all the console log here I am able to receive the information from firebase. The console displays:
Now I checked my reducer to see if I can see my information there.
import { GET_LIST } from '../actions/types';
const INITIAL_STATE = {
jello: 'hello'
};
const listReducer = (state = INITIAL_STATE, action) => {
switch (action.type){
case GET_LIST:
console.log("action ", action.payload);
return action.payload;
default:
console.log("default ");
return state;
}
};
export default listReducer;
This console log labeled action shows the payload as well
So I am again able to see the data in the reducer payload.
Now checking my component I would assume calling this.props would show the data again however it shows up empty.
Component:
mport React, { Component } from "react";
import {
View,
StyleSheet,
Button,
SafeAreaView,
ScrollView,
Image,
TouchableOpacity,
Alert,
Animated,
FlatList
} from "react-native";
import {connect} from 'react-redux';
import { getListThunk } from '../actions';
import Form from '../components/Form';
import firebase from "firebase";
import * as theme from '../theme';
import Block from '../components/Block';
import Text from '../components/Text';
import App from "../../App";
class RenderRequests extends Component {
constructor(props) {
super(props);
this.params = this.props;
uuid2 = this.props.uuid;
}
componentWillMount(){
this.props.getListThunk();
}
componentDidMount(){
console.log("did mount " , this.params.uuid)
var uuid = this.params.uuid;
//this.props.getListThunk({uuid});
}
render() {
console.log("Component level array " ,this.props)
return (
<View>
<Text> {this.params.uuid} </Text>
</View>
);
}
}
export default connect(null, { getListThunk })(RenderRequests);
Now console login this shows an empty array:
NOTE the UUID in that log file is a UUID I passed as a prop from the previous screen. As you can see the "getListThunk" is empty.
--------EDIT------------------------ I have added code based on what Vinicius Cleves has said. However I had to make it {list: state} instead of {list: state.listReducer}
I now see it in my console. However, it seems like it shows up then runs the default action and my state gets reset to nothing. Below is a screenshot of my console:
If you see my reducer code I am logging when the default action is being called. Why is it being called so many times after the initial 'GET_LIST' action gets called. This keeps replacing my state with the default state.
getListThunk is a function, as expected. To access the information as you want in this.props, you should provide a mapStateToProps function to connect.
export default connect(
state=>({someVariableName: state.listReducer}),
{ getListThunk }
)(RenderRequests);
Now, the information you were missing on this.props will show under this.props.someVariableName