mirror of
https://github.com/status-im/react-native.git
synced 2025-01-10 01:25:39 +00:00
a541d58bc4
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 https://github.com/facebook/react-native/pull/15395 Differential Revision: D5988720 Pulled By: shergin fbshipit-source-id: d33f6ee943d4f913970e26c322b66b3c9c948a02