I am trying to show scroll indicator in bottom when get to limit

Ibtissam 0
Viewed 23

I am trying to show the bottom indicator and then show more data when it reach the limit, I need only to know what the name of the footer indicator in ScrollView in react native

I am trying to show the bottom indicator and then show more data when it reach the limit, I need only to know what the name of the footer indicator in ScrollView in react native `

import React, { Component } from "react";
import { Text, Button, View, StyleSheet, ScrollView } from "react-native";

class App extends Component {
state = {
    // Sample data
    items: [
    { item: "Item 1", price: "10", id: 1 },
    { item: "Item 2", price: "20", id: 2 },
    { item: "Item 3", price: "30", id: 3 },
    { item: "Item 4", price: "40", id: 4 },
    { item: "Item 5", price: "50", id: 5 },
    { item: "Item 6", price: "60", id: 6 },
    { item: "Item 7", price: "70", id: 7 },
    { item: "Item 8", price: "80", id: 8 },
    { item: "Item 9", price: "90", id: 9 },
    { item: "Item 10", price: "100", id: 10 },
    { item: "Item 11", price: "110", id: 11 },
    { item: "Item 12", price: "120", id: 12 },
    { item: "Item 13", price: "130", id: 13 },
    { item: "Item 14", price: "140", id: 14 },
    { item: "Item 15", price: "150", id: 15 },
    ],
};
render() {
    return (
    <View style={styles.screen}>
        <ScrollView> // use of ScrollView Component
        {this.state.items.map((item, index) => (
            <View key={item.id}>
            <View style={styles.summary}>
                <Text style={styles.summaryText}>
                {item.item} <Text style={styles.amount}>
                    ${item.price}</Text>
                </Text>
                <Button title="Order" color="#FFC107"
                    onPress={() => { }} />
            </View>
            </View>
        ))}
        </ScrollView>
    </View>
    );
}
}

// Screen styles
const styles = StyleSheet.create({
screen: {
    margin: 20,
},
summary: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    marginBottom: 20,
    padding: 10,
    shadowColor: "black",
    shadowOpacity: 0.26,
    shadowOffset: { width: 0, height: 2 },
    shadowRadius: 8,
    elevation: 5,
    borderRadius: 10,
    backgroundColor: "white",
},
summaryText: {
    fontFamily: "openSansBold",
    fontSize: 18,
},
amount: {
    color: "#C2185B",
},
});

export default App;

`

react-native
1 Answers

For illustration it is better to for provide an example.

import React, { Component } from "react";
import { Text, Button, View, StyleSheet, ScrollView, ActivityIndicator } from "react-native";

class TestScreen extends Component {
    state = {
        items: [...],
        loading: false
    };

    isCloseToBottom = ({layoutMeasurement, contentOffset, contentSize}) => {
      let paddingToBottom = 20;
      return layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom;
    };

    render() {
        return (
            <View style={styles.screen}>
                <ScrollView
                  onScroll={({nativeEvent}) => {
                    //Check whether the scrollview is reaching bottom
                    if (this.isCloseToBottom(nativeEvent)) {  
                      this.setState({loading: true});
                    }
                  }}
                  scrollEventThrottle={400}
                > 
                {...Your Map Function}
                {
                  this.state.loading && <ActivityIndicator />
                }
                </ScrollView>
            </View>
        );
    }
}

It is better to implement this kind of list in a FlatList, but it is up to you. Enjoy :)

Edit: added FlatList Component for your reference

<FlatList 
    keyExtractor={item => item.id}
    data={this.state.items}
    onEndReached={()=>{
      this.setState({loading: true});
    }}
    renderItem={({item, index}) => {
      return(
        <View key={item.id}>
          <View style={styles.summary}>
              <Text style={styles.summaryText}>
              {item.item} <Text style={styles.amount}>
                  ${item.price}</Text>
              </Text>
              <Button title="Order" color="#FFC107"
                  onPress={() => { }} />
          </View>
        </View>
      )
    }}
    ListFooterComponent={()=>{
      return (this.state.loading && <ActivityIndicator />)
    }}
 />
Peter Tam0
Related