refs not working in react-native

Question

I have a TextInput which I want to reference in my function.

next() {
        let body = this.refs.body.value
    }

<View>
    <Text>Place the body here</Text>
    <TextInput ref="body" placeholder="Your body goes here..." style={styles.body} placeholderTextColor='green'/>
</View>

But I am getting this error:

undefined is not an object (evaluating 'this.refs.body')

Is ref not working in react-native?

Answer 1

I think they have changed the way ref works. Now instead of a string, ref accepts a function that gets called when the particular component gets rendered.
You could try something like,

next() {
let body = this._textInput.value
}

<View>
    <Text>Place the body here</Text>
    <TextInput ref={component => this._textInput = component} placeholder="Your body goes here..." style={styles.body} placeholderTextColor='green'/>
</View>

https://facebook.github.io/react-native/docs/direct-manipulation.html

Or, you could also attach an onChange to your TextInput and record the input when the next button is clicked.

EDIT:
Ref still accepts string but it is to be deprecated. Use the function in ref instead.

Answer 2

The problem may be related to the fact that you refer to an element which is not mounted yet. Did you make sure to refer to it on componentDidMount or later?