doomsower / react-native-modal-popover

React-Native pure JS popover that uses Modal
MIT License
322 stars 45 forks source link

On Android, the status bar theme changes to light when the popover is active #33

Open nualoy opened 5 years ago

nualoy commented 5 years ago

RN: 0.55.4

Code:

// (...)

export class InfoPopover extends PureComponent<Props> {
  static defaultProps = {
    style: {},
  };
  static styles = StyleSheet.create({
    infoButton: {
      paddingLeft: 6,
      color: colors.ink,
    },
    popoverContent: {
      padding: 12,
      backgroundColor: colors.ink,
      borderRadius: 4,
      width: 230,
      shadowOpacity: 0.25,
      shadowRadius: 4,
      shadowOffset: {
        width: 0,
        height: 0,
      },
      elevation: 2,
    },
    popoverText: {
      color: colors.white,
    },
    popoverArrow: {
      display: 'none',
      borderTopColor: 'transparent',
    },
    popoverBackground: {
      backgroundColor: 'transparent',
    },
  });

  render() {
    const { message, style } = this.props;
    const { styles } = InfoPopover;
    return (
      <PopoverController>
        {({ openPopover, closePopover, popoverVisible, setPopoverAnchor, popoverAnchorRect }) => ([
          <View key="button" style={style}>
            <TouchableWithoutFeedback
              hitSlop={{ top: 1, bottom: 1, left: 1, right: 1 }}
              ref={setPopoverAnchor}
              onPress={openPopover}
            >
              <Header style={styles.infoButton}>
                {popoverVisible ? TextIcons.InfoInverted : TextIcons.Info}
              </Header>
            </TouchableWithoutFeedback>
          </View>,
          <Popover
            key="popover"
            contentStyle={styles.popoverContent}
            arrowStyle={styles.popoverArrow}
            backgroundStyle={styles.popoverBackground}
            placement="left"
            visible={popoverVisible}
            onClose={closePopover}
            fromRect={popoverAnchorRect}
            easing={() => Easing.inOut(Easing.quad)}
          >
            <Subtitle style={styles.popoverText}>{message}</Subtitle>
          </Popover>,
        ])}
      </PopoverController>
    );
  }
}
feruzm commented 4 years ago

found solution?