I am doing this in react native code, eslint is showing error for line ref="drawer"

[eslint] Using string literals in ref attributes is deprecated.

What is correct way to do this.

<DrawerLayoutAndroid
                drawerWidth={300}
                ref="drawer"
                drawerPosition={DrawerLayoutAndroid.positions.Left}
                renderNavigationView={() => navigationView}
            </DrawerLayoutAndroid>

I am doing this in react native code, eslint is showing error for line ref="drawer"

[eslint] Using string literals in ref attributes is deprecated.

What is correct way to do this.

<DrawerLayoutAndroid
                drawerWidth={300}
                ref="drawer"
                drawerPosition={DrawerLayoutAndroid.positions.Left}
                renderNavigationView={() => navigationView}
            </DrawerLayoutAndroid>

• javascript
• reactjs
• react-native
• eslint

2 Answers 2

You need to make use of ref callback pattern as string refs are deprecated.

<DrawerLayoutAndroid
            drawerWidth={300}
            ref={(ref) => this.drawer = ref}
            drawerPosition={DrawerLayoutAndroid.positions.Left}
            renderNavigationView={() => navigationView}
        </DrawerLayoutAndroid>

(ref) => this.drawer = ref is an arrow function syntax, you can simplify it similar to

constructor(props) {
   super(props); 
   this.setRef = this.setRef.bind(this);
}
setRef(ref) {
   this.setRef = ref;
}

...
ref={this.setRef}

Check this answer for more info

How to access a DOM element in React? What is the equilvalent of document.getElementById() in React

you can wrap them with curly braces to indicate it's valid JS syntax

<DrawerLayoutAndroid
            drawerWidth={300}
            ref={'DRAWER'}
            drawerPosition={DrawerLayoutAndroid.positions.Left}
            renderNavigationView={() => navigationView}
        </DrawerLayoutAndroid>