-
Notifications
You must be signed in to change notification settings - Fork 89
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Android devices positioning popover in center of screen #28
Comments
Heres the output from
|
Alright, narrow down the weird behavior. Turns out if the component I was wrapped is a I suppose it would help to show how I'm generating these popovers. I'm using a component that wraps whatever element I want to put the popover on. This is the code that handles the wrapping and sets the ref on the child so that the popover can be assigned to it. render () {
let child: React.Element<any> | void;
if (this.props.children) {
child = React.Children.only(this.props.children);
}
return (
<React.Fragment>
{child && React.cloneElement(child, {ref: (r) => this.elementRef = r})}
<Popover
isVisible={!this.state.waitingOnDelay && this.isVisible()}
fromView={this.elementRef}
onClose={this.onClose.bind(this)}
doneClosingCallback={this.onCloseCallback.bind(this)}
animationConfig={{
duration: 200,
easing: Easing.inOut(Easing.quad),
}}
popoverStyle={{
backgroundColor: 'rgba(0, 0, 0, 0.6)',
borderWidth: 1,
borderColor: colors.black,
borderRadius: 5,
}}
>
<Text style={[textStyle.default, textStyle.callout, {padding: BASE_MARGIN, color: colors.white}]}>
{this.props.description}
</Text>
</Popover>
</React.Fragment>
);
} Here is an example of where this bug was occurring, and how I managed to fix it in one instance. Theres a lot of missing code, I'm sorry, but I've included the relevant render functions to help explain hopefully.
If I remove the |
Do you ensure that |
In other words, make sure that when you set |
@SteffeyDev yeah, I am waiting for the element ref. I also added some logging when that state change occurs, and there is an elementRef set at that point for them all, both the broken ones and working ones. I did more testing this morning and managed to get another working by removing some I'm quite stumped. |
So I completely skipped the whole special component I made to see if there was something weird going on there. I don't believe that is the case. Here is an example of this happening without anything special. Just a single component and a popover. export default class JobInformationBar extends React.PureComponent<Props, State> {
_stackedRef;
state: State = { isMounted: false };
componentDidMount () {
if (this._stackedRef) {
this.setState({isMounted: true});
}
}
render () {
return (
<View style={{flex: 1}}>
<StackedBlock
ref={(ref) => this._stackedRef = ref}
topText={this.props.time.toFixed(2).toString()}
bottomText={'Hours'}
style={{marginHorizontal: BASE_MARGIN}}
/>
<Popover fromView={this._stackedRef} isVisible={this.state.isMounted}>
<Text>Some text</Text>
</Popover>
</View>
);
}
}
// @flow
import React from 'react';
import { Text, View } from 'react-native';
import { BASE_MARGIN, colors, textStyle } from './../styles';
interface Props {
topText: string,
bottomText: string,
}
export default class StackedBlock extends React.PureComponent<Props> {
render () {
const {bottomText, topText, ...props} = this.props;
return (
<View {...props}>
<Text style={[textStyle.default, textStyle.title, {textAlign: 'center', color: colors.green.dark, paddingBottom: BASE_MARGIN / 4}]}>
{topText.toUpperCase()}
</Text>
<Text style={[textStyle.default, textStyle.footnote, {color: colors.grey.darker, textTransform: 'uppercase'}]}>
{bottomText.toUpperCase()}
</Text>
</View>
);
}
} |
Ok, try this in your componentDidMount:
That’s exactly what my component is doing to get the position of the view, if any of those 4 values are undefined it would explain the behavior you are seeing. You’ll need the appropriate imports from |
So on android I get Does this mean theres still some issue going on with the ref? I should mention I did this test on that last example I posted, outside my special component since it seems easier to test and less things going on around it. |
I fixed it! I found this issue on Github and added |
I've addressed this for the time being on my code by just adding |
Glad you were able to fix! Unfortunately, my component is restricted by what RN can give me for values. However, I think I can create some more useful warning and documentation to help people who run into these sorts of problems in the future. |
Yeah, don't think this is an issue with this library so much as it is an issue with RN. A note somewhere about adding collapsable to view elements you're trying to position against might be all thats needed. Thanks again, library has saved me a ton of time. |
This should help clarify a few things that we learned in those issues
Can you check the new documentation to see if it is correct? https://github.com/SteffeyDev/react-native-popover-view/blob/master/README.md#troubleshooting |
Looks good, I ended up not needing the renderToAndroid prop, just the collapsable. :) |
Ok, thanks! |
So I've got a bit of a weird bug going on that I can't quite seem to figure out. On iOS devices, this popover appears correctly at the top of the view. But on android devices, it gets shoved into the middle, and the arrow is dead center on the screen:
However, this popover which is attached to an absolutely positioned element on the screen shows up correctly on both devices?
Sorry about the cropping, its not an open project. Happy to provide as much information as I can, just not sure exactly where to start in terms of providing helpful content.
The text was updated successfully, but these errors were encountered: