We Keep Coding

how to keep moving my circular progress bar after 30 seconds

import { Observer } from "mobx-react";
import React, { Component } from "react";
import {
StyleSheet,
Text,
View,
ImageBackground,
TouchableOpacity,
Image,
Platform,
Dimensions,
Clipboard,
} from "react-native";
import * as Progress from "react-native-progress";
import AppStore from "../../stores/AppStore";
import Iconpack from "../../utils/Iconpack";
import Theme from "../../utils/Theme";
import DeviceInfo from "react-native-device-info";
import CircularProgressBar from "./CircularProgressBar";
import { Shadow } from "react-native-shadow-2";
import Toast from "react-native-simple-toast";
import { BoxShadow } from "react-native-shadow";
import FastImage from "react-native-fast-image";
// import Clipboard from "#react-native-community/clipboard";
const hRem = AppStore.screenHeight / 812;
const wRem = AppStore.screenWidth / 375;
export class OtpDetails extends Component {
constructor() {
super();
this.state = {
progress: 0,
indeterminate: true,
clipboardText: "",
textInputText: "",
};
}
componentDidMount() {
this.animate();
}
animate() {
let progress = 0;
this.setState({ progress });
setTimeout(() => {
this.setState({ indeterminate: false });
const interval = setInterval(() => {
progress += Math.random() / 30;
if (progress > 1) {
progress = 1;
clearInterval(interval);
}
this.setState({ progress });
}, 600);
}, 600);
}
render() {
const shadowOpt = {
width: 160,
height: 170,
color: "#fff",
border: 2,
radius: 70,
opacity: 6,
x: 0,
y: 3,
};
const { myTitle } = this.props.route.params;
const setTextIntoClipboard = async () => {
await Clipboard.setString(myTitle);
Toast.show("OTP copied successfully!", 200);
};
const deviceName = DeviceInfo.getModel();
return (
<Observer>
{() => (
<View style={{ flex: 1 }}>
<FastImage
style={styles.container}
source={Iconpack.GLOBAL_BG}
resizeMode={FastImage.resizeMode.cover}
/>
<View style={styles.headerStyle}>
<TouchableOpacity
onPress={() => {
this.props.navigation.navigate("OtpScreen");
}}
>
<Image
style={styles.backButton}
source={Iconpack.GLOBAL_BACK_BUTTON}
/>
</TouchableOpacity>
<Text style={styles.headerTitle}>{myTitle}</Text>
<View style={{ flexDirection: "row" }}>
<TouchableOpacity>
<Image
style={[styles.editTrashButton, { marginRight: 19 }]}
source={Iconpack.EDIT_ICON}
/>
</TouchableOpacity>
<TouchableOpacity>
<Image
style={styles.editTrashButton}
source={Iconpack.DELETE_ICON}
/>
</TouchableOpacity>
</View>
</View>
<View style={styles.circleOuter}>
{Platform.OS === "ios" ? (
<View style={styles.circleContainer}>
<Progress.Circle
style={{ alignItems: "center" }}
progress={this.state.progress}
indeterminate={this.state.indeterminate}
size={Dimensions.get("window").width * 0.561}
thickness={10}
borderWidth={0}
endAngle={10}
strokeCap="round"
color={"#354659"}
indeterminateAnimationDuration={2000}
unfilledColor={"#031830"}
/>
</View>
) : (
<Shadow
distance={20}
startColor={"rgba(27, 100, 206, 0.5)"}
radius={210}
safeRender={true}
>
<View style={styles.circleContainer}>
<Progress.Circle
style={{ alignItems: "center", overflow: "hidden" }}
progress={this.state.progress}
indeterminate={this.state.indeterminate}
size={Dimensions.get("window").width * 0.561}
thickness={10}
borderWidth={0}
endAngle={10}
strokeCap="round"
color={"#354659"}
indeterminateAnimationDuration={2000}
unfilledColor={"#031830"}
/>
</View>
</Shadow>
)}
<Text style={[styles.circleItem]}>{myTitle}</Text>
<TouchableOpacity
onPress={() => {
setTextIntoClipboard();
}}
style={styles.copyItem}
>
<Text style={styles.copyText}>TAP TO COPY</Text>
</TouchableOpacity>
</View>
{/* <View style={styles.circleOuter}>
<View style={styles.circleContainer}>
<Text style={styles.circleItem}>title</Text>
</View>
<TouchableOpacity
onPress={() => {
copyToClipboard();
}}
style={styles.copyItem}
>
<Text style={styles.copyText}>TAP TO COPY</Text>
</TouchableOpacity> */}
{/* </View> */}
</View>
)}
</Observer>
);
}
}
export default OtpDetails;
const styles = StyleSheet.create({
container: {
flex: 1,
position: "absolute",
top: 0,
right: 0,
left: 0,
bottom: 0,
backgroundColor: "#021831",
},
headerStyle: {
flexDirection: "row",
marginTop: hRem * 56,
marginHorizontal: wRem * 26.66,
justifyContent: "space-between",
alignItems: "center",
},
backButton: {
width: wRem * 12,
height: hRem * 21,
},
editTrashButton: {
width: wRem * 23,
height: hRem * 23,
},
headerTitle: {
...Theme.encodeSansMed2,
lineHeight: hRem * 16,
color: "#FFFFFF",
fontWeight: "600",
marginLeft: wRem * 50,
},
circleOuter: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
circleContainer: {
borderRadius:
Math.round(
Dimensions.get("window").width + Dimensions.get("window").height
) / 2,
width: Dimensions.get("window").width * 0.56,
height: Dimensions.get("window").width * 0.56,
justifyContent: "center",
backgroundColor: "black",
shadowColor: "rgba(27, 100, 206, 0.5)",
shadowOffset: {
width: 0,
height: 0,
},
shadowOpacity: 30,
shadowRadius: 30,
},
circleItem: {
color: "white",
...Theme.encodeSansMed7,
textAlign: "center",
position: "absolute",
width: "100%",
paddingBottom: 100,
},
copyItem: {
justifyContent: "center",
alignItems: "center",
marginTop: hRem * 64,
},
copyText: {
color: "#3D4756",
...Theme.encodeSansMed4,
},
});
I have added circular progress by using the react-native-progress library. I have implemented logic for moving bar for 30 sec but the thing is after 30 sec it stops, so I need to keep moving after 30 sec here my whole code.
Here is the logical part which I have added here...
constructor() {
super();
this.state = {
progress: 0,
indeterminate: true,
clipboardText: "",
textInputText: "",
};
}
componentDidMount() {
this.animate();
}
animate() {
let progress = 0;
this.setState({ progress });
setTimeout(() => {
this.setState({ indeterminate: false });
const interval = setInterval(() => {
progress += Math.random() / 30;
if (progress > 1) {
progress = 1;
clearInterval(interval);
}
this.setState({ progress });
}, 600);
}, 600);
}
I have tried several ways but nothing is happening also function will be welcome for this question. thanks in advance

