November 22, 2025
14 min read

Junior React Native Developer Interview Questions and Answers

interview
career-advice
job-search
entry-level
Junior React Native Developer Interview Questions and Answers
Milad Bonakdar

Milad Bonakdar

Author

Practice junior React Native interview questions on components, hooks, navigation, API calls, lists, AsyncStorage, and mobile app basics.

Introduction

For a junior React Native interview, expect questions that test whether you can build simple mobile screens with React, explain native rendering, manage state with hooks, move between screens, fetch API data, and store non-sensitive local data. A strong answer is practical: say what you would use, when you would avoid it, and what trade-off it creates on iOS and Android.

Use this guide to practice the questions most likely to appear in a first React Native role. Focus on React fundamentals, core components, navigation, forms, lists, API calls, storage, and mobile-specific debugging instead of memorizing library trivia.

React Fundamentals (6 Questions)

1. What is React Native and how does it differ from React?

Answer:

  • React: JavaScript library for building web user interfaces
  • React Native: Framework for building native mobile apps using React
  • Key Differences:
    • React Native renders to native components (not DOM)
    • Uses native APIs instead of web APIs
    • Different styling approach (no CSS, uses StyleSheet)
    • Platform-specific code for iOS and Android
// React (Web)
import React from 'react';

function App() {
  return <div className="container">Hello Web</div>;
}

// React Native (Mobile)
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

function App() {
  return (
    <View style={styles.container}>
      <Text>Hello Mobile</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Rarity: Very Common Difficulty: Easy

2. What are the core components in React Native?

Answer: React Native provides built-in components that map to native UI elements:

  • View: Container component (like div in web)
  • Text: Display text (all text must be in Text component)
  • Image: Display images
  • ScrollView: Scrollable container
  • TextInput: Text input field
  • TouchableOpacity/Pressable: Touchable elements
  • FlatList: Efficient list rendering
  • Button: Basic button component
import {
  View,
  Text,
  Image,
  TextInput,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';

function MyComponent() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome</Text>
      <Image source={{ uri: 'https://example.com/image.jpg' }} style={styles.image} />
      <TextInput placeholder="Enter name" style={styles.input} />
      <TouchableOpacity style={styles.button} onPress={() => console.log('Pressed')}>
        <Text style={styles.buttonText}>Click Me</Text>
      </TouchableOpacity>
    </View>
  );
}

Rarity: Very Common Difficulty: Easy

3. Explain the difference between View and ScrollView.

Answer:

  • View: Static container. Content beyond screen bounds is not scrollable.
  • ScrollView: Scrollable container. Renders all children at once (can be memory-intensive for large lists).
  • When to use:
    • View: For layouts that fit on screen
    • ScrollView: For small amounts of scrollable content
    • FlatList: For large lists (renders only visible items)
// View - not scrollable
<View style={{ height: 200 }}>
  <Text>Content 1</Text>
  <Text>Content 2</Text>
  {/* If content exceeds 200px, it's cut off */}
</View>

// ScrollView - scrollable
<ScrollView style={{ height: 200 }}>
  <Text>Content 1</Text>
  <Text>Content 2</Text>
  <Text>Content 3</Text>
  {/* Can scroll to see all content */}
</ScrollView>

// FlatList - efficient for large lists
<FlatList
  data={items}
  renderItem={({ item }) => <Text>{item.name}</Text>}
  keyExtractor={item => item.id}
/>

Rarity: Very Common Difficulty: Easy

4. What are React Hooks and which ones are most commonly used?

Answer: Hooks are functions that let you use state and lifecycle features in functional components.

  • Common Hooks:
    • useState: Manage component state
    • useEffect: Handle side effects (data fetching, subscriptions)
    • useContext: Access context values
    • useCallback: Memoize functions
    • useMemo: Memoize expensive calculations
    • useRef: Reference DOM elements or persist values
import React, { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';

function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    console.log(`Count changed to: ${count}`);
    
    // Cleanup function
    return () => {
      console.log('Cleanup');
    };
  }, [count]); // Runs when count changes
  
  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
}

Rarity: Very Common Difficulty: Easy

5. Explain the useEffect hook and its dependency array.

Answer: useEffect runs side effects after render. The dependency array controls when it runs:

  • No array: Runs after every render
  • Empty array []: Runs once after initial render
  • With dependencies [dep1, dep2]: Runs when dependencies change
