أحمد عبد الله2

التطبيق يطلب منى clean up ل useEffect كيف افعلها ؟؟ هذا هو الكود const [modalVisiable, setModalVisiable] = useState(false); const [selectedType, setSelectedType] = useState("نوع المخالفة"); const [location, setLocation] = useState(initLocation); const [errorMsg, setErrorMsg] = useState(null); // const [startCamera, setStartCamera] = useState(false); const [capturedImage, setCapturedImage] = useState(null); const [waitMessage, setWaitMessage] = useState(""); const __takePicture = async () => { if (!camera) return; setWaitMessage("انتظر قليلا حتى يتم تحويلك"); const photo = await camera.takePictureAsync(); console.log(photo); setCapturedImage(photo); console.log(capturedImage); setStartCamera(false); setWaitMessage(""); }; let camera = Camera; useEffect(() => { (async () => { let { status } = await Location.requestForegroundPermissionsAsync(); if (status !== "granted") { setErrorMsg("يجب عليك ان توافق على التصريح"); return; } let location = await Location.getCurrentPositionAsync({}); setLocation(location); })(); }, []);

شكرا أخى على الاجابة الرائعة .. لكنى جربت مكتبة مختلفة وهى اسمها react-native-qrcode-scanner .. وهى مكتبة رائعة وجيدة جدا وقمت بتجربته ونجحت .. لكن شئ اخير وهى طريقة لجلب ال value الخاص ب QR .. انا قمت بعمل log للداتا القادمة منه عن طريق هذا الكود const ifScanned = e => { Linking.openURL(e.data).catch(err => Alert.alert('envalid Code ', e.data)); console.log(e.data); }; لاحظ معى قمت بعمل log للداتا .. وقمت بتجربة التطبيق على QR Code الخاص بصفحة ويكيبديا وعندما أضع شاشة الهاتف على ال QR Code فانه يقوم بفتح موقع خاص ب ويكيبديا .. ويظهر لى فى log هذا .. LOG http://en.m.wikipedia.org نعم هذا الرابط هو ما ظهر لى فى ال Log لا تتعجب هل هذا يعتبر ال Value الخاصة ب QR code ام ان ال Value تكون شئ أخر ؟؟!!!

السلام عليكم .. ما هو ال QR code & Ban Code Screen Rider فى react native ؟؟ هل هو ال QR Scanner ؟؟ سؤال أخر .. هل لكل QR Code قيم خاصة به ؟ وكيف اقوم بجلب هذه القيم باستخدام react native ؟

import React, {useState} from 'react'; import {View, Button, FlatList, Text} from 'react-native'; import AsyncStorage from '@react-native-async-storage/async-storage'; const books = [ {id: 1, name: 'book one Updated'}, {id: 2, name: 'book two'}, {id: 3, name: 'book three'}, ]; export default function GetDataScreen() { const [Books, setBooks] = useState([]); const getData = async () => { try { const jsonValue = await AsyncStorage.getItem('books'); setBooks(jsonValue); console.log(Books); return jsonValue != null ? jsonValue : null; } catch (e) { console.log(e); } }; React.useEffect(() => { getData(); }, []); return ( <View> <Button title="get" onPress={() => getData()} /> {Books.length > 0 && ( <FlatList data={Books} keyExtractor={item => item.id.toString()} renderItem={({item}) => <Text>{item.name}</Text>} /> )} <Button title="log" onPress={() => { console.log(books.length); console.log(Books.length); }} /> </View> ); } المشكلة انه فى Async storage لا يعيطينى الاراى كما خزنها انها يعطيها لى مقسمة وخالية من ال objects هل هناك خطأ فى كود Async storage .. انا ريد ان اخزن أراى

فعلتها بدون فائدة

أريد جلب الداتا من async storage واجلبها بنجاح واستطيع ان اعرضها فى ال console ولكن المشكلة اننى عندما اريد وضعها فى FlatList يظهرلى هذا الايرور TypeError: undefined is not an object (evaluating 'item.id.toString') import React, {useState} from 'react'; import {View, Button, FlatList, Text} from 'react-native'; import AsyncStorage from '@react-native-async-storage/async-storage'; const books = [ {id: 1, name: 'الاسود يليق بك f'}, {id: 2, name: 'هيبتا'}, {id: 3, name: 'أرض زيكولا'}, ]; export default function GetDataScreen() { const [Books, setBooks] = useState([]); console.log(Books.length); const storeData = async value => { try { const books = JSON.stringify(value); await AsyncStorage.setItem('books', books); } catch (e) { console.log(e); } }; const getData = async () => { try { const jsonValue = await AsyncStorage.getItem('books'); setBooks(jsonValue); console.log(Books); return jsonValue != null ? JSON.parse(jsonValue) : null; } catch (e) { console.log(e); } }; React.useEffect(() => { getData(); }, []); return ( <View> <Button title="Save" onPress={() => storeData(books)} /> <Button title="get" onPress={() => getData()} /> <FlatList data={Books} keyExtractor={item => item.id.toString()} renderItem={({item}) => <Text>{item.id}</Text>} /> <Button title="test" onPress={() => console.log(Books)} /> </View> ); } هذا نتيجة ال Logs

