What are Refs used for in React Native ?
Last Updated :
11 Jan, 2025
Refs can be used to access DOM nodes or React Native components created in the render method.
We can use Refs in react native with the help of the useRef hook which returns a ref object. The object has a .current property through which the React native components can be accessed.
The returned object will remain persistent for the whole component lifespan. It means that whenever the ref object is updated it does not cause your component to re-render.
It’s helpful for keeping any mutable value around, similar to how you’d use instance fields in classes.
Refs in React Native provide a way to access and manipulate DOM elements directly. They are often used for managing focus, animations, and third-party libraries.
Let’s use an illustration to assist you comprehend it:
Creating Application: Follow the below steps to create a React Native application:
Step 1: Open your terminal and install expo-cli by the following command.
npm install -g expo-cli
Step 2: Now create a project by the following command.
expo init Project
Step 3: Now go into your project folder i.e. Project
cd Project
Project Structure:

Example 1: We will be using ref in this example to create a button, on click of which the focus should shift to the TextInput component.
In App.js First, we are importing the useRef hook from ‘react’. Then, inside the component, we are creating a ref object using useRef which is named as textRef.
Pressing the button will call the createFocusOnTextInput() function, which in this case will shift the focus to the TextInput component. In this function, we are accessing the component with the help of .current property.
App.js
import { useState, useRef } from 'react';
import { Text, View, StyleSheet, TextInput, Button }
from 'react-native';
export default function App() {
const [name, setName] = useState("")
// Creating a ref Object using useRef Hook
const textRef = useRef()
// Function to shift focus on TextInput component
function createFocusOnTextInput() {
textRef.current.focus();
}
return (
<View style={styles.container}>
<TextInput
// Creating reference to the TextInput component
ref={textRef}
onChangeText={text => setName(text)}
style={styles.input}
/>
<Text style={styles.text}>My Name is {name}</Text>
<Button
onPress={createFocusOnTextInput}
title="Focus On Text Input Component"
/>
</View>
);
}
// Styles for Text and View components
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#72e6e8',
padding: 8,
color: 'white'
},
input: {
height: 40,
width: 300,
margin: 12,
borderWidth: 3,
color: '#000000',
padding: 10,
},
text: {
margin: 14,
fontSize: 20,
fontWeight: 'bold',
textAlign: 'center',
color: 'white',
},
});
Step to run application: Open the terminal and type the following command.
npm start
Output:
As you can see in the output. With the press of the button, the focus gets shifted to the TextInput component. Another use of useRef is to show the no. of times a component is re-rendered on the screen.
Example 2: In the following example, we are creating a Text Input and showing its value in a text component. Whenever we type something in the text input it triggers an event which in turn is updating the name state. As soon as the value of the state changes the components get re-rendered. Our goal is to count how many times the component is re-rending. So, we are updating renderCount.current by incrementing it. This update will never ever gonna causes our component to re-render bcz it’s completely separate from our component render lifecycle.
App.js
import { useState, useEffect, useRef } from 'react';
import { Text, View, StyleSheet, TextInput }
from 'react-native';
export default function App() {
const [name, setName] = useState('')
const renderCount = useRef(0)
// It's an object with current property {current: 0}
useEffect(() => {
// Updating the counter value on each re-render
renderCount.current = renderCount.current + 1
})
return (
<View style={styles.container}>
<TextInput
onChangeText={text => setName(text)}
style={styles.input}
/>
<Text style={styles.text}>My Name is {name}</Text>
<Text style={styles.text}>
I rendered {renderCount.current} times
</Text>
</View>
);
}
// Styles for Text and View components
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#72e6e8',
padding: 8,
color: 'white'
},
input: {
height: 40,
width: 300,
margin: 12,
borderWidth: 3,
color: '#000000',
padding: 10,
},
text: {
margin: 14,
fontSize: 20,
fontWeight: 'bold',
textAlign: 'center',
color: 'white',
},
});
Step to run application: Open the terminal and type the following command.
npm start
Output:
As you can see in the output, as soon as the value in TextInput is getting changed the name value is getting re-rendered and the renderCount is incremented at the same time.
Why we can’t count the re-render using a simple UseState hook instead of UseRef?
It is because when the first time component renders it’s going to change the renderCount state, which causes re-render, then this state gets updated and again pushes the component to re-render and this goes on in an infinity loop. This is happening because the useState hook doesn’t persist values between renders. There is no way we can do this with the help useState because we can’t persist state values without useRef in functional components.
Similar Reads
What are some features of Fast Refresh in React native ?
In this article, we discuss Fast Refresh. How it is used and what its benefits of it. Fast refresh is a React Native element that allows you to get live feedback for changes in your Respond components. By default, Fast Refresh is enabled, and if it is not enabled then you can enable using "Enable Fa
6 min read
What are props in React Native ?
Props are used to provide properties to the components using which they can be modified and customized. These properties are passed to the components when the component is created. Props are used in both user-defined and default components to extend their functionality. These props are immutable and
3 min read
What is a bridge in React Native ?
A React Native app comprises two sides as given below. The JavaScript SideThe Native SideThe Native Side should be Java or Kotlin for Android and Swift or Objective-C for iOS. The huge reason for the popularity of React Native is that a bridge can be created between the JavaScript code and Native la
7 min read
What are the steps to create first React Native App ?
React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, etc. Weâre always looking for shorter development cycles, quicker time to deployment, and better app performance. And there are so many hybrid mobile
2 min read
What is the difference between React Native and React?
React and React Native, created by Facebook, are popular tools for building user-friendly apps. React is mainly used for web applications, while React Native focuses on mobile apps. They share similar concepts, but each serves a unique purpose. Table of Content React vs React NativeWhat is React ?Wh
4 min read
What are Touchable Interactions in React Native?
When building a mobile application with React Native, it is important to provide a responsive and interactive user interface. One way to accomplish this is through the use of touchable interactions. Touchable interactions in React Native refer to the components that provide touchable feedback in res
3 min read
What are middlewares in React Redux ?
In the world of creating websites and apps, React and Redux are powerful tools used to build apps that can grow and be easily updated. React helps build user interfaces, while Redux helps keep track of the app's data in a way that makes it easy to understand. Redux uses something called "middlewares
5 min read
Getting started with React Native
React Native, also known as RN, is a widely used mobile app framework that relies on JavaScript and It enables developers to build natively-rendered apps for both iOS and Android platforms using the same codebase was introduced by Facebook as an open-source project in 2015 and quickly became one of
7 min read
Redux Store in React Native
In this article, we are going to learn about Redux Store. It is the object which holds the state of the application. The store is one of the building blocks of Redux. Redux is a state managing library used in JavaScript apps. It is used to manage the data and the state of the application. Uses of Re
5 min read
What does the Gesture Responder System do in React Native ?
Gesture Responder System allows the app to respond to user interactions and manage the entire lifecycle of the gesture. Here the gesture can be as simple as a single touch or as long as dragging on the screen. The apps today are very attractive as they provide us with different ways of interacting w
6 min read