November 22, 2025
14 min read

Junior React Native Developer Interview Questions: Complete Guide

interview
career-advice
job-search
entry-level
Junior React Native Developer Interview Questions: Complete Guide
MB

Milad Bonakdar

Author

Master React Native development fundamentals with essential interview questions covering React basics, components, navigation, state management, and mobile-specific concepts for junior developers.

Introduction

React Native enables developers to build native mobile applications using JavaScript and React. With a single codebase, you can create apps for both iOS and Android, making it a powerful choice for cross-platform mobile development.

This guide covers essential interview questions for Junior React Native Developers. We explore React fundamentals, components, hooks, navigation, state management, and mobile-specific concepts to help you prepare for your first React Native developer role.

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 lightweight JavaScript representation of the actual DOM.

  • Process:
    1. When state changes, React creates a new Virtual DOM tree
    2. Compares it with the previous Virtual DOM (diffing)
    3. Calculates minimal changes needed
    4. Updates only changed parts in the real DOM
  • Benefits: Efficient updates, better performance

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: 'john@example.com' };
  
  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 a simple, asynchronous key-value storage system for React Native.

  • Use Cases: User preferences, tokens, small data
  • Not for: Large datasets, complex queries (use SQLite instead)
import AsyncStorage from '@react-native-async-storage/async-storage';

// Save data
const saveData = async (key, value) => {
  try {
    await AsyncStorage.setItem(key, value);
  } catch (error) {
    console.error('Error saving data:', error);
  }
};

// Save object
const saveUser = async (user) => {
  try {
    const jsonValue = JSON.stringify(user);
    await AsyncStorage.setItem('user', jsonValue);
  } catch (error) {
    console.error('Error saving user:', error);
  }
};

// Read data
const getData = async (key) => {
  try {
    const value = await AsyncStorage.getItem(key);
    return value !== null ? value : null;
  } catch (error) {
    console.error('Error reading data:', error);
  }
};

// Read object
const getUser = async () => {
  try {
    const jsonValue = await AsyncStorage.getItem('user');
    return jsonValue != null ? JSON.parse(jsonValue) : null;
  } catch (error) {
    console.error('Error reading user:', error);
  }
};

// Remove data
const removeData = async (key) => {
  try {
    await AsyncStorage.removeItem(key);
  } catch (error) {
    console.error('Error removing data:', error);
  }
};

// Clear all
const clearAll = async () => {
  try {
    await AsyncStorage.clear();
  } catch (error) {
    console.error('Error clearing storage:', error);
  }
};

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

Related Posts

Junior Mobile Developer (iOS) Interview Questions: Complete Guide
Nov 22, 2025
12 min read

Junior Mobile Developer (iOS) Interview Questions: Complete Guide

Master iOS development fundamentals with essential interview questions covering Swift, UIKit, SwiftUI, data persistence, and iOS app architecture for junior developers.

MBMilad Bonakdar
Junior Mobile Developer (Android) Interview Questions: Complete Guide
Nov 22, 2025
13 min read

Junior Mobile Developer (Android) Interview Questions: Complete Guide

Master Android development fundamentals with essential interview questions covering Kotlin, Activities, Fragments, Jetpack Compose, data persistence, and Android best practices for junior developers.

MBMilad Bonakdar
Junior Backend Developer (Python) Interview Questions: Complete Guide
Nov 22, 2025
11 min read

Junior Backend Developer (Python) Interview Questions: Complete Guide

Master Python backend development with essential interview questions covering Python fundamentals, Django/Flask, databases, APIs, and more. Perfect preparation for junior backend developer interviews.

MBMilad Bonakdar

Recent Posts

Laid Off? 4 Essential Steps to Take Now
Dec 12, 2025
7 min read

Laid Off? 4 Essential Steps to Take Now

Finding out you've been laid off can be devastating. Don't let it derail your career goals. Here are four crucial steps to take immediately after a layoff to navigate this challenging transition and move forward with confidence using Minova's career resources.

MRMasoud Rezakhnnlo
Explain Your Resume Gap: Strategies for Job Search Success
Dec 11, 2025
7 min read

Explain Your Resume Gap: Strategies for Job Search Success

Worried about a gap in your resume? Don't let it hold you back! Learn proven strategies to address employment gaps, highlight your strengths, and confidently land your next role. Discover how Minova can help you craft a compelling narrative and showcase your valuable skills.

MRMasoud Rezakhnnlo
Ace Your Career: Resume Tips, Job Search Strategies & More
Dec 09, 2025
8 min read

Ace Your Career: Resume Tips, Job Search Strategies & More

Unlock your career potential with expert advice on resumes, job searching, and interview preparation. Discover strategies to create a standout resume, navigate the job market effectively, and impress potential employers. Elevate your career journey with Minova.

MMMona Minaie

Weekly career tips that actually work

Get the latest insights delivered straight to your inbox