Change colour on click - react-native

Question

I am creating a medication reminder app for a university project and I'm using the Agenda tag from the react-native-calendars library. This is what my app looks like right now: 1

I would like to add a function that changes the colour of each item in the calendar when it is clicked - essentially to highlight that the user has taken the medication. (like a to do list almost).

I tried to implement this function before but it would highlight all the items not one each.

Below is the current code without this functionality:

export default class App extends React.Component {
state = {
    toggled: false,
    items: {},
}



toggleSwitch = (value) => {
    this.setState({toggled: value})
}

render() {
    return (
        <View style={styles.background}>
            <View style={styles.medicationHeaderContainer}>
                <Text style={styles.medicationHeader}> Medication </Text>
            </View>
            <View style={styles.reminderAlertContainer}>
                <Text style={styles.reminderAlertText}> Reminders </Text>
                <Switch
                    onValueChange={this.toggleSwitch}
                    value={this.state.toggled}
                    style={styles.reminderAlertSwitch}/>
            </View>
            <Agenda
                items={{'2012-05-22': [{name: '9 AM - One 200 mg Paracetamol '}],
                    '2012-05-23': [{name: '9 AM - One 200 mg Paracetamol'}, {name: '10 AM - One 500 mg Magnesium Tablet'}],
                    '2012-05-24': [{name: '9 AM - One 200 mg Paracetamol'}],
                    '2012-05-25': [{name: '9 AM - One 200 mg Paracetamol'}, {name: '10 AM - One 500 mg Magnesium Tablet'}]
                }}

                selected={'2012-05-22'}

                renderItem={this.renderItem.bind(this)}
                >
            </Agenda>
        </View>
    );

}


renderItem(item) {
    return (
        <View style={styles.item} onPress={() => Alert.alert(item.name)}>
            <View>
                <Text>{item.name}</Text>
            </View>
            <TouchableOpacity
                onPress={() => Alert.alert(item.name)}
            />
        </View>
    );
}}

And the style sheet:

const styles = StyleSheet.create({
background: {
    flex: 1,
    backgroundColor: "#fff"
},
medicationHeaderContainer: {
    marginTop: 40,
    height: "10%",
    backgroundColor: "#fff"
},
medicationHeader: {
    fontSize: 40,
    bottom: -30,
    fontWeight: "bold",
    marginLeft: 15
},

reminderAlertContainer: {
    marginTop: 5,
    height: '7%',
    width: '95%',
    backgroundColor: "#85C1E9",
    borderBottomStartRadius: 10,
    borderBottomEndRadius: 10,
    borderTopStartRadius: 10,
    borderTopEndRadius: 10,
    marginLeft: 10
},
reminderAlertText: {
    fontSize: 30,
    bottom: -10,
    marginLeft: 15,
    color: '#fff',
    fontWeight: "bold",
},
reminderAlertSwitch: {
    bottom: 20,
    marginLeft: 320
},

item: {
    backgroundColor: 'white',
    flex: 1,
    borderRadius: 5,
    padding: 10,
    marginRight: 10,
    marginTop: 17
},
emptyDate: {
    height: 15,
    flex: 1,
    paddingTop: 30
},});

Jacob Brunson · Answer 1 · 2021-10-05T01:22:40.187

I would recommend creating a component called AgendaItem. Then the AgendaItem can have its own toggled state which you set on click.

class AgendaItem extends React.Component {
  state = {
    toggled: false
  }

  toggleSwitch() {
    this.setState({ toggled: !this.state.toggled });
  }

  render() {
    return (
      <View style={styles.item}>
          <View>
              <Text>{this.props.name}</Text>
          </View>
          <TouchableOpacity onPress={this.toggleSwitch} />
      </View>
    );
  }
}

Note: You'll need to update the background style based on toggled state (I haven't shown this in the code above).

Then you would update the renderItem function to render the AgendaItem component, passing in the item data as props. For example:

renderItem(item) {
    return (
        <AgendaItem {...item} />
    );
}

Tip: Any time you're in a situation where you have a "list of things" and you want one of those things to have some kind of state, it's better to make that thing its own component and have it manage its own state. Having the state in the parent component (like in your original example) makes it difficult to do.

Hi Jacob! Thank you so much for your response, that was helpful however I'm still unable to get it to work. Would you be able to provide some code on how to update the background style based on the toggled state and what would go inside the {....item} part of the Agenda component. Sorry about that, I'm quite new to Javascript and am still trying to get the hang of things. Thanks so much once again! — Ehsaas, Oct 07 '21 at 00:10

Change colour on click - react-native

1 Answers1