I am trying to make a settings screen (B.js) where the user can toggle off and on cards they want to see or don't want to see on the Track Screen. The cards are separated into different JS files as well and are all imported to TrackScreen.js (A.js) for navigation.
How can I toggle the visibility of these cards in TrackScreen.js from the Settings.js file?
Settings.js
export default class Settings extends React.Component {constructor() { super(); this.state = { show: true, };}ShowHideComponent = () => { if (this.state.show == true) { this.setState({ show: false }); } else { this.setState({ show: true }); }};render() { return (<Layout style={styles.mainContainer}><TopNavigation position="absolute" top={0} style={{ height: hp('14%'), width: width }} /><Text style={{ top: hp('2%'), left: wp('-30'), fontSize: wp('7.5%'), fontWeight: '700' }}>Settings</Text><Button style={{ left: wp('40%'), top: wp('3'), height: hp('5%') }} appearance="outline" onPress={() => this.props.navigation.navigate("Settings")}> Done</Button><Divider /><Card style={styles.cardContainer}> {this.state.show ? ( ***I want to hide the PainCard (and other cards) I have used in TrackScreen.js*** ) : null}<Button onPress={this.ShowHideComponent} > Hide/Show</Button></Card></Layout> );};
}
The cards are in TrackScreen.js:
import React from "react";import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';import MedicationCard from "./TrackingCards/MedicationCard";import PainCard from "./TrackingCards/PainCard";import MoodCard from "./TrackingCards/MoodCard";import BloodCard from "./TrackingCards/BloodCard";import DigestionCard from "./TrackingCards/DigestionCard";import ExerciseCard from "./TrackingCards/ExerciseCard";import SaveCard from "./TrackingCards/SaveCard";import DietCard from "./TrackingCards/DietCard";import SexCard from "./TrackingCards/SexCard";import { TrackingStyles } from "./TrackingStyles";import { HomeStyles } from "./HomeStyles";import { Divider, Layout, TopNavigation, Button } from "@ui-kitten/components";import { ScrollView, Dimensions, Image, Text } from "react-native";import AppointmentCard from "./TrackingCards/AppointmentCard";const { width } = Dimensions.get("window");export const A = ({ route, navigation }) => {const { currentDate } = route.params;console.log("Route params in Track", route.params) return (<Layout style={TrackingStyles.container}><TopNavigation position="absolute" top={0} style={{ height: hp('9%'), width: width }} /><Button style={{ left: wp('40%'), top: wp('5%'), height: hp('5%') }} appearance="outline" onPress={() => navigation.navigate("Home")}>Done</Button><Image style={TrackingStyles.doctorContainer} source={require("../../assets/doctor.png")} /><Divider /><ScrollView horizontal={true} contentContainerStyle={{ justifyContent: "space-around", flex: 1, flexGrow: 1, flexDirection: "row", marginLeft: "-42%", marginRight: "-63%", justifyContent: "center", bottom: hp('-45%'), }}><MedicationCard /><PainCard navigation={navigation} route={route} /><MoodCard navigation={navigation} route={route} /><BloodCard navigation={navigation} route={route} /><DigestionCard navigation={navigation} route={route} /><ExerciseCard navigation={navigation} route={route} /><DietCard navigation={navigation} route={route} /><SexCard navigation={navigation} route={route} /><SaveCard navigation={navigation} /><Text style={TrackingStyles.dietText}>Diet</Text><Text style={TrackingStyles.sexText}>Sex</Text><Text style={TrackingStyles.painText}>Pain</Text><Text style={TrackingStyles.smallSaveText}>Save</Text></ScrollView><AppointmentCard /><Text style={TrackingStyles.appointmentText}>Appointment</Text></Layout>);};
I am not sure how to go about this and advice would be greatly appreciated thank you.