onPress event not working inside the Animated View when it's position is absolute

user_9907392 0
Viewed 2272

I'm building a custom header. onPress event of the touchable opacity component is not working when I give components style prop - 'position:"absolute"' . But it works perfectly when I comment on the style property - position. I couldn't find a solution for this elsewhere. Please help.

<Animated.View
  style={{
    elevation:
      params !== undefined && params.elevation !== undefined
        ? params.elevation
        : null,
    position: "absolute",
    top: 0,
    left: 0,
    backgroundColor:
      params !== undefined && params.headerBgColor !== undefined
        ? params.headerBgColor
        : "red",
    width: "100%",
    height:
      params !== undefined && params.changingHeight !== undefined
        ? params.changingHeight
        : 50,
    justifyContent: "space-between",
    alignItems: "center",
    flexDirection: "row",
    paddingHorizontal: 20
  }}
>
  <TouchableOpacity style={{}} onPress={() => console.log("hello")}>
    <View style={{}}>
      <Image
        style={styles.menuIcon}
        source={require("../../assets/images/Menu-512.png")}
      />
    </View>
  </TouchableOpacity>
  <TouchableOpacity onPress={() => console.log("image")}>
    <View style={{}}>
      <Image
        style={styles.profImage}
        source={require("../../assets/images/user.png")}
      />
    </View>
  </TouchableOpacity>
</Animated.View>;
react-native
2 Answers

You should put your absolutely positioned Animated.View as the last child in the screen component. Otherwise, the view that occupies the rest of the screen will become the responder to touches.

const Screen = () => {
  return <View style={{ flex: 1}}>
           <View style={{flex: 1}}>
             //actual screen content
           </View>
           <Animated.View // header
             ...props
           ></Animated.View>
         </View>

In the DOM, the component that comes after another component is put "above" it. So, if you do this, your header will be above the actual screen content view and, therefore, become the responder when pressed.

user_108999790

its working on my case checkout below code: or checkout my snack example : https://snack.expo.io/@immynk/header_demo

either you missing some params which are providing or getting null on condition check kindly confirm it hope this answer will help you

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  Animated,
  TouchableOpacity,
  Image,
} from 'react-native';
import Constants from 'expo-constants';

export default class App extends React.Component {
  render() {
    return (
      <View>
        <Text>Hello this is demo of flexdirection of box color</Text>
        <Animated.View
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            backgroundColor: 'red',
            width: '100%',
            height: 50,
            justifyContent: 'space-between',
            alignItems: 'center',
            flexDirection: 'row',
            paddingHorizontal: 20,
          }}>
          <TouchableOpacity style={{}} onPress={() => alert("hello","hello")}>
            <View style={{}}>
              <Image
                source={{ uri: 'https://reactjs.org/logo-og.png' }}
                style={{ width: 50, height: 65 }}
              />
            </View>
          </TouchableOpacity>
           <TouchableOpacity style={{}} onPress={() => alert("hello","hello")}>
            <View style={{}}>
              <Image
                source={{ uri: 'https://reactjs.org/logo-og.png' }}
                style={{ width: 50, height: 65 }}
              />
            </View>
          </TouchableOpacity>
        </Animated.View>
      </View>
    );
  }
}
user_49813590
Related