Disable react native classes on pressing a different class in the same group

Question

I am completely new to react, Using TouchableHighlight, I have created a class,

import React, { Component } from "react";
import { Text, View, Image, TouchableHighlight } from "react-native";
export default class ChooseProComp extends Component {
  render() {
    return (
      <TouchableHighlight
        underlayColor="transparent"
        onPress={this.props.onPress}
        style={{ flex: 1 }}
      >
        <View
          style={{
            marginRight: this.props.mr,
            borderRadius: 3,
            backgroundColor: "#ffffff",
            borderWidth: 0.7,
            borderColor: "#e1e1e1",
          }}
        >
          <View style={{ flexDirection: "row", padding: 8 }}>
            <Image
              style={{
                width: 26,
                height: 26
              }}
              source={this.props.typeImage}
            />
            <Text
              style={{
                fontSize: 13,
                alignSelf: "center",
                marginLeft: 8,
                color: "#737f8d"
              }}
            >
              {this.props.type}
            </Text>
          </View>
        </View>
      </TouchableHighlight>
    );
  }
}

I have imported ChooseProComp class in a different component like this, I am not sure whether I have to add a custom method.

<View style={{ flexDirection: "row", marginBottom: 6 }}>
            <ChooseProComp
              mr={7}
              typeImage={require("../../../Images/homescreen/typeicons/medical/medical.png")}
              type="Medical"
              onPress={() => this.renderType("Medical")
            }
            />

            <ChooseProComp
              typeImage={require("../../../Images/homescreen/typeicons/dental/dental.png")}
              type="Dental"
              onPress={() => this.renderType("Dental")}
            />
          </View>
          <View style={{ flexDirection: "row", marginBottom: 6 }}>
            <ChooseProComp
              mr={7}
              typeImage={require("../../../Images/homescreen/typeicons/homiopathi/homia.png")}
              type="Homeopathy"
              onPress={() => this.renderType("Homeopathy")}
            />

            <ChooseProComp
              typeImage={require("../../../Images/homescreen/typeicons/ayurveda/ayurveda.png")}
              type="Ayurveda"
              onPress={() => this.renderType("Ayurveda")}
            />
          </View>
          <View
            style={{ flexDirection: "row", marginBottom: 6, marginBottom: 25 }}
          >
            <ChooseProComp
              mr={7}
              typeImage={require("../../../Images/homescreen/typeicons/yoga/yoga.png")}
              type="Yogic science"
              onPress={() => this.renderType("Yogic science")}
            />

            <ChooseProComp
              typeImage={require("../../../Images/homescreen/typeicons/unani/unani.png")}
              type="Unani"
              onPress={() => this.renderType("Unani")}
            />
          </View>

So when I select a particular type, like Medical, I want to disable the ChooseProComp classes of other types. Please help me with this. Other types opacity needs to be decreased as well.

What does 'disable' mean? That you can't select them anymore? — Milore, Mar 18 '19 at 08:08
yes, I do not want the user to select other types when one type is selected — Rak1994, Mar 18 '19 at 08:10
Ok, so I think you can handle an array of 'disabled' values in the main component, pass a disabled prop to each child and use it in TouchableHighlight (since it supports it) — Milore, Mar 18 '19 at 08:12

Milore · Accepted Answer · 2019-03-18T08:55:28.140

1

Since it seems you just want one item (<ChooseProComp>) to be selected, I suggest you to simply handle the selected one in your main component state, which at the beginning will be undefined:

state = {
  selected: undefined
};

Then define onPress function of each <ChooseProComp> like:

  onPress={() => {
    this.renderType("Medical"); // I don't know how this works so I won't modify it
    if(!this.state.selected){ // if the state is undefined, then set it!
      this.setState({
        selected: "Medical"
      })
    }
  }

Then, again for each <ChooseProComp> pass a prop disabled like:

<ChooseProComp
  ...
  disabled={this.state.selected && this.state.selected !== 'Medical'}
/>

So, in <ChooseProComp> component (class) you can use it in <TouchableHighlight>:

  <TouchableHighlight
    underlayColor="transparent"
    onPress={this.props.onPress}
    style={{ flex: 1 }}
    disabled={this.props.disabled}
  >

Let me know if this fits your question, or I've misunderstood, or it's not clear enough!

edited Mar 18 '19 at 08:55

answered Mar 18 '19 at 08:45

Milore

1,672
1
15
20

1

Great! it worked! I just need to add opacity for the disabled elements. If done, I will get what I had in my mind! Thanks a lot! – Rak1994 Mar 18 '19 at 09:36
any good practice to add opacity to the disabled elements?? let me know! – Rak1994 Mar 18 '19 at 10:35
Can you explain better or provide an image of your request? – Milore Mar 18 '19 at 10:50
here it is, If I select a profession Medical, other options are getting disabled. Now I want the disabled options opacity to be 0.5 and the select option to be 1. – Rak1994 Mar 18 '19 at 10:53
I think you just answered yourself. Simply add `style={{ flex: 1, opacity: this.props.disabled ? 0.5 : 1}}` to your `` – Milore Mar 18 '19 at 10:59
I did this, just wanted to know if there are any other methods of doing it! Thanks again! – Rak1994 Mar 18 '19 at 11:00
Uhm, I personally don't know. You can obtain a similar behavior changing colors of background, texts and other elements.. but it's more verbose I think – Milore Mar 18 '19 at 11:03
Hey, I have an issue now, let's say I select Medical, rest of the options will be disabled and I save my details. If I visit my homepage and come back to edit my profile, everything will be enabled again. Any idea how to fix this? – Rak1994 Mar 18 '19 at 11:20
This is not an easy question to answer about. As you know, react works like this: you changed screen and the component unmounted, so when you called it again it mounted another instance, which is new in all. 1) Simplest solution: pass a prop to the new screen and repass it when you call the previous screen again. This is not a good practice, but you can do it if your case is simple. 2) Hardest (& better) solution: using Redux library: it provides something like a store to update everytime you want and from which you can read info you've saved. 3) Other: save your type to asyncStorage – Milore Mar 18 '19 at 11:44
Okay! I will look into it! – Rak1994 Mar 18 '19 at 11:45

Disable react native classes on pressing a different class in the same group

1 Answers1