[Android] overflow visible not working on SectionList

[lsps9150414]

Description

• The View container is given overflow: visible
• The vertical list (SectionList) is given a padding and overflow: visible
• The horizontal sub list (FlatList) is given a negative marginHorizontal so the items won't be chopped by the padding when scrolled.

Rendered as expected on iOS:

On Android the sub list is still chopped:

Code:

import PropTypes from 'prop-types';
import React, {
  Component,
} from 'react';
import {
  FlatList,
  SectionList,
  StyleSheet,
  View,
} from 'react-native';
import { Subtitle } from 'react-native-ui-toolbox';

import ChatAvatar from '../ChatAvatar';
import ChatListItem from '../ChatListItem';
import {
  SCENE_PADDING,
  globalLayout,
} from '../../styles';

const styles = StyleSheet.create({
  showOverflow: {
    overflow: 'visible',
  },
  horizontalList: {
    marginHorizontal: -SCENE_PADDING,
  },
  sectionTitle: {
    marginBottom: 10,
    color: '#888',
  },
});

const propTypes = {
  navigation: PropTypes.object.isRequired,
};

const defaultProps = {};

export default class Connection extends Component {
  handleSearch = () => {}

  keyExtractor = data => (data.key)

  subListKeyExtractor = data => (data.key)

  renderSectionHeader = ({ section }) => (
    <Subtitle style={[styles.sectionTitle]}>{section.title}</Subtitle>
  )

  renderHorizontalList = data => (
    <FlatList
      style={[globalLayout.sectionContainer, styles.horizontalList, { backgroundColor: 'red' }]}
      data={data.item}
      renderItem={this.renderCatAvatar}
      keyExtractor={this.subListKeyExtractor}
      horizontal
    />
  )

  renderCatAvatar = data => (
    <ChatAvatar {...data.item} />
  )

  renderChats = data => (
    <ChatListItem {...data.item} />
  )

  render() {
    const newConnections = [
      { key: '1', name: 'User 1', role: 'Role' },
      { key: '2', name: 'User 2', role: 'Role' },
      { key: '3', name: 'User 3', role: 'Role' },
    ];
    const actives = [
      { key: '1', name: 'Philip Chen', role: 'Full Stack Developer' },
      { key: '2', name: 'User 2', role: 'Role' },
      { key: '3', name: 'User 3', role: 'Role' },
      { key: '4', name: 'User 4', role: 'Role' },
      { key: '5', name: 'User 5', role: 'Role' },
    ];
    const chats = [
      { key: '1', name: 'Philip Chen', role: 'Full Stack Developer' },
      { key: '2', name: 'User 2', role: 'Role' },
      { key: '3', name: 'User 3', role: 'Role' },
      { key: '4', name: 'User 4', role: 'Role' },
      { key: '5', name: 'User 5', role: 'Role' },
    ];

    const newConnectionSectionData = {
      key: 'new-connection',
      title: 'New Connections',
      data: [newConnections],
      renderItem: this.renderHorizontalList,
    };

    const activeTraceSectionData = {
      key: 'active-trace',
      title: 'With Active Trace',
      data: [actives],
      renderItem: this.renderHorizontalList,
    };

    const chatSectionData = {
      key: 'chat',
      title: 'Chats',
      data: chats,
      renderItem: this.renderChats,
    };

    return (
      <View
        style={[
          globalLayout.sceneContainer,  // flex: 1
          styles.showOverflow,
        ]}
      >
        <SectionList
          style={[
            globalLayout.sceneContentContainer,  // padding: 10
            styles.showOverflow,
          ]}
          renderSectionHeader={this.renderSectionHeader}
          sections={[
            newConnectionSectionData,
            activeTraceSectionData,
            chatSectionData,
          ]}
          keyExtractor={this.keyExtractor}
          stickySectionHeadersEnabled={false}
        />
      </View>
    );
  }

}

Connection.propTypes = propTypes;
Connection.defaultProps = defaultProps;

Env Info:

"expo": "^17.0.0",
"react": "16.0.0-alpha.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-17.0.0.tar.gz",

[michals]

seems to be caused by #6802 that was closed without a fix :-/

[RichardLindhout]

Give your flatlist a padding header and footer. Overflow:visible does not work at the moment. It's hard to implement but should be fixed in the future with the new layout engine on Android.

[pull-bot]

@facebook-github-bot no-template

[pull-bot]

@facebook-github-bot no-template

[facebook-github-bot]

Hey, thanks for reporting this issue! It looks like your description is missing some necessary information, or the list of reproduction steps is not complete. Can you please add all the details specified in the Issue Template? This is necessary for people to be able to understand and reproduce the issue being reported. I am going to close this, but feel free to open a new issue with the additional information provided. Thanks! See "What to Expect from Maintainers" to learn more.

[facebook-github-bot]

Hey, thanks for reporting this issue! It looks like your description is missing some necessary information, or the list of reproduction steps is not complete. Can you please add all the details specified in the Issue Template? This is necessary for people to be able to understand and reproduce the issue being reported. I am going to close this, but feel free to open a new issue with the additional information provided. Thanks! See "What to Expect from Maintainers" to learn more.