CODEWITHSUNDEEP
reactjsreact-native
Malenkof
Malenkof

Reputation: 25

How to scroll a page in React Native

enter image description here

I can't scroll my page. What is wrong?

export default class CustomersTab extends Component {
  constructor(props) {
    super(props);
    this.state = {
      token: "",
      isLoading: true,
      dataSource: null
    };
  }

  componentWillMount() { MY APİ CODES - HERE İS NOT İMPORTANT
        )
          .then(response => response.json())
          .then(responseData => {
            this.setState({
              isLoading: false,
              dataSource: responseData.result
            });
          });
      })
      .catch(error => console.warn(error));
  }
  static navigationOptions = {
    title: "Firmaların Listesi",
    tabBarIcon: <Icon name="ios-people" style={{}} />
  };
  render() {
    if (this.state.isLoading) {
      return (
        <View style={styles.container}>
          <ActivityIndicator />
        </View>
      );
    } else {
      return this.state.dataSource.map((val, key) => {

        return (
          <List key={key}>
            <ListItem
              roundAvatar
              avatar={{ uri: "url/notimportant" }}
              key={key}
              title={val.name+" "+val.surname}
              subtitle={val.customerType}
            />
          </List>
        );
      });
    }
  }
}

I tried different codes but it did not improve. How can I view all the data from the page? The "Load others" button may also work. Does anyone have an idea?? Note: DATA is ok. The problem is scroll.

Upvotes: 0

Views: 53

Answers (2)

eureka
eureka

Reputation: 181

you can use FlatList and ScrollView. remember to import them. if you see the react-native docs and read it you can use it. another tag that you use it like View don't scroll.

Upvotes: 0

Amruth
Amruth

Reputation: 5912

Your render elements should be wrapped withing ScrollView.

 return (
  <ScrollView>
    {this.state.dataSource.map((val, key) => {
      return (
        <List key={key}>
          <ListItem
            roundAvatar
            avatar={{ uri: "url/notimportant" }}
            key={key}
            title={val.name + " " + val.surname}
            subtitle={val.customerType}
          />
        </List>
      );
    })}
  </ScrollView>
);

Upvotes: 1

Related Questions