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

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?

Are you using component for next or want an immediate reflection on the next page of value change? can you please share whole code? — Paras Korat
– Paras Korat, Commented Feb 28, 2019 at 15:58
I can't see the code on the FirstActivity to navigate the SecondActivity. — nika95
– nika95, Commented Feb 28, 2019 at 17:26
Send_Data_Function = () => { this.props.navigation.navigate('Second', { no: this.state.number, }); } — dipgirl
– dipgirl, Commented Mar 1, 2019 at 2:24
When I press the button like coding above the value need to pass to the next activity — dipgirl
– dipgirl, Commented Mar 1, 2019 at 2:30

Paras Korat · Accepted Answer · 2019-03-01 03:56:32Z

3

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 })}/>

answered Mar 1, 2019 at 3:56

Paras Korat

2,0853 gold badges20 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dipgirl Over a year ago

thank you @Paras Korat. It works already, can I ask you one more question. If I want to use the data that get from first activity. Then, at the second activity, I want to send the 'number' to API. How to do?

nika95 · Accepted Answer · 2019-02-28 14:56:27Z

1

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 })

answered Feb 28, 2019 at 14:56

nika95

3251 silver badge6 bronze badges

2 Comments

dipgirl Over a year ago

thank you for your reply. I follow the code already but the increase and decrease button no function.

nika95 Over a year ago

You need to check github.com/himelbrand/react-native-numeric-input#advanced-usage

Zhang Soon Leong · Accepted Answer · 2019-03-01 08:10:25Z

1

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>
            )}
    }

answered Mar 1, 2019 at 8:10

Zhang Soon Leong

262 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related