React Native Assignment– 1

Introduction & Setup

Basic Questions

  1. Install Node.js and verify the version with node -v and npm -v.
  2. Install the React Native CLI globally and confirm installation.
  3. Install Expo CLI and run expo –version to check it works.
  4. Create a new React Native project using React Native CLI.
  5. Create another project using Expo CLI and compare the initial setup.
  6. Run the CLI project on an Android Emulator and take a screenshot.
  7. Run the Expo project in Expo Go App on a physical device.
  8. Modify App.js to display “Hello React Native” on the screen.
  9. Use Hot Reloading/Fast Refresh: change text color and confirm instant update.
  10. Open the android folder in your CLI project and locate the MainActivity.java file.
  11. Open the ios folder and identify the .xcodeproj file in Xcode.
  12. Create a src/components folder and add a HelloWorld.js component.
  13. Import and render HelloWorld inside App.js.
  14. Use Platform.OS to conditionally render “Android View” or “iOS View”.
  15. Add a <View> with <Text> styled differently for Android and iOS.
  16. Create a small list of 5 items in JSX and render it with map().
  17. Add conditional rendering: if list length = 0, show “No items available”.
  18. Inspect package.json and add a custom script npm run hello to print “Hello World”.
  19. Run the app in USB Debugging mode on an Android device.
  20. Run the app in iOS Simulator using npx react-native run-ios.

Intermediate Questions

  1. Configure ANDROID_HOME environment variable and verify it with echo $ANDROID_HOME.
  2. Set up an Android Virtual Device (AVD) in Android Studio.
  3. Create and run a new iOS simulator from Xcode.
  4. Add an image to the assets folder and display it using <Image> in React Native.
  5. Create a component UserCard that takes name and email as props.
  6. Import UserCard twice with different data and render both.
  7. Add a button that updates a state variable using useState and display the new value.
  8. Enable Fast Refresh and test it by editing a component’s background color.
  9. Add a new file babel.config.js and confirm the app runs without errors.
  10. Configure a metro.config.js file to include a custom assets folder.
  11. Modify .gitignore to exclude node_modules and test it with Git.
  12. Run npm run android and record the startup time.
  13. Run expo start and scan QR code with Expo Go app.
  14. Modify App.js to render 3 components: Header, Content, and Footer.
  15. Pass props from App → Content component and render dynamically.
  16. Create a stateful counter app with + and – buttons.
  17. Add conditional JSX to show “Even” or “Odd” based on the counter value.
  18. Create a scrollable list with ScrollView and 20 items.
  19. Add TouchableOpacity to simulate button clicks.
  20. Test your app with both dark and light mode settings on emulator.

Advanced Questions

  1. Create a cross-platform button: styled differently for iOS and Android using Platform.select().
  2. Write a custom component PlatformMessage that shows “Welcome iOS” or “Welcome Android” automatically.
  3. Add a custom hook useDevicePlatform that returns platform details.
  4. Create a dynamic form with 3 input fields and render them using map().
  5. Implement conditional rendering: show an image if platform = Android, else show text.
  6. Create a reusable layout component with slots for Header, Body, and Footer.
  7. Add a configuration to babel.config.js to use a custom plugin and test it.
  8. Modify metro.config.js to support SVG imports and render an SVG image.
  9. Build a list component that dynamically updates when you add/remove items from state.
  10. Final Hands-on Project:
    • Initialize a new React Native app (CLI or Expo)
    • Configure Android and iOS emulators
    • Set up folder structure (src, assets, components)
    • Create 3 components (Header, Content, Footer)
    • Add conditional JSX and list rendering
    • Configure package.json and metro bundler
    • Run on Android emulator + iOS simulator + physical device with Expo