Gradient breaks when onPress added

[cmmartin]

iOS react-native v0.55.4 react-native-text-gradient v0.0.9

The gradient works great until I pass it an onPress prop. Then, the entire text becomes a single color, which happens to be the last value passed to the colors prop.

Any idea how I can accomplish a touchable text gradient? Is it supported in this version?

[iyegoroff]

I think suppressHighlighting can be used as a workaround for this issue.

[cmmartin]

It turns out this is only an issue with nested text gradient components. At the top level, this works fine.

But the gradient is broken in the below child LinearTextGradient component

<LinearTextGradient>
  <Text>bla bla</Text>
 <LinearTextGradient onPress={...}>help I'm broken</LinearTextGradient>
</LinearTextGradient>

Even after adding suppressHighlighting to the child, parent, or both

[iyegoroff]

Following snippet works as expected - I have both gradient and onPress handler:

        <LinearTextGradient>
          <Text>bla bla</Text>
          <LinearTextGradient
            onPress={() => console.warn('hello')}
            locations={[0, 1]}
            colors={['red', 'blue']}
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 0 }}
          >
            help I'm broken
          </LinearTextGradient>
        </LinearTextGradient>

[cmmartin]

I tried again and get the same result. A solid color when onPress is provided and the expected gradient without onPress. Did you test with v0.0.9 and RN v0.55.4?

I am using a workaround usingTouchableOpacity to avoid applying the onPress as well as avoid nesting altogether for unrelated reasons. This works well and gives me the opacity feedback on touch

const styles = StyleSheet.create({
    mimickTextWrapperStyle: {
      flexDirection: 'row',
      flexWrap: 'wrap',
      justifyContent: 'center' // mimicks textAlign: 'center'
    }
})

<View style={styles.mimickTextWrapperStyle}>
    <TouchableOpacity onPress={...}>
        <LinearTextGradient {...}>
          touchable gradient text
        </LinearTextGradient>
    </TouchableOpacity>
    <Text>regular text</Text>
    <TouchableOpacity onPress={...}>
        <LinearTextGradient {...}>
          more touchable gradient text
        </LinearTextGradient>
    </TouchableOpacity>
</View>

If you can't replicate this, feel free to close it. If anyone experiences this issue, they can try my workaround

[iyegoroff]

Yes, I tested my snippet with v0.0.15. Native code did not change since v0.0.9, so maybe current create-text-gradient-class.js can be used with older version. Looks like there is no https://github.com/facebook/react-native/tree/v0.55.4/Libraries/Text/TextAncestor.js in 0.55.4