Top React Native Interview Questions and Answers

React and React Native are like cousins in the same family. React is used to build web applications (what you see in a browser). React Native is used to build mobile apps (for iOS and Android).

They both use JavaScript and a similar way of writing components, but the elements and how they render are different. React uses HTML and CSS. React Native uses native components like <View> and <Text>.

React Native is great because you can build apps for both iOS and Android using the same code, which saves a lot of time. You also get to see your changes instantly while you're working, which makes development faster. Plus, there's a big community and lots of tools that make things easier. And since it uses real native components, the apps usually run pretty smoothly.

In React Native, you build your app using a few core components like:

• View – kind of like a container for layout.
• Text – for showing any text.
• Image – to display pictures.
• ScrollView – lets you scroll through content.
• TextInput – for things like forms or search bars.

These are the basic building blocks you use to put your app together.

JSX is a way to write HTML-like code inside JavaScript. In React Native, you use it to design how your app looks.

For example, instead of writing complicated JavaScript, you can just write:

It makes your code easier to read and lets you build the UI in a simple, clear way.

In React Native, like in React, props and state are key ideas. They help control data and define how components look and act. We can think of them in simple terms: Props (the shorthand for "properties")

Props are similar to settings or inputs, or anything we are passing from a parent component down to a child. We can think of props as data that the child component receives that are read-only and cannot be changed by the child. You can change how a component looks or acts by using props. However, props cannot be changed inside the component.

The state is where a component stores changeable information or data. This can include user inputs or responses from an external server. In contrast to props, state is something that the component actively updates based on the data it should be displaying on the screen. The state is updated using class methods like setState. It can also be updated in functional components with useState and other React hooks.

To create a component, you write a function that returns some JSX:

To import it into another file, you do:

Then just call it like this:

In React Native, you style everything using JavaScript instead of CSS.

You create styles like this:

Then you use it as follows.

For layout, React Native uses Flexbox, which helps you arrange everything on the screen.

Flexbox helps you arrange and align elements on the screen in React Native.
It makes it easy to control layout, like putting items in a row or column, spacing them out, or centering them. It’s super handy for building clean, responsive designs.

This puts two texts side by side with space between them.

The render method is where a component tells React Native what to show on the screen.

It returns the UI elements (JSX) that make up the component’s visible part. Without it, the app wouldn’t know what to display.

The render method tells React Native to show the text “Hello!” on the screen.

The key prop helps React Native keep track of items in a list.

It makes sure the app updates only the right items when the list changes, which makes things faster and smoother.

Each item gets a unique key so React Native knows which one belongs to what.

React Native handles async tasks using  Promises and async/await, just like regular JavaScript. This lets your app fetch data or load files without freezing the screen.

Example using async/await:

Example using Promises:

Both programs do the same, but with .then() and .catch() instead of async/await.

The useEffect hook lets you run code at certain times, like when a component loads or updates. It’s perfect for fetching data, setting up timers, or cleaning up resources.

This runs only once when the component first shows up.

Touchable components are buttons or areas you can tap or press in your app. They let users interact by touching buttons or links.

React Native CLI is the basic tool that gives you full control, but it needs more setup. For example, you set up everything yourself, like building a car from parts.

Expo is easier to start with. It comes with lots of built-in tools and features, so you can build apps faster without much hassle. For example, it’s like getting a car that’s already built. You can start driving right away, but you can’t change everything behind the scenes.

But Expo can be a bit limited if you want to do customisations.

In React Native, you can handle platform differences by:

• Writing separate files like Component.ios.js and Component.android.js that load automatically.
• Using the Platform from React Native to check the device and run different code.

This helps your app work well on both iOS and Android.

The Context API helps you share data across different parts of your app without passing props down through every component.

Use it when you have info that many parts of your app need, like user info or app settings.

The Child gets the value “Hello” without props.

Controlled components have their data managed by React (using state), so you’re in charge of what’s shown.

Uncontrolled components keep their data inside, and you get the value only when you need it.

Controlled is better when you want to keep everything synced and predictable.

Controlled:

Uncontrolled:

To speed up your React Native app, you can:

• Use PureComponent or React.memo to avoid unnecessary re-renders.
• Only update components when needed.
• Load images and data lazily (when needed).
• Use FlatList for long lists instead of ScrollView.

These help your app run smoother and faster.

In React Native, you can add animations using the Animated API. You create animated values and specify how to change over time, then connect those values to styles or components. It makes your app feel more lively and smooth.

The useRef hook lets you keep a value that doesn’t cause re-renders when it changes. It’s great for accessing a component directly or storing info between renders.

The React Native bridge connects the JavaScript code with the native parts of the app (like iOS or Android).

It lets them communicate with each other, so your app can use native features while still using JavaScript.

This is important because it helps React Native apps feel fast and work smoothly on different devices.

Integrating native modules can be tricky sometimes. You might run into issues like setting up the right environment, dealing with different platforms (iOS vs Android), or making sure the native code and JavaScript sync with each other properly. Sometimes it takes extra work to debug or keep everything in sync.

To handle those challenges, you can follow the official docs carefully. Use libraries that already solve common issues, test on both iOS and Android often, break problems into small parts, and debug step by step. You can even ask the community for help when stuck.

To avoid memory leaks in React Native, you should:

• Clean up timers, listeners, or subscriptions when a component unmounts.
• Use useEffect cleanup functions to remove them.
• Avoid keeping big data or references around longer than needed.

Deep linking lets your app open to a specific screen from a link (like from an email or browser).

In React Native, you can do it using libraries like React Navigation. You set up a linking config and instruct the app what to do when a link is opened.
It helps users jump straight to the right part of the app.

We can use Jest for unit tests (testing small bits of code). Use React Native Testing Library to test how components look and behave. Try tools like Detox for testing real user actions on a device or simulator.

Hermes is a JavaScript engine made for React Native. It makes apps start faster, use less memory, and run smoother, especially on Android. So, turning on Hermes can help your app perform better right out of the box.

To keep your app size small in React Native, you can:

• Remove unused libraries and code
• Use image compression
• Turn on Hermes (for Android)
• Use code-splitting or lazy loading
• Keep only the features you need

InteractionManager lets you run code after animations or interactions are done, so the app feels smoother. It’s useful for doing heavy tasks after the user’s actions, like loading data in the background without slowing down the UI.

Redux

Redux keeps our app’s state in one place and makes it easy to follow. It’s great for big, complex apps. It has strong tools to help us debug. But setting it up takes time and a lot of extra code. We can use it when we have structured data and want clear control.

Recoil

Recoil’s pretty easy to get started with, especially if we already know React. It works great with functional components, and handling async state feels simple. It breaks our state into little pieces called atoms. Since it’s still pretty new, there aren’t tons of tutorials yet. But if our app has a tricky UI state, Recoil can help.

Zustand

Zustand is small, fast, and simple. We don’t need extra setup or providers. It’s good for smaller apps or teams who want fast performance without extra work. It keeps some of Redux’s benefits but is easier to use.

Context API

Context API comes built into React and needs no setup. It’s good for simple, global info like themes. But it’s not good when our app state changes a lot, because it re-renders everything each time. Use it only for simple global values.

To keep sensitive data safe in React Native, use secure storage tools like Keychain or SecureStore instead of regular storage.

Also, avoid saving passwords or personal info in plain text, and always use encrypted connections for data. This way, our users’ info stays protected.