Can't find variable: queriesString - React Native Context - react-native

Question

The app is for looking up information about product from an api, either by article or ean code.
User can input Article code or EAN in TextInput or scan a barcode and get the information about the product from the api.
The problem im having is i'm not able to pass the search queries from the Textinput to the queriesString in the Context Provider.
This is the error code im getting.
> ReferenceError: Can't find variable: queriesString
For what i'm able to find out the code should work, but since its my first app in react native im most likely missing something.
App
App.js
import { NavigationContainer } from "#react-navigation/native";
import { createNativeStackNavigator } from "#react-navigation/native-stack";
import HomeScreen from "./app/screens/HomeScreen";
import ScannerScreen from "./app/screens/ScannerScreen";
import { queriesContext } from "./app/global/queriesContext";
const Stack = createNativeStackNavigator();
export default function App() {
return (
<>
<queriesContext.Provider value={{ queriesString: "123456789" }}>
{console.log(queriesString + " - From App")}
<NavigationContainer>
<Stack.Navigator initialRouteName='Home' screenOptions={{ headerShown: false }}>
<Stack.Screen name='Home' component={HomeScreen} />
<Stack.Screen name='Scanner' component={ScannerScreen} />
</Stack.Navigator>
</NavigationContainer>
</queriesContext.Provider>
</>
);
}
HomeScreen
HomeScreen.js
import { StyleSheet, Text, View, Image, SafeAreaView, Platform, TextInput, Button, TouchableWithoutFeedback, Keyboard } from "react-native";
import { useNavigation } from "#react-navigation/native";
import React, { useContext, useState, useEffect } from "react";
import ProductScreen from "../global/GetData";
import { queriesContext } from "../global/queriesContext";
export default function HomeScreen() {
const [queriesString, setQueriesString] = useContext(queriesContext);
const [queries, setQueries] = useState(queriesString);
const navigation = useNavigation();
const handleSearch = () => {
setQueriesString(queries);
};
ProductScreen();
//console.log(useState.q);
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<SafeAreaView style={styles.MainScreen}>
<ProductScreen />
<TextInput style={styles.TextField} editable={true} maxLength='30' numberOfLines='1' placeholder='Art no.' keyboardType='numeric' onChange={(text) => setQueries(text)} />
<Button color='red' title='Search' onPress={handleSearch} />
<View style={styles.BarcodeBox}>
<TouchableWithoutFeedback onPress={() => navigation.navigate("Scanner")}>
<Image style={styles.BarcodeImage} source={require("../assets/barcode.png")} />
</TouchableWithoutFeedback>
</View>
</SafeAreaView>
</TouchableWithoutFeedback>
);
}
const styles = StyleSheet.create({
MainScreen: {.............},
});
ScannerScreen
Not complete since i can't get to pass the value from HomeScreen to context.
ScannerScreen.js
import React, { Component, useState, useEffect } from "react";
import { Text, View, Alert, StyleSheet } from "react-native";
import { BarCodeScanner } from "expo-barcode-scanner";
export default function ScannerScreen() {
const [hasPermission, setHasPermission] = useState(null);
const [scanned, setScanned] = useState(false);
useEffect(() => {
const getBarCodeScannerPermissions = async () => {
const { status } = await BarCodeScanner.requestPermissionsAsync();
setHasPermission(status === "granted");
};
getBarCodeScannerPermissions();
}, []);
const handleBarCodeScanned = ({ type, data }) => {
setScanned(true);
Alert.alert("Strekkode", data, [{ text: "Yes", onPress: () => setScanned(false) }, { text: "No" }]);
};
if (hasPermission === null) {
return <Text>Requesting for camera permission</Text>;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}
return (
<BarCodeScanner onBarCodeScanned={scanned ? undefined : handleBarCodeScanned} style={[StyleSheet.absoluteFill, styles.container]}>
<View style={styles.layerTop} />
<View style={styles.layerCenter}>
<View style={styles.layerLeft} />
<View style={styles.focused} />
<View style={styles.layerRight} />
</View>
<View style={styles.layerBottom} />
</BarCodeScanner>
);
}
const opacity = "rgba(0, 0, 0, .5)";
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
},
layerTop: {
flex: 2,
backgroundColor: opacity,
},
layerCenter: {
flex: 1,
flexDirection: "row",
},
layerLeft: {
flex: 1,
backgroundColor: opacity,
},
focused: {
flex: 10,
},
layerRight: {
flex: 1,
backgroundColor: opacity,
},
layerBottom: {
flex: 2,
backgroundColor: opacity,
},
});
GetData
GetData.js
import { StyleSheet, Text, View, Image, SafeAreaView, Platform, TextInput, Button, TouchableWithoutFeedback, Keyboard } from "react-native";
import React, { useContext, useState, useEffect } from "react";
import { queriesContext } from "./queriesContext";
export default ProductScreen = () => {
const [queriesString] = useContext(queriesContext);
const [isLoading, setLoading] = useState(true);
const [isPromotion, setPromotion] = useState(false);
const [data, setData] = useState({
results: [BEFORE API IS CALLED NOT...],
});
console.log(queriesString + " - From GetData");
useEffect(() => {
fetch(
"SERVER.........",
{
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
"x-algolia-agent": "Algolia for JavaScript (4.13.1); Browser; JS Helper (3.10.0)",
"x-algolia-application-id": "***********",
"x-algolia-api-key": "************************",
},
body: JSON.stringify({
requests: [
{
indexName: "prod_products",
params: "query=" + queriesString,
},
],
}),
}
)
.then((respnse) => respnse.json())
.then((json) => setData(json), console.log(data))
.catch((error) => console.error(error))
.finally(() => setLoading(false));
}, []);
//console.log(data);
//console.log(quaryString);
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<SafeAreaView style={styles.ProductScreen}>
<View style={styles.LogoBox}>
<Image source={require("../assets/Logo.png")} />
<Image
style={styles.ProductImage}
resizeMode='contain'
source={
isLoading
? require("../assets/fallback_266x266.png")
: {
uri: "https://................/" + data.results[0].hits[0].picture.product,
}
}
/>
</View>
<View>
<View>
<Text style={styles.Title}> {data.results[0].hits[0].name.no} </Text>
<Text style={styles.Desciption}>{data.results[0].hits[0].description.no}</Text>
<Text style={[styles.Text, styles.color]}>{data.results[0].hits[0].potentialPromotionsLabels[5110].text.no}</Text>
<Text style={styles.Text}> Price: {data.results[0].hits[0].code}</Text>
<Text style={styles.Text}> Article No: {data.results[0].hits[0].code}</Text>
<Text style={styles.Text}> EAN: {data.results[0].hits[0].ean}</Text>
</View>
</View>
</SafeAreaView>
</TouchableWithoutFeedback>
);
};
const styles = StyleSheet.create({
color: {................},
});
queriesContext
queriesContext.js
import { createContext } from "react";
export const queriesContext = createContext();
Error
ERROR ReferenceError: Can't find variable: queriesString
This error is located at:
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent)
ERROR ReferenceError: Can't find variable: queriesString
This error is located at:
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent)
If anyone could help i would greatly appreciate it

Answer 1

I finally got it to work.
Renamed a few things (queriesString, setQueriesString to Quary, setQuary) only to make it easier not to misspell.
I changed the brackets to curly braces in HomeScreen.js and GetData.js as suggested by Fanchen Bao.
In the HomeScreen.js from
export default function HomeScreen() {
const [ Quary, setQuary ] = useContext(queriesContext);
const [queries, setQueries] = useState("0");
To
export default function HomeScreen() {
const { Quary, setQuary } = useContext(queriesContext);
const [queries, setQueries] = useState("0");
And in GetData.js from
export default ProductScreen = () => {
const [ Quary ] = useContext(queriesContext);
to
export default ProductScreen = () => {
const { Quary } = useContext(queriesContext);
Then in the App.js i added a component and useState
export default function App() {
const [Quary, setQuary] = useState("95335");
In GetData i had also imported the context from
import { queriesContext } from "./queriesContext";
This was wrong and i changed this to the correct path
import { queriesContext } from "../global/queriesContext";
After this i still wasn't able to update the context correctly, and i found out that i should use onChangeText instead of onChange in the Textinput.
onChange resulted in the context updating, but the value was not the value in the Textinput field. insted it was returning [object Object].
LOG [object Object]