React Native Interview Playground

A comprehensive React Native project designed to help you prepare for mobile engineering interviews

🎯 Purpose

This project demonstrates key React Native concepts and patterns that are commonly discussed in mobile engineering interviews. It covers everything from basic component architecture to advanced performance optimization techniques.

🚀 Features

Core React Native Fundamentals

• Component Architecture: Functional components, class components, and component lifecycle
• Hooks: useState, useEffect, useCallback, useMemo, useRef, useContext, and custom hooks
• State Management: Local state, Context API, and global state patterns
• Navigation: Stack, tab, and nested navigation with React Navigation
• Styling: StyleSheet, dynamic styling, and responsive design

Advanced Topics

• Performance Optimization: FlatList optimization, React.memo, lazy loading
• Native Modules: Platform-specific code and bridging concepts
• Device Features: Permissions, location, camera, and device information
• Platform Differences: iOS vs Android specific implementations
• Async Operations: API calls, promises, and async/await patterns

Interview-Ready Examples

• Custom Hooks: Reusable logic patterns
• Memoization: Performance optimization techniques
• Context Patterns: State management without Redux
• Platform Detection: Conditional rendering and platform-specific code
• Error Handling: Graceful error handling and fallbacks

🛠 Setup

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Expo CLI
• Xcode (for iOS development)
• Android Studio (for Android development)
• Watchman (for file watching)
• JDK 17 (for Android development)

Installation

1. Clone and install dependencies:

   cd rn-interview-playground
   npm install

2. Start the development server:

   npm start

3. Run on iOS:

   npm run ios

4. Run on Android:

   npm run android

📱 App Structure

Navigation

The app uses a bottom tab navigator with the following screens:

• Home: Overview of all interview topics
• Components: React fundamentals and component patterns
• Performance: Optimization techniques and performance monitoring
• Native: Native modules and platform-specific features

Key Screens

1. Components Screen (src/screens/ComponentsScreen.tsx)

• State management with hooks
• Controlled components
• Conditional rendering
• Event handling
• Component lifecycle

2. Hooks Screen (src/screens/HooksScreen.tsx)

• Custom hooks examples
• useCallback and useMemo optimization
• useRef for DOM manipulation
• Context API implementation
• Async operations with hooks

3. Performance Screen (src/screens/PerformanceScreen.tsx)

• FlatList optimization
• React.memo implementation
• Callback memoization
• Large dataset handling
• Performance monitoring

4. Native Modules Screen (src/screens/NativeModulesScreen.tsx)

• Platform detection
• Native module concepts
• Bridging JavaScript and native code
• Platform-specific implementations

5. Device Info Screen (src/screens/DeviceInfoScreen.tsx)

• Device information retrieval
• Permission handling
• Location services
• Camera access
• Platform-specific features

🎓 Interview Topics Covered

React & React Native Fundamentals

• Component lifecycle methods
• Functional components and hooks
• State management approaches
• Props and prop drilling
• Context API usage
• Event handling patterns

Performance Optimization

• FlatList vs ScrollView
• React.memo and useMemo
• useCallback optimization
• Image optimization
• Bundle size optimization
• Memory leak prevention

Navigation Patterns

• Stack navigation
• Tab navigation
• Nested navigation
• Deep linking
• Navigation state management

Native Integration

• Platform-specific code
• Native module creation
• Bridging concepts
• Permission handling
• Device feature access

Testing & Debugging

• Debugging tools
• Console logging
• Error boundaries
• Performance monitoring

Mobile-Specific Considerations

• Screen dimensions
• Safe areas
• Device orientation
• Platform differences
• App lifecycle

🤔 Common Interview Questions

Component Architecture

• Q: What's the difference between functional and class components?
• A: See ComponentsScreen.tsx for functional component examples with hooks

State Management

• Q: When would you use Context vs Redux?
• A: Context example in HooksScreen.tsx with theme switching

Performance

• Q: How do you optimize FlatList performance?
• A: See PerformanceScreen.tsx for optimization techniques

Native Modules

• Q: When would you create a native module?
• A: See NativeModulesScreen.tsx for bridging concepts

Platform Differences

• Q: How do you handle iOS vs Android differences?
• A: See platform-specific code examples throughout the app

📚 Key Concepts Demonstrated

Hooks Patterns

// Custom hook example
const useCounter = (initialValue: number = 0) => {
  const [count, setCount] = useState(initialValue);
  const increment = useCallback(() => setCount(c => c + 1), []);
  const decrement = useCallback(() => setCount(c => c - 1), []);
  return { count, increment, decrement };
};

Performance Optimization

// Memoized component
const OptimizedComponent = React.memo(({ data, onPress }) => {
  const processedData = useMemo(() => {
    return data.map(item => item.toUpperCase());
  }, [data]);
  
  return (
    <FlatList
      data={processedData}
      renderItem={({ item }) => <Item onPress={onPress} />}
      keyExtractor={(item) => item.id}
      getItemLayout={(data, index) => ({ length: 50, offset: 50 * index, index })}
    />
  );
});

Platform-Specific Code

if (Platform.OS === 'ios') {
  // iOS-specific implementation
} else {
  // Android-specific implementation
}

🔧 Technologies Used

• React Native: Mobile app framework
• Expo: Development platform
• TypeScript: Type safety
• React Navigation: Navigation library
• React Hooks: State management
• Context API: Global state
• Expo modules: Device features

🎯 Interview Preparation Tips

1. Run the app and explore each screen
2. Read the code to understand implementation patterns
3. Modify examples to test your understanding
4. Practice explaining the concepts out loud
5. Review performance optimizations
6. Understand platform differences

🚀 Next Steps for Production

To make this production-ready:

• Add comprehensive error handling
• Implement proper testing (Jest, Detox)
• Add state management (Redux Toolkit)
• Implement proper navigation types
• Add proper logging and analytics
• Set up CI/CD pipeline
• Add proper app icons and splash screens

📖 Additional Resources

• React Native Documentation
• Expo Documentation
• React Navigation
• React Native Performance

🎉 Good Luck with Your Interview!

This playground covers the most common React Native interview topics. Make sure to run through each example and understand the underlying concepts. Remember to explain your thought process during the interview and be ready to discuss trade-offs and alternative approaches.

---

Built with ❤️ for React Native interview preparation