Activity 13: Motion Fun - Complete Solution

This is the complete working solution for Activity 13: Motion Fun. All TODOs have been implemented with best practices.

🎯 What's Implemented

This solution includes:

• ✅ Shake detection using accelerometer data
• ✅ Background color changes based on device tilt
• ✅ Real-time sensor data display (accelerometer + gyroscope)
• ✅ Smooth performance with optimized update intervals
• ✅ Proper cleanup on component unmount

🚀 Quick Start

Step One: Install Dependencies

cd activity-13-motion-fun-solution
npm install --legacy-peer-deps

Step 2: Run on Physical Device

npx expo start

Important: This app requires a physical device with motion sensors. Web preview will not work.

📝 Implementation Details

Shake Detection Algorithm

Threshold-based Detection:

const threshold = 1.5;
const isShaking =
  Math.abs(data.x) > threshold ||
  Math.abs(data.y) > threshold ||
  Math.abs(data.z) > threshold;

if (isShaking) {
  setShakeCount(prev => prev + 1);
}

How it works:

• Accelerometer measures acceleration in all three axes (x, y, z)
• Sharp movements (shakes) cause acceleration spikes
• Threshold of 1.5 g-force filters normal movement
• Any axis exceeding threshold triggers shake detection

Why 1.5?

• Too low (< 1.0): False positives from normal handling
• Too high (> 2.5): Requires very vigorous shaking
• One.5 provides good balance for natural shake gestures

Tilt-Based Color Changes

Gyroscope Mapping:

let newColor = '#1f2937'; // Default gray

if (data.x > 0.3) {
  newColor = '#ef4444'; // Red - tilted right
} else if (data.x < -0.3) {
  newColor = '#3b82f6'; // Blue - tilted left
} else if (data.y > 0.3) {
  newColor = '#eab308'; // Yellow - tilted forward
} else if (data.y < -0.3) {
  newColor = '#22c55e'; // Green - tilted backward
}

setBackgroundColor(newColor);

How it works:

• Gyroscope measures rotation rate (rad/s) around each axis
• X-axis: Roll (left/right tilt)
• Y-axis: Pitch (forward/backward tilt)
• Z-axis: Yaw (rotation around vertical)
• Threshold of 0.3 rad/s prevents jitter

Color Mapping Logic:

• Red (Right): Device tilted to the right
• Blue (Left): Device tilted to the left
• Yellow (Forward): Top of device toward user
• Green (Backward): Top of device away from user
• Gray (Neutral): Device held flat or below threshold

🎨 Performance Optimizations

One. Update Interval

Accelerometer.setUpdateInterval(100); // 10 Hz
Gyroscope.setUpdateInterval(100);

Why 100ms?

• Fast enough for responsive UI (10 updates/second)
• Slow enough to conserve battery
• Prevents overwhelming React state updates

2. Subscription Cleanup

return () => {
  accelerometerSubscription && accelerometerSubscription.remove();
  gyroscopeSubscription && gyroscopeSubscription.remove();
};

Purpose:

• Prevents memory leaks
• Stops sensor updates when component unmounts
• Essential for battery life

3. State Management

// Functional updates prevent stale closures
setShakeCount(prev => prev + 1);

Best Practice:

• Using prev => prev + 1 ensures correct increments
• Avoids issues with rapid state updates
• Works correctly even with multiple shakes/second

🧪 Testing Scenarios

Test Shake Detection

1. Gentle shake: Should not trigger (< 1.5 threshold)
2. Vigorous shake: Counter increments rapidly
3. Continuous shake: Each shake registers separately

Test Tilt Colors

1. Hold flat: Gray background
2. Tilt right slowly: Changes to red at 0.3 rad/s
3. Tilt left: Changes to blue
4. Tilt forward/back: Yellow/green respectively
5. Return to flat: Returns to gray

Edge Cases

• Multiple rapid shakes: Counter should increment correctly
• Tilt while shaking: Both features work independently
• Background app: Sensors pause automatically
• Device rotation: Values adjust to new orientation

🎓 Learning Outcomes

Sensor Understanding:

• Accelerometer vs Gyroscope differences
• 3-axis coordinate system
• Threshold-based event detection

React Native Skills:

• Subscribing to sensor updates
• Managing real-time data streams
• Proper cleanup in useEffect
• Dynamic styling with state

Motion Detection Algorithms:

• Shake detection patterns
• Tilt mapping strategies
• Noise filtering techniques

🚀 Extension Ideas

Beginner

• Add debouncing to prevent rapid shake counts
• Display "Shaking!" indicator
• Add reset button

Intermediate

• Implement smooth color transitions with Animated API
• Add haptic feedback on shake
• Track shake intensity (force)

Advanced

• Create shake gesture recognition (patterns)
• Build tilt-controlled game
• Implement motion-based navigation

📚 Technical Deep Dive

Accelerometer Data

• Units: g-force (1g = 9.81 m/s²)
• Range: Typically +/-2g to +/-16g
• Use cases: Shake, free fall, tap detection

Gyroscope Data

• Units: rad/s (radians per second)
• Range: Typically +/-250°/s to +/-2000°/s
• Use cases: Rotation, tilt, orientation

Sensor Fusion

Combining both sensors provides:

• More accurate motion tracking
• Better gesture recognition
• Reduced individual sensor errors

💡 Common Issues & Solutions

Issue: Counter increments even when still Solution: Increase threshold from 1.5 to 2.0

Issue: Colors flicker rapidly Solution: Increase gyroscope threshold from 0.3 to 0.5

Issue: Battery drains quickly Solution: Increase update interval to 200-500ms

Issue: Sensors not available Solution: Must use physical device, not simulator

🔗 Resources

Expo Documentation:

• Accelerometer API
• Gyroscope API

Motion Sensors:

• MDN Sensor APIs
• Apple Core Motion
• Android Sensors

🎉 Solution Complete!

This implementation demonstrates:

• Professional sensor handling
• Clean React patterns
• Real-world motion detection
• Battery-efficient design

Next Steps:

• Study the implementation
• Test on multiple devices
• Try the extension challenges
• Integrate into your projects!

Activity 13 Solution | M1: Mobile Foundations | Expo SDK 53 | React Native 0.79.5