Device info and haptics in React Native - Mini App: Build & Ship

Build: Device Info and Haptics

This screen shows basic device information and has a button that triggers a vibration when pressed.

Target UI

-------------------------
| Device Info and Haptics |
-------------------------

Device Brand: 
Device Model: 
System Version: 

[ Vibrate Button ]

Display device brand, model, and system version using react-native-device-info

Add a button labeled 'Vibrate Button'

When the button is pressed, trigger a short vibration using React Native's Vibration API

Use functional components and hooks

Ensure the UI is simple and readable

Starter Code

React Native

import React, { useState, useEffect } from 'react';
import { View, Text, Button, Vibration, StyleSheet } from 'react-native';
import DeviceInfo from 'react-native-device-info';

export default function DeviceInfoHaptics() {
  const [brand, setBrand] = useState('');
  const [model, setModel] = useState('');
  const [systemVersion, setSystemVersion] = useState('');

  useEffect(() => {
    // TODO: Get device info here
  }, []);

  const handleVibrate = () => {
    // TODO: Trigger vibration here
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Device Info and Haptics</Text>
      <Text>Device Brand: {brand}</Text>
      <Text>Device Model: {model}</Text>
      <Text>System Version: {systemVersion}</Text>
      <View style={styles.buttonContainer}>
        <Button title="Vibrate Button" onPress={handleVibrate} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 20
  },
  buttonContainer: {
    marginTop: 30,
    width: '60%'
  }
});

Task 1

Task 2

Solution

React Native

import React, { useState, useEffect } from 'react';
import { View, Text, Button, Vibration, StyleSheet } from 'react-native';
import DeviceInfo from 'react-native-device-info';

export default function DeviceInfoHaptics() {
  const [brand, setBrand] = useState('');
  const [model, setModel] = useState('');
  const [systemVersion, setSystemVersion] = useState('');

  useEffect(() => {
    setBrand(DeviceInfo.getBrand());
    setModel(DeviceInfo.getModel());
    setSystemVersion(DeviceInfo.getSystemVersion());
  }, []);

  const handleVibrate = () => {
    Vibration.vibrate(100); // vibrate for 100 milliseconds
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Device Info and Haptics</Text>
      <Text>Device Brand: {brand}</Text>
      <Text>Device Model: {model}</Text>
      <Text>System Version: {systemVersion}</Text>
      <View style={styles.buttonContainer}>
        <Button title="Vibrate Button" onPress={handleVibrate} accessibilityLabel="Trigger device vibration" />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 20
  },
  buttonContainer: {
    marginTop: 30,
    width: '60%'
  }
});

We use react-native-device-info to get device details like brand, model, and system version. These values are stored in state variables and shown on screen.

The useEffect hook runs once when the component loads to fetch and set this info.

The handleVibrate function uses React Native's Vibration.vibrate() method to make the device vibrate for 100 milliseconds when the button is pressed.

The UI is simple with text labels and a button, styled for clarity and accessibility.

Final Result

Completed Screen

-------------------------
| Device Info and Haptics |
-------------------------

Device Brand: Apple
Device Model: iPhone 13
System Version: 16.4

[ Vibrate Button ]

When the screen loads, device info text updates with actual device data.

Pressing the 'Vibrate Button' causes the device to vibrate shortly.

Stretch Goal

Add a toggle switch to enable or disable vibration feedback.

💡 Hint

Use React Native's Switch component and conditionally call Vibration.vibrate() only when enabled.