Material UI Slider won't slide

I have a Material UI slider that won't slide when you click on it and drag it. I've more or less copied one of the examples from https://material-ui.com/components/slider/ and added an onChange function. The values update just fine if you click around to different spots. I've been staring at this too long and have gone code blind and can't figure out what I'm missing.
Here's a link to a Sandbox
import React, { useState } from "react";
import PropTypes from "prop-types";
import withStyles from "#material-ui/styles/withStyles";
import Card from "#material-ui/core/Card";
import { Typography, Paper, Grid, CssBaseline } from "#material-ui/core";
import Slider from "#material-ui/core/Slider";
function App(props) {
const [state, setState] = useState({
fields: {
contractAmount: 10000,
termValue: 2
}
});
const handleInvestmentChange = name => (e, value) => {
setState({
...state,
fields: {
...state.fields,
[name]: value
}
});
};
const AmountSlider = withStyles({
root: {
color: "#52af77",
height: 8
},
thumb: {
height: 24,
width: 24,
backgroundColor: "#fff",
border: "2px solid currentColor",
marginTop: -8,
marginLeft: -12,
"&:focus,&:hover,&$active": {
boxShadow: "inherit"
}
},
active: {},
valueLabel: {
left: "calc(-50% + 14px)",
top: -22,
"& *": {
background: "transparent",
color: "#000"
}
},
track: {
height: 8,
borderRadius: 4
},
rail: {
height: 8,
borderRadius: 4
}
})(Slider);
const TermSlider = withStyles({
root: {
color: "#52af77",
height: 8
},
thumb: {
height: 24,
width: 24,
backgroundColor: "#fff",
border: "2px solid currentColor",
marginTop: -8,
marginLeft: -12,
"&:focus,&:hover,&$active": {
boxShadow: "inherit"
}
},
active: {},
valueLabel: {
left: "calc(-50% + 4px)"
},
track: {
height: 8,
borderRadius: 4
},
rail: {
height: 8,
borderRadius: 4
}
})(Slider);
return (
<div>
<CssBaseline />
<Typography variant="h4" align="center" component="h1" gutterBottom>
Select your Investment Level
</Typography>
<Card>
<Paper style={{ padding: 16, minHeight: 445, maxHeight: 445 }}>
<Grid container alignItems="flex-start" spacing={2}>
<Grid item xs={12} lg={12} xl={12}>
<Typography variant="h4">Investment Amount</Typography>
<Typography variant="h6" gutterBottom>
${state.fields.contractAmount.toLocaleString()}
</Typography>
<AmountSlider
valueLabelDisplay="auto"
defaultValue={10000}
value={
typeof state.fields.contractAmount === "number"
? state.fields.contractAmount
: 2000
}
onChange={handleInvestmentChange("contractAmount")}
step={1000}
min={2000}
max={100000}
/>
<Typography variant="h4">Investment Term</Typography>
<Typography variant="h6" gutterBottom>
{state.fields.termValue} years
</Typography>
<TermSlider
name="termValue"
valueLabelDisplay="off"
aria-label="term slider"
defaultValue={10}
value={
typeof state.fields.termValue === "number"
? state.fields.termValue
: 2
}
onChange={handleInvestmentChange("termValue")}
min={2}
max={25}
/>
<Grid
item
style={{
marginTop: 16,
alignContent: "right",
alignItems: "right"
}}
>
<Typography variant="p">
*Your investment amount and contract length can be changed at
any time as described in our Terms & Conditions.
</Typography>
</Grid>
</Grid>
</Grid>
</Paper>
</Card>
</div>
);
}
export default App;

