Achieving a Ripple Switch Interaction in React Native Android - Stack Overflow

admin管理员组

文章数量:1315831

I am trying to implement a "riddle effect" where pressing an outer TouchableNativeFeedback will also trigger an inner Switch that is attached to it. However, the current implementation does not behave as expected. I would like to achieve a behavior similar to what is demonstrated in the video linked.

Here is the code for context:

<TouchableNativeFeedback
  key={setting}
  onPress={() =>
    handleSwitchToggle()
  }
  background={TouchableNativeFeedback.Ripple(
    "rgba(0, 0, 0, .32)",
    false
  )}
  useForeground={true}
>
  <View style={styles.touchableItem}>
    <List.Item
      title={title}
      right={() => (
        <View pointerEvents="none">
          <Switch
            value={switchValue}
            onValueChange={(newActiveValue) =>
              handleSwitchChange(newActiveValue)
            }
            color="#a08eb9"
          />
        </View>
      )}
    />
  </View>
</TouchableNativeFeedback>

What changes would you suggest to ensure that pressing the outer TouchableNativeFeedback also triggers the inner switch, creating a good looking interaction similar to the effect shown in the video?

Video:

本文标签： Achieving a Ripple Switch Interaction in React Native AndroidStack Overflow