import { useEffect, useState } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  
  // Runs once on mount
  useEffect(() => {
    console.log('Component mounted');
  }, []);
  
  // Runs when userId changes
  useEffect(() => {
    fetchUser(userId).then(data => setUser(data));
  }, [userId]);
  
  // Runs after every render (avoid this)
  useEffect(() => {
    console.log('Rendered');
  });
  
  // Cleanup function
  useEffect(() => {
    const subscription = subscribeToUpdates();
    
    return () => {
      subscription.unsubscribe(); // Cleanup on unmount
    };
  }, []);
  
  return <Text>{user?.name}</Text>;
}

Rarity: Very Common Difficulty: Medium

6. What is the Virtual DOM and how does React use it?

Answer: The Virtual DOM is a React concept from web development: React keeps a lightweight UI tree, compares it after state changes, and updates only what changed. In React Native, the same reconciliation idea applies, but the final output is native views, not browser DOM nodes.

  • What to say in an interview:
    1. State changes trigger React to re-render affected components
    2. React compares the new component tree with the previous one
    3. React Native applies the needed updates to native UI components
    4. You still optimize with stable keys, careful state placement, and memoization only when it solves a real re-render problem
  • Important correction: React Native does not update HTML or a browser DOM.

Rarity: Common Difficulty: Easy

Components & Props (4 Questions)

7. What is the difference between Props and State?

Answer:

  • Props:
    • Passed from parent to child
    • Read-only (immutable)
    • Used for component configuration
  • State:
    • Managed within the component
    • Mutable (can be changed)
    • Used for dynamic data
// Parent component
function ParentComponent() {
  const [count, setCount] = useState(0);
  
  return (
    <ChildComponent 
      title="Counter"  // Props
      count={count}    // Props
      onIncrement={() => setCount(count + 1)}  // Props
    />
  );
}

// Child component
function ChildComponent({ title, count, onIncrement }) {
  // Cannot modify props
  // title = "New Title"; // Error!
  
  return (
    <View>
      <Text>{title}</Text>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={onIncrement} />
    </View>
  );
}

Rarity: Very Common Difficulty: Easy

8. What are Functional Components vs Class Components?

Answer:

  • Functional Components:
    • Simpler syntax
    • Use hooks for state and lifecycle
    • Preferred in modern React
  • Class Components:
    • Older approach
    • Use this.state and lifecycle methods
    • Still supported but less common
// Functional Component (Modern)
function Welcome({ name }) {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    console.log('Mounted');
  }, []);
  
  return <Text>Hello, {name}</Text>;
}

// Class Component (Legacy)
class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  
  componentDidMount() {
    console.log('Mounted');
  }
  
  render() {
    return <Text>Hello, {this.props.name}</Text>;
  }
}

Rarity: Common Difficulty: Easy

9. How do you pass data from child to parent component?

Answer: Use callback functions passed as props.

// Parent component
function ParentComponent() {
  const [message, setMessage] = useState('');
  
  const handleMessageFromChild = (msg) => {
    setMessage(msg);
  };
  
  return (
    <View>
      <Text>Message from child: {message}</Text>
      <ChildComponent onSendMessage={handleMessageFromChild} />
    </View>
  );
}

// Child component
function ChildComponent({ onSendMessage }) {
  const [input, setInput] = useState('');
  
  const sendMessage = () => {
    onSendMessage(input); // Call parent's function
  };
  
  return (
    <View>
      <TextInput value={input} onChangeText={setInput} />
      <Button title="Send to Parent" onPress={sendMessage} />
    </View>
  );
}

Rarity: Very Common Difficulty: Easy

10. What is the key prop and why is it important?

Answer: The key prop helps React identify which items have changed, been added, or removed in lists.

  • Purpose: Optimize rendering performance
  • Requirements: Must be unique among siblings, stable (don't use index if list can change)
// Good - using unique ID
function UserList({ users }) {
  return (
    <FlatList
      data={users}
      keyExtractor={item => item.id} // Unique key
      renderItem={({ item }) => <Text>{item.name}</Text>}
    />
  );
}

// Bad - using index (avoid if list can change)
function BadList({ items }) {
  return (
    <View>
      {items.map((item, index) => (
        <Text key={index}>{item}</Text> // Don't use index
      ))}
    </View>
  );
}

// Good - using unique property
function GoodList({ items }) {
  return (
    <View>
      {items.map(item => (
        <Text key={item.id}>{item.name}</Text>
      ))}
    </View>
  );
}

Rarity: Very Common Difficulty: Easy

Styling & Layout (3 Questions)

11. How do you style components in React Native?

Answer: React Native uses JavaScript objects for styling, not CSS.

  • StyleSheet API: Create optimized styles
  • Inline Styles: Direct style objects (less performant)
  • Flexbox: Default layout system
import { View, Text, StyleSheet } from 'react-native';

function StyledComponent() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Title</Text>
      <Text style={[styles.text, styles.bold]}>Multiple styles</Text>
      <Text style={{ color: 'red' }}>Inline style</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
  text: {
    fontSize: 16,
    color: '#666',
  },
  bold: {
    fontWeight: 'bold',
  },
});