If you need to customize the theme of MUI Slider then you need to use MUI Theme Provider.
And you need to import it like,
import { ThemeProvider, createMuiTheme } from "#material-ui/styles";
Then try moving your custom css into a variable with the value of createMuiTheme method which has overrides property like,
const AmountSlider = createMuiTheme({
overrides: {
MuiSlider: {
root: {
color: "#52af77",
height: 8
},
thumb: {
height: 24,
width: 24,
backgroundColor: "#fff",
border: "2px solid currentColor",
marginTop: -8,
marginLeft: -12,
"&:focus,&:hover,&$active": {
boxShadow: "inherit"
}
},
active: {},
valueLabel: {
left: "calc(-50% + 14px)",
top: -22,
"& *": {
background: "transparent",
color: "#000"
}
},
track: {
height: 8,
borderRadius: 4
},
rail: {
height: 8,
borderRadius: 4
}
}
}
});
Then in template use it like,
<ThemeProvider theme={AmountSlider}>
<Slider
valueLabelDisplay="off"
defaultValue={10000}
value={
typeof state.fields.contractAmount === "number"
? state.fields.contractAmount
: 2000
}
onChange={handleInvestmentChange("contractAmount")}
step={1000}
min={2000}
max={100000}
/>
</ThemeProvider>
Same way you can implement the custom theme for TermSlider as well..
Forked Codesandbox
Note:
I think you are using the same css for both AmountSlider and TermSlider if so, create a single theme variable and use it for both..
Eg.., You could use theme={AmountSlider} for both the Amount and Term sliders if both has the same css.. Ofcourse the variable name can be unique in this case..

