Skip to main content

FAQ

Step-by-step diagnostic procedures and solutions for common setup, build, and development issues in React Native.

1. Setup & Environment​

Q1. What prerequisites are required before the React Native workshop?

Android Development Requirements​

  • Node.js (LTS v20+ or v22.11+)
  • npm package manager
  • JDK 17 (Zulu or Microsoft OpenJDK)
  • Android Studio (Latest stable version)
  • Android SDK Platform (API 34)
  • Android SDK Build-Tools
  • Android SDK Platform-Tools (adb)
  • Android Emulator or physical Android device with USB debugging enabled
  • VS Code with React Native / TypeScript extensions
  • Git

For iOS development, macOS users also require Xcode and CocoaPods.

Workshop Tip

Complete all setup steps before the session to avoid installation issues during hands-on coding exercises.

Q2. My terminal says "command not found" or "not recognized as an internal or external command".

Example errors:

command not found: node

or on Windows:

'node' is not recognized as an internal or external command

Common Causes & Solutions​

  1. Software not installed: Download and run the official installer.
  2. Missing from PATH: The program directory is not included in system PATH.
  3. Terminal opened before installation: Restart the terminal or VS Code window.
Q3. I installed something but the terminal still cannot find it.

Restart the following applications to reload system environment variables:

  • Terminal / PowerShell
  • VS Code
  • Android Studio

If necessary, restart the computer. Environment variable changes are not visible to applications that were already running.

2. Java & JDK​

Q4. Why does React Native Android need Java?

Android builds use Gradle, and Gradle requires a compatible Java Virtual Machine runtime (JDK 17).

Verify your installed Java version:

Terminal
java -version
javac -version
Q5. I get "JAVA_HOME is not set". What should I do?

Configure the JAVA_HOME environment variable to point to your JDK directory.

PowerShell
echo $env:JAVA_HOME
java -version

Set JAVA_HOME in System Properties → Environment Variables to your JDK path (e.g. C:\Program Files\Microsoft\jdk-17.x.x).

Restart your terminal afterward.

Q6. I have multiple Java versions installed. Which one should I use?

Check your active Java version:

Terminal
java -version

and check Gradle's runtime Java:

Terminal
cd android
./gradlew -version
Version Compatibility

Use JDK 17 for modern React Native. Do not assume the newest Java version (e.g. Java 21+) is automatically compatible with older Gradle plugins.

3. Android Studio & SDK​

Q7. What should I install in Android Studio?

In Android Studio → Settings/Preferences → Languages & Frameworks → Android SDK, ensure these are installed:

  • Android SDK
  • Android SDK Platform (API 34)
  • Android SDK Build-Tools
  • Android SDK Platform-Tools
  • Android Emulator
  • Android SDK Command-line Tools
Q8. Where can I find Android SDK settings?

In Android Studio, navigate to: Settings/Preferences → Languages & Frameworks → Android SDK

Default paths:

  • macOS: ~/Library/Android/sdk
  • Windows: %LOCALAPPDATA%\Android\Sdk
Q9. Android Studio has an SDK, but React Native cannot find it.

Set ANDROID_HOME in your environment, or specify it explicitly in android/local.properties:

android/local.properties
sdk.dir=C\:\\Users\\<Your-Username>\\AppData\\Local\\Android\\Sdk
Q10. I get "SDK location not found".

Check:

  1. Android Studio has the Android SDK installed.
  2. ANDROID_HOME environment variable is configured.
  3. Platform-Tools is installed.
  4. Your terminal was restarted after changing environment variables.
Q11. What is adb?

adb stands for Android Debug Bridge. It allows your computer to communicate with connected Android devices and emulators.

Verify adb:

Terminal
adb version
adb devices
Q12. adb is not recognized as a command.

Your Android SDK platform-tools directory is missing from PATH.

  • Windows: Add %LOCALAPPDATA%\Android\Sdk\platform-tools to User Path.
  • macOS: Add export PATH=$PATH:$ANDROID_HOME/platform-tools to ~/.zshrc.

