Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

react native - nativeEvent property?

So im trying to wrap my head around react native and it does not look difficult.

My question is straight forward, what is the "e" object how do I use its properties such as "e.nativeEvent" and "e.nativeEvent.text", and in what situations?

I stumbled upon this object when I was testing TextInput's onChangeText and onBlur props.

As you can see below, I am able to pass an argument parameter called "value" in the onChangeText prop, to the callback handler. BUT when I tried to do the same with the onBlur, I ran into issues ( and I checked the documentation which did not mention anything about an argument being passed to the callback function handler, unlike the onChangeText).

So I found this question, which helped me figure out how to access the data in TextInput using the e.eventNative.text property.

  render(){
return(
  <View>
  <Text>indent</Text>
  <Text>indent</Text>

    <TextInput
      style={{height:60, backgroundColor: "#ededed"}} // must define a height for T.I in iOS
      placeholder="Enter Text"
      value={this.state.textValue}
      onChangeText={(value) => this.onChangeText(value)}
    />
    <Text>{this.state.textValue}</Text>

    {/* on submit editing, will find the callback function to transfer text
     when submitting button is pressed */}
    <TextInput
    style={{height:60, backgroundColor: "skyblue"}}
    placeholder="Enter Text"
    onBlur={(value) => this.onSubmit(value.nativeEvent.text)}

    />
    <Text>{this.state.textSubmitted}</Text>
  </View>
);

} }

like image 862
user3676224 Avatar asked Jun 15 '17 15:06

user3676224


People also ask

What is Nativeevent in React Native?

For React Native, events are received over the bridge that links native code with React. In short, whenever a View is created, React also passes its ID number over to native, so as to be able to receive all events related to that element.

How do you overlap content in React Native?

Wrap both of your components inside the <SafeAreaView/> component which React Native provides. The BottomContainer wraps the content of the scroll view. I have assigned the Image Height to 450px. This can vary depending upon the design and screen dimensions.

How do you clear the input field in React Native?

Add the method submitAndClear to our class and set the <button /> component's onPress prop to this. submitAndClear. Change the <button /> component's title prop to the string 'Submit' Add the prop clearButtonMode='always' to the <TextInput /> component — this will give us an option to clear the text at any time.

How do I disable text input in React Native?

Use caretHidden={true} if you want to disable all operation like Cut Paste Copy. It will also hide your cursor as well.


1 Answers

onChangeText is a special event for TextInputs whose handler is passed the text of the TextInput as the initial argument (so 'value' = 'ev.nativeEvent.value' for other events).

The onBlur event doesn't have this feature. So you'll need to access the text of the TextInput like you are.

like image 142
iThompkins Avatar answered Nov 15 '22 00:11

iThompkins