React Native Flat List

I am trying to use the React Native FlatList to loop thru a fetch API response for a news page that will load from a modal that contains a web view element. Everything seems to work fine, but every time I click the news article, it always loop thru all of them and give me the last article instead of the clicked article. If I console.log(item.title) it returns the clicked article title, but does not load it. I even passed the article data as a state but I am not sure what I am doing wrong, please help. Please ignore the extra code since I am focus on making sure it works properly before refactoring and removing the unused CSS. Here is the code. Let me know if you need a repo to post the link. Thanks in advance.
import React, { Component } from "react";
import { WebView } from "react-native-webview";
import {
View,
StyleSheet,
Text,
ActivityIndicator,
Image,
Button,
Linking,
TouchableOpacity,
Modal
} from "react-native";
import { FlatList } from "react-native-gesture-handler";
export default class NewsPage extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: [],
isLoading: true,
modalVisible: false
};
}
componentDidMount() {
return fetch(
"https://newsapi.org/v2/everything?q=empleos&language=es&apiKey=bc9471b0c90c4d1a8d41860292e59d6b"
)
.then(response => response.json())
.then(responseJson => {
this.setState(
{
isLoading: false,
dataSource: responseJson.articles
},
function() {}
);
})
.catch(error => {
console.error(error);
});
}
setModalVisible(articleData) {
this.setState({
modalVisible: true,
modalArticleData: articleData
});
}
closeModal = () => {
this.setState({
modalVisible: false,
modalArticleData: {}
});
};
render() {
if (this.state.isLoading) {
return (
<View style={{ flex: 1, padding: 20 }}>
<ActivityIndicator />
</View>
);
}
return (
<View style={{ flex: 1, paddingTop: 20 }}>
<FlatList
data={this.state.dataSource}
keyExtractor={({ id }, index) => id}
renderItem={({ item }) => (
<View style={styles.newsListContainer}>
<Image
style={styles.newsImage}
source={{
uri:
item.urlToImage != null
? item.urlToImage
: "../assets/icon.png"
}}
/>
<View style={styles.newsInfo}>
<Text numberOfLines={2} style={styles.newsTitle}>
{item.title}
</Text>
<Text numberOfLines={3} style={styles.newsDescription}>
{item.description}
</Text>
<Text>{item.author}</Text>
</View>
<View style={styles.newsLink}>
<Button
title="Leer"
onPress={() => {
console.log(item);
this.setModalVisible(item);
}}
// {Linking.openURL(item.url);}}
/>
</View>
<Modal
animationType="slide"
transparent={false}
visible={this.state.modalVisible}
>
<View style={styles.newsHeader}>
<TouchableOpacity
onPress={() => {
this.closeModal();
}}
>
<Text style={styles.newsClose}>Cerrar</Text>
</TouchableOpacity>
<Text>{item.title}</Text>
</View>
<WebView
startInLoadingState={true}
source={{ uri: item.url }}
style={{ padding: 8 }}
/>
</Modal>
</View>
)}
/>
</View>
);
}
}
NewsPage.navigationOptions = {
headerTitle: "Noticias en Español"
};
const styles = StyleSheet.create({
mainBackgroundColor: {
backgroundColor: "#007bff",
padding: 8
},
mainBackground: {
alignItems: "center",
justifyContent: "center",
flex: 1
},
textHeader: {
backgroundColor: "#fff",
marginTop: 16,
fontSize: 32,
padding: 8,
borderRadius: 8,
color: "#007bff"
},
firstText: {
fontSize: 16,
marginTop: 16,
marginBottom: 0,
color: "#fff"
},
phone: {
marginTop: 16,
color: "#fff"
},
secondText: {
fontSize: 16,
marginTop: 0,
color: "#fff"
},
thirdText: {
fontSize: 16,
marginTop: 8,
color: "#ffffff",
textTransform: "uppercase",
textAlign: "center",
padding: 8,
marginBottom: 12
},
firstButton: {
marginBottom: 16
},
newsListContainer: {
width: "100%",
marginBottom: 4,
padding: 4,
flex: 1,
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between"
},
newsImage: {
flexBasis: "25%",
height: "100%"
},
newsInfo: {
flexBasis: "55%",
padding: 2,
alignSelf: "flex-start"
},
newsLink: {
flexBasis: "20%"
},
newsTitle: {
fontSize: 20,
color: "#000000",
marginLeft: 8
},
newsDescription: {
fontSize: 12,
color: "efefef",
marginLeft: 8
},
newsHeader: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
padding: 4
},
newsClose: {
fontSize: 20,
color: "red"
}
});

