Interview - Blog | Minova - ATS Resume Builder

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

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

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

Table of Contents

Junior React Native Developer Interview Questions: Complete Guide

Introduction

React Fundamentals (6 Questions)

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

2. What are the core components in React Native?

3. Explain the difference between `View` and `ScrollView`.

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

5. Explain the `useEffect` hook and its dependency array.

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

Components & Props (4 Questions)

7. What is the difference between Props and State?

8. What are Functional Components vs Class Components?

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

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

Styling & Layout (3 Questions)

11. How do you style components in React Native?

12. Explain Flexbox in React Native.

13. What is the difference between `margin` and `padding`?

Navigation (3 Questions)

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

15. How do you pass parameters between screens?

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

Data & Storage (4 Questions)

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

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

19. What is the difference between `FlatList` and `ScrollView`?

20. How do you handle forms and user input?

Stand Out to Recruiters & Land Your Dream Job

Share this post

Weekly career tips that actually work

Weekly career tips that actually work

Related Posts

Junior Mobile Developer (iOS) Interview Questions: Complete Guide

Junior Mobile Developer (Android) Interview Questions: Complete Guide

Junior Backend Developer (Python) Interview Questions: Complete Guide

Stand Out to Recruiters & Land Your Dream Job

Share this post

Cut Your Resume Writing Time by 90%

Table of Contents

Introduction

React Fundamentals (6 Questions)

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

2. What are the core components in React Native?

3. Explain the difference between View and ScrollView.

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

5. Explain the useEffect hook and its dependency array.

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

Components & Props (4 Questions)

7. What is the difference between Props and State?

8. What are Functional Components vs Class Components?

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

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

Styling & Layout (3 Questions)

11. How do you style components in React Native?

12. Explain Flexbox in React Native.

13. What is the difference between margin and padding?

Navigation (3 Questions)

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

15. How do you pass parameters between screens?

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

Data & Storage (4 Questions)

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

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

19. What is the difference between FlatList and ScrollView?

20. How do you handle forms and user input?

Stand Out to Recruiters & Land Your Dream Job

Share this post

Weekly career tips that actually work

Weekly career tips that actually work

Related Posts

Junior Mobile Developer (iOS) Interview Questions: Complete Guide

Junior Mobile Developer (Android) Interview Questions: Complete Guide

Junior Backend Developer (Python) Interview Questions: Complete Guide

Stand Out to Recruiters & Land Your Dream Job

Share this post

Cut Your Resume Writing Time by 90%

3. Explain the difference between `View` and `ScrollView`.

5. Explain the `useEffect` hook and its dependency array.

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

13. What is the difference between `margin` and `padding`?

19. What is the difference between `FlatList` and `ScrollView`?