How to add product in cart using react native? - wordpress

Question

I'm working in the react-native android app which connects WordPress woocommerce API and gets data from WordPress and process it. Everything working fine, but I'm a newbie to react-native and can't trigger out how to add a product in the cart. Also, need to show the product in cart page Below I added my code. I hope will get help.
import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
TouchableOpacity,
Platform,
StatusBar,
Image,
TouchableHighlight, ToolbarAndroid,
FlatList,
ScrollView,TextInput,
AsyncStorage
} from "react-native";
import HTMLView from 'react-native-htmlview';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { StackNavigator } from "react-navigation";
import {Icon, Button, Container, Header, Content,Left ,Right,Item,Input,Card,CardItem} from 'native-base'
import { Ionicons,FontAwesome } from '#expo/vector-icons'
import FAIcon from 'react-native-vector-icons/FontAwesome'
import * as CartAction from '../Actions/CartActions';
//Constant declaration
export const GET_PRODUCTS_SUCCESS = 'GET_PRODUCTS_SUCCESS'
export const GET_PRODUCTS_FAILED = 'GET_PRODUCTS_FAILED';
export const GET_CART_SUCCESS = 'GET_CART_SUCCESS';
export const ADD_TO_CART_SUCCESS = 'ADD_TO_CART_SUCCESS';
export const REMOVE_FROM_CART_SUCCESS = 'REMOVE_FROM_CART_SUCCESS';
class Products extends Component {
constructor(props) {
super(props);
this.state = { quantity: 1 };
}
//decrease quantity working
decreaseQuantity = () => {
if(this.state.quantity <= 1) {
return;
} else {
this.setState({
quantity: this.state.quantity - 1
});
}
}
//increase quantity working
increaseQuantitiy = () => {
this.setState({
quantity: this.state.quantity - 1 + 2
});
}
//add to cart NOT WORKING
addToCart(product, quantity) {
return (dispatch) => {
const cartItem = {
"id": product.id,
"image": product.images[0].src,
"name": product.name,
"quantity": quantity
}
dispatch({
type: types.ADD_TO_CART_SUCCESS,
item: cartItem
});
}
}
//Sidemenu Icon
static navigationOptions ={
drawerIcon:(
<FontAwesome name="home" size={30} color="black" />
)
}
//Render Block
render() {
const product = this.props.navigation.state.params.product;
return (
<Container>
//Product View
<ScrollView>
<Image style={styles.image} source={{ uri: product.images[0].src }} />
<View style={{ alignItems: 'center', justifyContent: 'center' }}>
<Text style={{fontSize:18,fontWeight:'bold'}}>{product.name}</Text>
<Text> ₹ {product.price}</Text>
</View>
<View style={{ display: 'flex', flexDirection: 'row', padding: 10, marginLeft: 20, marginBottom: 20 }}>
<View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center',marginTop:10 }}>
<TouchableOpacity style={styles.decreaseButton} onPress={this.decreaseQuantity}>
<Text> - </Text>
</TouchableOpacity>
<TextInput
style={styles.input}
onChangeText={(quantity) => this.setState({ quantity })}
value={`${this.state.quantity}`}
keyboardType="numeric"
/>
<TouchableOpacity style={styles.inceaseButton} onPress={this.increaseQuantitiy} >
<Text> + </Text>
</TouchableOpacity>
</View>
// ---------------- Adding to cart not working also need to show this product in cart page----------------
<TouchableOpacity style={styles.button} onPress={() => this.addToCart(product, this.state.quantity)} >
<Text style={{ color: '#fff' }}> ADD TO CART </Text>
</TouchableOpacity>
</View>
<HTMLView style={styles.html} value={product.description} />
</ScrollView>
</Container>
)
}
}
export default Products;