microsoft/reactxp

[Android] Absolutely positioned button not getting press events

Opened this issue · 0 comments

An absolutely positioned button on Android won't detect press events if it's wrapped in a component whose style either

1. has backgroundColor property set

Minimal example:

import * as React from 'react';
import * as Rx from 'reactxp';

Rx.App.initialize(true, false);
Rx.UserInterface.setMainView(
   <Rx.View style={{ backgroundColor: 'blue' }}>
     <Rx.Button style={{ position: 'absolute' }} onPress={() => console.error('clicked')}>
       <Rx.Text>CLICK ME</Rx.Text>
     </Rx.Button>
   </Rx.View>
);

2. has animated value

Minimal example:

import * as React from 'react';
import * as Rx from 'reactxp';

const opacity = Rx.Animated.createValue(0);
const animation = Rx.Animated.timing(opacity, {
  duration: 200,
  toValue: 1
});

Rx.App.initialize(true, false);
Rx.UserInterface.setMainView(
  <Rx.Animated.View style={{ opacity }}>
    <Rx.Button style={{ position: 'absolute' }} onPress={() => console.error('clicked')}>
      <Rx.Text>CLICK ME</Rx.Text>
    </Rx.Button>
  </Rx.Animated.View>
);

animation.start();

In both of these examples if you simply update View or Animated.View styles to be an empty object or omit it completely it will work (i.e. button will receive press events).

Does anyone know what might be causing this? Any workaround?