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.