Bug if we set isVisible default: true #23

huynguyen2903 · 2018-10-29T15:32:09Z

If I want to open Popover when start the screen so I set isVisible: “true” and it have a bug.
Can you help me fix it ?
Many thanks.

SteffeyDev · 2018-10-29T16:10:36Z

Equivalent to #14, right?

SteffeyDev · 2018-10-29T16:11:27Z

Please describe specifically what you are seeing (what is the bug?), some code snippets, and versions of react-native-popover-view and device versions so that I can replicate.

huynguyen2903 · 2018-10-29T16:29:19Z

Yes. It seems like #14.
Thank you !

SteffeyDev · 2018-10-30T01:45:49Z

Is it working for you now? The popover should show immediately when isVisible initially set too true.

huynguyen2903 · 2018-10-30T09:36:24Z

It's not working. I have to set "true" in componentDidMount but sometime it's didn't work.

SteffeyDev · 2018-10-30T14:32:21Z

Ok, I currently have a pretty bare-bones app that has this working, so it's probably something with your setup. Can you post a sample of the code so that I can try it out?

huynguyen2903 · 2018-10-30T14:38:26Z

This is my code. The popover show but if I reload simulator the position of popover will be changed.

import React, { Component } from "react";
import { BackHandler, Text, View, TouchableHighlight } from "react-native";
import Popover from "react-native-popover-view";
import AppBackground from "../../common/AppBackground";
import AppButton from "../../common/AppButton";
import Metrics from "../../../resources/dimensions/Metrics";
import I18n from "../../../tools/localization";
import styles from "./style";
import strings from "../../../resources/string/strings";
import baseStyles from "../../../resources/styles/ApplicationStyles";

export default class ScreenAllDone extends Component {
  componentDidMount() {
    this.setState({ isVisible: true });
  }

  state = {
    isVisible: false
  };

  showPopover() {
    this.setState({ isVisible: true });
  }

  closePopover() {
    this.setState({ isVisible: false });
  }

  static navigationOptions = ({ navigation }) => ({
    header: null
  });

  onStartSyncClicked() {
    this.props.navigation.navigate(strings.routeHome);
  }

  render() {
    return (
      <AppBackground>
        <Popover
          showBackground={false}
          isVisible={this.state.isVisible}
          fromView={this.touchable}
          onClose={() => this.setState({ isVisible: false })}
        >
          <Text style={styles.test}>The first guide</Text>
          <TouchableHighlight
            style={styles.button}
            onPress={() => this.closePopover()}
          >
            <Text>go to second</Text>
          </TouchableHighlight>
        </Popover>
        <Text ref={ref => (this.touchable = ref)} style={styles.textTop}>
          All done!
        </Text>
        <View style={styles.ruleTextStyle}>
          <Text style={styles.textMid}>Text</Text>
        </View>
        <View style={baseStyles.container.spaceTaker} />
        <AppButton
          text={I18n.t(strings.textButtonAllDone)}
          // pressed={this.onStartSyncClicked.bind(this)}
          sidesMargin={Metrics.sidesPadding}
          marginBot={Metrics.sidesPadding}
        />
      </AppBackground>
    );
  }
}

And code of component AppBackground

import React from "react";
import { SafeAreaView } from "react-navigation";
import LinearGradient from "react-native-linear-gradient";
import baseStyles from "../../resources/styles/ApplicationStyles";

const AppBackground = props => (
  <LinearGradient
    colors={["#00D0A0", "#50A7C2"]}
    style={baseStyles.container.baseContainer}
  >
    <SafeAreaView style={baseStyles.container.centerColumnContainer}>
      {props.children}
    </SafeAreaView>
  </LinearGradient>
);

export default AppBackground;

huynguyen2903 · 2018-10-30T14:47:57Z

My problem are in AppBackground and any screens have navigation. If I don't use it, the popover will work well. Do you know how I can solve it ?

SteffeyDev · 2018-10-30T18:13:28Z

