الإمالة والحركة: مستشعر التسارع

import { View, Text, StyleSheet } from 'react-native';import { useTilt } from 'smartdevice'; export default function App() {  const tilt = useTilt();              // { x, y } بالدرجات  return (    <View style={styles.box}>      <Text style={styles.v}>x: {tilt.x}°</Text>      <Text style={styles.v}>y: {tilt.y}°</Text>    </View>  );} const styles = StyleSheet.create({  box: { padding: 24, alignItems: 'center' },  v: { fontSize: 22, fontWeight: 'bold', color: '#E8820C', marginVertical: 4 },});

import { View, StyleSheet } from 'react-native';import { useTilt } from 'smartdevice'; export default function App() {  const tilt = useTilt();  const dx = tilt.x * 2;              // كبّر الأثر  const dy = tilt.y * 2;  return (    <View style={styles.arena}>      <View style={[styles.ball, { transform: [{ translateX: dx }, { translateY: dy }] }]} />    </View>  );} const styles = StyleSheet.create({  arena: { height: 220, margin: 12, borderRadius: 16, backgroundColor: '#FFF3E0', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' },  ball: { width: 44, height: 44, borderRadius: 22, backgroundColor: '#E8820C' },});

import { View, Text, StyleSheet } from 'react-native';import { useTilt } from 'smartdevice'; export default function App() {  const { x, y } = useTilt();  const level = Math.abs(x) <= 3 && Math.abs(y) <= 3;  return (    <View style={[styles.box, { backgroundColor: level ? '#C8E6C9' : '#FFCDD2' }]}>      <Text style={styles.t}>{level ? '✅ مستوٍ' : '↕ مائل'}</Text>      <Text style={styles.s}>x={x}°  y={y}°</Text>    </View>  );} const styles = StyleSheet.create({  box: { padding: 30, alignItems: 'center', borderRadius: 16, margin: 12 },  t: { fontSize: 26, fontWeight: 'bold' },  s: { marginTop: 8, color: '#444' },});