I am using two tabs for the Navigation.
Tab.Navigator><Tab.Screen name="Questions" component={questions_screen} /><Tab.Screen name="Confirmed Symptoms" component={symptoms_screen}/></Tab.Navigator>questions screen:
const questions_screen = () => {return (<ScrollView style={styles.background}> {/*<TourGuideZone zone={1} text={'Do you want to continue the tutorial?'} borderRadius={15}>*/} {/*</TourGuideZone>*/}<View style={styles.navigationRow}><TourGuideZone zone={2} text={t('tourGuide.selectedCrop')} borderRadius={15}><Text style={styles.baseText}> {t('questionscreen.CropChosen')}<Text style={styles.innerText}> {cropName}</Text></Text></TourGuideZone><TourGuideZone zone={3} text={t('tourGuide.selectLanguage')} borderRadius={15}> {/* Language Selection */}<LangSelection/></TourGuideZone></View><View style={styles.lineStyle}/> {/* Navigation buttons */}<View style={styles.navigationRow}><View style={styles.leftAlign}> {(path.pathIndex >= -1) && <Previous handleOnPress={()=> path.pathIndex>=0 ? handleBack() : navigation.navigate('Root') }/>}</View><TourGuideZone zone={4} text={t('tourGuide.restart')}><View style={styles.centerAlign}><StartOver/></View></TourGuideZone><View style={styles.rightAlign}> {path.pathIndex + 2 <= path.path.length && <Next handleOnPress={handleNext}/>}</View></View> {/* Questions */}<View style={styles.questionSet}><TourGuideZone zone={5} text={t('tourGuide.questions')}><FlatList numColumns={1} data={symptoms} keyExtractor={item => item.sid.toString()} renderItem={({item, index}) => { const symptom = item; return (<SymptomBlock symptom={symptom} onPress={handleSymptomPress} selected={selectedSymptom == symptom.sid} key={symptom.sid} rowNumber={baseSymptomNumber + index + 1} /> ); }} /><SymptomBlock symptom={noSymptom} onPress={handleNoSymptom} selected={selectedSymptom == noSymptom.sid} rowNumber={baseSymptomNumber + symptoms.length + 1} /></TourGuideZone></View> {/* Navigation buttons */}<View style={styles.navigationRow}><View style={styles.leftAlign}> {(path.pathIndex >= -1) && <Previous handleOnPress={()=> path.pathIndex>=0 ? handleBack() : navigation.navigate('Root') }/>}</View><TourGuideZone zone={4} text={t('tourGuide.restart')}><View style={styles.centerAlign}><StartOver/></View></TourGuideZone><View style={styles.rightAlign}> {path.pathIndex + 2 <= path.path.length && <Next handleOnPress={handleNext}/>}</View></View><View style={styles.lineStyle}/><TourGuideZone zone={7} text={t('tourGuide.selectedSymptoms')} borderRadius={50}><View style={styles.rowAlign}><Text style={styles.headingText}>{t('questionscreen.Confirm')}</Text></View><View style={styles.columnAlign}> {confirmedNames.map((item: string, index: number) => (<Text key={index} style={styles.contentText}> {'\u2022'} {item} </Text>) )}</View></TourGuideZone> {/* Modal 1 : Popup for L1 symptom not found */}<NoSymptomModal onDismissPress={() => setisVisibleL1symptomNotFound(false)} visible={isVisibleL1symptomNotFound} /> {/* Modal 2: Popup for other level symptoms not found */}<Modal presentationStyle={"overFullScreen"} statusBarTranslucent={true} animationType = {"slide"} transparent={true} visible={isVisibleSymptomNotFound}><View style={modalStyles.modalContainer}><View style={modalStyles.modalView}><Image source={require('../../assets/warning.png')} style = {styles.disclaimer}/><Text style = { modalStyles.messageText }>{t('questionscreen.notfound')}</Text><Text style = { modalStyles.messageText }>{t('questionscreen.messageSymptomNotFound')}</Text><Text style = { modalStyles.messageText }>{t('questionscreen.thankyou')}</Text><TouchableOpacity style={modalStyles.dismissButton} onPress={() => { setisVisibleSymptomNotFound(false) }}><Text style={modalStyles.closeText}>{t('questionscreen.Dismiss')}</Text></TouchableOpacity><View style={modalStyles.endLineStyle} /></View></View></Modal> {/* Popup for confirming answers */}<Modal presentationStyle={"overFullScreen"} statusBarTranslucent={true} animationType={"slide"} transparent={true} visible={confirm}><View style={modalStyles.modalContainer}><View style={modalStyles.modalView}><Text style={modalStyles.messageText}>Do you wish to confirm the selection?</Text><TouchableOpacity style={modalStyles.dismissButton} onPress={() => { setConfirm(false) }}><Text style={styles.confirmText}>Confirm</Text></TouchableOpacity></View></View></Modal><Overlay isVisible={isLoading} overlayStyle={styles.indicator}><ActivityIndicator size="large" color="#4FB872" animating={isLoading}/></Overlay></ScrollView>);};
Symptoms screen:
const symptoms_screen = () => {return (<View style={styles.background}><View style={styles.questionSet}> { confirmedNames.map(function(i:any, index:any){ console.log(index); return (<Text>{i.qn}</Text> ); }) }</View></View> );This questions_screen and symptoms screen are in the same page, because confirmed symptoms are updated by changes in the questions screen.The tab bar is working when i remove everything written in the questions_screen and start to wrote with first, by normal methonds.But when i try to use symptom block or tourzoneguide, it is again giving the same error
Symptom block is the component that i am using
const check = require('../../assets/check.png');const yes_circle = require('../../assets/yes_circle.png');type SymptomBlockProps = { containerStyle?: StyleProp<ViewStyle>; tileStyle?: StyleProp<ViewStyle> selectedTile1Style?: StyleProp<ViewStyle> selectedTile2Style?: StyleProp<ViewStyle> textStyle?: StyleProp<TextStyle> selected?: boolean symptom: Symptom, rowNumber: number, onPress: (symptom: Symptom) => void}const SymptomBlock = ({ containerStyle = styles.align, tileStyle = styles.tile, selectedTile1Style = styles.tile1Selected, selectedTile2Style = styles.tile2Selected, selected = false, symptom, onPress, textStyle = styles.text // rowNumber}: SymptomBlockProps) => { const {t,selectedLocale} = React.useContext(LocaleContext) return (<View style={containerStyle}><TouchableHighlight underlayColor={symptom.sid!=0 ? colors.oceanGreen : colors.mercury} style={[[tileStyle, selected ? selectedTile1Style : {}],symptom.sid==0 ? [tileStyle, selected ? selectedTile2Style : {}] : {}]} onPress = {() => { onPress(symptom)} }><View style={styles.textBlock}><TourGuideZone zone={6} shape={'circle'} text={t('tourGuide.speak')} style={styles.iconContainer}><Icon name='volume-up' type='font-awesome' size={18} containerStyle={styles.icon} onPress={()=> { Speech.stop() Speech.speak(symptom.qn, { language: selectedLocale +'-IN', rate:0.8}) }}/></TourGuideZone> {/* <Text style={styles.number}>{rowNumber}</Text> */}<Text style={[textStyle, symptom.sid==0 ? styles.blueText : {}]}>{symptom.qn}</Text><View style={[[styles.yesTile, selected ? styles.yesTile1Selected : {}], symptom.sid==0 ? [styles.yesTile, selected ? styles.yesTile2Selected : {}] : {}]}> {!selected && <ImageBackground source={yes_circle} style={styles.yes}><Text style={styles.yesText}>{t('others.yes')}</Text></ImageBackground> } {selected && <Image source={check} style={styles.tick}/>}</View></View></TouchableHighlight></View> )}export default React.memo(SymptomBlock)Please help me with this, whether it is possbile to use the exisitng questions_screen in the tab bar, or do i have to write everything from start without these components of tourzoneguide and symptom block.
Thanks in advance.