Cant Use onPress() Events on Animated.View set to Position: Absolute - React Native

590 views Asked by At

I made a scrollable header for an app I am building for a company. When I try to use a TouchableHighlight to trigger an onPress() event it does not register because the position key is set to 'absolute':

Ive tried the following after scouring the internet for hours:

-raising the zIndex/elevation -making sure TouchableHighlight is imported from 'react-native' -Animated library from 'react-native-reanimated'

When I comment out the position:absolute in the main header it works perfectly, but the header leaves a view behind it when it scrolls up that I cant lay a view on top of.

I'm running out of options here...any help would be GREATLY appreciated!

     <Animated.View style={globalStyles.tabNavbar}>
          <TouchableHighlight
              style={{backgroundColor: 'white', height: 50, width: 100, zIndex: 99999, elevation: 99999}}
              underlayColor="#eee"
              onPress={() => {
                  console.log('PLZ WORK');
                  this.updateTabs('projectsTab');
          }}  >
              <Animated.View style={{ alignItems: 'center'}}>
                  <Text  onPress={() => { this.updateTabs('projectsTab');}} style={{fontWeight: 'bold'}}>Close</Text>
              </Animated.View>
          </TouchableHighlight>
          <TouchableHighlight
              style={{color: 'white'}}
              underlayColor="#eee"
              onPress={() => {
                  console.log('PLZ WORK');
                  this.updateTabs('notificationTab');
          }}  >
              <View style={{alignItems: 'center'}}>
                  <Text style={{fontWeight: 'bold'}}>Close</Text>
              </View>
          </TouchableHighlight>
      </Animated.View>

1

There are 1 answers

0
D'errah On BEST ANSWER

For those wondering, If you alter the View order of the Components to where the component with position: absolute is last, the buttons will work. In this situation I had to put my header last in the order even though it appears at the top of my screen.