How to set a button text color dynamic change to the background color of a LinearGradient scroll view?

Question

I have an react-native app that have a LinearGradient background and a button built by TouchableOpacity (Backgroundcolor is white) and Text

I am trying to set the Text color similar to the LinearGradient background color, so when scrolling, the Text color would change dynamically based on the LinearGradient background color.

I already tried to set the Text Color to transparent, but since TouchableOpacity is white, so the Text Color also become white

I have an idea that getting the ScrollView Y, and create a function that would output different LinearGradient Color when scrolling, but that may require some works. Is there any easier way beside this?

import React from 'react';
import { View, TouchableOpacity, Text, Button } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';


export default class BlackFade extends React.Component {
  render() {
    return (
      <LinearGradient
        colors={['red', 'orange']}
        style={{
          flex: 1,
          justifyContent: 'center',
        }}>
        <View style={{ alignItems: 'center' }}>
          <TouchableOpacity
            style={{
              backgroundColor: 'white',
              alignItems: 'center',
              padding: 25,
              width: '50%',
            }}>
            <Text style={{ fontSize: 36, /*color: "transparent"*/ }}>Button</Text>
          </TouchableOpacity>
        </View>
      </LinearGradient>
    );
  }
}

https://snack.expo.io/@rex_rau/intrigued-scone

Answer 1

I do not see a ScrollView component in your example code. Is the BlackFade component inside a ScrollView?

If I understand correctly you want a white TouchableOpacity button with the title color as if you can see through the button to a linear gradient background? In that case the only way I see is, as you already suggest, to couple a method to the ScrollView's onScroll method and pass an updated text color to the BlackFade component.