CODEWITHSUNDEEP
react-native
dipgirl
dipgirl

Reputation: 690

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

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?

Upvotes: 1

Views: 3560

Answers (3)

Zhang Soon Leong
Zhang Soon Leong

Reputation: 26

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

Upvotes: 1

Paras Korat
Paras Korat

Reputation: 2065

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

Upvotes: 3

nika95
nika95

Reputation: 325

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

Upvotes: 1

Related Questions