React Native ListView: rendered Text is not selectable

Question

I am new to React Native and am testing out ListView. I render each row as Text with selectable={true}, but I cannot select any text in any row.

I cannnot find out why and googling didn't give me anything.

How should I do it so that I can select text in each row of the ListView?

My test code:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView,
  ScrollView,
  TouchableHighlight,
} from 'react-native';

class Item extends Component {
  onPress = () => {
    console.log(`Item: component pressed: ${this.props.itemObj.name} `);
  };

  render() {
    {/*<TouchableHighlight onPress={this.onPress} underlayColor='greenyellow'>*/}
    return (
      <TouchableHighlight>
        <Text style={styles.item} selectable={true}>
          {this.props.itemObj.name}
        </Text>
      </TouchableHighlight>
    );
  }
}

export default class ListViewTest extends Component {
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 != r2 });
    this.state = {
      dataSource: ds.cloneWithRows([]),
    };
  }

  componentWillMount() {
    console.log("componentWillMount");
    let items = [];
    for (let i=0; i<30; i++) {
      items.push({name: "item" + i});
    }
    this.setState({dataSource: this.state.dataSource.cloneWithRows(items)});
  }

  renderRow = (itemObj) => {
    // console.log("renderRow(): ");
    // console.log(row);
    return <Item itemObj={itemObj} />;
    {/*return <Text style={styles.item} selectable={true}>test message</Text>*/}
  };

  render() {
    console.log("render");
    return (
      <ScrollView>
        <ListView
          style={styles.list}
          dataSource={this.state.dataSource}
          initialListSize={1}
          renderRow={this.renderRow}
          enableEmptySections={true}
        />
      </ScrollView>
    );

    // return (
    //   <ScrollView>
    //     <Item itemObj={{name: "item1"}} />
    //   </ScrollView>
    // );
  }
}

const styles = StyleSheet.create({
  list: {
    flex: 1,
  },
  item: {
    padding: 5,
    borderBottomColor : 'blue',
    borderStyle: 'solid',
    borderBottomWidth : 1,
  },
});

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

Yasemin çidem · Answer 1 · 2017-02-02T19:17:21.423

You can change Constructor.I think you dont load array to listview.You should remove including of componentWillMount.You can push items to array inside constructor.Can you try this code?

 import React, { Component } from 'react';
        import {
          AppRegistry,
          StyleSheet,
          Text,
          View,
          ListView,
          ScrollView,
          TouchableHighlight,
        } from 'react-native';

        class Item extends Component {
          onPress = () => {
            console.log(`Item: component pressed: ${this.props.itemObj.name} `);
          };

          render() {
            return (
             <View>
                <Text style={styles.item} selectable={true}>
                  {this.props.itemObj.name}
                </Text>
             </View>
            );
          }
        }

        export default class ListViewTest extends Component {
          constructor(props) {
            super(props);
            let items = [];
            for (let i=0; i<30; i++) {
              items.push({name: "item" + i});
            }
            const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 != r2 });
            this.state = {
              dataSource: ds.cloneWithRows([items]),
            };
          }

          renderRow = (itemObj) => {
              return <Item itemObj={itemObj} />;
             }
          };

          render() {
            console.log("render");
            return (
              <ScrollView>
                <ListView
                  style={styles.list}
                  dataSource={this.state.dataSource}
                  initialListSize={1}
                  renderRow={this.renderRow}
                  enableEmptySections={true}
                />
              </ScrollView>
            );

            // return (
            //   <ScrollView>
            //     <Item itemObj={{name: "item1"}} />
            //   </ScrollView>
            // );
          }
        }

        const styles = StyleSheet.create({
          list: {
            flex: 1,
          },
          item: {
            padding: 5,
            borderBottomColor : 'blue',
            borderStyle: 'solid',
            borderBottomWidth : 1,
          },
        });

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

Hi, thanks, but that didn't work. It couldn't be rendered. I think the [items] you have here, which is an array of 1 element which is again an array, needs some special handling for it to be rendered.. — ZH17, Feb 03 '17 at 15:26

React Native ListView: rendered Text is not selectable

1 Answers1