how to get value from react-native-numeric-input - react-native

Question

I am new to react native. I am using this package https://www.npmjs.com/package/react-native-numeric-input .
My problem is how to get the value pass to the next page.
From using this code:
class FirstActivity extends Component {
static navigationOptions = {
title: 'Main Screen'
}
constructor(props) {
super(props)
this.state = {number: ''}
}
Send_Data_Function = () => { this.props.navigation.navigate('Second', { no: this.state.number, }); }
render() {
return (
<NumericInput value={this.state.value} onChange={value => this.setState({number : value})}
<TouchableOpacity activeOpacity={.4} style={styles.TouchableOpacityStyle} onPress={this.Send_Data_Function} >
<Text style={styles.TextStyle}> NEXT </Text>
</TouchableOpacity>/>
)}
class SecondActivity extends Component{
static navigationOptions =
{
title: "Second Activity"
};
render() {
return (
<View style= {styles.MainContainer}>
<Text style={styles.textStyle}>
1 = {this.props.navigation.state.params.no}
</Text>
</View>
)}
}
const AppNavigator = createStackNavigator({
First : {screen: FirstActivity},
Second : {screen: SecondActivity}
});
export default createAppContainer(AppNavigator);
How to get the result? Anyone can help me?

Answer 1

Your increased and decreased value pass successfully on the next page but you are not passing right state, You has to pass number state in the second activity.
Send_Data_Function = () => {
this.props.navigation.navigate("Second", { no: this.state.number });
};
and read successfully by 1 = {this.props.navigation.state.params.no} code.
Your main problem is when you press to increase or decrease button, value in the middle of these buttons won't change right?
Here is your solution.
when you initialize your number state don't assign string value.Instead of string initialize number state with number
Your code:
constructor(props) {
super(props)
this.state = {number: ''}
}
Changes:
constructor(props) {
super(props)
this.state = {number: 0}//<-------------
}
Next change is you likely forgot to assign an initial value to NumericInput component that's why it won't show you any changes in state. Also same here you used the wrong state to assign value and show value. You have an initialized number state and use value state to assign the value.
Here is your solution.
Your code:
<NumericInput
value={this.state.value}//<----mistake---
onChange={value => this.setState({number : value})}/>
Solution:
<NumericInput
initValue={this.state.number}//<---Add---
value={this.state.number}//<----changes---
onChange={value => this.setState({number: value })}/>

Answer 2

First you need to set the state for the changing value of numeric input.
please try to do as following:
...
constructor(props) {
super(props);
this.state = {
numericInputValue: ''
}
}
onChangeNumericInputValue = (value) => {
this.setState({ numericInputValue: value });
}
render() {
...
<NumericInput type='up-down' onChange={this.onChangeNumericInputValue} />
...
}
...
The next step is to pass the numericInputValue to the next page.
if you're using react-navigation for navigating between scenes, you can do it as following:
this.props.navigation.navigate('SceneName', { numericInputValue: this.state.numericInputValue })

Answer 3

Try this in your secondActivity
-->
class SecondActivity extends Component{
static navigationOptions =
{
title: "Second Activity"
};
constructor(props){
super(props);
this.state={
numericInputValue:props.navigation.getParam("no",null)
}
}
render() {
return (
<View style= {styles.MainContainer}>
<Text style={styles.textStyle}>
1 = {this.state.numericInputValue}
</Text>
</View>
)}
}