Rendering a list on initial page using react-native for Android

Question

Hi everyone,

I am new to Android development using react-native and I got this error which I have no idea where this come from because I am not using ScrollView at all! I am trying to render a list on the initial screen and its data is coming from an api call.

My code is

    import React, { Component } from 'react';
    import {
      Image,
      ListView,
      TouchableHighlight,
      Text,
      View,
      StyleSheet
    } from 'react-native';
    import Api from '../../Utils/api';
    import CategoryRow from './CategoryRow';

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        padding: 12,
        flexDirection: 'row',
        alignItems: 'center',
      },
      text: {
        marginLeft: 12,
        fontSize: 16,
      },
      photo: {
        height: 40,
        width: 40,
        borderRadius: 20,
      },
      separator: {
        flex: 1,
        height: StyleSheet.hairlineWidth,
        backgroundColor: '#8E8E8E',
      }
    });

    class Main extends React.Component {

      constructor(props){

        super(props);
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

        this.state = {
          dataSource: ds.cloneWithRows(['row 1', 'row 2'])
        }
      }

      componentDidMount(){

        Api.getCategories()
          .then((res) => {
            this.setState({
              dataSource: ds.cloneWithRows(res)
            })
          })
          .catch();
      }

      render() {
        return(

          <ListView
            style={styles.container}
            dataSource = {this.state.dataSource}
            renderRow={(data) => <CategoryRow {...data} />}
          />

        )
      }
    }

    module.exports = Main;

And the code for categoryRow is:

    import React from 'react';
    import { View, Text, StyleSheet } from 'react-native';

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        padding: 12,
        flexDirection: 'row',
        alignItems: 'center',
      },
      text: {
        marginLeft: 12,
        fontSize: 16,
      },
      photo: {
        height: 40,
        width: 40,
        borderRadius: 20,
      },
    });

    const CategoryRow = (props) => (
      <View style={styles.container}>
        <Text style={styles.text}>
          ${props.name}
        </Text>
      </View>
    );

    export default CategoryRow;

Example of data :

[
  {
    "categoryId": 1,
    "code": "15",
    "name": "Photography",
    "description": "Are you a photo junkie? Then join the “snap pack” and travel to some of the most photogenic places on earth. Our photography trips put you on an itinerary specially geared towards getting the perfect pic, with a group of like-minded travellers. Learn new tricks, share your knowledge, and never worry about taking the time to get the shot. Bonus: someone always has an extra lens cap.",
    "categoryTypeId": 1,
    "categoryType": {
      "categoryTypeId": 1,
      "name": "Activity"
    }
  }
]

Can someone please help me to find out where is the problem and how to resolve this error?

Srijith · Accepted Answer · 2016-10-21 08:20:54Z

1

I think ListView uses the ScrollView props. See here http://facebook.github.io/react-native/releases/0.35/docs/listview.html#scrollview

From the error, it seems you should specify alignItems: 'center' in the contentContainerStyle prop of the ListView. Remove it from styles.container

<ListView contentContainerStyle={{alignItems: 'center'}}>
    ....
</ListView>

edited Oct 21, 2016 at 8:20

answered Oct 18, 2016 at 6:38

Srijith

1,71518 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Negin Basiri Over a year ago

So you mean I have to wrap ListView with ScrollView ?

user6380431 · Accepted Answer · 2016-10-18 06:35:59Z

0

  render() {
    return(
       <View style={{
          alignItems: 'center'
        }}>
           <ListView
              style={styles.container}
              dataSource = {this.state.dataSource}
              renderRow={(data) => <CategoryRow {...data} />}
           />)
     </View>
  }

answered Oct 18, 2016 at 6:35

user6380431

1341 silver badge5 bronze badges

Collectives™ on Stack Overflow

Rendering a list on initial page using react-native for Android

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related