"ref" callback and "componentDidMount" not being triggered on initial render

Description

ref callback and componentDidMount life-cycle hook is not being triggered until after manually triggering an additional re-render with setState.

Also asked on SO, but not getting any responses: http://stackoverflow.com/questions/43009993/react-native-initial-lifecycle-hooks-not-being-called/43010267#43010267

Reproduction Steps and Sample Code

“constructor”, “componentWillMount”, and “render” are called immediately upon launching the application, as expected. However, “ref”, and “componentDidMount” are not called until manually triggering a re-render via this.setState() after the 5 second delay.

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class TestText extends Component {

    constructor(props, context) {
        super(props, context);
        console.warn('constructor');
        this.textRef = null;
    }

    componentWillMount() {
        console.warn('willMount');
    }

    componentDidMount() {
        console.warn('didMount');
    }

    render() {
        console.warn('render');
        return (
            <View>
                <Text
                    ref={(me) => {
                        console.warn('ref: ' + (me ? 'not null' : 'null'));
                        this.textRef = me;
                    }}>
                    {'TEST'}
                </Text>
            </View>
        );
    }

}

export default class AwesomeProject extends Component {

  constructor(props, context) {
      super(props, context);
      this.state = {
        test: 0
      };
      setTimeout(() => {
        this.setState({
            test: 1
        });
      }, 5000)
  }

  render() {
    return (
      <View style={styles.container}>
        <TestText />
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

Solution

Expected behavior: Shouldn’t “ref” and “componentDidMount” be called immediately after rendering. I shouldn’t have to setState to get those hooks to run.

Additional Information

• React Native version: 0.42.3
• Platform: Android (maybe iOS as well)
• Development Operating System: Windows
• Dev tools: compileSdkVersion = 23, buildToolsVersion = 23.0.1

[gauravdhiman]

@sourcesoft Yes, found the solution. I am using Native Base and in my case the culprit was floatingLabel on <Item floatingLabel last> component. If I remove floatingLabel, ref works fine, but with floatingLabel I need to use getRef as explained here.

Here is the code that is working for me. Note the getRef in second input field.

<Item floatingLabel last>
    <Label>Address</Label>
    <Input
    onFocus={() => {
        // move to next field so that user an not modify this field manually
        this._detailsField._root.focus();
        // show screen to select an address
        navigate('SearchAddressScreen', {
        onSelectAddress: address => this.saveAddress(address)
        });
    }}
    value={this.state.address.text}
    />
</Item>
<Item floatingLabel last>
    <Label>Details</Label>
    <Input
    getRef={e => (this._detailsField = e)}
    multiline={true}
    numberOfLines={10}
    style={{ height: 200, textAlignVertical: 'top' }}
    onChangeText={text => this.setState({ details: text })}
    />
</Item>

[gauravdhiman]

Even I am facing this issue.

Here is the test code:

import React, { Component } from 'react';
import {
  Button,
  Container,
  Content,
  Form,
  Item,
  Input,
  Label,
  Text
} from 'native-base';

export default class TestComponent extends Component {
  constructor(props) {
    super(props);
    this.refs = {};
  }

  componentDidMount() {
    console.log('=====>>>>>> 2. In componentDidMount() ....');
    this.refs.detailsField.focus();
  }

  render() {
    const { navigate } = this.props.navigation;
    return (
      <Container>
        <Content>
          <Form>
            <Item floatingLabel last>
              <Label>Details</Label>
              <Input
                ref={c => {
                  this.refs.detailsField = c;
                  console.log('=====>>>>>> 1 ....');
                  console.log(this.refs.detailsField);
                }}
                multiline={true}
                numberOfLines={10}
                style={{ height: 200, textAlignVertical: 'top' }}
                onChangeText={text => this.setState({ details: text })}
              />
            </Item>
          </Form>
        </Content>
      </Container>
    );
  }
}

ref callback is not getting called on rendering of Inpput component. Ideally we should see below console logs

=====>>>>>> 1 ....
=====>>>>>> 2. In componentDidMount() ....

But on console I am only seeing

=====>>>>>> 2. In componentDidMount() ....

Also seeing below warning / error message from React-Native (as I am calling this.refs.detailsField.focus() in componentDidMount()

Possible Unhandled Promise Rejection (id: 0):
TypeError: undefined is not an object (evaluating 'this.refs.detailsField.focus')
...
....

Looks like ref callback on Input field is not getting called at all. Is my understanding wrong about ref or is it a bug ?

Please try this test case.