Absolute positioning inside a SectionList on Android #17285
Description
Is this a bug report?
Yes
Have you read the Contributing Guidelines?
Yes
Environment
OS: macOS Sierra 10.12.6
Node: 8.1.3
Yarn: 1.3.2
npm: 5.5.1
Watchman: 4.9.0and
Xcode: Xcode 9.2 (9C40b)
Android Studio: 3.0, AI-171.4443003
react-native: 0.45.1
react: 16.0.0-alpha.12
Target Platform: iOS (10.3)
Steps to Reproduce
- Inside a SectionList component, absolutely position the items of one of the sections.
import React, { Component } from 'react';
import { SectionList, View, Text } from 'react-native';
const boxStyle = {
height: 50,
width: 50,
opactiy: 0.6,
};
const renderRed = () => (
<View style={{
...boxStyle,
backgroundColor: 'red',
}} />
);
const renderBlue = () => (
<View style={{
...boxStyle,
backgroundColor: 'blue',
position: 'absolute',
left: -10,
top: -25,
}} />
);
export default class App extends Component {
render() {
const sections = [
{
data: [{
id: 1,
}],
renderItem: renderRed,
},
{
data: [{
id: 2,
}],
renderItem: renderBlue,
},
];
return (
<View style={{padding: 30}}>
<Text>Section list bug</Text>
<SectionList
keyExtractor={item => item.id}
sections={sections}
/>
</View>
);
}
}Expected Behavior
On iOS, the components are absolutely positioned as expected:
Actual Behavior
On Android, the absolutely positioned items disappear (or sometimes on Expo the app crashes):
Reproducible Demo
Expo Snack: https://snack.expo.io/@jackvlj/android-sectionlist-with-absolute-positioning