الكاميرا: التقاط صورة وعرضها

import { useState, useEffect } from 'react';import { View, Text, StyleSheet } from 'react-native';import SmartDevice from 'smartdevice'; export default function App() {  const [shot, setShot] = useState(null);   useEffect(() => {    const stop = SmartDevice.on('camera', (c) => {      if (c.active) setShot(c.frame);           // التقطت لقطة    });    return stop;  }, []);   return (    <View style={styles.box}>      <View style={styles.viewfinder}>        <Text style={styles.frame}>{shot || 'اضغط «التقط»'}</Text>      </View>      <Text style={styles.cap}>{shot ? 'آخر لقطة: ' + shot : 'لا توجد صورة بعد'}</Text>    </View>  );} const styles = StyleSheet.create({  box: { padding: 16, alignItems: 'center' },  viewfinder: { width: 220, height: 150, backgroundColor: '#111', borderRadius: 14, alignItems: 'center', justifyContent: 'center' },  frame: { color: '#fff', fontSize: 30 },  cap: { marginTop: 12, color: '#555' },});

import { useState, useEffect } from 'react';import { View, Text, FlatList, StyleSheet } from 'react-native';import SmartDevice from 'smartdevice'; export default function App() {  const [album, setAlbum] = useState([]);   useEffect(() => {    return SmartDevice.on('camera', (c) => {      if (c.active) setAlbum((prev) => [{ id: String(c.ts), frame: c.frame }, ...prev]);    });  }, []);   return (    <View style={{ padding: 12 }}>      <Text style={styles.h}>الألبوم ({album.length})</Text>      <FlatList        horizontal        data={album}        keyExtractor={(it) => it.id}        renderItem={({ item }) => <Text style={styles.thumb}>{item.frame}</Text>}        ListEmptyComponent={<Text style={styles.empty}>التقط صورًا لتظهر هنا</Text>}      />    </View>  );} const styles = StyleSheet.create({  h: { fontWeight: 'bold', fontSize: 16, marginBottom: 8 },  thumb: { fontSize: 34, padding: 8, backgroundColor: '#FFF3E0', borderRadius: 10, marginEnd: 8 },  empty: { color: '#888' },});