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

Positioning View above a parent #7229

Closed
pedro opened this Issue Apr 26, 2016 · 9 comments

Comments

Projects
None yet
8 participants
@pedro

pedro commented Apr 26, 2016

Hey folks,

We're trying to position a View above its parent using a negative top. iOS renders it the way I'd expect:

screen shot 2016-04-26 at 12 14 14 am

But Android is trimming the view to match the parent:

screen shot 2016-04-26 at 12 14 16 am

Code:

class RNPositionBug extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.box}>
          <View style={styles.inner}/>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  box: {
    width: 200,
    height: 200,
    backgroundColor: 'red',
  },
  inner: {
    position: 'relative',
    top: -50,
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  }
});

Tested in React-Native 0.24.1, OSX. Tried to use both absolute and relative positioning on the inner view.

Any ideas/pointers are appreciated, thanks!

@ashleydw

This comment has been minimized.

ashleydw commented Apr 26, 2016

What about overflow: 'visible' on the outer Views ?

@kohver

This comment has been minimized.

kohver commented Apr 26, 2016

@grabbou

This comment has been minimized.

Collaborator

grabbou commented Apr 26, 2016

@facebook-github-bot

This comment has been minimized.

facebook-github-bot commented Apr 26, 2016

Closing this issue as @grabbou says the question asked has been answered. Please help us by asking questions on StackOverflow. StackOverflow is amazing for Q&A: it has a reputation system, voting, the ability to mark a question as answered. Because of the reputation system it is likely the community will see and answer your question there. This also helps us use the GitHub bug tracker for bugs only.

@pedro

This comment has been minimized.

pedro commented Apr 26, 2016

oops, thank you!

@conor909

This comment has been minimized.

conor909 commented Nov 16, 2017

@grabbou whats the answer?

@JCMais

This comment has been minimized.

JCMais commented Nov 23, 2017

The answer is that it doesn't works. And is one of the main pain points of react native apps on Android.

@grabbou

This comment has been minimized.

Collaborator

grabbou commented Nov 27, 2017

Here is the answer: #7229 (comment).

Basically, overflow doesn't work on Android. Anything that you try to put outside of its parent (negative margin, negative absolute position) will be cropped.

@JCMais

This comment has been minimized.

JCMais commented Nov 27, 2017

See this issue about a possible solution #16951

@facebook facebook locked as resolved and limited conversation to collaborators May 24, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.