Does the issue go away if you don’t wrap the Popover in AppBackground?

SteffeyDev · 2018-10-30T18:26:10Z

I’ve never witnessed a situation where the initial load yields a different resulting DOM from subsequent reloads, if you have the capability to record a short video of what is happening and upload that, it would be useful for anlayzing the situation. Also, if you upgrade react-native-popover-view to the latest version and use the debug={true} prop, then observe and post the resulting logs from the console, that would help as well.

huynguyen2903 · 2018-10-31T00:28:39Z

This is a video of bug.
https://youtu.be/PIFzqWzW4fw

The debug console. ( it's always change )

computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.5971326828003,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.5971326828003,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.847132682800293,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.5971326828003,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.5971326828003,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.847132682800293,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.5971326828003,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.5971326828003,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.847132682800293,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63

"react-native-popover-view": "version": "1.0.10",
"react-native": "version": "0.57.4",

huynguyen2903 · 2018-10-31T00:34:30Z

Does the issue go away if you don’t wrap the Popover in AppBackground?

The issue go away if I remove the AppBackground. The AppBackground is a view that cover all component when render so it must be used in my code ( you can see code AppBackground).

SteffeyDev · 2018-10-31T02:58:04Z

Ohhhh, that video helps so much! I have seen this issue before, give me a few minutes to see if I can remember what caused it.

SteffeyDev · 2018-10-31T03:28:03Z

Ok, published 1.0.11, no idea if this will actually fix your issues but it may.

huynguyen2903 · 2018-10-31T03:32:19Z

it's still not working @SteffeyDev. It always change position of popover.

huynguyen2903 · 2018-10-31T03:35:43Z

Video version 1.0.11
https://youtu.be/WYqNGTYumoc

SteffeyDev · 2018-10-31T03:41:51Z

Ok, is it possible you could grab the full debug output when it does the crazy change size thing? That would help me understand what is going on.

SteffeyDev · 2018-10-31T03:42:07Z

I added a debug statement in 1.0.11 that may help

huynguyen2903 · 2018-10-31T03:45:40Z

The console always update so I will copy a part of it for you.

componentWillReceiveProps - Awaiting popover show
SavingScreen.js:34 request savings success: [object Object]
SavingScreen.js:44 request funds success: [object Object]
Popover.js:63 setDefaultDisplayArea - newDisplayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 measureContent - Showing Popover - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":96.15047693252563,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 measureContent - Showing Popover - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":96.15047693252563,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 measureContent - Maintaining forcedContentSize: {"height":null,"width":355}
Popover.js:63 setDefaultDisplayArea (inside calculateRect callback) - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 setDefaultDisplayArea (inside calculateRect callback) - getDisplayArea(): {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 setDefaultDisplayArea (inside calculateRect callback) - displayAreaStore: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 setDefaultDisplayArea (inside calculateRect callback) - Triggering state update
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":17.353635907173157,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":93.10363590717316,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":10,"y":443}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}

SteffeyDev · 2018-10-31T05:02:28Z

Ok, I am more hopeful about version 1.0.12, whenever you have the chance to try it out.

huynguyen2903 · 2018-10-31T05:15:35Z

It's still some small bugs. Popover had move a little bit when it show on screen sometime the arrow move too.
https://youtu.be/4EeLig0z6cY
Thank you for your help.

componentWillReceiveProps - Awaiting popover show
SavingScreen.js:34 request savings success: [object Object]
SavingScreen.js:44 request funds success: [object Object]
Popover.js:63 measureContent - Waiting for Display Area - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 setDefaultDisplayArea - newDisplayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 setDefaultDisplayArea (inside calculateRect callback) - fromRect: {"x":91.5,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 setDefaultDisplayArea (inside calculateRect callback) - getDisplayArea(): {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 setDefaultDisplayArea (inside calculateRect callback) - displayAreaStore: undefined
Popover.js:63 measureContent - Showing Popover - requestedContentSize: {"y":0,"width":725,"x":0,"height":131}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":91.5,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 measureContent - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 handleGeomChange - requestedContentSize: {"y":0,"width":339,"x":0,"height":167}
Popover.js:63 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:63 computeGeometry - fromRect: {"x":91.5,"y":247.5,"width":187.5,"height":187.5}
Popover.js:63 handleGeomChange - Triggering popover move to: {"x":15.75,"y":443}

huynguyen2903 · 2018-10-31T06:30:36Z

Oh no.
it still does the crazy change size thing on android @SteffeyDev

SteffeyDev · 2018-10-31T14:50:28Z

Ok, 1.0.13 should fix the issue on iOS with it moving slightly after launch. I can't replicate the issue on Android, can you provide video and logs again? Or even just logs would help.

huynguyen2903 · 2018-10-31T15:25:25Z

Bug on IOS:
Video: https://youtu.be/EmufhAmHlUA

componentWillReceiveProps - Awaiting popover show
SavingScreen.js:44 request funds success: [object Object]
SavingScreen.js:34 request savings success: [object Object]
Popover.js:67 setDefaultDisplayArea - newDisplayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:67 measureContent - Showing Popover - requestedContentSize: {"y":0,"width":715,"x":0,"height":121}
Popover.js:67 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:67 computeGeometry - fromRect: {"x":146.62035751342773,"y":284,"width":103,"height":114}
Popover.js:67 measureContent - Showing Popover - geom: {"popoverOrigin":{"x":10,"y":406},"anchorPoint":{"x":198.12035751342773,"y":398},"placement":"bottom","forcedContentSize":{"height":251,"width":355},"viewLargerThanDisplayArea":{"height":false,"width":true}}
Popover.js:67 measureContent - Showing Popover - requestedContentSize: {"y":0,"width":329,"x":0,"height":157}
Popover.js:67 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:67 computeGeometry - fromRect: {"x":146.62035751342773,"y":284,"width":103,"height":114}
Popover.js:67 measureContent - Showing Popover - geom: {"popoverOrigin":{"x":33.620357513427734,"y":406},"anchorPoint":{"x":198.12035751342773,"y":398},"placement":"bottom","forcedContentSize":{"height":251,"width":355},"viewLargerThanDisplayArea":{"height":false,"width":false}}
Popover.js:67 setDefaultDisplayArea (inside calculateRect callback) - fromRect: {"x":134.72473621368408,"y":284,"width":103,"height":114}
Popover.js:67 setDefaultDisplayArea (inside calculateRect callback) - getDisplayArea(): {"x":10,"y":30,"width":355,"height":627}
Popover.js:67 setDefaultDisplayArea (inside calculateRect callback) - displayAreaStore: {"x":10,"y":30,"width":355,"height":627}
Popover.js:67 setDefaultDisplayArea (inside calculateRect callback) - Triggering state update
Popover.js:67 handleGeomChange - requestedContentSize: {"y":0,"width":329,"x":0,"height":157}
Popover.js:67 computeGeometry - displayArea: {"x":10,"y":30,"width":355,"height":627}
Popover.js:67 computeGeometry - fromRect: {"x":134.72473621368408,"y":284,"width":103,"height":114}
Popover.js:67 handleGeomChange - Triggering popover move to: {"x":21.724736213684082,"y":406}

huynguyen2903 · 2018-10-31T15:25:57Z

Bug on android.
Video: https://www.youtube.com/watch?v=6Y19VSxZ4gQ&feature=youtu.be

10-31 22:22:25.885 23506-23725/com.nugget I/ReactNativeJS: componentWillReceiveProps - Awaiting popover show
10-31 22:22:25.926 23506-23725/com.nugget I/ReactNativeJS: request funds success: [object Object]
10-31 22:22:25.944 23506-23725/com.nugget I/ReactNativeJS: request savings success: [object Object]
10-31 22:22:25.960 1715-1735/system_process E/BatteryExternalStatsWorker: modem info is invalid: ModemActivityInfo{ mTimestamp=0 mSleepTimeMs=0 mIdleTimeMs=0 mTxTimeMs[]=[0, 0, 0, 0, 0] mRxTimeMs=0 mEnergyUsed=0}
10-31 22:22:26.124 23506-23517/com.nugget I/zygote: NativeAlloc concurrent copying GC freed 122003(4MB) AllocSpace objects, 0(0B) LOS objects, 33% free, 11MB/17MB, paused 2.969ms total 165.616ms
10-31 22:22:26.586 23506-23725/com.nugget I/ReactNativeJS: setDefaultDisplayArea - newDisplayArea: {"x":10,"y":10,"width":391.4285583496094,"height":730.8571166992188}
10-31 22:22:26.593 1450-1450/? D/SurfaceFlinger: duplicate layer name: changing com.nugget/com.nugget.MainActivity to com.nugget/com.nugget.MainActivity#1
10-31 22:22:26.606 1440-1490/? D/gralloc_ranchu: gralloc_alloc: Creating ashmem region of size 16592896
10-31 22:22:26.612 23506-23725/com.nugget I/ReactNativeJS: measureContent - Showing Popover - requestedContentSize: {"height":128.2857208251953,"width":711.7142944335938,"y":0,"x":0}
10-31 22:22:26.613 23506-23725/com.nugget I/ReactNativeJS: computeGeometry - displayArea: {"x":10,"y":10,"width":391.4285583496094,"height":730.8571166992188}
10-31 22:22:26.614 23506-23725/com.nugget I/ReactNativeJS: computeGeometry - fromRect: {"y":null}
    measureContent - Showing Popover - geom: {"popoverOrigin":{"x":10,"y":311.2856979370117},"anchorPoint":{"x":205.7142791748047,"y":375.4285583496094},"forcedContentSize":{"width":391.4285583496094,"height":730.8571166992188},"viewLargerThanDisplayArea":{"width":true,"height":false}}
10-31 22:22:26.626 1440-1490/? D/gralloc_ranchu: gralloc_alloc: Creating ashmem region of size 16592896
10-31 22:22:26.645 1440-1490/? D/gralloc_ranchu: gralloc_alloc: Creating ashmem region of size 16592896
10-31 22:22:26.687 23506-23725/com.nugget I/ReactNativeJS: measureContent - Showing Popover - requestedContentSize: {"height":145.14285278320312,"width":391.4285583496094,"y":0,"x":0}
    computeGeometry - displayArea: {"x":10,"y":10,"width":391.4285583496094,"height":730.8571166992188}
10-31 22:22:26.690 23506-23535/com.nugget D/EGL_emulation: eglMakeCurrent: 0xe28858a0: ver 3 0 (tinfo 0xe2883480)
10-31 22:22:26.690 23506-23725/com.nugget I/ReactNativeJS: computeGeometry - fromRect: {"y":null}
    measureContent - Showing Popover - geom: {"popoverOrigin":{"x":10,"y":302.8571319580078},"anchorPoint":{"x":205.7142791748047,"y":375.4285583496094},"forcedContentSize":{"width":391.4285583496094,"height":730.8571166992188},"viewLargerThanDisplayArea":{"width":false,"height":false}}
10-31 22:22:26.700 23506-23535/com.nugget D/EGL_emulation: eglMakeCurrent: 0xe28858a0: ver 3 0 (tinfo 0xe2883480)
10-31 22:22:26.726 23506-23725/com.nugget I/ReactNativeJS: setDefaultDisplayArea (inside calculateRect callback) - fromRect: {"y":null}
    setDefaultDisplayArea (inside calculateRect callback) - getDisplayArea(): {"x":10,"y":10,"width":391.4285583496094,"height":730.8571166992188}
    setDefaultDisplayArea (inside calculateRect callback) - displayAreaStore: {"x":10,"y":10,"width":391.4285583496094,"height":730.8571166992188}
10-31 22:22:26.734 23506-23535/com.nugget D/EGL_emulation: eglMakeCurrent: 0xe28858a0: ver 3 0 (tinfo 0xe2883480)
10-31 22:22:28.641 23506-23535/com.nugget I/chatty: uid=10080(com.nugget) RenderThread identical 66 lines
10-31 22:22:28.655 23506-23535/com.nugget D/EGL_emulation: eglMakeCurrent: 0xe28858a0: ver 3 0 (tinfo 0xe2883480)
10-31 22:22:28.969 1448-1448/? I/boot-pipe: done populating /dev/random
10-31 22:22:34.155 2367-23395/com.google.android.gms.persistent W/ctxmgr: [AclManager]No 2 for (accnt=account#-517948760#, com.google.android.gms(10013):IndoorOutdoorProducer, vrsn=12874000, 0, 3pPkg = null ,  3pMdlId = null ,  pid = 2367). Was: 3 for 57, account#-517948760#
10-31 22:22:44.150 2367-23395/com.google.android.gms.persistent W/ctxmgr: [AclManager]No 2 for (accnt=account#-517948760#, com.google.android.gms(10013):IndoorOutdoorProducer, vrsn=12874000, 0, 3pPkg = null ,  3pMdlId = null ,  pid = 2367). Was: 3 for 57, account#-517948760#
10-31 22:22:54.159 2367-22916/com.google.android.gms.persistent W/ctxmgr: [AclManager]No 2 for (accnt=account#-517948760#, com.google.android.gms(10013):IndoorOutdoorProducer, vrsn=12874000, 0, 3pPkg = null ,  3pMdlId = null ,  pid = 2367). Was: 3 for 57, account#-517948760#

SteffeyDev · 2018-10-31T18:00:41Z

Ok, so the "bug" on iOS is actually something you need too fix on your end, you can see in the logs that the fromRect x value is initially 146.62, but then changes to 134.72, which means that the popover has to shift as well. This means that the popover is being shown before the view has stopped moving, because componentDidMount in your code is obviously called before the animation begins. I am grabbing the location of the button somewhere in the middle of the animation of the view sliding in, and then grabbing the new location once it has finished moving.

To fix this, you need to delay setting isVisible: true until the the react-navigation transition is complete. You can probably find some mechanism to do this in the react-navigation documentation, or you can use another setTimeout in your componentDidMount to try to guess how long it is between when the component mounts and the transition is complete.

I'll look into the Android issue next.

SteffeyDev · 2018-10-31T18:23:36Z

For Android, it looks like it can't find the dimensions of the Touchable, can you run this in componentDidMount and post the output?

NativeModules.UIManager.measure(findNodeHandle(this.touchable), (x0, y0, width, height, x, y) => console.log(JSON.stringify({x, y, width, height})));

Note: you will have to import NativeModules and findNodeHandle from react-native.

If this.touchable is not defined in componentDidMount, try running this after 1 second using a setTimeout (should be defined by then).

SteffeyDev · 2018-10-31T18:25:34Z

If my hunch is correct, fixing the issue on iOS may actually fix the Android issue as well, so try that first.

huynguyen2903 · 2018-11-01T03:16:06Z

IOS is working.
Android still undefined.

setTimeout(() => {
    this.setState({ isVisible: true });
    NativeModules.UIManager.measure(findNodeHandle(this.touchable), (x0, y0, width, height, x, y) => console.log(JSON.stringify(`Debug android${x, y, width, height}`)));
  }, 1000);

SteffeyDev · 2018-11-01T03:35:03Z

So you are saying that this.touchable is undefined on android, even after a second? What about 5 seconds? If the ref is undefined after view load, then that would be an RN issue, I believe.

SteffeyDev · 2018-11-01T03:37:21Z

Check out this issue, it seems similar to your situation (valid on iOS but undefined on Android): facebook/react-native#12966

huynguyen2903 · 2018-11-01T04:34:46Z

This's result you need.
"126.57142639160156"

SteffeyDev · 2018-11-01T16:28:27Z

Ok, so I believe the issue is once again on your side, and it is that when the Popover is initially rendered, the fromView prop is undefined because this.touchable is undefined. The popover cannot distinguish this from you not passing in the prop at all, so it doesn’t think it wants to show from a view. What you can do is delay showing the popover until this.touchable is set, potentially by putting the setState({ isVisible: true}) call into the ref callback, right after this.touchable = ref;. Does this make sense?

SteffeyDev · 2018-11-07T17:12:53Z

@huynguyen2903 were you able to solve?

This should help clarify a few things that we learned in those issues

SteffeyDev · 2019-04-11T03:09:54Z

Closing due to inactivity, open a new issue if this issue reappears.

SteffeyDev added the duplicate label Oct 29, 2018

huynguyen2903 closed this as completed Oct 29, 2018

huynguyen2903 reopened this Oct 30, 2018

SteffeyDev added a commit that referenced this issue Oct 31, 2018

Attempted fix for Issue #23

da57152

SteffeyDev closed this as completed in 05eb90a Oct 31, 2018

SteffeyDev reopened this Oct 31, 2018

SteffeyDev added a commit that referenced this issue Nov 7, 2018

Adding documentation in response to #28 & #23

5f821a6

This should help clarify a few things that we learned in those issues

SteffeyDev added a commit that referenced this issue Nov 7, 2018

More tweaks to help last commit, as well as Issue #23

a7784b9

SteffeyDev closed this as completed Apr 11, 2019

Bug if we set isVisible default: true #23

Bug if we set isVisible default: true #23

Comments

huynguyen2903 commented Oct 29, 2018 • edited Loading

SteffeyDev commented Oct 29, 2018

SteffeyDev commented Oct 29, 2018 • edited Loading

huynguyen2903 commented Oct 29, 2018 • edited Loading

SteffeyDev commented Oct 30, 2018

huynguyen2903 commented Oct 30, 2018

SteffeyDev commented Oct 30, 2018

huynguyen2903 commented Oct 30, 2018 • edited Loading

huynguyen2903 commented Oct 30, 2018 • edited Loading

SteffeyDev commented Oct 30, 2018

SteffeyDev commented Oct 30, 2018 • edited Loading

huynguyen2903 commented Oct 31, 2018 • edited Loading

huynguyen2903 commented Oct 31, 2018

SteffeyDev commented Oct 31, 2018

SteffeyDev commented Oct 31, 2018

huynguyen2903 commented Oct 31, 2018

huynguyen2903 commented Oct 31, 2018

SteffeyDev commented Oct 31, 2018

SteffeyDev commented Oct 31, 2018

huynguyen2903 commented Oct 31, 2018

SteffeyDev commented Oct 31, 2018

huynguyen2903 commented Oct 31, 2018 • edited Loading

huynguyen2903 commented Oct 31, 2018

SteffeyDev commented Oct 31, 2018

huynguyen2903 commented Oct 31, 2018

huynguyen2903 commented Oct 31, 2018

SteffeyDev commented Oct 31, 2018

SteffeyDev commented Oct 31, 2018

SteffeyDev commented Oct 31, 2018

huynguyen2903 commented Nov 1, 2018

SteffeyDev commented Nov 1, 2018

SteffeyDev commented Nov 1, 2018

huynguyen2903 commented Nov 1, 2018

SteffeyDev commented Nov 1, 2018

SteffeyDev commented Nov 7, 2018

SteffeyDev commented Apr 11, 2019

huynguyen2903 commented Oct 29, 2018 •

edited

Loading

SteffeyDev commented Oct 29, 2018 •

edited

Loading

huynguyen2903 commented Oct 29, 2018 •

edited

Loading

huynguyen2903 commented Oct 30, 2018 •

edited

Loading

huynguyen2903 commented Oct 30, 2018 •

edited

Loading

SteffeyDev commented Oct 30, 2018 •

edited

Loading

huynguyen2903 commented Oct 31, 2018 •

edited

Loading

huynguyen2903 commented Oct 31, 2018 •

edited

Loading