React Native 使用文本输入向 whatsapp 发送消息

Question

i'm trying to send message to whatsapp with text input,

what i'm trying to do is input the mobile number -> type the message fully -> send the message by using Linking.openURL

but what the problem is when i try to type the message, when i haven't done with typing its directing me to the WhatsApp. i'll give you the picture

as you've seen, its just 1 letter (the problem)

this is my function

sendOnWhatsApp = () => {
          console.log('test')
          let msg = this.state.msg;
          let mobile= this.state.mobile_no;

          if (mobile) {
               if (msg) {
                    let url = 'whatsapp://send?phone=62' + this.state.mobile_no + '&text=' + this.state.msg;
                    Linking.openURL(url).then(() => {
                         console.log('WhatasApp Opened');
                    }).catch(() => {
                         alert('Make Sure whatsapp is installed on your device');
                    });
               }else{
                    console.log('Please insert message to send');
               }
          }else{
               console.log('Please insert mobile no');
          }
     }

and this is my textInput

render() {
          return (
               <View style={styles.container}>
                    <Text style={{textAlign: 'center', fontSize: 20, paddingVertical: 30}}>
                          Send Your Message to Whatsapp
                    </Text>

                    <TextInput 
                         value={this.state.mobile_no}
                         onChangeText={mobile_no => this.setState({mobile_no})}
                         placeholder={'87877900297'}
                         style={styles.input}
                         keyboardType={'numeric'}
                    />
                    <TextInput 
                         value={this.state.msg}
                         onChangeText={msg => this.setState({msg})}
                         placeholder={'Enter Your Message'}
                         style={styles.input}
                    />

                    <View style={{marginTop: 20}}>
                         <Button 
                              onPress={this.sendOnWhatsApp()}
                              title={'Send Message'}
                         />
                    </View>
               </View>
          )
     }

how can i fix this to type fully and then send the message with the button?

thank you in advanced!

Answer 1

You're calling your function while passing it to onPress prop. You need to just pass the function reference instead.

    onPress={this.sendOnWhatsApp}