Why native features differentiate mobile apps in React Native - Build It to Prove It

Build: Native Features Demo

This screen shows how native features like camera access and device vibration make mobile apps special.

Target UI

-------------------------
| Native Features Demo   |
|-----------------------|
| [Take Photo]          |
|                       |
| [Vibrate Device]      |
|                       |
| Photo Preview:        |
| [No photo taken yet]  |
-------------------------

Add a button labeled 'Take Photo' that opens the device camera and shows the photo preview.

Add a button labeled 'Vibrate Device' that triggers device vibration for 500 milliseconds.

Show a placeholder text 'No photo taken yet' before any photo is taken.

Display the taken photo below the buttons after capture.

Starter Code

React Native

import React, { useState } from 'react';
import { View, Text, Button, Image, StyleSheet } from 'react-native';

export default function NativeFeaturesDemo() {
  const [photoUri, setPhotoUri] = useState(null);

  // TODO: Add function to handle taking photo

  // TODO: Add function to handle vibration

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Native Features Demo</Text>
      <Button title="Take Photo" onPress={() => { /* TODO */ }} />
      <View style={{ height: 20 }} />
      <Button title="Vibrate Device" onPress={() => { /* TODO */ }} />
      <View style={{ height: 20 }} />
      <Text style={styles.previewLabel}>Photo Preview:</Text>
      {photoUri ? (
        <Image source={{ uri: photoUri }} style={styles.photo} />
      ) : (
        <Text>No photo taken yet</Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, justifyContent: 'flex-start' },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
  previewLabel: { fontSize: 18, marginBottom: 10 },
  photo: { width: 300, height: 300, resizeMode: 'contain' }
});

Task 1

Task 2

Task 3

Solution

React Native

import React, { useState } from 'react';
import { View, Text, Button, Image, StyleSheet, Vibration, Platform } from 'react-native';
import * as ImagePicker from 'expo-image-picker';

