react-native - gifted - react native chat firebase

La luz táctil no se puede hacer clic si la posición es absoluta

Question

Tengo un resaltado táctil que necesito para posicionarme en absoluto, pero se vuelve ininteligible después de hacerlo.

Que podria causar esto? Funciona como debería si no tengo la posición establecida en absoluta.

Answer 1

Después de intentar todo durante dos horas, la solución que encontré fue cambiar la posición de mi botón.

Antes de ...

  export default class Navbar extends Component {

  componentDidMount() {
    console.log(this.props);
  }

  render() {
    return (
      <View style={styles.content}>
        <TouchableOpacity
          onPress={this.props.openModal}
          style={styles.containerButton}
        >
          <Text>New</Text>
        </TouchableOpacity>
        <Text style={styles.textCenter}>Remember me</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  content: {
    paddingTop: 30,
    paddingBottom: 10,
    backgroundColor: ''#81C04D'',
    flexDirection: ''row''
  },
  containerButton: {
    position: ''absolute'',
    top: 30,
    left: 8
  },
  textCenter: {
    flex: 1,
    textAlign: ''center'',
    fontWeight: ''bold''
  }
});

Después ...

export default class Navbar extends Component {

  componentDidMount() {
    console.log(this.props);
  }

  render() {
    return (
      <View style={styles.content}>
        <Text style={styles.textCenter}>Remember me</Text>
        <TouchableOpacity
          onPress={this.props.openModal}
          style={styles.containerButton}
        >
          <Text>New</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  content: {
    paddingTop: 30,
    paddingBottom: 10,
    backgroundColor: ''#81C04D'',
    flexDirection: ''row''
  },
  containerButton: {
    position: ''absolute'',
    top: 30,
    left: 8
  },
  textCenter: {
    flex: 1,
    textAlign: ''center'',
    fontWeight: ''bold''
  }
});

¡¡¡Funciona!!!

Answer 2

La solución fue cambiar el orden de los componentes.

Lo que originalmente tuve:

<TouchableHighLight><Text>Click me</Text></TouchableHighlight>
<View> .... </View>

Esta fue la solución:

<View>...</View>
<TouchableHighLight><Text>Click me</Text></TouchableHighlight>

Answer 3

Solo vaya y agregue zIndex: 1 a la vista que contiene los botones y el auge que ha terminado en la mayoría de los casos. También tenga en cuenta que agregar la elevación agrega la sombra al botón de Android y, a veces, la elevación también puede ser un problema si se agrega al padre y no se agrega al hijo, entonces el botón del niño puede no funcionar. (Caso raro)

p.ej:

buttonContainers:
  {
    zIndex: 1,
    alignSelf: ''flex-end'',
    position: ''absolute'',
    top:5,
    right: 5,
    height: 40,
    borderWidth: 1,
    justifyContent: ''center'',
    alignContent: ''center'',
    width: 80
  },