Set height of ListView in React Native

Question

I need to set width and height of ListView. While setting width works as expected, setting height has no effect and ListView is always stretching into almost bottom of the screen (there is only margin between bootom of screen and bottom of ListView). I am creating ListView in render method this way:

<ListView ref={component => this._stationsListFrom = component} style={styles.stationsList} dataSource={this.state.dataSource} renderRow={(rowData) => <Text>{rowData}</Text>} />

This is its style:

stationsList: {
  backgroundColor: 'white',
  height: 0,
}

I have also tried to set its height in a method by this command:

this._stationsListFrom.setNativeProps({height: 200});

When I have tried to set width using this command, it worked. But setting height does nothing.

How can I set height of ListView (for example, in the case of TextInput its not a problem) to desired value? Only way I wound is to use bottom margin, but that is not the way I want to use.

I am testing on iOS only (for the case it works differently on Android).

My code:

import React, { Component } from 'react';
import Dimensions from 'Dimensions';
import {
  AppRegistry,
  StyleSheet,
  Text,
  TextInput,
  ListView,
  Button,
  View
} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    backgroundColor: '#D8CD36',
    padding: 25
  },
  label: {
    textAlign: 'left',
    color: '#333333',
    fontSize: 20,
    margin: 5,
  }, 
  textInput: {
    height: 40, 
    borderColor: 'black', 
    borderWidth: 2,
    padding: 7,
  },
  stationsList: {
    backgroundColor: 'white',
    height: 0,
  },
  separator: {
    flex: 1,
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#8E8E8E',
  },
  menuButton: {
  },
  },
  );

export default class TestApp extends Component {

  constructor(props) {
    super(props);

    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows(['Žilina', 'Košice', 'Vrútky']), };
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.label}>
            Z
        </Text>
        <TextInput ref={component => this._textInputFrom = component} style={styles.textInput} placeholder="Východzia stanica" onChangeText={this.fromTextChange.bind(this)} onLayout={(event) => { this.correctMenuFromWidth(event.nativeEvent.layout) }} renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator}/>} />
        <Text style={styles.label}>
            Do
        </Text>
        <TextInput style={styles.textInput} placeholder="Cieľová stanica"/>
        <ListView ref={component => this._stationsListFrom = component} style={styles.stationsList} dataSource={this.state.dataSource} renderRow={(rowData) => <Button onPress={this.menuFromButtonPressed} style={styles.menuButton} title={rowData} />} />
      </View>
    );
  }

  correctMenuFromWidth(layout) {
    const {x, y, width, height} = layout;
    this._stationsListFrom.setNativeProps({marginTop: -74, width: width});
  }

  menuFromButtonPressed() {
  };

  fromTextChange() {
    this._textInputFrom.setNativeProps({text: 'Kraľovany'});
    this._stationsListFrom.setNativeProps({height: 200});
  };

}

AppRegistry.registerComponent('TestApp', () => TestApp);

Answer 1

Move ListView inside wrapper and set height to wrapper:

<View style={{height: 200}}>
  <ListView .../>
</View>

From ScrollView docs (ListView uses ScrollView):

Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height.