Maybe you are right. But I don’t know where and how to find out where it is happening. Because its only happening in an production build. But there is one place where it could happen and that its on my questions page. But I don’t know what could cause that.
Question page
import React, { useEffect , useReducer, useState} from "react";
import { View, ImageBackground,Text , TouchableOpacity , ScrollView, Pressable,useColorScheme} from 'react-native';
//firebase
import { collection , query, getDocs, where,limit } from "firebase/firestore";
import { db } from "../../firebaseConfig";
//providers
import { INITIAL_STATE, questionReducer } from "./reducers/questionReducer";
//expo
import { Fontisto , MaterialCommunityIcons } from '@expo/vector-icons';
//navigation
import { useNavigation, useTheme } from "@react-navigation/native";
//modals
import QuestionModalResult from "./modals/QuestionsModalResult";
import ModalLoading from "../ui/modals/ModalLoading";
//src
import { ACTION_TYPES } from "../../src/ActionTypes";
// assets
import darkBackgroundImage from "../../assets/background.jpg";
import lightBackgroundImage from "../../assets/lightBackground.jpg";
//providers
import { useAds } from "../../providers/AdsProvider";
import { Native } from "sentry-expo";
export default function QuestionsIndex({route}){
const scheme = useColorScheme();
const [state, dispatch] = useReducer(questionReducer, INITIAL_STATE);
const { questionCat, random, randomType } = route.params
const {adsCountAddOne}= useAds()
//navigation
const [questionModalResultVisable, setQuestionModalResultVisable]= useState(false)
const navigation = useNavigation()
const {colors, ts}= useTheme()
const nextQuestion = ()=>{
// const item = questions.docs[currentItemKey]
if(!state?.questionData?.questions)return;
const questions = state.questionData.questions
const newQuestion = questions.docs[state.questionData.selectedKey]
if(newQuestion?.data()){
// count the questions played to trigger a add
dispatch({type: ACTION_TYPES.QUESTION_SET, payload:{question:newQuestion.data(), id:newQuestion.id}})
}
if(state.questionData.selectedKey >= state.questionData.questions.size - 1){
getAllQuestions()
}else{
dispatch({type: ACTION_TYPES.QUESTION_KEY_ADD_ONE})
adsCountAddOne()
}
}
const nextStep=async()=>{
//if answer is not showed
if(state.checkAnswer === false){
setQuestionModalResultVisable(true)
dispatch({type: ACTION_TYPES.QUESTION_ANSWER_SET_TRUE})
}
//if answer is showed
if(state.checkAnswer === true){
setQuestionModalResultVisable(false)
dispatch({type: ACTION_TYPES.QUESTION_ANSWER_SET_FALSE})
dispatch({type: ACTION_TYPES.QUESTIONS_CHOSEN_BUTTON_INDEX_UPDATE, payload:{key:null, isRightValue: null}})
nextQuestion()
}
}
const getAllQuestions= async()=>{
// setLoading(true)
dispatch({type: ACTION_TYPES.QUESTIONS_LOADING_STARTED})
dispatch({type: ACTION_TYPES.QUESTION_KEY_RESET})
let isMounted = true
try{
const randomNumber = Math.floor(1000 + Math.random() * 90000);
const randomIndex = Math.floor(1 + Math.random() * 3);
let defaultBook = "Genisis"
if(questionCat){
defaultBook= questionCat;
}
const q = await createQuery(randomIndex, randomNumber,defaultBook)
//execute query and getter questions
await getDocs(q).then((questionsSnap)=>{
if(questionsSnap && isMounted){
checkCollectedDocuments(questionsSnap)
}
}).catch((err)=>{
Native.captureException(err)
console.log(err)
})
}catch(err){
Native.captureException(err)
console.log(err)
}
return ()=>{ isMounted=false }
}
const createQuery=async(randomIndex, randomNumber,defaultBook)=>{
const questionsRef = collection(db, "ENQuestions","KJV","question");
if(random){
if(randomType == "old" || randomType =="new"){
const q = await query(questionsRef,
// where("questionCat", "in" , questionCats),
where("testament", "==" , randomType),
where("randomIds."+randomIndex, ">=" ,randomNumber),
limit(4)
)
return q
}else{
const q = await query(questionsRef,
where("randomIds."+randomIndex, ">=" ,randomNumber),
limit(4)
)
return q
}
}else{
const q = await query(questionsRef,
where("questionCat", "==" , defaultBook),
where("randomIds."+randomIndex, ">=" ,randomNumber),
limit(4)
)
return q
}
}
const checkCollectedDocuments =async (documents)=>{
dispatch({type: ACTION_TYPES.QUESTIONS_QUESTIONS_UPDATE, payload:{questions: documents}})
if(documents?.size == 0){
dispatch({type: ACTION_TYPES.QUESTIONS_LOADING_ERROR})
return
}
dispatch({type: ACTION_TYPES.QUESTIONS_LOADING_FINISHED})
}
const shuffle= (array)=>{
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
const temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
// useEffects
useEffect(()=>{
if(state?.questionData?.questions?.size > 0){
nextQuestion()
}
},[state?.questionData?.questions])
useEffect(()=>{
//shuffelse the options from the selected question
async function randomOptions(){
let options = state.questionData.selected.options
const rightAnswer = options.filter(option => {
return option.isRight === true;
})
const randomOptions = shuffle(options)
dispatch({type: ACTION_TYPES.QUESTIONS_OPTIONS_UPDATE, payload:{options: randomOptions, rightAnswer: rightAnswer[0]}})
}
if(state.questionData.selected?.options){
randomOptions()
}
},[state.questionData.selected])
useEffect(()=>{
console.log('QuestionIndex Initiated')
getAllQuestions()
},[])
return(
<ImageBackground blurRadius={2} source={scheme == "dark"? darkBackgroundImage:lightBackgroundImage } resizeMethod="scale" style={{flex:1, justifyContent: 'center'}}>
<QuestionModalResult
visableStatus={questionModalResultVisable}
nextStep={()=> nextStep()}
findableAt={state.questionData?.selected?.location}
chosenAnswer={state.chosenButtonIndex}
rightAnswer={state.questionData?.rightAnswer}
questionId={state.questionData?.selectedId}
/>
<ModalLoading
errorMessage={state.errorMessage}
visableStatus={state.loading}
reload={getAllQuestions}
/>
<ScrollView contentContainerStyle={{ paddingHorizontal: 25, backgroundColor: colors.mainBackground_opacity, flex:1}} showsVerticalScrollIndicator={false}>
<View style={{marginTop:50}}>
<Pressable onPress={()=> navigation.goBack()}>
<MaterialCommunityIcons size={30} color={colors.white_500} name={'arrow-u-left-top'} />
</Pressable>
</View>
<View style={{alignSelf: 'center' , borderRadius:5 ,backgroundColor: colors.black_500, alignItems:'center', minWidth:160, height:35 ,justifyContent: 'center'}}>
<Text style={{color:colors.white_500, fontSize: ts.ts3, }}>{state?.questionData?.selected?.questionCat && state.questionData.selected.questionCat }</Text>
</View>
<View style={{height:200, paddingVertical:20 , backgroundColor: colors.black_500 ,marginTop:10,paddingHorizontal:10, borderRadius:20 ,}}>
<ScrollView
showsVerticalScrollIndicator={true}
persistentScrollbar={true}
contentContainerStyle={{flexGrow:1,justifyContent: 'center'}}
style={{width: '100%',position: 'relative'}}
>
<Text style={{color: colors.white_500, textAlign: 'center', fontSize: ts.ts3, paddingHorizontal:5 }}>{state?.questionData?.selected?.title && state.questionData.selected.title}</Text>
</ScrollView>
</View>
<View style={{flexWrap: 'wrap', flex:1, flexDirection: "row", marginTop:20}}>
{state?.questionData?.options && state.questionData.options.map((option,index)=>{
return (
<TouchableOpacity key={index} onPress={() => dispatch({type: ACTION_TYPES.QUESTIONS_CHOSEN_BUTTON_INDEX_UPDATE, payload:{key:index, isRightValue: option.isRight}}) }
disabled={state.checkAnswer}
style={[
{width: '100%', borderRadius:10, paddingHorizontal:20, minHeight: 66, justifyContent:'center', paddingVertical:10,marginBottom:20,backgroundColor: colors.black_500 },
state.chosenButtonIndex.key === index ? { borderWidth: 1 , borderColor: colors.white_500} : { borderWidth: 0},
]}
>
<Text style={{color: colors.white_500, fontSize: ts.ts3}}>{option?.text && option.text}</Text>
</TouchableOpacity>
)
})}
</View>
</ScrollView>
{state.chosenButtonIndex?.key != null &&
<TouchableOpacity disabled={state.checkAnswer} onPress={()=> nextStep()} style={{position: 'absolute' , bottom: 20 , right: 20, backgroundColor: colors.black_500, paddingHorizontal:20, paddingVertical:10 , alignItems: 'center', justifyContent: 'center', borderWidth: 0.5 , borderColor: colors.white_500, borderRadius:10}}>
<Text style={{color: colors.white_500, fontSize: ts.ts3}}>Check</Text>
</TouchableOpacity>
}
</ImageBackground>
)
}