Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16750

I want to Toggle the visibility of card components I have used in A.js from B.js - React Native

$
0
0

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.


Viewing all articles
Browse latest Browse all 16750

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>