Positioning View above a parent

[pedro]

Hey folks,

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

But Android is trimming the view to match the parent:

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]

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

[kohver]

Unfortunately, overflow style property defaults to hidden and cannot be changed on Android
https://facebook.github.io/react-native/docs/known-issues.html#the-overflow-style-property-defaults-to-hidden-and-cannot-be-changed-on-android

[grabbou]

@facebook-github-bot answered

[facebook-github-bot]

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]

oops, thank you!

[conor909]

@grabbou whats the answer?

[JCMais]

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

[grabbou]

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]

See this issue about a possible solution #16951