Permalink
Browse files

Fix that section headers in SectionList don't stick at correct position.

Summary:
I noticed that section headers in SectionList don't stick at correct position in case of using with contentInset and contentOffset. (See the demo below. It looks that contentInset.top is ignored.)
This is a common case of use of NavigationBar and TableView on iOS.

![](https://user-images.githubusercontent.com/143255/29018708-1e2f98aa-7b97-11e7-9599-19dbb832266d.gif)

Here is a demo and an example code:

![](https://user-images.githubusercontent.com/143255/29018753-4201f660-7b97-11e7-9d31-28413d1b6269.gif)

```jsx
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  SectionList,
} from 'react-native';

export default class RNScrollExample extends Component {
  renderSectionHeader(title) {
    return (
      <View style={styles.sectionHeader}>
        <Text>{title}</Text>
      </View>
    )
  }

  renderItem(content) {
    return (
      <View style={styles.cell}>
        <Text>{`Item ${content}`}</Text>
      </View>
    )
  }

  renderSeparator() {
    return <View style={styles.separator} />
  }

  renderSectionList() {
    const sections = Array.from(Array(10), (e, i) => ({ title: `Section ${i+1}`, data: Array.from(Array(10)).map((e, i) => i+1) }))
    const navigationBarHeight = 64
    return (
      <SectionList
        contentInset={{ top: navigationBarHeight }}
        contentOffset={{ y: -navigationBarHeight }}
        sections={sections}
        keyExtractor={(item, index) => index}
        renderSectionHeader={({ section }) => this.renderSectionHeader(section.title)}
        renderItem={({ item }) => this.renderItem(item)}
        ItemSeparatorComponent={this.renderSeparator}
      />
    )
  }

  renderHeader() {
    return (
      <View style={styles.header}>
        <Text style={styles.headerText}>Contents</Text>
      </View>
    )
  }

  render() {
    return (
      <View>
        {this.renderSectionList()}
        {this.renderHeader()}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  header: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    height: 64,
    paddingTop: 20,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffffffcc',
  },
  headerText: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  sectionHeader: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    backgroundColor: '#05bbd3',
  },
  cell: {
    paddingHorizontal: 8,
    paddingVertical: 16,
    backgroundColor: '#82dde9',
  },
  separator: {
    height: 1,
    backgroundColor: '#7d888d',
  },
});

AppRegistry.registerComponent('RNScrollExample', () => RNScrollExample);
```
Closes #15395

Differential Revision: D5988720

Pulled By: shergin

fbshipit-source-id: d33f6ee943d4f913970e26c322b66b3c9c948a02
  • Loading branch information...
miyabi authored and facebook-github-bot committed Oct 10, 2017
1 parent 9424cd7 commit a541d58bc4245f93d122a01272efa2a39d8391d0
Showing with 2 additions and 1 deletion.
  1. +2 −1 Libraries/Components/ScrollView/ScrollView.js
@@ -447,7 +447,8 @@ const ScrollView = createReactClass({
},
componentWillMount: function() {
this._scrollAnimatedValue = new Animated.Value(0);
this._scrollAnimatedValue = new Animated.Value(this.props.contentOffset ? this.props.contentOffset.y : 0);
this._scrollAnimatedValue.setOffset(this.props.contentInset ? this.props.contentInset.top : 0);
this._stickyHeaderRefs = new Map();
this._headerLayoutYs = new Map();
},

0 comments on commit a541d58

Please sign in to comment.