Rarity: Very Common Difficulty: Easy

12. Explain Flexbox in React Native.

Answer: Flexbox is the primary layout system in React Native.

  • Main Properties:
    • flexDirection: row or column (default: column)
    • justifyContent: Align along main axis
    • alignItems: Align along cross axis
    • flex: Proportional sizing
const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row', // Horizontal layout
    justifyContent: 'space-between', // Space items evenly
    alignItems: 'center', // Center vertically
  },
  box1: {
    flex: 1, // Takes 1/3 of space
    backgroundColor: 'red',
  },
  box2: {
    flex: 2, // Takes 2/3 of space
    backgroundColor: 'blue',
  },
});

function FlexExample() {
  return (
    <View style={styles.container}>
      <View style={styles.box1} />
      <View style={styles.box2} />
    </View>
  );
}

Rarity: Very Common Difficulty: Medium

13. What is the difference between margin and padding?

Answer:

  • Padding: Space inside the component (between content and border)
  • Margin: Space outside the component (between component and neighbors)
const styles = StyleSheet.create({
  box: {
    margin: 20,        // Space outside
    padding: 10,       // Space inside
    backgroundColor: 'lightblue',
  },
  // Specific sides
  specificBox: {
    marginTop: 10,
    marginBottom: 20,
    paddingLeft: 15,
    paddingRight: 15,
  },
  // Horizontal and vertical
  shorthand: {
    marginHorizontal: 20,  // left and right
    marginVertical: 10,    // top and bottom
    paddingHorizontal: 15,
    paddingVertical: 5,
  },
});

Rarity: Common Difficulty: Easy

Navigation (3 Questions)

14. What is React Navigation and how do you use it?

Answer: React Navigation is the most popular navigation library for React Native.

  • Types:
    • Stack Navigator: Screen stack (push/pop)
    • Tab Navigator: Bottom tabs
    • Drawer Navigator: Side drawer menu
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details', { itemId: 42 })}
      />
    </View>
  );
}

function DetailsScreen({ route, navigation }) {
  const { itemId } = route.params;
  
  return (
    <View>
      <Text>Details Screen</Text>
      <Text>Item ID: {itemId}</Text>
      <Button title="Go Back" onPress={() => navigation.goBack()} />
    </View>
  );
}

Rarity: Very Common Difficulty: Medium

15. How do you pass parameters between screens?

Answer: Use the navigate function with a second parameter for data.

// Navigate with parameters
function HomeScreen({ navigation }) {
  const user = { id: 1, name: 'John', email: '[email protected]' };
  
  return (
    <Button
      title="View Profile"
      onPress={() => navigation.navigate('Profile', { user })}
    />
  );
}

// Receive parameters
function ProfileScreen({ route }) {
  const { user } = route.params;
  
  return (
    <View>
      <Text>Name: {user.name}</Text>
      <Text>Email: {user.email}</Text>
    </View>
  );
}

// Update parameters
function EditScreen({ navigation }) {
  const updateUser = () => {
    navigation.setParams({ user: updatedUser });
  };
  
  return <Button title="Update" onPress={updateUser} />;
}

Rarity: Very Common Difficulty: Easy

16. What are navigation options and how do you customize headers?

Answer: Navigation options control screen appearance and behavior.

function HomeScreen({ navigation }) {
  useEffect(() => {
    navigation.setOptions({
      title: 'My Home',
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
      headerRight: () => (
        <Button title="Info" onPress={() => alert('Info')} />
      ),
    });
  }, [navigation]);
  
  return <View><Text>Home</Text></View>;
}

// Or set in navigator
<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{
    title: 'My Home',
    headerStyle: { backgroundColor: '#f4511e' },
    headerTintColor: '#fff',
  }}
/>

Rarity: Common Difficulty: Easy

Data & Storage (4 Questions)

17. How do you fetch data from an API in React Native?

Answer: Use fetch API or libraries like Axios.