export default function NativeFeaturesDemo() {
  const [photoUri, setPhotoUri] = useState(null);

  async function takePhoto() {
    const permissionResult = await ImagePicker.requestCameraPermissionsAsync();
    if (permissionResult.granted === false) {
      alert('Camera permission is required to take photos');
      return;
    }
    const result = await ImagePicker.launchCameraAsync({ quality: 0.5 });
    if (!result.canceled) {
      setPhotoUri(result.assets[0].uri);
    }
  }

  function vibrateDevice() {
    if (Platform.OS === 'android' || Platform.OS === 'ios') {
      Vibration.vibrate(500);
    } else {
      alert('Vibration not supported on this platform');
    }
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Native Features Demo</Text>
      <Button title="Take Photo" onPress={takePhoto} />
      <View style={{ height: 20 }} />
      <Button title="Vibrate Device" onPress={vibrateDevice} />
      <View style={{ height: 20 }} />
      <Text style={styles.previewLabel}>Photo Preview:</Text>
      {photoUri ? (
        <Image source={{ uri: photoUri }} style={styles.photo} />
      ) : (
        <Text>No photo taken yet</Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, justifyContent: 'flex-start' },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
  previewLabel: { fontSize: 18, marginBottom: 10 },
  photo: { width: 300, height: 300, resizeMode: 'contain' }
});

This app uses two native features: the camera and device vibration.

We use expo-image-picker to request camera permission and open the camera. When the user takes a photo, we save its URI and show it on screen.

For vibration, we use React Native's Vibration API to vibrate the device for 500 milliseconds. We check the platform to avoid errors on unsupported devices.

This shows how native features make mobile apps feel special and interactive.

Final Result

Completed Screen

-------------------------
| Native Features Demo   |
|-----------------------|
| [Take Photo]          |
|                       |
| [Vibrate Device]      |
|                       |
| Photo Preview:        |
| [photo shown here]    |
-------------------------

Tapping 'Take Photo' opens the camera to take a picture.

After taking a photo, the image appears below the buttons.

Tapping 'Vibrate Device' makes the phone vibrate for half a second.

Stretch Goal

Add a toggle button to switch between light and dark mode for the screen.

💡 Hint

Use React state to track mode and change background and text colors accordingly.

Practice

1. Why do mobile apps that use native features like camera and GPS feel faster and smoother?

easy

A. Because native features use more internet data

B. Because native features run directly on the phone's hardware

C. Because native features require more battery power

D. Because native features are written in JavaScript only

Solution

1. Step 1: Understand native feature execution

   Native features run directly on the phone's hardware, not through extra layers.

2. Step 2: Compare with non-native features

   Non-native features often run in a slower environment like a web view, causing delays.

3. Final Answer:

   Because native features run directly on the phone's hardware -> Option B

4. Quick Check:

   Native features = direct hardware use = faster [OK]

Hint: Native means direct hardware use, so it's faster [OK]

Common Mistakes:

• Thinking native features use more internet data
• Confusing battery use with speed
• Believing native features are only JavaScript

2. Which of the following is the correct way to import a native module in React Native?

easy

A. use Camera = import 'react-native-camera';

B. require('Camera').from('react-native');

C. import Camera from 'react-native-camera';

D. import { Camera } from 'react-native';

Solution

1. Step 1: Recall React Native import syntax

   React Native uses ES6 import syntax like import Module from 'package';.

2. Step 2: Check each option

   import Camera from 'react-native-camera'; matches correct syntax. Options A, B, and C are invalid or incorrect syntax.

3. Final Answer:

   import Camera from 'react-native-camera'; -> Option C

4. Quick Check:

   Correct import syntax = import Camera from 'react-native-camera'; [OK]

Hint: Use ES6 import syntax for native modules [OK]

Common Mistakes:

• Using require incorrectly
• Trying to destructure native modules not exported that way
• Using invalid keywords like 'use'

3. What will this React Native code output when accessing the device's GPS location?

import { useEffect, useState } from 'react';
import { View, Text } from 'react-native';
import Geolocation from '@react-native-community/geolocation';

export default function Location() {
  const [location, setLocation] = useState(null);
  useEffect(() => {
    Geolocation.getCurrentPosition(pos => {
      setLocation(pos.coords.latitude + ', ' + pos.coords.longitude);
    });
  }, []);
  return {location ?? 'Loading...'};
}

medium

A. Crashes because useState is not defined

B. Shows an error because Geolocation is not imported

C. Immediately shows 'null' without location

D. Displays 'Loading...' then shows latitude and longitude

Solution

1. Step 1: Analyze useEffect and Geolocation call

   On mount, getCurrentPosition runs and sets location state asynchronously.

2. Step 2: Understand initial and updated state

   Initially, location is null, so 'Loading...' shows. After position is fetched, location updates to coordinates string.

3. Final Answer:

   Displays 'Loading...' then shows latitude and longitude -> Option D

4. Quick Check:

   Async location fetch = 'Loading...' then coords [OK]

Hint: Async state updates show loading first, then data [OK]

Common Mistakes:

• Assuming location is available immediately
• Forgetting to import Geolocation
• Confusing null with error

4. This React Native code tries to use the camera but fails. What is the main error?

import { Camera } from 'react-native-camera';

export default function App() {
  return ;
}

medium

A. Camera is not a named export from 'react-native-camera'

B. Missing useState hook for Camera component

C. Camera component must be wrapped in a View

D. React Native does not support camera access

Solution

1. Step 1: Check import statement correctness

   'react-native-camera' exports Camera as default, not named export, so import must be default.

2. Step 2: Identify correct import syntax

   Correct import is import Camera from 'react-native-camera'; not destructured import.

3. Final Answer:

   Camera is not a named export from 'react-native-camera' -> Option A

4. Quick Check:

   Default export requires default import [OK]

Hint: Default exports need default import, not curly braces [OK]

Common Mistakes:

• Using named import for default export
• Assuming Camera needs useState
• Thinking camera access is unsupported

5. You want to build a React Native app that uses the phone's native push notifications and GPS together. Which approach best ensures smooth performance and user experience?

hard

A. Use React Native libraries that wrap native modules for notifications and GPS

B. Write all features in JavaScript without native modules

C. Use web APIs inside a WebView for notifications and GPS

D. Only use GPS and skip notifications to reduce complexity

Solution

1. Step 1: Understand native module benefits

   Native modules provide direct access to device features, improving speed and reliability.

2. Step 2: Evaluate options for combining features

   Using React Native libraries that wrap native modules allows easy access to both notifications and GPS with good performance.

3. Step 3: Reject less optimal choices

   Pure JavaScript or WebView approaches are slower and less reliable. Skipping features reduces app value.

4. Final Answer:

   Use React Native libraries that wrap native modules for notifications and GPS -> Option A

5. Quick Check:

   Native wrappers = best performance and UX [OK]

Hint: Use native wrappers for best speed and experience [OK]

Common Mistakes:

• Trying to do everything in JavaScript only
• Using WebView for native features
• Avoiding features to reduce work