Restart the terminal after updating.

4. Emulator & Physical Device​

Q13. How do I create an Android Emulator?

In Android Studio:

  1. Open Device Manager → Create Device.
  2. Choose a hardware profile (e.g. Pixel 7).
  3. Select an Android system image (API 34).
  4. Click Finish, then press the Play button to start the emulator.
Q14. The Android Emulator is very slow.
  • Enable hardware virtualization in BIOS (Intel VT-x / AMD-V).
  • Allocate at least 2048 MB RAM in emulator settings.
  • Use an x86_64 system image (or ARM64 on Apple Silicon).
  • Close heavy background applications.
Q15. The emulator is stuck on the boot screen.
  1. Stop the emulator.
  2. Start it with Cold Boot Now from the Device Manager menu.
  3. If still stuck, select Wipe Data.
  4. Recreate the emulator if wiping data fails.
Q16. React Native says no Android device was found.

Run:

Terminal
adb devices

If the list is empty, start the Android emulator or connect a physical device with USB debugging enabled.

Q17. Can I use my physical Android phone?

Yes.

  1. Enable Developer Options (tap Build Number 7 times in Settings → About Phone).
  2. Turn on USB Debugging.
  3. Connect the phone to your computer via USB.
  4. Run adb devices to confirm connection.
Q18. My phone shows "unauthorized" in adb devices.

Unlock your phone and accept the prompt: "Allow USB debugging from this computer?". Check "Always allow" and tap OK.

Then run:

Terminal
adb devices
Q19. My phone does not appear in adb devices.
  • Use a data-transfer capable USB cable (some cables only provide power).
  • Change USB mode on your phone to File Transfer (MTP).
  • Install OEM USB drivers on Windows.
  • Try a different USB port.

5. React Native Setup​

Q20. How do I create a React Native project?

Initialize using the React Native Community CLI:

Terminal
npx @react-native-community/cli@latest init ReactionGame
cd ReactionGame
Q21. Should I use Expo or React Native CLI?
  • Expo: Best for beginners and quick prototypes without complex native build setup.
  • React Native CLI: Required when working directly with native Android/iOS code, Gradle, or native SDK integrations.
Q22. I created the project in the wrong folder.

Navigate to the correct folder in your terminal:

Terminal
cd path/to/ReactionGame
ls

Confirm that package.json, android/, and src/ exist in the directory.

Q23. How do I run the React Native Android app?

In the project root directory:

Terminal 1: Metro
npm start

In a second terminal window:

Terminal 2: Android
npm run android
Q24. npm run android says no device is connected.

Verify connected devices:

Terminal
adb devices

Start the emulator from Android Studio or connect your physical device.

6. Metro & Dependencies​

Q25. What is Metro?

Metro is React Native's JavaScript/TypeScript bundler. It compiles, bundles, and serves your code to the running application with Fast Refresh.

Q26. Metro is showing old code.

Restart Metro with a clean cache:

Terminal
npx react-native start --reset-cache

Then reload the app by pressing R twice on the Android emulator.

Q27. I get "Unable to resolve module".

Example:

Unable to resolve module './Button'

Checklist​

  • Ensure the file exists at the specified relative path.
  • Check case-sensitivity (Button.tsx vs button.tsx).
  • If importing a third-party library, verify it is listed in package.json and run npm install.
Q28. I get "No script URL provided".
  1. Ensure the Metro bundler is running (npm start).
  2. Verify emulator or physical device can reach the host machine.
  3. Reload the application.
Q29. npm install fails.
  1. Verify Node and npm versions: node --version, npm --version.
  2. Ensure you are inside the project folder containing package.json.
  3. Run npm install.
Q30. npm shows an ERESOLVE dependency conflict.

Identify which package versions conflict before using override flags. If necessary for the workshop dependencies, use:

Terminal
npm install --legacy-peer-deps
Q31. node_modules looks broken.

To perform a clean reinstall of dependencies:

PowerShell
Remove-Item -Recurse -Force node_modules
npm install

7. Gradle & Android Build​

Q32. What is Gradle?