import { useState, useEffect } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    fetchUsers();
  }, []);
  
  const fetchUsers = async () => {
    try {
      const response = await fetch('https://api.example.com/users');
      
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      
      const data = await response.json();
      setUsers(data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
  
  if (loading) return <ActivityIndicator />;
  if (error) return <Text>Error: {error}</Text>;
  
  return (
    <FlatList
      data={users}
      renderItem={({ item }) => <Text>{item.name}</Text>}
      keyExtractor={item => item.id.toString()}
    />
  );
}

Rarity: Very Common Difficulty: Medium

18. What is AsyncStorage and how do you use it?

Answer: AsyncStorage is an asynchronous key-value store for small, non-sensitive data.

  • Good use cases: Theme choice, onboarding flags, cached JSON, simple preferences
  • Avoid: Auth tokens, API keys, passwords, large datasets, and data that needs complex queries
  • For sensitive data: Use platform-backed secure storage such as iOS Keychain or Android encrypted storage through a maintained library
import AsyncStorage from '@react-native-async-storage/async-storage';

const savePreference = async (theme) => {
  await AsyncStorage.setItem('theme', theme);
};

const loadPreference = async () => {
  return await AsyncStorage.getItem('theme');
};

Rarity: Very Common Difficulty: Easy

19. What is the difference between FlatList and ScrollView?

Answer:

  • ScrollView:
    • Renders all children at once
    • Good for small lists
    • Memory intensive for large lists
  • FlatList:
    • Renders only visible items (lazy loading)
    • Efficient for large lists
    • Built-in optimizations
// ScrollView - renders everything
<ScrollView>
  {items.map(item => (
    <View key={item.id}>
      <Text>{item.name}</Text>
    </View>
  ))}
</ScrollView>

// FlatList - renders only visible items
<FlatList
  data={items}
  renderItem={({ item }) => (
    <View>
      <Text>{item.name}</Text>
    </View>
  )}
  keyExtractor={item => item.id}
  // Performance optimizations
  initialNumToRender={10}
  maxToRenderPerBatch={10}
  windowSize={5}
/>

Rarity: Very Common Difficulty: Easy

20. How do you handle forms and user input?

Answer: Use controlled components with state.

import { useState } from 'react';
import { View, TextInput, Button, Text } from 'react-native';

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState({});
  
  const validate = () => {
    const newErrors = {};
    
    if (!email) {
      newErrors.email = 'Email is required';
    } else if (!/\S+@\S+\.\S+/.test(email)) {
      newErrors.email = 'Email is invalid';
    }
    
    if (!password) {
      newErrors.password = 'Password is required';
    } else if (password.length < 6) {
      newErrors.password = 'Password must be at least 6 characters';
    }
    
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };
  
  const handleSubmit = () => {
    if (validate()) {
      console.log('Form submitted:', { email, password });
      // Submit to API
    }
  };
  
  return (
    <View>
      <TextInput
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
        autoCapitalize="none"
      />
      {errors.email && <Text style={{ color: 'red' }}>{errors.email}</Text>}
      
      <TextInput
        placeholder="Password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      {errors.password && <Text style={{ color: 'red' }}>{errors.password}</Text>}
      
      <Button title="Login" onPress={handleSubmit} />
    </View>
  );
}

Rarity: Very Common Difficulty: Medium

Newsletter subscription

Weekly career tips that actually work

Get the latest insights delivered straight to your inbox

Related Posts

Junior iOS Developer Interview Questions: Swift, UIKit, SwiftUI
Nov 22, 2025
12 min read

Junior iOS Developer Interview Questions: Swift, UIKit, SwiftUI

Practice junior iOS interview questions on Swift, UIKit, SwiftUI, networking, persistence, and async code, with concise answers for first mobile roles.

Milad BonakdarMilad Bonakdar
Junior Android Developer Interview Questions and Answers
Nov 22, 2025
13 min read

Junior Android Developer Interview Questions and Answers

Prepare for a junior Android developer interview with focused Kotlin, lifecycle, Jetpack Compose, Room, networking, and coroutine questions.

Milad BonakdarMilad Bonakdar
Junior Python Backend Developer Interview Questions
Nov 22, 2025
11 min read

Junior Python Backend Developer Interview Questions

Prepare for junior Python backend interviews with 30 questions on Python fundamentals, Django/Flask, REST APIs, databases, testing, Git, Docker, and API security.

Milad BonakdarMilad Bonakdar

Stand Out to Recruiters & Land Your Dream Job

Join thousands who transformed their careers with AI-powered resumes that pass ATS and impress hiring managers.

Start building now

Share this post

Cut Your Resume Writing Time by 90%

The average job seeker spends 3+ hours formatting a resume. Our AI does it in under 15 minutes, getting you to the application phase 12x faster.

Build in 15 Minutes