In your Modal, you are using
<Text>{item.title}</Text>
instead of
<Text>{this.state.modalArticleData.title}</Text>
also for the WebView component do the same.
source={{ uri: this.state.modalArticleData.url }}
One More Thing:
import Flatlist from react-native instead of
react-native-gesture-handler

React Native - Open Picker on Button Press

I am using react-native-simple-picker in my app which works fine in my project if I use the default show button but I would like to show the picker when I use a different button in my project. It looks like this.refs.picker.show() in ProposalPicker.js is the function that needs to be called, but I am not sure how to access this from another component file. Currently my code results in the following error - `Cannot read property 'show' of undefined. Appreciate any help.
ProposalPicker.js
import React, { Component } from 'react';
import { Picker, View, Text } from 'react-native';
import Button from './Button';
import SimplePicker from 'react-native-simple-picker';
const options = ['Option1', 'Option2', 'Option3'];
// Labels is optional
const labels = ['Banana', 'Apple', 'Pear'];
class ProposalPicker extends Component {
constructor(props) {
super(props);
this.state = {
selectedOption: '',
};
}
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>Current Option: {this.state.selectedOption}</Text>
<Text
style={{ color: '#006381', marginTop: 20 }}
onPress={() => {
this.refs.picker.show();
}}
>
Click here to select your option
</Text>
<Text
style={{ color: '#006381', marginTop: 20 }}
onPress={() => {
this.refs.picker2.show();
}}
>
Click here to select your option with labels
</Text>
<SimplePicker
ref={'picker'}
options={options}
onSubmit={(option) => {
this.setState({
selectedOption: option,
});
}}
/>
<SimplePicker
ref={'picker2'}
options={options}
labels={labels}
itemStyle={{
fontSize: 25,
color: 'red',
textAlign: 'left',
fontWeight: 'bold',
}}
onSubmit={(option) => {
this.setState({
selectedOption: option,
});
}}
/>
</View>
);
}
}
// class ProposalPicker extends Component {
// state={proposal: ''}
// selectedValue = '';
// updateProposal = (proposal) => {
// this.setState({ proposal: this.selectedValue });
// }
// handleConfirmClick = () => {
// this.setState({ proposal: this.selectedValue });
// }
// render() {
// return (
// <View>
// <Picker selectedValue = {this.selectedValue}
// onValueChange = {this.updateProposal}
// itemStyle={{ backgroundColor: 'grey' }}
// >
// <Picker.Item label = "Test" value = "TestValue1" />
// <Picker.Item label = "Test 1" value = "TestValue2" />
// <Picker.Item label = "Test" value = "TestValue3" />
// <Picker.Item label = "Test" value = "TestValue4" />
// <Picker.Item label = "Test" value = "TestValue5" />
// <Picker.Item label = "Test" value = "TestValue6" />
// <Picker.Item label = "Test" value = "TestValue7" />
// <Picker.Item label = "Test" value = "TestValue8" />
// <Picker.Item label = "Test nothing" value = "TestValue9" />
// </Picker>
// <Text style = {styles.textStyle}>CONFIRM</Text>
// </View>
// )
// }
// }
const styles = {
proposalPickerStyle: {
backgroundColor: 'lightgrey'
},
textStyle: {
flex: 1
}
}
export default ProposalPicker;
ProposalPickerButton.js
import React from 'react';
import { View, Text, Image, TouchableOpacity } from 'react-native';
const PickerButton = ({ onPress, text }) => {
const { textStyle, iconStyle, iconContainerStyle, textContainerStyle, buttonStyle } = styles;
return (
<TouchableOpacity onPress={onPress} style={buttonStyle}>
<View style={styles.containerStyle}>
<View style={iconContainerStyle}>
<Image
style={iconStyle}
source={require('./images/201.png')}
/>
</View>
<View style={textContainerStyle}>
<Text style={textStyle}>{text}</Text>
</View>
<View style={iconContainerStyle}>
<Image
style={iconStyle}
source={require('./images/201.png')}
/>
</View>
</View>
</TouchableOpacity>
);
}
const styles = {
containerStyle: {
flex: 1,
//backgroundColor: 'red',
borderWidth: 2,
borderRadius: 0,
borderColor: '#FFFFFF',
//shadowColor: '#000',
//shadowOffset: { width: 0, height: 2 },
//shadowOpacity: 0.1,
//shadowRadius: 2,
//elevation: 1,
marginLeft: 40,
marginRight: 40,
marginTop: 10,
marginBottom: 10,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row'
},
iconContainerStyle: {
flex: 2,
//backgroundColor: 'blue',
justifyContent: 'center',
//alignItems: 'center',
//width: '20%',
//height: '20%'
},
iconStyle: {
flex: 1,
width: null,
height: null,
resizeMode: 'contain',
marginLeft: 10,
marginRight: 10,
marginTop: 10,
marginBottom: 10
},
textContainerStyle: {
flex: 8,
//backgroundColor: 'orange',
alignItems: 'flex-start',
justifyContent: 'center',
},
textStyle: {
fontSize: 20,
fontWeight: 'bold',
color: '#FFFFFF',
//marginLeft: 10
//padding: 18
},
buttonStyle: {
width: '100%',
height: '100%'
}
};
export default PickerButton;
App.js
import React, { Component } from 'react';
import { View, Text, ImageBackground } from 'react-native';
import Logo from './Logo';
import ProposalPickerButton from './ProposalPickerButton';
import Button from './Button';
import ProposalPicker from './ProposalPicker';
import SimplePicker from 'react-native-simple-picker';
class App extends Component {
render() {
return (
<ImageBackground
source={require('./images/city.png')}
style={styles.backgroundStyle}
>
<View style={styles.backgroundOverlayStyle} />
<View style={styles.container}>
<View style={styles.logoContainer}>
<Logo />
</View>
<View style={styles.proposalPickerButtonStyle}>
<ProposalPickerButton
onPress={() => new ProposalPicker().refs.picker.show()}
// onPress={() => console.log('Proposal picker button pressed')}
//onPress={() => Linking.openURL(url)}
text="Select a service line"
/>
</View>
<View style={styles.startProposalButtonStyle}>
<Button text="Start proposal"/>
</View>
<View style={styles.proposalPickerStyle}>
{/* <ProposalPicker /> */}
</View>
</View>
</ImageBackground>
);
}
}
const styles = {
backgroundStyle: {
flex: 1,
backgroundColor: '#000000',
width: '100%',
height: '100%',
position: 'absolute'
},
backgroundOverlayStyle: {
flex: 1,
position: 'absolute',
backgroundColor: '#003284',
opacity: 0.5,
width: '100%',
height: '100%'
},
container: {
//backgroundColor: 'red',
flex: 1,
//opacity: 0.5,
alignItems: 'center',
width: '100%',
height: '65%',
},
logoContainer: {
//backgroundColor: 'blue',
flex: 3,
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '65%',
},
proposalPickerButtonStyle: {
flex: 1,
//backgroundColor: 'yellow',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '100%',
marginLeft: 100,
marginRight: 100
},
startProposalButtonStyle: {
flex: 1,
//backgroundColor: 'purple',
width: '100%',
height: '100%',
marginTop: 10,
marginRight: 80
},
proposalPickerStyle: {
opacity: 1,
flex: 2,
backgroundColor: 'green',
width: '100%',
height: '100%'
},
};
export default App;

To call methods via refs you need to have a ref assigned to an already mounted component. Therefore you can't say new ProposalPicker().refs.picker.show() because refs.picker does not exist until the component is mounted. You Should have your button and picker components in the same parent, that way you can easily create a ref in that parent, assign it, and call methods from it:
Also you should use callback refs instead of string refs because string refs are deprecated. In that case it would look like:
constructor(props){
super(props)
this.state = ...
this.picker = React.createRef() // make the ref
}
Then assign the ref:
<SimplePicker
ref={this.picker}
And then you can make an function to call when your button is pressed:
showPicker = () => {
if (this.picker.current) {
this.picker.current.show()
}
}

Increment and Decrement quantity in ListView using react-native

I am running sample project. I want to display the increment and decrement values. In my project increment and decrement values are not displayed. How to change the values in text.
Here is my code:
constructor(props){
super(props);
this.state={
increment:0,
decrement:1
}
}
incrementFunc(){
var countIncrement = this.state.increment
this.setState({
increment : countIncrement + 1
},()=>{
alert(this.state.increment)
})
}
decrementFunc(){
var countDecrement = this.state.increment
this.setState({
decrement : countDecrement- 1,
},()=>{
alert(this.state.decrement)
})
}
<View style={styles.arrowsView}>
<TouchableOpacity onPress ={this.incrementFunc.bind(this)}>
<Image style={styles.arrowStyle} source={require('#images/up-arrow.png')} />
</TouchableOpacity>
</View>
<View style={styles.numberView}>
<Text style={{fontSize:15, color:'black'}}>{this.state.increment}
</Text>
</View>
<View style={styles.arrowsView}>
<TouchableOpacity onPress ={this.decrementFunc.bind(this)}>
<Image style={styles.arrowStyle} source={require('#images/down-arrow.png')} />
</TouchableOpacity>
</View>
here is my screenshot:
Please give any suggestion. Thank You

Here is the solution which i had made in my project , what i did
Firstly ->created an another component which will help us to have a quantity input functionality inside list element
Secondly ->This component needs to be called by the parent component inside list renderRow to make this component visible in all the rows.
and put this QuantityInput component class inside the same file where you want to use it...
Thirdly -> Run yours application and have a look like this...
Have a look to the file attached...
/*Use this component in yours parent view inside list to have a Quantity Input inside list , I have used native base as well if some thing gets miss please have native base in yours project...*/
{<QuantityInput item={this.state.data[rowID]} viewAddToCart={false} />}
/* QuantityInput */
class QuantityInput extends React.Component {
userProductQty = Array.apply(null, Array(this.props.item.length)).map(Number.prototype.valueOf, 1);
itemPosition = -1;
constructor(props) {
super(props);
this.state = {
viewAddToCart: this.props.viewAddToCart,
item: this.props.item,
style: { flex: 1 },
styleTextInput: { backgroundColor: '#ffffff' },
styleButton: { backgroundColor: '#000000' },
styleImage: { width: 12, height: 12 },
editable: true,
stepsize: 1,
initialValue: 1,
min: 1,
max: 100
}
}
upBtnPressed = (dataSource, fieldName) => {
if (dataSource.userQty < this.state.max) {
let value = (parseInt(dataSource.userQty) + parseInt(this.state.stepsize)).toString();
dataSource.userQty = value;
this.setState({
item: dataSource
});
}
}
downBtnPressed = (dataSource, fieldName, props) => {
if (dataSource.userQty < this.state.min) {
let value = (parseInt(dataSource.userQty) - parseInt(this.state.stepsize)).toString();
dataSource.userQty = value;
this.setState({
item: dataSource
});
}
}
onChangeText = (text, item, fieldName, itemPosition) => {
if (!isNaN(text)) {
item.userQty = text.toString();
this.setState({
item: item
});
} else {
item.userQty = 0;
this.setState({
item: item
});
}
}
render() {
return (
this.state.viewAddToCart ?
/* Add to cart */
<View style={[{ flexDirection: 'row' }]}>
<Left style={{ flex: 0 }}>
<Button rounded danger
title="Add"
color="white"
style={[{ width: 70 }, { height: 30 }, { justifyContent: 'center' }]}
onPress={() => { this.props.onAddToCart(this.state.item); this.setState({ viewAddToCart: false }) }}
>
<Text style={[{ color: 'white' }]}>{string.addToCart}</Text>
</Button>
{/*</TouchableOpacity>*/}
</Left>
</View>
:
/* Quantity Text */
<View style={{ flexDirection: 'row' }}>
<View style={stylesQuantityText.verticle}>
<TouchableOpacity style={[styles.button, styles.transparentBkg, { backgroundColor: '#d9534f' }, { paddingLeft: 10 }, { borderTopLeftRadius: 5 }, { borderBottomLeftRadius: 5 }, { justifyContent: 'center' }, { alignItems: 'center' }]} onPress={() => { this.downBtnPressed(this.state.item, this.state.item.productId); }} >
<Text style={[{ width: 20 }, { height: 26 }, { fontSize: 21 }, { alignSelf: 'center' }, { paddingBottom: 10 }, { fontWeight: 'bold' }]}>-</Text>
{/*<Icon name={"remove"} />*/}
</TouchableOpacity>
<TextInput
style={[stylesQuantityText.textinput, this.state.styleTextInput]}
editable={this.state.editable}
keyboardType={'numeric'}
text={this.state.item.userQty.toString()}
value={this.state.item.userQty.toString()}
ref={"Qty" + this.state.item.productId}
key={"Qty" + this.state.item.productId}
onChangeText={(text) => { this.onChangeText(text, this.state.item, this.state.item.productId); this.props.onAddToCart(this.state.item); }} />
<TouchableOpacity style={[styles.button, styles.transparentBkg, { backgroundColor: '#d9534f' }, { paddingLeft: 10 }, { borderTopRightRadius: 5 }, { borderBottomRightRadius: 5 }]} onPress={() => { this.upBtnPressed(this.state.item, this.state.item.productId); this.props.onAddToCart(this.props.item); }}>
{/*<Icon name={"add"}
size={27} />*/}
<Text style={[{ width: 20 }, { height: 26 }, { fontSize: 19 }, { alignSelf: 'center' }]}>+</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
const stylesQuantityText = StyleSheet.create({
wrapper: {
flex: 1,
backgroundColor: '#eeeeee'
},
verticle: {
flexDirection: 'row',
paddingLeft: 0,
paddingRight: 0,
},
horizontal: {
flexDirection: 'row'
},
textinput: {
backgroundColor: '#eeeeee',
textAlign: 'center',
width: 30,
borderColor: 'black',
borderWidth: 1,
height: 26
},
button: {
backgroundColor: '#dedede',
padding: 5
},
image: {
width: 18,
height: 18
},
buttonText: {
alignSelf: 'center'
}
});
]1