reactjs – I want to scroll my product through next button in flat list

import React, { useRef, Component } from “react”; import { Pressable, Modal, Switch, SafeAreaView, ScrollView, Dimensions, FlatList, View, Text, Alert, TextInput, Image, TouchableOpacity, styleSheet, } from “react-native”; import styles from “../../../assets/styles/style”; import { QHCheckBox, QHtopRightButton, SearchableTopRightButton, QHBackButton, renderComponentWithScroll, renderComponent, QHText, QHLoader, QHButton1, QHLinkButton1, QHInputView1, QHInputView11, showMessageInfo, } from/. import { languageProps } from “../../../language”; import * as utility from “../../../utility”; import * as services from “../../../services/boservices”; import { Picker } from “@react-native-picker/picker”; import ImagePicker from “react-native-image-crop-picker”; import { nProperties } from “../../../utility.js”; import RNPickerDialog from “rn-modal-picker”;

const windowWidth = Dimensions.get("window").width;
const windowHeight = Dimensions.get("window").height;

const onEnd = () => {
  Alert.alert("You Have Reached To List End...");
};

class InventoryScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [],
      showAddEdit: false,
      loading: false,
      pickerItems: [],
      selectedProductIndex: 0,
      showAddRemarksModal: false,
      selectedInventoryProductIndex : 0
    };
  }

  async loadProducts() {
    try {
      const products = await services.loadProducts();
      console.log("Units --------------------------", products);
      this.setState({ products });
    } catch (err) {
      console.log(err);
    }
  }

  async loadinventoryDefault() {
    try {
      const inventory = await services.loadinventoryDefault();
      console.log(
        "Inventory ---------++++++++++++++++++++++++++++++++++++-----------------",
        inventory
      );
      this.setState({ inventory });
    } catch (err) {
      console.error(err);
    }
  }

  async loadAll() {
    try {
      this.setState({ loading: true });
      await this.loadProducts();
      await this.loadinventoryDefault();

      this.setState({ loading: false });
    } catch (err) {
      console.log(err);
      this.setState({ loading: false });
    }
  }

  componentDidMount() {
    this.loadAll();
  }

  componentWillUnmount() {}

  goBackToDashboard() {
    this.props.hideInventory();
  }

  async saveOrder() {
    try {
      this.setState({ loading: true });
      console.log(this.state.Products);

      if (!this.state.Products) {
        showMessageInfo("Product Not Selected");
        this.setState({ loading: false });
        return;
      }

      this.setState({ loading: false });
    } catch (err) {
      console.log(err);
      this.setState({ loading: false });
    }
  }

  clearAddEdit() {
    this.setState({
      showAddEdit: false,
      selectedProduct: { id: 0 },
      selectedProductIndex: 0,
    });
  }

  renderAddEditScreen() {
    return renderComponentWithScroll(
      <View style={[styles.container2]}>
        <QHBackButton
          onPress={() => {
            this.clearAddEdit();
            this.setState({ showAddEdit: false });
          }}
        />

        <View
          style={[
            styles.container1,
            {
              width: windowWidth,
              height: windowHeight,
              paddingTop: 50,
              justifyContent: "center",
            },
          ]}
        >
          {this.state.inventory ? (
            <FlatList
              onViewableItemsChanged={({ viewableItems, changed }) => {
                this.flProductInventory.scrollToOffset({
                  offset: 0,
                  animated: true,
                });
              }}
              pagingEnabled={true}
              horizontal
              onEndReached={onEnd}
              ref={(initialScrollIndex) => {
                this.flProductInventory = initialScrollIndex;
              }}
              style={{ marginbackgroundColor: "green" }}
              data={this.state.inventory.inventoryProducts}
              renderItem={({ item }) => { console.log('===============================+++++++++++++++++++=================',item)
                return (
                  <View
                    style={{
                      margin: 5,
                      backgroundColor: "#0e387a",
                    }}
                  >
                    <View
                      style={[
                        {
                          backgroundColor: "#EAE7FA",
                          width: windowWidth,
                          height: 100,
                        },
                      ]}
                    >
                      <QHText
                        style={{
                          width: "100%",
                          textAlign: "center",
                          fontWeight: "bold",
                          fontSize: 30,
                          marginBottom: 5,
                          paddingTop: 40,
                        }}
                        title={item.productName}
                      />
                    </View>
                    <QHText
                      style={{
                        color: "#ffffff",
                        textAlign: "center",
                        paddingTop: 15,
                      }}
                      title={"P - " + item.productId}
                    />
                    <QHText
                      style={{
                        color: "#ffffff",
                        textAlign: "center",
                        paddingTop: 10,
                      }}
                      title={"Product Name = " + item.productName}
                    />
                    <QHText
                      style={{
                        color: "#ffffff",
                        textAlign: "center",
                        paddingTop: 10,
                      }}
                      title={"Product Recieved = " + item.purchaseReceivedQty}
                    />

                    <QHText
                      style={{
                        color: "#ffffff",
                        textAlign: "center",
                        paddingTop: 10,
                      }}
                      title={"Opening Balance = " + item.openingBalanceQty}
                    />
                    <QHText
                      style={{
                        color: "#ffffff",
                        textAlign: "center",
                        paddingTop: 10,
                      }}
                      title={"Sale - " + item.orderHandoverQty}
                    />

                    <QHText
                      style={{
                        color: "#ffffff",
                        textAlign: "center",
                        paddingTop: 10,
                      }}
                      title={
                        "Total Quantity = " +
                        (Number(item.openingBalanceQty) +
                          Number(item.purchaseReceivedQty) -
                          Number(item.orderHandoverQty))
                      }
                    />

                    <QHText
                      style={{
                        color: "#ffffff",
                        textAlign: "center",
                        paddingTop: 10,
                      }}
                      title={"Adjusted Quantity = " + item.adjustQty}
                    />

                    <QHText
                      style={{
                        color: "#ffffff",
                        textAlign: "center",
                        paddingTop: 10,
                      }}
                      title={"Enter Adjusted Quantity"}
                    />
                    <View style={{ paddingLeft: 80, paddingTop: 5 }}>
                      <QHInputView11
                        style={{
                          color: "red",
                          textAlign: "center",
                          paddingTop: 40,
                          justifyContent: "center",
                        }}
                        keyboardType="number-pad"
                        textStyle={{ color: "#ffffff" }}
                        value={item.adjustQty}
                        placeholder="Enter Quantity"
                        placeholderTextColor="#ffffff"
                        onChangeText={(val) => {
                          this.setState({ adjustQty: val });
                        }}
                      />
                    </View>
                    <QHText
                      style={{
                        color: "#ffffff",
                        textAlign: "center",
                      }}
                      title={"Enter Remarks"}
                    />

                    <View style={{ paddingLeft: 80, paddingTop: 5 }}>
                      <QHInputView11
                        style={{
                          color: "red",
                          textAlign: "center",
                          paddingTop: 40,
                          justifyContent: "center",
                        }}
                        textStyle={{ color: "#ffffff" }}
                        value={item.Remarks}
                        placeholder="Enter Remarks"
                        placeholderTextColor="#ffffff"
                        onChangeText={(val) => {
                          this.setState({ Remarks: val });
                        }}
                      />
                    </View>

                    <QHText
                      style={{
                        color: "#ffffff",
                        textAlign: "center",
                        paddingTop: 10,
                      }}
                      title={
                        "Available Quantity = " +
                        (Number(item.totalQty) - Number(item.adjustQty))
                      }
                    />
                  </View>
                );
              }}
            />
          ) : null}
          <View style={[{ flexDirection: "row", paddingBottom: 20 }]}>

            {this.state.selectedInventoryProductIndex > 0 ?
            <QHButton1
              title="Back"
              btnStyle={{ width: windowWidth / 4, marginRight: 10 }}
              onPress={() => {
                this.clearAddEdit();
                this.setState({ showAddEdit: false });
              }}
            /> :  null}

            <QHButton1
              title="Next"
              btnStyle={{ width: windowWidth / 4 }}
              onPress={() => {
                this.setState({ });
              }}
            />
          </View>
        </View>
      </View>
    );
  }

  render() {
    if (this.state.loading) {
      return renderComponent(<QHLoader />);
    } else if (this.state.showAddEdit) {
      return this.renderAddEditScreen();
    } else {
      return renderComponent(
        <View style={[styles.container2, {}]}>
          <QHBackButton
            onPress={() => {
              this.goBackToDashboard();
            }}
          />
          <QHTopRightButton
            source={require("../../../assets/images/addproduct.png")}
            onPress={() => {
              this.setState({
                showAddEdit: true,
                selectedStatus: "OPEN",
                selectedOrderId: "0",
                soProducts: [],
                soPayments: [],
                selectedCustomer: { id: 0 },
                selectedCustomerIndex: 0,
                handover: false,
              });
            }}
          />

          <View
            style={[
              styles.container1,
              {
                width: windowWidth,
                height: windowHeight,
                paddingTop: 50,
                paddingRight: 15,
              },
            ]}
          >
            <FlatList
              numColumns={2}
              data={this.state.inventory}
              style={{ width: "100%" }}
              renderItem={({ item }) => {
                return (
                  <View
                    style={{
                      flexDirection: "column",
                      padding: 20,
                      width: "50%",
                      height: 150,
                    }}
                  >
                    <TouchableOpacity onPress={async () => {}}>
                      <View style={styles.dashboardOrder}>
                        <QHText
                          style={{ color: "#ffffff", textAlign: "center" }}
                          title={"SO-" + item.id}
                        />
                        <QHText
                          style={{ color: "#ffffff", textAlign: "center" }}
                          title={item.customer.name}
                        />
                        <QHText
                          style={{ color: "#ffffff", textAlign: "center" }}
                          title={item.customer.phone}
                        />

                        {item.status == "OPEN" ? (
                          <QHText
                            style={{ color: "#ecc19c", textAlign: "center" }}
                            title={item.status}
                          />
                        ) : null}

                        {item.status == "CLOSED" ? (
                          <QHText
                            style={{ color: "#7fe7dc", textAlign: "center" }}
                            title={item.status}
                          />
                        ) : null}

                        {item.status == "CANCELLED" ? (
                          <QHText
                            style={{ color: "#f57e7e", textAlign: "center" }}
                            title={item.status}
                          />
                        ) : null}
                      </View>
                    </TouchableOpacity>
                  </View>
                );
              }}
            />
          </View>
        </View>
      );
    }
  }
}

export default InventoryScreen;
 

Leave a Comment