Gradle is the native build system for Android. It compiles Java/Kotlin/C++ source code, downloads native dependencies, and packages the Android APK.

Q33. I get "Gradle build failed". What should I read?

Do not stop at BUILD FAILED. Look up in the terminal output for:

  • What went wrong:
  • Caused by:

To view full stack trace information:

Terminal
cd android
./gradlew assembleDebug --stacktrace
Q34. Gradle cannot download dependencies.
  • Check internet connection, proxy, or VPN.
  • Some company networks block Gradle maven repositories.
  • Run ./gradlew build --refresh-dependencies in android/.
Q35. I have a Gradle dependency version conflict.

Avoid randomly modifying Gradle, Kotlin, or React Native versions in android/build.gradle. Keep dependencies aligned with the project repository version.

Q36. The Android build broke after I changed Java.

Verify Java runtime version:

Terminal
java -version
cd android
./gradlew -version

Confirm that Gradle is using JDK 17.

8. TypeScript​

Q37. What is TypeScript?

TypeScript adds static type definitions to JavaScript, catching type errors during development before runtime.

TypeScript Example
const score: number = 10;
Q38. What is the difference between .js, .ts, and .tsx?
  • .js: Standard JavaScript
  • .ts: TypeScript without JSX
  • .tsx: TypeScript containing JSX (React Native UI components)
Q39. TypeScript rejects code that JavaScript would accept.
Type Checking
// Invalid in TypeScript
const score: number = "10";

// Correct
const score: number = 10;
Q40. I get "Type 'string' is not assignable to type 'number'".

Parse string values (such as text input results) before assigning them to numeric variables:

Type Conversion
const score: number = Number(inputValue);
Q41. I get "Object is possibly 'undefined'".

Use optional chaining (?.) or fallback values (??):

Safe Access
const userName = user?.name ?? "Guest";
Q42. I get "Property does not exist on type".

Update your interface or type definition to include the property:

Type Definition
type Player = {
  id: string;
  name: string;
  score: number;
};
Q43. Should I use 'any' to remove TypeScript errors?

Avoid any as a default workaround. Use explicit interfaces to retain autocomplete and type verification.

9. React Native Coding & UI​

Q44. What is JSX?

JSX allows you to write component UI structure inside JavaScript and TypeScript:

JSX Example
<View>
  <Text>Hello React Native</Text>
</View>
Q45. "View is not defined" or "Text is not defined".

Import core components from 'react-native':

Import Components
import { View, Text } from "react-native";
Q46. My JSX tag is not closed properly.

Every JSX element must be properly closed:

Properly Closed Tags
<View>
  <Text>Hello</Text>
</View>
Q47. Why can't I use div, button, p, img, or input?

React Native does not use browser HTML elements. Use native components:

  • <div> → <View>
  • <p> / <span> → <Text>
  • <button> → <Pressable>
  • <img> → <Image>
  • <input> → <TextInput>
Q48. What are props?

Props allow parent components to pass data to child components:

Props Example
type PlayerProps = {
  name: string;
};

function Player({ name }: PlayerProps) {
  return <Text>{name}</Text>;
}

// Usage:
<Player name="Alex" />
Q49. TypeScript says a prop is missing.

Provide all required props or mark them optional in the type definition with ?:

Optional Prop
type PlayerProps = {
  name: string;
  score?: number;
};
Q50. How do I make a prop optional?

Add a question mark ? next to the property name in the type definition:

Optional Property
type PlayerProps = {
  name: string;
  score?: number;
};
Q51. How do I create and use state?
useState Hook
const [score, setScore] = useState(0);
Q52. Why is changing a state variable directly wrong?

Never mutate state directly:

State Mutation
// Incorrect: Will not trigger UI re-render
score = score + 1;

// Correct
setScore(score + 1);
Q53. When should I use the previous-state updater function?

Use the updater function when the new value depends on the previous state:

Functional State Update
setScore((prev) => prev + 1);
Q54. My state has the wrong TypeScript type.

Provide an explicit generic type to useState:

