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

انا قمت بحل المشكلة عن طريق تسطيب المكتبة لانها لم تكن فى package.json واشتغل المشروع بنجاح الحمد لله

لا هدا ليس الحل .. عندما حملت الريبو كان صاحبها لم يقم ستطيب هده المكتبة .. وكلن وضع ربطها فى podfile لدا كل مافعلته هو تسطيب هده المكتبة

انا اقوم بعمل كلون لريبو .. وقمت بتنصيب النود موديولز بنجاح ولكن عن عمل pod install تظهر هده المشكلة فى الكوونسول Ignoring unf_ext-0.0.7.6 because its extensions are not built. Try: gem pristine unf_ext --version 0.0.7.6 Auto-linking React Native modules for target `maltevinder`: RNCAsyncStorage, RNCMaskedView, RNDateTimePicker, RNFastImage, RNGestureHandler, RNReanimated, RNScreens, RNVectorIcons, lottie-ios, lottie-react-native, react-native-cookies, react-native-document-picker, react-native-restart, and react-native-safe-area-context Analyzing dependencies Fetching podspec for `DoubleConversion` from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec` Fetching podspec for `Folly` from `../node_modules/react-native/third-party-podspecs/Folly.podspec` Fetching podspec for `glog` from `../node_modules/react-native/third-party-podspecs/glog.podspec` [!] No podspec found for `react-native-image-picker` in `../node_modules/react-native-image-picker` هدا هو ملف ال podfile الخاص بى require_relative '../node_modules/react-native/scripts/react_native_pods' require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' platform :ios, '10.0' target 'maltevinder' do config = use_native_modules! use_react_native!(:path => config["reactNativePath"]) pod 'react-native-image-picker', :path => '../node_modules/react-native-image-picker' target 'maltevinderTests' do inherit! :complete # Pods for testing end # Enables Flipper. # # Note that if you have use_frameworks! enabled, Flipper will not work and # you should disable these next few lines. use_flipper! post_install do |installer| flipper_post_install(installer) end end target 'maltevinder-tvOS' do # Pods for maltevinder-tvOS target 'maltevinder-tvOSTests' do inherit! :search_paths # Pods for testing end end

لم تجدى نفعا لاحظ اخى اننى استخدم الفانكشن كمبوننت وليس الكلاس

أنا اريد ان اقوم بعمل pagination و يكون الكارد المختار فى منتصف السكرين وليست هكدا كما فى الصورة هدا هو الكود <View style={styles.cardsContainer}> <View style={styles.cardsContainer}> <Animated.ScrollView horizontal scrollEventThrottle={1} showsHorizontalScrollIndicator={false} pagingEnabled snapToInterval={CARD_WIDTH + 20} snapToAlignment="center" > {ads.map((item, index) => { return ( <MapCard onPress={() => goToSelectedLocation(index)} style={{margin: 4}} title={item.title} image={item.image} price={item.price} /> ); })} </Animated.ScrollView> </View> // Styles cardsContainer: { height: phoneHeight * 0.22, bottom: 50, position: 'absolute', },

عندما قمت بتحويل الخريطة الى animated فانها اختفت وظهرت بلون شبيه بالرمادى ولكن marker عليها عادى .. لا اعرف ما السبب هدا هو الكود <MapView.Animated ref={mapRef} region={currentRegion} provider={PROVIDER_GOOGLE} style={{flex: 1}} onRegionChange={() => setRegion(region)} onPress={coordinate => { console.log(coordinate.nativeEvent.coordinate); return coordinate; }}> {ads.map((item, index) => ( <Marker key={index} coordinate={item.region}> <Image style={{width: 26, height: 28}} resizeMode="contain" source={require('../../assets/map/marker.png')} /> <Callout tooltip> <View style={styles.markerTitleContainer}> <Text numberOfLines={2} style={styles.markerTitle}> {item.title} </Text> </View> </Callout> </Marker> ))} </MapView.Animated>

كيف اعالج هده المشكلة ERROR Invariant Violation: Changing onViewableItemsChanged on the fly is not supported هذا هو الكود <Animated2.FlatList horizontal data={ads} keyExtractor={item => item.id.toString()} // onViewableItemsChanged={({viewableItems, changed}) => { // console.log(viewableItems[0].index); // setSelectedIndex(viewableItems[0].index); // }} onViewableItemsChanged={onViewableItemsChanged} viewabilityConfig={viewabilityConfig} style={{backgroundColor: 'red'}} contentContainerStyle={{justifyContent: 'center'}} onScrollEndDrag={() => goToSelectedLocation(selectedIndex)} renderItem={({item, index}) => { setSelectedIndex(index); console.log(index); return ( <MapCard onPress={() => goToSelectedLocation(index)} style={{margin: 4}} title={item.title} image={item.image} price={item.price} /> ); }} />

هدا هو الحل onMapViewOress={(coordinate: any) => { console.log(coordinate.nativeEvent.coordinate); setSelectedLocation(coordinate.nativeEvent.coordinate); }}

اانا استخدم رياكت ناتيف واود ان احصل على الاندكس الخاص ب الايتم المعروضة حاليا .. هدا هو الكود <Animated2.FlatList horizontal data={ads} keyExtractor={item => item.id.toString()} // onViewableItemsChanged={({viewableItems, changed}) => { // console.log(viewableItems[0].index); // setSelectedIndex(viewableItems[0].index); // }} style={{backgroundColor: 'red'}} contentContainerStyle={{justifyContent: 'center'}} onScrollEndDrag={() => goToSelectedLocation(selectedIndex)} renderItem={({item, index}) => { setSelectedIndex(index); console.log(index); return ( <MapCard onPress={() => goToSelectedLocation(index)} style={{margin: 4}} title={item.title} image={item.image} price={item.price} />

تمت الحل كودك كان يحتاج الى تعديل بسيط

للأسف يعرض لى نفس الخطأ

ظهر لى هدا الايرور TypeError: undefined is not an object (evaluating 'coordinate.latitude')

انا استطيع فتح الخريطة على الهاتف ولكنى اريد عن الضغط على اى مكان فى الخريطة فانه يطبع لى احداثياته ولو كان به مكان مميز مثلا مطعم او غيره فاريد ان اعرف كيف احصل على اسمه <SafeView> <Button title="close" onPress={onClose} /> <MapView style={{flex: 1}}></MapView> </SafeView>

شكرا اخى لكنى اود فعلها ب react native

كيف اجعل الخريطة تظهر باللغة العربية ليست الانجليزية فى الوقت الدى فيه ال simulator لغته english وليست عربى فى React Native <MapView style={{flex: 1}} region={region}> {ads.map((item, index) => ( <Marker title={item.title} description={item.description} key={index} coordinate={item.region}> <Image style={{width: 26, height: 28}} resizeMode="contain" source={require('../../assets/map/marker.png')} /> </Marker> ))} </MapView>

لا ليس بها null انا ارسلت لك الداتا

هدا هو كودى import {ads} from '../../data/ads'; import {ADD_TO_FAVORITE, REMOVE_FROM_FAVORITE, CLEAR_FAVORITE} from '../types'; interface ItemInter { id: number; } interface ActionInter { type: string; payload: {id: number}; } const initialState = { myAllAds: ads, }; const myFavorite = (state = initialState, action: ActionInter) => { switch (action.type) { case ADD_TO_FAVORITE: const itemFav = state.myAllAds[action.payload.id - 1].isFav; console.log(itemFav); if (itemFav === true) return { ...state, myAllAds: [ ...state.myAllAds, (state.myAllAds[action.payload.id - 1].isFav = false), ], }; if (itemFav === false) return { ...state, myAllAds: [ ...state.myAllAds, (state.myAllAds[action.payload.id - 1].isFav = true), ], }; } return state; }; export default myFavorite; كيف اتفادى اضافة بيانات فارغة داخل المصفوفة ؟؟

شكرا على الاجابة ولكن لمادا تنصحنى ب redux tool-kit هل يمكنك ان تخبرنى لما هى جيدة

اريد ان اقوم بتغيير true ل false داخل array تحتوى على objects import {ads} from '../../data/ads'; import {ADD_TO_FAVORITE, REMOVE_FROM_FAVORITE, CLEAR_FAVORITE} from '../types'; interface ItemInter { id: number; } interface ActionInter { type: string; payload: {id: number}; } const initialState = { myAllAds: ads, myFavorite: [], }; const myFavorite = (state = initialState, action: ActionInter) => { switch (action.type) { case ADD_TO_FAVORITE: const item = state.myFavorite.find( (item: ItemInter) => item.id === action.payload.id, ); if (item) return {...state}; return { ...state, myAllAds: [ ...state.myAllAds, // state.myAllAds[action.payload].isFav === false, ], myFavorite: [...state.myFavorite, action.payload], }; case REMOVE_FROM_FAVORITE: return { ...state, myFavorite: state.myFavorite.filter( favItem => favItem !== action.payload, ), }; case CLEAR_FAVORITE: return {...initialState}; } return state; }; export default myFavorite; جربت كتابة هدا الكود myAllAds: [...(state.myAllAds[action.payload].isFav = false)], ولكنه اخرج لى هدا الايرور TypeError: undefined is not an object (evaluating 'state.myAllAds[action.payload].isFav = false')

import {ADD_TO_FAVORITE, REMOVE_FROM_FAVORITE, CLEAR_FAVORITE} from '../types'; interface InitStateInter { myFavorite: []; } const initialState: InitStateInter = { myFavorite: [], }; const myFavorite = (state = initialState, action: any) => { switch (action.type) { case ADD_TO_FAVORITE: return { ...state, myFavorite: [...state.myFavorite, action.payload], }; case REMOVE_FROM_FAVORITE: return { ...state, myFavorite: state.myFavorite.filter( favItem => favItem !== action.payload, ), }; case CLEAR_FAVORITE: return {...initialState}; } return state; }; export default myFavorite; عندما اضيف منتج اخر للمفضلة فانه يتحقق ان كان موجود لايضيفة مرة اخرى

import React, {useState, FC} from 'react'; import {StyleSheet, Image, Text, TouchableOpacity} from 'react-native'; import Icon from 'react-native-vector-icons/MaterialIcons'; import {phoneHeight, phoneWidth} from '../../theme/Dimensions'; import {MyColors} from '../../theme/MyColos'; import {MyFonts} from '../../theme/MyFonts'; interface MainCard { title: string; price: number; image: any; onPress?: () => void; onFavPress?: () => void; } const MainCard: FC<MainCard> = ({image, title, price, onPress, onFavPress}) => { const [isFav, setIsFav] = useState(false); return ( <TouchableOpacity onPress={onPress} style={styles.container}> <TouchableOpacity // onPress={() => setIsFav(!isFav)} onPress={[onFavPress, () => setIsFav(!isFav)]} style={styles.iconContainer}> {isFav ? ( <Icon name="favorite-border" size={phoneWidth * 0.05} /> ) : ( <Icon name="favorite" size={phoneWidth * 0.05} color="red" /> )} </TouchableOpacity> <Image style={styles.imageBackground} source={image} resizeMode="cover" /> <Text numberOfLines={2} style={styles.title}> {title} </Text> <Text style={styles.price}>{price} SAR</Text> </TouchableOpacity> ); }; export default MainCard; هدا هو كودى والمشكلة عندى فى هدا السطر onPress={[onFavPress, () => setIsFav(!isFav)]} فى الاول كنت بعملها هكدا onPress={() => setIsFav(!isFav)} لكنى اريد ان اضيف خاصية جديدة وهو انه عندما استدعيه اضع فيه اى argment انا اريده .. هل هناك حل ام لا ؟

شكرا جزيلا .. قمت بحلها لاننى كنت اعطى ايقونة هده الخاصية

هدا هو الخطأ ERROR Warning: Failed prop type: Invalid props.style key `resizeMode` supplied to `Text`. هدا هو الكود import React, {useState} from 'react'; import {Text, StyleSheet, Image, View, TouchableOpacity} from 'react-native'; import {useNavigation} from '@react-navigation/native'; import Icon from 'react-native-vector-icons/Feather'; import Picker from 'react-native-image-crop-picker'; import SafeView from '../../components/shared/SafeView'; import LongButton from '../../components/buttons/LongButton'; import NavigationHeader from '../../components/shared/NavigationHeader'; import BasicInput from '../../components/textInputs/BasicInput'; import {phoneHeight, phoneWidth} from '../../theme/Dimensions'; import {MyColors} from '../../theme/MyColos'; import {MyFonts} from '../../theme/MyFonts'; import MainTabs from '../../navigation/MainTabs'; export default function UpdateProfileScreen({route}: any) { const navigation = useNavigation(); const item = route.params; const [userImage, setUserImage] = useState(item.image); const [canEditName, setCanEditName] = useState(false); const [canEditPhone, setCanEditPhone] = useState(false); const [canEditEmail, setCanEditEmail] = useState(false); const openGallery = () => { Picker.openPicker({ width: 300, height: 400, cropping: true, }).then(image => { console.log(image); setUserImage(image.path); }); }; return ( <> <SafeView style={styles.container}> <NavigationHeader title="تعديل بيانات الحساب" onBackPress={() => navigation.goBack()} /> <View> <Image source={{uri: userImage}} style={styles.userImage} /> <TouchableOpacity style={styles.cameraContainer} onPress={openGallery}> <Icon name="camera" size={phoneHeight * 0.03} color="white" /> </TouchableOpacity> </View> <Text style={styles.inputLabel}>اسم المستخدم</Text> <BasicInput hasIcon defaultValue={item.name} iconName="edit" iconColor={canEditName ? MyColors.darkAqua : MyColors.gray} editable={canEditName} onPress={() => setCanEditName(!canEditName)} /> <Text style={styles.inputLabel}>رقم الجوال</Text> <BasicInput hasIcon defaultValue={item.phone} iconName="edit" iconColor={canEditPhone ? MyColors.darkAqua : MyColors.gray} editable={canEditPhone} onPress={() => setCanEditPhone(!canEditPhone)} /> <Text style={styles.inputLabel}>البريد الإلكترونى</Text> <BasicInput hasIcon defaultValue={item.email} iconName="edit" iconColor={canEditEmail ? MyColors.darkAqua : MyColors.gray} editable={canEditEmail} onPress={() => setCanEditEmail(!canEditEmail)} /> <Text onPress={() => navigation.navigate('UpdatePassword')} style={styles.forgetPassword}> تعديل كلمة المرور </Text> <LongButton style={styles.button} title="حفظ التغييرات" onPress={() => console.log('Save')} /> <MainTabs /> </SafeView> {/* <Tabs profileSelected /> */} </> ); } const styles = StyleSheet.create({ container: { alignItems: 'center', }, inputLabel: { alignSelf: 'flex-end', fontFamily: MyFonts.Medium, fontSize: 15, color: MyColors.darkBlue, marginRight: phoneWidth * 0.1, marginVertical: phoneHeight * 0.01, marginTop: phoneHeight * 0.02, }, forgetPassword: { alignSelf: 'flex-end', fontFamily: MyFonts.Medium, fontSize: 15, color: MyColors.darkAqua, marginRight: phoneWidth * 0.1, marginVertical: phoneHeight * 0.01, marginTop: phoneHeight * 0.02, }, button: { marginTop: 50, }, cameraContainer: { height: phoneHeight * 0.06, width: phoneHeight * 0.06, zIndex: 1, position: 'relative', bottom: phoneHeight * 0.06, justifyContent: 'center', alignItems: 'center', backgroundColor: MyColors.darkAqua, borderRadius: phoneHeight * 0.03, }, userImage: { height: phoneHeight * 0.2, width: phoneHeight * 0.2, borderRadius: phoneHeight * 0.1, }, });

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. import React, {useState} from 'react'; import {Text, StyleSheet, Image, View, TouchableOpacity} from 'react-native'; import {useNavigation} from '@react-navigation/native'; import Icon from 'react-native-vector-icons/Feather'; import Picker from 'react-native-image-crop-picker'; import LongButton from '../../components/buttons/LongButton'; import NavigationHeader from '../../components/shared/NavigationHeader'; import SafeView from '../../components/shared/SafeView'; import BasicInput from '../../components/textInputs/BasicInput'; import {phoneHeight, phoneWidth} from '../../theme/Dimensions'; import {MyColors} from '../../theme/MyColos'; import {MyFonts} from '../../theme/MyFonts'; export default function UpdateProfileScreen({route}: any) { const navigation = useNavigation(); const item = route.params; const [userImage, setUserImage] = useState(item.image); const [canEditName, setCanEditName] = useState(false); const [canEditPhone, setCanEditPhone] = useState(false); const [canEditEmail, setCanEditEmail] = useState(false); const openGallery = () => { Picker.openPicker({ width: 300, height: 400, cropping: true, }).then(image => { console.log(image); setUserImage(image.path); }); }; return ( <SafeView style={styles.container}> <NavigationHeader title="تعديل بيانات الحساب" onBackPress={() => navigation.goBack()} /> <View> <Image source={{uri: userImage}} style={styles.userImage} /> <TouchableOpacity style={styles.cameraContainer} onPress={openGallery}> <Icon name="camera" size={phoneHeight * 0.03} color="white" /> </TouchableOpacity> </View> <Text style={styles.inputLabel}>اسم المستخدم</Text> <BasicInput hasIcon defaultValue={item.name} iconName="edit" iconColor={canEditName ? MyColors.darkAqua : MyColors.gray} editable={canEditName} onPress={() => setCanEditName(!canEditName)} /> <Text style={styles.inputLabel}>رقم الجوال</Text> <BasicInput hasIcon defaultValue={item.phone} iconName="edit" iconColor={canEditPhone ? MyColors.darkAqua : MyColors.gray} editable={canEditPhone} onPress={() => setCanEditPhone(!canEditPhone)} /> <Text style={styles.inputLabel}>البريد الإلكترونى</Text> <BasicInput hasIcon defaultValue={item.email} iconName="edit" iconColor={canEditEmail ? MyColors.darkAqua : MyColors.gray} editable={canEditEmail} onPress={() => setCanEditEmail(!canEditEmail)} /> <Text onPress={() => navigation.navigate('UpdatePassword')} style={styles.forgetPassword}> تعديل كلمة المرور </Text> <LongButton style={styles.button} title="حفظ التغييرات" onPress={() => console.log('Save')} /> </SafeView> ); } const styles = StyleSheet.create({ container: { alignItems: 'center', }, inputLabel: { alignSelf: 'flex-end', fontFamily: MyFonts.Medium, fontSize: 15, color: MyColors.darkBlue, marginRight: phoneWidth * 0.1, marginVertical: phoneHeight * 0.01, marginTop: phoneHeight * 0.02, }, forgetPassword: { alignSelf: 'flex-end', fontFamily: MyFonts.Medium, fontSize: 15, color: MyColors.darkAqua, marginRight: phoneWidth * 0.1, marginVertical: phoneHeight * 0.01, marginTop: phoneHeight * 0.02, }, button: { marginTop: 50, }, cameraContainer: { height: phoneHeight * 0.06, width: phoneHeight * 0.06, zIndex: 1, position: 'relative', bottom: phoneHeight * 0.06, justifyContent: 'center', alignItems: 'center', backgroundColor: MyColors.darkAqua, borderRadius: phoneHeight * 0.03, }, userImage: { height: phoneHeight * 0.2, width: phoneHeight * 0.2, borderRadius: phoneHeight * 0.1, }, });

السلام عليكم, عندما اقوم بعمل git status تظهر لى كل التغييرات التى قمت بها سواء قمت بتعديل او اضافة او حذف, كما ف الصورة لكن هل هناك من طريقة لازالة هذا التتبع مثلا انا حذفت الملف من جهازى ولكنى لا ارد ان اقوم بحذفه من الريبو repo على github .. بطريقة اخرى كيف اقوم بازالة هذه السطور الحمراء بدون ان اقوم بعمل commit لها ؟ هل هناك طريقة لحذف التغيير بدون عمل commit له ام اننى مجبر على رؤية كل هذه السطور عند كتابة git status ؟ ببساطة اريد حذف هذه السطور الحمراء دون حذف الملفات من ال repo على جيت هاب وذلك لاننى اريد حذفها من على جهازى فقط