title: Fixed Header horizontal ListView react-native
body: <p>I have created a table view using react-native list view.</p>
  
  <p>I want to fix the header and first column in this table.</p>
  
  <p>Here is what I created:</p>
  
  <p><a href="https://i.stack.imgur.com/v5AcL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/v5AcL.png" alt="enter image description here"></a></p>
  
  <p>This list view is scrollable horizontally as well as vertically and all the data is dynamic.</p>
  
  <p>I want to freeze the header and first column of this table if possible</p>
  
  <p>Here is my code:</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    AppRegistry,
    StyleSheet,
    Text,
    ListView,
    ScrollView,
    Image,
    TouchableOpacity,
    Platform,
    View
  } from 'react-native';
  
  import PMR from "../utilities/PMR";
  import Spinner from 'react-native-loading-spinner-overlay';
  
  import NavigationBar from 'react-native-navbar';
  let bg         = require('image!bg'),
      back       = require('image!back'),
      Dimensions = require('Dimensions'),
      windowSize = Dimensions.get('window'),
      Screen     = require('Dimensions').get('window');
  
  class StationData extends Component {
    constructor(props) { 
      super(props)
      this.state = {
        dataSource: new ListView.DataSource({
          rowHasChanged: (row1, row2) =&gt; row1 !== row2,
        }),
        isVisible: true,
      }
    }
  
    componentDidMount() {
      let {username, password} = this.props.navigator.cerdentials;
      let obj = {  
      'stXid':this.props.data.stationId,
      'startTime':this.props.data.from,
      'endTime':this.props.data.to
      };
  
      PMR.rawData(username, password, obj).then((rslt) =&gt;  {
  
        var RawData = [];
        rslt.forEach(function(dataItem) {
          if (dataItem.pointValue.length &gt; 0)    
            RawData.push(dataItem);
        });
  
        RawData.unshift({name: 'Time', pointValue: rslt[0].pointValue})
        // console.log(rslt)
        this.setState({
              dataSource: this.state.dataSource.cloneWithRows(RawData),
              isVisible: false,
        });
      });
    }
  
    renderData(rowData) {
      // console.log(rowData.pointValue);
      if(rowData.name === 'Time'){
          return (
            &lt;View&gt;
  
          &lt;View style={{borderColor:'rgba(214, 214, 214,1)',borderWidth:1}}&gt;
            &lt;View style={styles.names}&gt; 
              &lt;Text style={{marginHorizontal: 12, marginVertical:(Platform.OS === 'ios') ? 15 : 16}}&gt;{rowData.name}&lt;/Text&gt;
            &lt;/View&gt;
              {rowData.pointValue.map((data) =&gt; &lt;View style={{borderBottomWidth:1,borderColor:'rgba(214, 214, 214,1)',padding:8}}&gt;&lt;Text&gt;{data.time.split(" ")[1]}&lt;/Text&gt;&lt;/View&gt;)}
          &lt;/View&gt;
          &lt;/View&gt;
        );
      } else {
          return (
             &lt;View&gt;
             &lt;View style={{borderColor:'rgba(214, 214, 214,1)',borderWidth:1}}&gt;
            &lt;View style={styles.names}&gt; 
              &lt;Text style={{marginHorizontal: 12, marginVertical: 6.5}}&gt;{rowData.name}&lt;/Text&gt;
              &lt;Text&gt;({rowData.engineeringUnit})&lt;/Text&gt;
            &lt;/View&gt;
              {rowData.pointValue.map((data) =&gt; &lt;View style={{borderBottomWidth:1,borderColor:'rgba(214, 214, 214,1)',padding:8}}&gt;&lt;Text&gt;{isNaN(data.value) ? (data.value) : +(Math.round(data.value + "e+1")  + "e-1")}&lt;/Text&gt;&lt;/View&gt;)}
          &lt;/View&gt;
          &lt;/View&gt;
        );
      }
    }
  
    render() {
      var titleConfig = {
      title: `Station Data: ${this.props.data.stationName}`,
    }
      return (
        &lt;View style={styles.container}&gt;
  
        &lt;Image style={styles.bg} source={bg} /&gt;
  
        &lt;Spinner visible={this.state.isVisible} /&gt;
  
      &lt;NavigationBar
        title = {titleConfig}
        leftButton={&lt;TouchableOpacity onPress={() =&gt; this.props.navigator.pop()}&gt;
        &lt;Image style={styles.back} source={back} /&gt;
        &lt;/TouchableOpacity&gt;}
        style = {{backgroundColor:'rgba(244, 244, 244,1)'}} /&gt;
  
        &lt;ScrollView&gt;
        &lt;View style={{position:'absolute', right:16, marginVertical:12}}&gt;
        &lt;Text&gt;{this.props.data.showDate}&lt;/Text&gt;
        &lt;/View&gt;
        &lt;ListView
        horizontal={true}
        automaticallyAdjustContentInsets={false}
        removeClippedSubviews={false}
        enableEmptySections={true}
        dataSource={this.state.dataSource}
        renderRow={this.renderData}
        style={styles.listView}
        /&gt;  
        &lt;/ScrollView&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
    },
    bg: {
    position: 'absolute',
    left: 0,
    top: 0,
    width: windowSize.width,
    height: windowSize.height
  },
  names: {
    backgroundColor:'rgba(219, 243, 207,1)',
    borderBottomWidth:1,
    borderColor:'rgba(214, 214, 214,1)',
    alignItems:'center',
  },
  back:
    { marginTop:10,
      marginLeft:10,
      width:20,
      height:20,
    },
    listView: {
      marginVertical:(Screen.width/100)*10,
      marginHorizontal:(Screen.width/100)*5
    },
  });
  
  module.exports =StationData;
  </code></pre>