انا استطيع فتح الخريطة ووضع الماركر عليها ولكنى الان اريد ان احرك الماركر واضعه فى المكان الذى قمت بالضغط عليه فى الخريطة .. كيف افعل ذلك ؟؟ هذا هو الكود import React from 'react'; import {StyleSheet, View, Text, Image, Button} from 'react-native'; import MapView, {Callout, Marker} from 'react-native-maps'; const BasicMapViewEX = () => { const region = { latitude: 37.78825, longitude: -122.4324, latitudeDelta: 0.015, longitudeDelta: 0.0121, }; const [Location, setLocation] = React.useState(region); const [MarkerLocation, setMarkerLocation] = React.useState(region); function handleRegionChange(region) { setLocation(region); setMarkerLocation(region); } return ( <View> <MapView onRegionChangeComplete={handleRegionChange} initialRegion={region} style={styles.map} region={Location}> <Marker coordinate={MarkerLocation} image={require('./map_marker.png')} style={styles.image} // title="my location" // description="here am i" > <Callout tooltip> <View> <View style={styles.bubble}> <Text style={styles.name}>"my location"</Text> <Text style={styles}>Desc</Text> <Image style={styles.image} height={120} width={80} source={require('./map_marker.png')} /> </View> <View style={styles.arrowBorder} /> <View style={styles.arrow} /> </View> </Callout> </Marker> </MapView> </View> ); }; const styles = StyleSheet.create({ map: { height: '100%', }, bubble: { flexDirection: 'column', alignSelf: 'flex-start', backgroundColor: '#fff', borderRadius: 6, borderColor: '#ccc', borderWidth: 0.5, padding: 15, width: 150, }, arrow: { backgroundColor: 'transparent', borderColor: 'transparent', borderTopColor: '#fff', borderWidth: 16, alignSelf: 'center', marginTop: -32, }, arrowBorder: { backgroundColor: 'transparent', borderColor: 'transparent', borderTopColor: '#007a87', borderWidth: 16, alignSelf: 'center', marginTop: -0.5, }, name: { fontSize: 16, marginBottom: 5, }, image: { width: 120, height: 80, backgroundColor: 'red', }, }); export default BasicMapViewEX;

أريد جلب الداتا من async storage واجلبها بنجاح واستطيع ان اعرضها فى ال console ولكن المشكلة اننى عندما اريد وضعها فى FlatList يظهرلى هذا الايرور TypeError: undefined is not an object (evaluating 'item.id.toString') import React, {useState} from 'react'; import {View, Button, FlatList, Text} from 'react-native'; import AsyncStorage from '@react-native-async-storage/async-storage'; const books = [ {id: 1, name: 'الاسود يليق بك f'}, {id: 2, name: 'هيبتا'}, {id: 3, name: 'أرض زيكولا'}, ]; export default function GetDataScreen() { const [Books, setBooks] = useState([]); console.log(Books.length); const storeData = async value => { try { const books = JSON.stringify(value); await AsyncStorage.setItem('books', books); } catch (e) { console.log(e); } }; const getData = async () => { try { const jsonValue = await AsyncStorage.getItem('books'); setBooks(jsonValue); console.log(Books); return jsonValue != null ? JSON.parse(jsonValue) : null; } catch (e) { console.log(e); } }; React.useEffect(() => { getData(); }, []); return ( <View> <Button title="Save" onPress={() => storeData(books)} /> <Button title="get" onPress={() => getData()} /> <FlatList data={Books} keyExtractor={item => item.id.toString()} renderItem={({item}) => <Text>{item.id}</Text>} /> <Button title="test" onPress={() => console.log(Books)} /> </View> ); } هذا نتيجة ال Logs

مرحبا .. يظهر لى هذا الخطا لان ال array فى البداية تكون فارغة لاننى مستخدم useStete أنا اريد ان اقوم بحل هذه المشكلة .. TypeError: undefined is not an object (evaluating 'item.id.toString') هذا هو الكود import React, {useState} from 'react'; import {View, Button, FlatList, Text} from 'react-native'; import AsyncStorage from '@react-native-async-storage/async-storage'; const books = [ {id: 1, name: 'الاسود يليق بك'}, {id: 2, name: 'هيبتا'}, {id: 3, name: 'أرض زيكولا'}, ]; export default function GetDataScreen() { const [Books, setBooks] = useState([]); console.log(Books.length); const storeData = async value => { try { const books = JSON.stringify(value); await AsyncStorage.setItem('books', books); console.log(books); } catch (e) { console.log(e); } }; const getData = async () => { try { const jsonValue = await AsyncStorage.getItem('books'); setBooks(jsonValue); return jsonValue != null ? JSON.parse(jsonValue) : null; } catch (e) { console.log(e); } }; React.useEffect(() => { getData(); }, []); if (Books.length === 0) { return <Text>Wait ...</Text>; } return ( <View> <Button title="Save" onPress={() => storeData(books)} /> <Button title="get" onPress={() => getData('books')} /> <FlatList data={Books} keyExtractor={item => item.id.toString()} renderItem={({item}) => <Text>{item.id}</Text>} /> </View> ); }

السلام عليكم .. لطالما اعتدت ان اتعامل مع اى apis باستخدام axios ولكنى احببت ان اجرب fetch .. قمت فعمليه ناجحة باستخدام then, catch ولكن عندما اردت استخدام async await فانا اجد صعوبة هنا .. استطيع طباعة الداتا فى الكونسول ولكن لا تظهر فى ال flatlist ما السبب import React, {useEffect, useState} from 'react'; import {Button, FlatList, Text, View} from 'react-native'; function GetData() { const [data, setData] = useState([]); const getFetchThen = () => { fetch( 'https://reactnative.dev/movies.json', ) .then(response => response.json()) .then(json => setData(json)) .then(console.log(data)) .catch(error => console.error(error)); }; // Async const getFetchAsync = async () => { try { let response = await fetch( 'https://reactnative.dev/movies.json', ); let json = await response.json(); console.log(json); return json; } catch (error) { console.error(error); } }; const asyncData = getFetchAsync(); useEffect(() => { getFetchThen(); getFetchAsync(); }, []); return ( <View style={{flex: 1, padding: 24}}> <View> <Button title="Get" onPress={getFetchThen} /> <Button title="test" onPress={() => console.log(asyncData)} /> <Button title="Get Fetch Async" onPress={getFetchAsync} /> <FlatList data={asyncData} // data={data} keyExtractor={item => item.id.toString()} renderItem={({item}) => ( <Text> {item.title}, {item.price} </Text> )} /> </View> </View> ); } export default GetData;

import * as React from "react"; import { Text, View, StyleSheet, Button } from "react-native"; import { Audio } from "expo-av"; export default function App() { const [sound, setSound] = React.useState(); async function playSound() { console.log("Loading Sound"); const { sound } = await Audio.Sound.createAsync( URL( "https://katateeb-test.roqay.solutions/public/uploads/chats/1/1610544623katateeb_record.mp4" ) // require("https://katateeb-test.roqay.solutions/public/uploads/chats/1/1610544623katateeb_record.mp4") ); setSound(sound); console.log("Playing Sound"); await sound.playAsync(); } React.useEffect(() => { return sound ? () => { console.log("Unloading Sound"); sound.unloadAsync(); } : undefined; }, [sound]); return ( <View style={styles.container}> <Button title="Play Sound" onPress={playSound} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "center", backgroundColor: "#ecf0f1", padding: 10, }, }); كتبت هذا الكود ولكنه لم ينفع .. ما هو الحل ؟؟ اعتقد ان الحطأ يكمن هنا const { sound } = await Audio.Sound.createAsync( URL( "https://katateeb-test.roqay.solutions/public/uploads/chats/1/1610544623katateeb_record.mp4" ) // require("https://katateeb-test.roqay.solutions/public/uploads/chats/1/1610544623katateeb_record.mp4") );

جربت طريقتك ولكنى لا اعرف اين اضع اكوادك بالظبط .. هل هكذا اضعها بطريقة صحيحة ؟؟ import React, {Component} from 'react'; var RNFS = require('react-native-fs'); var path = RNFS.DocumentDirectoryPath + '/hello.m4a'; import AudioRecorderPlayer, { AVEncoderAudioQualityIOSType, AVEncodingOption, AudioEncoderAndroidType, AudioSet, AudioSourceAndroidType, } from 'react-native-audio-recorder-player'; import {View, Button, Text} from 'react-native'; export default class App extends Component { constructor(props) { super(props); this.state = { isLoggingIn: false, recordSecs: 0, recordTime: '00:00:00', currentPositionSec: 0, currentDurationSec: 0, playTime: '00:00:00', duration: '00:00:00', }; RNFS.writeFile(path, 'data', 'utf8') .then(success => { console.log('FILE WRITTEN!'); }) .catch(err => { console.log(err.message); }); onStartRecord = async () => { const path = 'hello.m4a'; const audioSet = { AudioEncoderAndroid: AudioEncoderAndroidType.AAC, AudioSourceAndroid: AudioSourceAndroidType.MIC, AVEncoderAudioQualityKeyIOS: AVEncoderAudioQualityIOSType.high, AVNumberOfChannelsKeyIOS: 2, AVFormatIDKeyIOS: AVEncodingOption.aac, }; console.log('audioSet', audioSet); const uri = await this.audioRecorderPlayer.startRecorder(path, audioSet); this.audioRecorderPlayer.addRecordBackListener(e => { this.setState({ recordSecs: e.current_position, recordTime: this.audioRecorderPlayer.mmssss( Math.floor(e.current_position), ), }); }); console.log(`uri: ${uri}`); }; onStopRecord = async () => { const result = await this.audioRecorderPlayer.stopRecorder(); this.audioRecorderPlayer.removeRecordBackListener(); this.setState({ recordSecs: 0, }); console.log(result); }; onStartPlay = async e => { console.log('onStartPlay'); const path = 'hello.m4a'; const msg = await this.audioRecorderPlayer.startPlayer(path); this.audioRecorderPlayer.setVolume(1.0); console.log(msg); this.audioRecorderPlayer.addPlayBackListener(e => { if (e.current_position === e.duration) { console.log('finished'); this.audioRecorderPlayer.stopPlayer(); } this.setState({ currentPositionSec: e.current_position, currentDurationSec: e.duration, playTime: this.audioRecorderPlayer.mmssss( Math.floor(e.current_position), ), duration: this.audioRecorderPlayer.mmssss(Math.floor(e.duration)), }); }); }; onPausePlay = async e => { await this.audioRecorderPlayer.pausePlayer(); }; onStopPlay = async e => { console.log('onStopPlay'); this.audioRecorderPlayer.stopPlayer(); this.audioRecorderPlayer.removePlayBackListener(); }; this.audioRecorderPlayer = new AudioRecorderPlayer(); this.audioRecorderPlayer.setSubscriptionDuration(0.09); // optional. Default is 0.1 } render() { return ( <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', alignContent: 'center', alignSelf: 'center', }}> <View> <Text>InstaPlayer</Text> <Text>{this.state.recordTime}</Text> <Button title="Record" // onPress={() => this.onStartRecord()} onPress={() => { return this.onStartRecord() .then(result => { console.log(result); }) .catch(error => { console.log(error); }); }} onPress={onStartRecord} /> <Button title="stop" onPress={() => this.onStopRecord()} /> <Text> {this.state.playTime} / {this.state.duration} </Text> <Button title="play" onPress={() => this.onStartPlay()} /> <Button title="pause" onPress={() => this.onPausePlay()} /> <Button title="stop" onPress={() => this.onStopPlay()} /> </View> </View> ); } }

لكنى قمت بوضعهم .. <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.testy"> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCEPT_HANDOVER" /> <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACTIVITY_RECOGNITION" /> <uses-permission android:name="android.permission.ANSWER_PHONE_CALLS" /> <uses-permission android:name="android.permission.BODY_SENSORS" /> <uses-permission android:name="android.permission.CALL_PHONE" /> <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" /> <uses-permission android:name="android.permission.PROCESS_OUTGOING_CALLS" /> <uses-permission android:name="android.permission.READ_CALENDAR" /> <uses-permission android:name="android.permission.READ_CALL_LOG" /> <uses-permission android:name="android.permission.READ_CONTACTS" /> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.READ_PHONE_NUMBERS" /> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.READ_SMS" /> <uses-permission android:name="android.permission.RECEIVE_MMS" /> <uses-permission android:name="android.permission.RECEIVE_SMS" /> <uses-permission android:name="android.permission.RECEIVE_WAP_PUSH" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.SEND_SMS" /> <uses-permission android:name="android.permission.USE_SIP" /> <uses-permission android:name="android.permission.WRITE_CALENDAR" /> <uses-permission android:name="android.permission.WRITE_CALL_LOG" /> <uses-permission android:name="android.permission.WRITE_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="com.android.voicemail.permission.ADD_VOICEMAIL" /> <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="false" android:theme="@style/AppTheme"> <activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest> هل هك هل هكذا قمت بوضعهم بطريقة صحيحة ؟

السلام عليكم هذا الخطأ يظهر لى .. انا احاول ان اقوم بعمل تطبيق يسجل الصوت ويشغل الصوت الذى تم تسجيله .. هذا هو الكود كله فى ملف واحد LOG audioSet {"AVEncoderAudioQualityKeyIOS": 96, "AVFormatIDKeyIOS": "aac", "AVNumberOfChannelsKeyIOS": 2, "AudioEncoderAndroid": 3, "AudioSourceAndroid": 1} WARN Possible Unhandled Promise Rejection (id: 0): Error: hello.m4a: open failed: EROFS (Read-only file system) هذا هو الكود import React, {Component} from 'react'; import AudioRecorderPlayer, { AVEncoderAudioQualityIOSType, AVEncodingOption, AudioEncoderAndroidType, AudioSet, AudioSourceAndroidType, } from 'react-native-audio-recorder-player'; import {View, Button, Text} from 'react-native'; export default class App extends Component { constructor(props) { super(props); this.state = { isLoggingIn: false, recordSecs: 0, recordTime: '00:00:00', currentPositionSec: 0, currentDurationSec: 0, playTime: '00:00:00', duration: '00:00:00', }; onStartRecord = async () => { const path = 'hello.m4a'; const audioSet = { AudioEncoderAndroid: AudioEncoderAndroidType.AAC, AudioSourceAndroid: AudioSourceAndroidType.MIC, AVEncoderAudioQualityKeyIOS: AVEncoderAudioQualityIOSType.high, AVNumberOfChannelsKeyIOS: 2, AVFormatIDKeyIOS: AVEncodingOption.aac, }; console.log('audioSet', audioSet); const uri = await this.audioRecorderPlayer.startRecorder(path, audioSet); this.audioRecorderPlayer.addRecordBackListener(e => { this.setState({ recordSecs: e.current_position, recordTime: this.audioRecorderPlayer.mmssss( Math.floor(e.current_position), ), }); }); console.log(`uri: ${uri}`); }; onStopRecord = async () => { const result = await this.audioRecorderPlayer.stopRecorder(); this.audioRecorderPlayer.removeRecordBackListener(); this.setState({ recordSecs: 0, }); console.log(result); }; onStartPlay = async e => { console.log('onStartPlay'); const path = 'hello.m4a'; const msg = await this.audioRecorderPlayer.startPlayer(path); this.audioRecorderPlayer.setVolume(1.0); console.log(msg); this.audioRecorderPlayer.addPlayBackListener(e => { if (e.current_position === e.duration) { console.log('finished'); this.audioRecorderPlayer.stopPlayer(); } this.setState({ currentPositionSec: e.current_position, currentDurationSec: e.duration, playTime: this.audioRecorderPlayer.mmssss( Math.floor(e.current_position), ), duration: this.audioRecorderPlayer.mmssss(Math.floor(e.duration)), }); }); }; onPausePlay = async e => { await this.audioRecorderPlayer.pausePlayer(); }; onStopPlay = async e => { console.log('onStopPlay'); this.audioRecorderPlayer.stopPlayer(); this.audioRecorderPlayer.removePlayBackListener(); }; this.audioRecorderPlayer = new AudioRecorderPlayer(); this.audioRecorderPlayer.setSubscriptionDuration(0.09); // optional. Default is 0.1 } render() { return ( <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', alignContent: 'center', alignSelf: 'center', }}> <View> <Text>InstaPlayer</Text> <Text>{this.state.recordTime}</Text> <Button title="Record" mode="contained" onPress={() => this.onStartRecord()} onPress={onStartRecord} /> <Button title="stop" onPress={() => this.onStopRecord()} /> <Text> {this.state.playTime} / {this.state.duration} </Text> <Button title="play" onPress={() => this.onStartPlay()} /> <Button title="pause" onPress={() => this.onPausePlay()} /> <Button title="stop" onPress={() => this.onStopPlay()} /> </View> </View> ); } }

حسنا سوف اقوم بتعريفها

ERROR TypeError: _this2.onStartPlay is not a function. (In '_this2.onStartPlay()', '_this2.onStartPlay' is undefined) ERROR ReferenceError: Can't find variable: onPausePlay audioSet {"AVEncoderAudioQualityKeyIOS": 96, "AVFormatIDKeyIOS": "aac", "AVNumberOfChannelsKeyIOS": 2, "AudioEncoderAndroid": 3, "AudioSourceAndroid": 1} LOG audioSet {"AVEncoderAudioQualityKeyIOS": 96, "AVFormatIDKeyIOS": "aac", "AVNumberOfChannelsKeyIOS": 2, "AudioEncoderAndroid": 3, "AudioSourceAndroid": 1} LOG uri: Already recording WARN Possible Unhandled Promise Rejection (id: 0): Error: hello.m4a: open failed: EROFS (Read-only file system) السلام عليكم هذا الخطأ يظهر لى .. انا احاول ان اقوم بعمل تطبيق يسجل الصوت ويشغل الصوت الذى تم تسجيله .. هذا هو الكود كله فى ملف واحد import React, {Component} from 'react'; import AudioRecorderPlayer, { AVEncoderAudioQualityIOSType, AVEncodingOption, AudioEncoderAndroidType, AudioSet, AudioSourceAndroidType, } from 'react-native-audio-recorder-player'; import {View, Button, Text} from 'react-native'; export default class App extends Component { onStartRecord = async () => { const path = 'hello.m4a'; const audioSet = { AudioEncoderAndroid: AudioEncoderAndroidType.AAC, AudioSourceAndroid: AudioSourceAndroidType.MIC, AVEncoderAudioQualityKeyIOS: AVEncoderAudioQualityIOSType.high, AVNumberOfChannelsKeyIOS: 2, AVFormatIDKeyIOS: AVEncodingOption.aac, }; console.log('audioSet', audioSet); const uri = await this.audioRecorderPlayer.startRecorder(path, audioSet); this.audioRecorderPlayer.addRecordBackListener(e => { this.setState({ recordSecs: e.current_position, recordTime: this.audioRecorderPlayer.mmssss( Math.floor(e.current_position), ), }); }); console.log(`uri: ${uri}`); }; onStopRecord = async () => { const result = await this.audioRecorderPlayer.stopRecorder(); this.audioRecorderPlayer.removeRecordBackListener(); this.setState({ recordSecs: 0, }); console.log(result); }; constructor(props) { super(props); this.state = { isLoggingIn: false, recordSecs: 0, recordTime: '00:00:00', currentPositionSec: 0, currentDurationSec: 0, playTime: '00:00:00', duration: '00:00:00', }; this.audioRecorderPlayer = new AudioRecorderPlayer(); this.audioRecorderPlayer.setSubscriptionDuration(0.09); // optional. Default is 0.1 // onPausePlay = async e => { // await this.audioRecorderPlayer.pausePlayer(); // }; // onStopPlay = async e => { // console.log('onStopPlay'); // this.audioRecorderPlayer.stopPlayer(); // this.audioRecorderPlayer.removePlayBackListener(); // }; } render() { return ( <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', alignContent: 'center', alignSelf: 'center', }}> <View> <Text>InstaPlayer</Text> <Text>{this.state.recordTime}</Text> <Button title="Record" mode="contained" onPress={() => this.onStartRecord()} // onPress={onStartRecord} /> <Button title="stop" onPress={() => this.onStopRecord()} /> <Text> {this.state.playTime} / {this.state.duration} </Text> <Button title="play" onPress={() => this.onStartPlay()} /> {/* <Button title="pause" onPress={() => this.onPausePlay()} /> */} {/* <Button title="stop" onPress={() => this.onStopPlay()} /> */} </View> </View> ); } }

أريد api يكون عليه مخزن عليه ملفات صوتية حتى اتعلم كيف اعمل له get زاظهر الملفات الصوتية على الهاتف واشغلها .. كيف احصل عليه ؟؟ انا اعمل ب react native .. وشكرا

السلام عليكم .. اريد ان احمل ملفات صوتيه من api باستخدام رياكت ناتيف .. ابحث عن مكتبة تكون جيدة .. هل هذه المكتبة هى الخيار الافضل ام ان هناك افضل منها ؟؟ https://www.npmjs.com/package/react-native-sound

السلام عليكم .. كيف اقوم بتثبيت الستايل الخاص بالتطبيق.. جميعنا نعلم ان اللغة العربية من اليميمن لليسار على عكس الاجنبية .. انا اقوم بكتابة وعندما اجعل لغة هاتفى العربية فان كل الكمبوننتز تكون من اليمين الى اليسار .. وعندما اقلبه للغة لانجليزية فان كل الكمبوننت تبدا من اليسار الى اليمين .. هذه مشكلة كبيرة خاصة عندما استخدم absolute position فى ال style .. فانه لايظهر بالشكل المطلوب .. ما الحل لهذه المشكلة اريد تثبيت ال style حتى مع تغيير لغة النظام سؤاء من العربية الى الانجليزية والعكس .. وشكرا

عندى فى هذا الكود مشكلة اريد الحصول على الداتا الخاصة .. لكن لكى احصل عليها احتاج الى التوكن .. فى البداية يكون التوكن ب null لذا فان الداتا لا تاتى لان التوكن ب null .. انا اريد طريقة اخرى لكى استطيع استخراج التوكن من الفانكشن بدلا من use state لاننى فى use state مجبر على وضع قيمة ابتدائية ل token .. مالحل ؟؟ لمن لم يفهمنى سوف اقول السؤال ببساطة .. أنا اريد ان اخرج قيمة التوكن المخزنة فى getToken فانشكن .. واستخراجه وتخزينه فى const .. import React, {useEffect, useState} from 'react'; import {View, Text, FlatList, Button} from 'react-native'; import {useDispatch, useSelector} from 'react-redux'; import {logout} from '../../store/actions/auth'; import {getSessions} from '../../store/actions/sessions'; import AsyncStorage from '@react-native-async-storage/async-storage'; function LearningSessions(props) { const [token, setToken] = useState(null); const getToken = async () => { try { const userToken = await AsyncStorage.getItem('userToken'); if (userToken !== null) { setToken(userToken); console.log('the token is ' + token); } } catch (e) { console.log('the token is nulllllllllll'); console.log(e.message); } }; useEffect(() => { getToken(); dispatch(getSessions(token, 1)); }, []); const data = useSelector(state => state.sessionsReducer.data); const dispatch = useDispatch(); console.log(data); // if (token == !null) { return ( <View> <Text>جلسات التعلم</Text> <Button title="logout" onPress={() => dispatch(logout())} /> <FlatList data={data} keyExtractor={item => item.id.toString()} renderItem={({item}) => ( <View style={{padding: 30, backgroundColor: 'yellow', margin: 15}}> <Text>{item.content} جلسة:</Text> <Text>{item.reading_type.name}</Text> <Text>{item.teacher_name}</Text> <Text>{item.status_text}</Text> <Text>{item.rate_text}</Text> <Text>{item.session_start_date}</Text> </View> )} /> </View> ); // } // return <Text>انتظر ...</Text>; } export default LearningSessions;

لكنى حتى ان قمت بعمل save بدون اى تغيير فان التطبيق يعمل بشكل صحيح .. المشلكة ان التوكن فى البداية تكون فيمته ب null لاننى وضعته فى useState كما ترى .. انا اريد ان تكون فيمته الصحيحة الاتية من Async storage وليست null كيف افعلها ؟؟

السلام عليكم الصفحة تعمل http request وينجح لكن فى اول مرة عندما اقوم بعمل ريلود للتطبيق فان الداتا تكون فارغة .. واذا قمت بعمل اى تعدل ينتج عنه hot reload فان الداتا تظهر ؟؟؟!!!!!!!! حاولت حل المشكلة فحاولت ان اقوم بعمل if لكى اتأكد من وجودها ولكن ظهرت لى هذه المشكلة TypeError: null is not an object (evaluating 'data.length') لكى لا اضيع وقتكم .. هذا هو الكود و كل ما يتعلق ب ريدكس او التوكن يعمل بشكل صحيح لكن مشكلتى فى عدم جلب الداتا من اول مرة هى تاتى لكن بعد عمل hot reload ما حل هذه المشكلة ؟ import React, {useEffect, useState} from 'react'; import {View, Text, FlatList, Button} from 'react-native'; import {useDispatch, useSelector} from 'react-redux'; import {logout} from '../../store/actions/auth'; import {getSessions} from '../../store/actions/sessions'; import AsyncStorage from '@react-native-async-storage/async-storage'; function LearningSessions(props) { const [token, setToken] = useState(null); const getToken = async () => { try { const userToken = await AsyncStorage.getItem('userToken'); if (userToken !== null) { setToken(userToken); console.log(token); } } catch (e) { console.log(e.message); } }; useEffect(() => { getToken(); dispatch(getSessions(token, 1)); }, []); const data = useSelector(state => state.sessionsReducer.data); const dispatch = useDispatch(); console.log(data); if (data.length > 0) { return ( <View> <Text>جلسات التعلم</Text> <Button title="logout" onPress={() => dispatch(logout())} /> <FlatList data={data} keyExtractor={item => item.id.toString()} renderItem={({item}) => ( <View style={{padding: 30, backgroundColor: 'yellow', margin: 15}}> <Text>{item.content} جلسة:</Text> <Text>{item.reading_type.name}</Text> <Text>{item.teacher_name}</Text> <Text>{item.status_text}</Text> <Text>{item.rate_text}</Text> <Text>{item.session_start_date}</Text> </View> )} /> </View> ); } return <Text>انتظر ...</Text>; } export default LearningSessions;

شكرا أخى العزيز جربته ونفعت الحمد لله

السلام عليكم هذا هو المطلوب منى فى هذا ال api Each API call after login must have an additional header: • “Authorization”: “Bearer {token}” where “{token}” should be replaced with returning access token from the login API. بفضل الله انا يمكننى الحصول على التوكن بشكل صحيح وجربته واستيطع الحصول على التوكن .. وعندما اقوم بادخال التوكن فى بوستمان فانه يعمل وياتينى ب data كلها .. لكن المشكلة فى رياكت ناتيف .. هو يعمل على بوست مان لاننى اعرف اين اضع التوكن لكن فى الريدكس اين اضعه ؟؟ هذا هو الكود export const getSessions = () => { // هذا توكن صحيح ويعمل على بوست مان const token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6ImZjMGY5ZTY1NThjMDJiZDExNjNmNWNjNmExNjU1ZDEzMTY4ZmI1M2MzYzc1MmRiNzJkYmQ5ZTYyNDljMGI3ZjMxY2E3MWQ3OTJkNTJlNzY5In0.eyJhdWQiOiIzIiwianRpIjoiZmMwZjllNjU1OGMwMmJkMTE2M2Y1Y2M2YTE2NTVkMTMxNjhmYjUzYzNjNzUyZGI3MmRiZDllNjI0OWMwYjdmMzFjYTcxZDc5MmQ1MmU3NjkiLCJpYXQiOjE2MjE2MTE5NTMsIm5iZiI6MTYyMTYxMTk1MywiZXhwIjoxNjUzMTQ3OTUzLCJzdWIiOiI2MjUiLCJzY29wZXMiOltdfQ.YbBm2TlsbwIYL9s4GP0c-cO2MYAgo8Y4Y-R9bgEaZAtXRsfuryggN5sh97Bdr0dg5OZby5ubqqHZReIdxoXvqTsnX68mBaTMDDtFpvH_Zv_M3hWgq1a4PZKYxsrUftQP1Hn-2BQqSGCNJRPnzMzCn7HpBpaVHaTZWXpqjWyVxVoB2z_WWEjEaW_0MQR-AFAYlR8sILASzBXRsTmtpUHF_kCvLV-a74ILVR5z60_jk-fSmYVWbjrcCtxd-pquCHaBj2w4-SFXEtcW_n4OgdBXV0Od68X0CqXuecxIlDz9BURK5WKxIzTuwnQ_QB0aCdNc8_QEtYAoqUWuKykV6Zvrb2UyxNDOO865orB8XekcNCqYIDewMdVEAnJtSDCDiBq-RmDNlsTkQajIqkPitQmPKbyNsFdUUOMF4RsALBmEOKqOmvmZB3uioC0YI-gtcpdF5TwEXNyVP0xd1s7morYYfb1_rBodn_aC9amseed825fpjwPfcrAASTC66GYzN9jwtg9s52ZBghotH6YM2XaDwfYTG719vWnJ9BSQclH7aNKgsW9FLAIgCdCSEY6_-vCcX1c4FmNwRrmOBMiiB5vNJWPz4lGSQqr93jUKAL1ROrLPo3fuwJe7l6YvLsL34AveEubvl__qlOZg3oMzzp6_Lc0elcpYl92f6zdKXvSVFjg'; return async dispatch => { const response = await fetch( `https://katateeb-test.roqay.solutions/api/v2/get-sessions`, // ماذا اكتب هنا ؟؟ { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: `${token}`, }, body: JSON.stringify({ session_type: 1, }), }, ); if (!response.ok) { console.log('wrong'); } const resData = await response.json(); console.log(resData); dispatch({ type: GET_SESSIONS, }); }; };

لكنى احاول ان افعلها ب react native ..