Junior React Native Developer — React Native interview questions

What is a component in React Native, and what is the difference between a functional and a class component?

A component is a reusable piece of UI, written as a function (or, historically, a class) that returns JSX describing what should render. Functional components with hooks are the norm now — they read cleaner, avoid this binding issues, and can reuse stateful logic across components via custom hooks in a way class lifecycle methods could not. Class components still work and appear in older codebases, but new code is functional by default.

What is the difference between props and state?

Props come from the parent and the component cannot change them — treat them as read-only input. State belongs to the component itself, created with useState, and changing it triggers a re-render. A button's label is usually a prop; whether a modal is currently open is usually state.

What does `useEffect` do?

It runs a function after the component renders, for anything that is not pure rendering — fetching data, subscribing to an event, setting a timer. The dependency array controls when it re-runs, and returning a cleanup function from it handles unsubscribing before the next run or on unmount. Skipping the dependency array means the effect runs after every single render, which is rarely what is wanted.

How do you style a component in React Native?

With a JS object, usually built via StyleSheet.create({...}) and passed to the style prop — there is no separate CSS file. Layout uses Flexbox by default with flexDirection: 'column', so flex: 1, justifyContent, and alignItems are the properties used most for arranging children. StyleSheet.create also lets React Native validate styles and reference them by ID instead of re-creating an object every render.

How do you move between screens with React Navigation?

Wrap the app in a navigator — a stack navigator for the common push/pop pattern — register each screen with a name, and call navigation.navigate('ScreenName') from inside a screen to move to it. Params travel with the call, navigation.navigate('Details', { id: 5 }), and the target screen reads them back with route.params. Going back uses navigation.goBack() or the platform's own back gesture/button, which the stack navigator wires up automatically.

How is React Native different from React for the web?

There is no DOM and no browser — <View>, <Text>, and <Image> replace <div>, <span>, and <img>, and they render to real native UIKit/Android views instead of HTML elements. Styling is JS objects instead of CSS, there is no className, and browser APIs like localStorage do not exist — React Native has its own equivalents like AsyncStorage. The component model, hooks, and the one-way data flow are otherwise the same mental model as React on the web.