React-Native: Passing the value of a TextInput to a function

Question

i'm trying to pass the value of TextInput into let bytes = buildUrlPayload('https://www.google.co.uk'); so that the url can be dynamically written in app. Can anyone help me achieve this? Thanks

function buildUrlPayload(valueToWrite) {
        return Ndef.encodeMessage([
            Ndef.uriRecord(valueToWrite),
        ]);
    }
    
    class AppV2Ndef extends React.Component {
      constructor(props){
        super(props)
    
        this.state = {
          log: "Ready...",
          text: ""
        }
      }
      componentDidMount() {
        NfcManager.start();
      }
    
      componentWillUnmount() {
        this._cleanUp();
      }

      onChangeText = (text) => {
        this.setState({
          text
        })
  }
  
    
      render() {
        return (
            <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
          <View style={{padding: 20}}>
          <Text style={styles.text_footer}>Web</Text>
            <View style={styles.action}>
            <Ionicons name="globe-outline" color="#05375a" size={20} />
            <TextInput
                placeholder="URL"
                style={styles.textInput}
                autoCapitalize="none"
                autoCorrect="false"
                onChangeText={this.onChangeText}
                
            />

        </View>
     
             
        <TouchableOpacity 
        style={{padding: 10, width: 200, margin: 20, borderWidth: 1, borderColor: 'black'}}
        onPress={this._URLNdef}
      >
        <Text>Write to Tag</Text>
      </TouchableOpacity>

     
      _cleanUp = () => {
        NfcManager.cancelTechnologyRequest().catch(() => 0);
      }
    
      _URLNdef = async () => {
        try {
          let resp = await NfcManager.requestTechnology(NfcTech.Ndef, {
            alertMessage: 'Ready SparX Magic!'
          });
          console.warn(resp);
          let ndef = await NfcManager.getNdefMessage();
          console.warn(ndef);
          let bytes = buildUrlPayload('https://www.google.co.uk');
          await NfcManager.writeNdefMessage(bytes);
          console.warn('successfully write ndef');
          await NfcManager.setAlertMessageIOS('Get in there it works!');
          this._cleanUp();
        } catch (ex) {
          console.warn('ex', ex);
          this._cleanUp();
        }
      }

export default AppV2Ndef;

Answer 1

You are saving the value from the textinput into your state so you can access it like this:

let bytes = buildUrlPayload(this.state.text);

You'll also need to add the text state into the text input to make sure it doesn't disappear as the user is typing:

        <TextInput
            placeholder="URL"
            style={styles.textInput}
            autoCapitalize="none"
            autoCorrect="false"
            onChangeText={this.onChangeText}
            value={this.state.text}/>