Explicit State Type
const [user, setUser] = useState<User | null>(null);
Q55. What is useEffect used for?

Common use cases include API fetching, subscriptions, setting intervals/timers, and synchronizing with external systems.

Q56. What does an empty dependency array [] mean?
Mount Effect
useEffect(() => {
  console.log("Component mounted");
}, []);

The effect runs once when the component mounts.

Q57. My useEffect runs in an infinite loop.

Avoid updating state inside an effect if that same state variable is in the dependency array:

Infinite Loop Hazard
// Incorrect: Triggers re-render on every score update
useEffect(() => {
  setScore(score + 1);
}, [score]);
Q58. My timer keeps running after switching screens.

Return a cleanup function from useEffect:

Timer Cleanup
useEffect(() => {
  const interval = setInterval(() => {
    // Timer tick
  }, 1000);

  return () => clearInterval(interval);
}, []);
Q59. How do I handle button press events?
Pressable Component
<Pressable onPress={handlePress}>
  <Text>Tap Here</Text>
</Pressable>
Q60. My button function executes immediately on render.

Pass a function reference, not a function call:

Event Handlers
// Incorrect: Executes during render
<Pressable onPress={handlePress()} />

// Correct
<Pressable onPress={handlePress} />

// Correct with arguments
<Pressable onPress={() => handlePress(id)} />
Q61. How do I style React Native components?
StyleSheet.create
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});
Q62. Why doesn't standard CSS syntax work?

React Native styles use camelCase property names:

  • backgroundColor: "blue" (not background-color: blue)
  • fontSize: 16 (not font-size: 16px)
Q63. My screen does not fill the device viewport.

Apply flex: 1 to the root container view:

Full Screen Flex
container: {
  flex: 1,
}
Q64. My layout is arranged horizontally instead of vertically.

React Native defaults to flexDirection: "column". Check if flexDirection: "row" was set on the container.

Q65. My randomly positioned elements render outside the screen.

Calculate random positions using device dimensions from Dimensions.get('window') or useWindowDimensions(), subtracting element width and safe area margins.

Q66. How do I display a scrollable list of items?

Use FlatList:

FlatList Example
<FlatList
  data={players}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <Text>{item.name}</Text>}
/>
Q67. FlatList warns about missing keys.

Supply a keyExtractor returning unique IDs:

Key Extractor
keyExtractor={(item) => item.id}
Q68. FlatList is not scrolling.
  • Check if parent container has flex: 1.
  • Avoid nesting a FlatList inside a ScrollView with the same scroll direction.
Q69. How does navigation work in React Native?

React Navigation manages navigation stacks and tabs between screens (Home → Game → Result).

Q70. Screen not found navigation error.

Verify the route name matches the name registered in your navigator configuration.

Q71. TypeScript navigation parameters are invalid.

Define a param list type for your navigator:

Navigation Types
type RootStackParamList = {
  Home: undefined;
  Game: { difficulty: string };
  Result: { score: number };
};

10. Debugging​

Q78. How should I debug React Native issues?
  • Inspect console logs in the Metro terminal.
  • Check the on-screen RedBox error stack trace.
  • Use console.log("key:", value) targeted logs.
Q79. I see a RedBox error screen. What should I read?

Read the first error at the top:

  1. Error name
  2. Target file name
  3. Line number
  4. Top line of the stack trace
Q80. The app crashes unexpectedly without clear logs.
  • Run npx react-native log-android to view native logcat logs.
  • Revert your most recent changes incrementally to identify the regression.
Q81. Should I leave console.log statements in code?

Use targeted debugging logs during development, and clean them up before finalizing code.

11. Emergency Recovery​

Q89. Everything is broken. What is the reset sequence?

Follow this recovery order:

  1. Device: adb devices
  2. Metro: npx react-native start --reset-cache
  3. Gradle: cd android && ./gradlew clean && cd ..
  4. Build: npm run android
Q90. Should I delete node_modules and Gradle caches immediately?

No. Identify the specific error first. Re-downloading entire caches takes time and can introduce new dependency issues.