I need to set the width and height of a ListView. While the width adjustment works as expected, the installation height is not affected, and the ListView always stretches almost to the bottom of the screen (there is only a field between loading the screen and the bottom of the ListView). I create a ListView in the render method as follows:
<ListView ref={component => this._stationsListFrom = component} style={styles.stationsList} dataSource={this.state.dataSource} renderRow={(rowData) => <Text>{rowData}</Text>} />
This is his style:
stationsList: { backgroundColor: 'white', height: 0, }
I also tried to set its height in the method using this command:
this._stationsListFrom.setNativeProps({height: 200});
When I tried to set the width with this command, it worked. But setting the height does nothing.
How to set the height of the ListView (for example, if TextInput is not a problem) to the desired value? Only the way I wound is to use the bottom edge, but that is not the way I want to use.
I test only on iOS (for the case when it works differently on Android).
My code is:
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);