تطبيق «الميزان»: يدمج الإمالة

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;  const bx = Math.max(-70, Math.min(70, x * 2));  const by = Math.max(-70, Math.min(70, y * 2));  return (    <View style={styles.wrap}>      <View style={styles.dial}>        <View style={styles.center} />        <View style={[styles.bubble,          { backgroundColor: level ? '#2E7D32' : '#E8820C',            transform: [{ translateX: bx }, { translateY: by }] }]} />      </View>      <Text testID="status" style={[styles.status, { color: level ? '#2E7D32' : '#E8820C' }]}>        {level ? '✅ مستوٍ' : '↕ مائل'}      </Text>      <Text style={styles.read}>x={x}°  y={y}°</Text>    </View>  );} const styles = StyleSheet.create({  wrap: { padding: 16, alignItems: 'center' },  dial: { width: 180, height: 180, borderRadius: 90, borderWidth: 2, borderColor: '#ccc',          alignItems: 'center', justifyContent: 'center', backgroundColor: '#FAFAFA' },  center: { position: 'absolute', width: 60, height: 60, borderRadius: 30, borderWidth: 1, borderColor: '#ddd' },  bubble: { width: 36, height: 36, borderRadius: 18 },  status: { fontSize: 22, fontWeight: 'bold', marginTop: 14 },  read: { color: '#777', marginTop: 4 },});

import { useState } from 'react';import { View, Text, Pressable, StyleSheet } from 'react-native';import { useTilt } from 'smartdevice'; export default function App() {  const { x, y } = useTilt();  const [held, setHeld] = useState(null);  const shown = held || { x, y };  return (    <View style={styles.box}>      <Text style={styles.r}>x={shown.x}°  y={shown.y}°</Text>      <View style={styles.row}>        <Pressable style={styles.btn} onPress={() => setHeld({ x, y })}>          <Text style={styles.bt}>تثبيت</Text>        </Pressable>        <Pressable style={styles.btn} onPress={() => setHeld(null)}>          <Text style={styles.bt}>مباشر</Text>        </Pressable>      </View>    </View>  );} const styles = StyleSheet.create({  box: { padding: 20, alignItems: 'center' },  r: { fontSize: 22, fontWeight: 'bold', color: '#E8820C' },  row: { flexDirection: 'row', gap: 10, marginTop: 14 },  btn: { backgroundColor: '#E8820C', paddingVertical: 8, paddingHorizontal: 16, borderRadius: 8 },  bt: { color: 'white' },});