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

السلام عليكم .. انا اقوم بعمل .populate كما فى الكود التالى .. الكود التالى يعمل بشكل صحيح بدون اى مشاكل على localhost لكن عند رفع السرفر على هيروكو تبدأ المشكلة .. لا يعمل الا اذا حذفت .populate router.get("/", async (req, res) => { const userList = await UserModel.find().populate(["addressess", "favs"]); if (!userList) { res.send("No Users"); } res.send(userList); }); لاحظ هنا // بشكل صحيح Development هنا لا تعمل أيضا مع انها تعمل فى const userList = await UserModel.find().populate("addressess"); // بشكل صحيح Development هنا لا تعمل أيضا مع انها تعمل فى const userList = await UserModel.find().populate(["addressess", "favs"]); الغريب اننى عندما احدف .populate فان السرفر يعمل على heroku بشكل صحيح .. مالحل ؟

اريد رفع بضعة صور باستخدام المكتبة multer ولكن يظهر لى هذا الخطأ D:\1-Node JS\Projects\E-Commerce\node_modules\mongoose\lib\query.js:4545 const castError = new CastError(); ^ CastError: Cast to ObjectId failed for value "gallery-images" (type string) at path "_id" for model "User" هذا هو كودى const express = require("express"); const { ProductModel } = require("../model/product"); const multer = require("multer"); const router = express.Router(); const FILE_TYPE_MAP = { "image/png": "png", "image/jpeg": "jpeg", "image/jpg": "jpg", }; const storage = multer.diskStorage({ destination: function (req, file, cb) { const isValid = FILE_TYPE_MAP[file.mimetype]; let uploadError = new Error("invalid image type"); if (isValid) { uploadError = null; } cb(uploadError, "public/uploads"); }, filename: function (req, file, cb) { const fileName = file.originalname.split(" ").join("-"); const extension = FILE_TYPE_MAP[file.mimetype]; cb(null, `${fileName}-${Date.now()}.${extension}`); }, }); const uploadOptions = multer({ storage: storage }); router.put( "/gallery-images/:id", uploadOptions.array("images", 10), async (req, res) => { const files = req.files; let imagesPaths = []; const basePath = `${req.protocol}://${req.get("host")}/public/uploads/`; if (files) { files.map((file) => { imagesPaths.push(`${basePath}${file.filename}`); }); } const product = await ProductModel.findByIdAndUpdate( req.params.id, { images: imagesPaths, }, { new: true } ); if (!product) return res.status(500).send("the gallery cannot be updated!"); res.send(product); } ); module.exports = router;

عندى فانكشن ولها ثلاثة براميترات .. انا اريد ان استخدم اثنين منهم فقط .. كيف ذلك ؟ انا اريد استدعاء تلك الفانكشن لكن بدون اسخدام البراميتر b مثلا .. مالذى يجب وضعه مكانه عند الاستدعاء const test = (a, b, c) => { return a + b + c } const sum = test(5,null,10) console.log(sum) // log >> 15 انا هنا استخدمت null لكنى اريد طريقة اخرى لان null تظهرلى خطأ عندما استخدمها فى مشروعى مع انها هنا تعمل

ألا يوجد طريقة أفضل للحصول على ال token المسجل الدخول به غير هذا الطريقة التى استخدمها فى هذا الكود .. Node Js أنا استخدم jsonwebtoken لعمل genrate للتوكن .. والان انا احتاج لاضع ال id الخاص بمن يقوم بعمل اوردر .. واريد ان احصل على ال id من خلال التوكن المسجل دخول به .. اناا ستخدمت هذا الكود ونجحت لكنى اتسائل ان كان هناك طريقة اخرى افضل .. وشكرا هذا هو الكود const token = req.header("authorization").substring(7); const decodedToken = jwt.decode(token, { complete: true }); const userId = decodedToken.payload.userId; let order = new OrderModel({ orderItems: orderItemsIds, status: req.body.status, user: userId, }); order = await order.save();

أنا قمت بعمل تطبيق لعمل push notifications ونجحت فى ارسال الاشعارات .. لكنى عندى مشكلة وهى اننى اريد ان احفظ اى اشعار اقوم بارساله فى الداتا بيز الخاصة بى .. هذا هو الكود var FCM = require("fcm-node"); const express = require("express"); const mongoose = require("mongoose"); require("dotenv/config"); const app = express(); app.use(express.json()); const notificationSchema = mongoose.Schema({ name: String, }); const NotificationModel = mongoose.model("Notification", notificationSchema); app.post("/fcm", async (req, res, next) => { try { let fcm = new FCM(process.env.SERVER_KEY); let message = { to: req.body.token, notification: { title: req.body.title, body: req.body.body, }, }; fcm.send(message, function (err, response) { if (err) { next(err); } else { // res.json(response); // res.send(message.notification.body); app.post("/notfs", async (req, res) => { let newNotf = new NotificationModel({ name: message.notification.body, }); newNotf = await newNotf.save(); res.send(newNotf); }); } }); } catch (error) { next(error); } }); app.get("/notfs", async (req, res) => { const notfs = await NotificationModel.find(); res.send(notfs); }); mongoose .connect(process.env.CONNECTION_STRING) .then(() => { console.log("connected"); }) .catch((err) => { console.log(err); }); app.listen(3000, () => { console.log("listened"); }); لماذا لايقوم بحفظ الاشعارات فى الداتا بيز رجاءا لو هناك طريقة افضل من تلك أرجو تركها وشكرا

هدا الكمبوننت يجعل التطبيق بطيئا لاننى استخدمت فيه animation واستخدمته بكثرة فى أغلب سكرينات التطبيق .. هل يمكن فعل شئ فى الكود حتى يكون اسرع ؟ import React, {useEffect, useState, useRef, FC} from 'react'; import { Text, View, Animated, StyleProp, ViewStyle, TextStyle, TextInput, StyleSheet, I18nManager, } from 'react-native'; import {PixelPerfect} from './helper/pixelPerfect'; interface AnimatedInputInter { label: string; styleContainer?: StyleProp<ViewStyle>; styleLabelCon?: StyleProp<ViewStyle>; styleTextCon?: StyleProp<ViewStyle>; styleLabel?: StyleProp<TextStyle>; styleCustomWord?: StyleProp<TextStyle>; styleTextInput?: StyleProp<TextStyle>; keyboardType?: any; hasIcon?: boolean; multiline?: boolean; customIcon?: JSX.Element | JSX.Element[]; styleIconCon?: StyleProp<ViewStyle>; secureTextEntry?: boolean; hasWord?: boolean; customWord?: JSX.Element | JSX.Element[]; oneColor?: boolean | string; } export const AnimatedInput: FC<AnimatedInputInter> = ({ label, styleContainer, styleLabelCon, styleLabel, styleTextInput, keyboardType, hasIcon, hasWord, customWord, customIcon, styleIconCon, secureTextEntry, styleCustomWord, styleTextCon, multiline, oneColor, ...props }) => { const [value, setValue] = useState(''); const [fontSize, setFontSize] = useState(14); const [fontColor, setFontColor] = useState('#515C6F'); const moveText = useRef(new Animated.Value(0)).current; useEffect(() => { if (value !== '') { moveTextTop(); } else if (value === '') { moveTextBottom(); } }, [value]); const onChangeText = (text: string) => { setValue(text); }; const onFocusHandler = () => { if (value !== '') { moveTextTop(); } }; const onBlurHandler = () => { if (value === '') { moveTextBottom(); } }; const moveTextTop = () => { Animated.timing(moveText, { toValue: 1, duration: 200, useNativeDriver: true, }).start(); setFontSize(12); setFontColor('rgba(81,92,111,.5)'); }; const moveTextBottom = () => { Animated.timing(moveText, { toValue: 0, duration: 200, useNativeDriver: true, }).start(); setFontSize(14); setFontColor('#515C6F'); }; const yVal = moveText.interpolate({ inputRange: [0, 1], outputRange: [4, -7], }); const animStyle = { transform: [ { translateY: yVal, }, ], }; return ( <View style={[styles.container, styleContainer]}> {hasIcon && (customIcon ? ( <View style={[styles.iconCon, styleIconCon]}>{customIcon}</View> ) : ( <View style={styles.iconCon}> <Text>X</Text> </View> ))} <Animated.View style={[ styles.labelCon, animStyle, {left: hasIcon ? PixelPerfect(100) : PixelPerfect(30)}, styleLabelCon, ]}> <Text style={[ styles.label, styleLabel, {fontSize: fontSize, color: oneColor ? oneColor : fontColor}, ]}> {label} </Text> </Animated.View> <View style={[ { width: hasWord ? '80%' : '100%', paddingTop: 5, }, ]}> <TextInput textAlign={I18nManager.isRTL ? 'right' : 'left'} onPressIn={moveTextTop} style={[ styles.input, styleTextInput, { width: '100%', height: '40%', }, ]} // value={value} onChangeText={(text: string) => onChangeText(text)} editable={true} onFocus={onFocusHandler} onBlur={onBlurHandler} blurOnSubmit placeholderTextColor={'#727C8E'} keyboardType={keyboardType} secureTextEntry={secureTextEntry} multiline={multiline} {...props} /> </View> {hasWord && (customWord ? ( <View style={[styles.TextCon, styleTextCon]}>{customWord}</View> ) : ( <View style={styles.TextCon}> <Text style={styleCustomWord}>X</Text> </View> ))} </View> ); }; export default AnimatedInput; const styles = StyleSheet.create({ container: { backgroundColor: '#FFFFFF', paddingHorizontal: 10, borderColor: '#bdbdbd', borderRadius: 2, width: '100%', alignSelf: 'center', height: PixelPerfect(140), flexDirection: 'row', alignItems: 'center', }, input: { fontSize: PixelPerfect(25), color: '#000', height: '55%', flex: 4, marginTop: PixelPerfect(40), }, label: { color: '#7C8AA3', fontSize: PixelPerfect(25), }, labelCon: { top: PixelPerfect(40), position: 'absolute', borderRadius: 90, }, iconCon: { height: '100%', width: PixelPerfect(70), justifyContent: 'center', alignItems: 'center', }, TextCon: { height: '100%', width: PixelPerfect(100), justifyContent: 'center', alignItems: 'center', flex: 1, }, });

السلام عليكم .. انا اعمل بريأكت ناتيف واستخدمت textinput صنعته بنفسى وبه animated view .. واستخدمت هذا الكمبوننت فى اماكن كثيرة فى التطبيق وعندها لاحظت ان التطبيق صار أبطأ .. هل كثرة استخادم هذا الكمبوننت يؤثر بالسلب ؟ وما حل مشاكل بطئ التطبيق ؟

أنا استخدم express jwt وانا عندى نوعين من المستخدمين وهما admin و client واريد ان اضيف role ثالث اسميه مثلا vendor ويكون له بعض الصلاحيات المتوسطة كيف أستخدم isRevocked لفعل هذا .. هذا هو كودى const jwt = require("express-jwt"); function auth() { return jwt({ secret: process.env.SECRET, algorithms: ["HS256"], isRevoked: isRevoked, }).unless({ path: [ // { url: "/api/v1/products", methods: ["GET", "OPTIONS"] }, // { url: /\/api\/v1\/us(.*)/, methods: ["GET", "OPTIONS"] }, "/api/v1/users/login", ], }); } async function isRevoked(req, payload, done) { if (payload.userRole === "admin") { done(); } if (payload.userRole === "client") { console.log(payload.userRole); done(null, true); } } module.exports = auth;

السلام عليكم .. اريد انشاء مشروع بالنود جى اس وهو عبارة عن posts و users حيث ان كل يوزر يستطيع ان يقوم بعمل post وانشاءه والتعديل عليه ولكن لا يمكن لغيره ان يقوم بحدذفه او التعديل عليه .. انا اريد ان اقوم بانشاء هذا التطبيق باستخدام النود ولكن ليس عندى العلم الكافى ب jwt رجاء اريد docs او project على جيت هاب او حتى دورة توضيحية حتى يتسنى لى التعلم وشكرا

شكرا اخى نفعت الحمد لله .. كنت اعتقد اننى أحتاج لعمل promise او شئ مشابه .. شكرا أخى

السلام علكيم .. أريد أن أقوم بطرح رقمين باستخدام نود جى اس وكلن هناك مشكلة انه يقوم بطرح القيمة القديمة ليست الحالية .. انا اريد ان أحسب صافى الربح وهو ال netProf عن طريق طرح الايراد وهو rev ناقص المصروفات وهى expens ولكن دائما يقوم بطرح خاطئ هذا هو الكود const express = require("express"); const { Mony } = require("../model/money"); const router = express.Router(); router.get("/", async (req, res) => { const monyState = await Mony.find(); res.send(monyState); }); router.put("/sellCake/:id", async (req, res) => { const monyState = await Mony.find(); const mony = monyState[0].nowMony + req.body.rev * req.body.price; const rev = monyState[0].rev + req.body.rev * req.body.price; const netProf = monyState[0].rev - monyState[0].expens; console.log(mony, rev, netProf); const newState = await Mony.findByIdAndUpdate( req.params.id, { nowMony: mony, rev: rev, netProf: netProf, }, { new: true } ); res.send(newState); }); module.exports = router; هذا هو ال response فى بوست مان هذه البيانات فى الداتا بيز

أبنى متجرا و ال user ثلاثة انواع منهم user - vendor - admin قمت بكتابة كود حتى افرق بين صلاحيات البائع (vendor) والمستخدم العادى (user) ولكنى اريد ان اضيف دور ثالث ألا وهو Admin هذا هو الكود باستخدام express-jwt const jwt = require("express-jwt"); const api = process.env.API_URL; function authFN() { return jwt({ secret: process.env.SECRET, algorithms: ["HS256"], isRevoked: isRevoked, }).unless({ path: [ `${api}/user/login`, `${api}/catgs`, `${api}/user`, { url: `${api}/test`, methods: ["GET", "OPTIONS"] }, ], }); } async function isRevoked(req, payload, done) { if (!payload.isVendor) { done(null, true); } done(); } module.exports = authFN; أى نوع من التغييرات ينبغى ان اطبقها على isRevoked function او على unless ؟؟

انا استخدم ويندوز 8 واريد ان اقوم بفتح ملف x d ولكن البرنامج لا يعمل .. هل توجد طريقة لفتح ملفات x d بدون adobe x d ؟؟

ما حل هذا الخطأ ERROR ReferenceError: Can't find variable: Intl import React from 'react'; import {View, Text, I18nManager} from 'react-native'; import i18n from "i18next" import {initReactI18next} from "react-i18next" import ar from './langs/ar'; import en from './langs/en'; import Screen from './langs/Screen'; const {isRTL, forceRTL, allowRTL} = I18nManager; i18n.use(initReactI18next).init({ resources: { ar: { translation: ar, }, en: { translation: en, }, }, lng: isRTL ? 'ar' : 'en', fallbackLng: isRTL ? 'ar' : 'en', interpolation: { escapeValue: false, }, }); export default function App() { return ( <View style={{flex:1}}> {/* <Screen /> */} </View> ); }

السلام عليكم ورحمة الله .. انا مطور رياكت ناتيف واتعلم نود واعرف انه التعلم رحلة لا تنتهى لكن يمكننا تحديد المطلوب للوصول لمستوى معين وانا اريد ان اعرف مالدى مازلت احتاجه حتى اصل الى مستوى junior node developer ؟ هده هى مهاراتى js es6 express mongo db mogoose mustache js socket io type script unit test integration test heroku I can make [get, put, post, delete] requests, Upload images using multer, Hashing the Password, Login and Create a Token, Protect the Requests with the Token, Upload server on Heroku رجاء أريد ان اعرف ما ينقصنى ام ان هدا المستوى كافى ام ماذا احتاج ؟

السلام عليكم لو عندى view وهى مستقيمة كيف اجعلها نائمة بدون ان اغير flexDirection ل container الخاص بها مثلا <View style={{ hight: 50, width:20, backgroundColor:"red" }} /> كودى هذا ينتج عنه view لونها احمر مستقيمة .. انا اريد انا اجعلها نائمة بدون ان اغير ال hight و width .. هل يمكن فعلها ب react native ؟

انا توقفت عند تلك النقطة .. اريد ان اقوم بتحويل ماتبقى من هذه الفانكشن لكلاس لاننى اريد رفع باكدج .. ارجو المساعدة import React, {useCallback, memo, useMemo} from 'react'; import { StyleSheet, Animated, View, TouchableWithoutFeedback, I18nManager, } from 'react-native'; import {ISwitchInter} from './types'; export class Switch extends React.Component<ISwitchInter> { constructor(props: any) { super(props); const {isActive = false} = this.props; this.state = {active: false}; this.slideInOut = React.createRef( new Animated.Value(isActive ? 1 : 0), ).current; } render() { const {contentContainerStyle, onValueChange, thumbStyle} = this.props; const toggleActive = useCallback(() => { // setActive(e => !e); this.setState({ active: !this.state.active, }); onValueChange && onValueChange(this.state.active); Animated.spring(this.slideInOut, { toValue: this.state.active ? 0 : 1, useNativeDriver: true, }).start(); }, [this.state.active, this.state.isActive]); const translate = { transform: [ { translateX: this.slideInOut.interpolate({ inputRange: [0, 1], outputRange: [0, 18.5], }), }, ], }; return ( <TouchableWithoutFeedback // onPress={toggleActive} > <View style={[ styles.container, contentContainerStyle, {borderColor: this.state.active ? '#FDEC00' : '#707070'}, ]}> <Animated.View style={[ styles.thumb, translate, thumbStyle, !this.state.active && {backgroundColor: '#707070'}, ]} /> </View> </TouchableWithoutFeedback> ); // [this.state.active, translate], } } export default memo(Switch); const styles = StyleSheet.create({ container: { backgroundColor: '#fff', width: 40, height: 18, borderRadius: 50, padding: 3, justifyContent: 'center', alignItems: I18nManager.isRTL ? 'flex-end' : 'flex-start', }, thumb: { width: 15, height: 15, borderRadius: 25, backgroundColor: '#FDEC00', }, });

أقصد ان صورة الايقونة يتم اقتصاص منها الاجزاء خارج الدائرة

السلام عليكم أقوم بعمل أيقونة لتطبيق أندرويد وكل شئ يعمل على ما يرام ولكن الايقونة تتأكل بعضها لانها تعرض بشكل دائرى وليس مربع .. ماالحل ؟؟

عندما أقوم بعمل pod install تظهر لى هده المشكلة 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 [!] The RNCheckNotificationPermission pod failed to validate due to 1 error: - ERROR | attributes: Missing required attribute homepage. - WARN | source: The version should be included in the Git tag. - WARN | description: The description is equal to the summary. هدا هو ملف ال podfile, platform :ios, '10.0' require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' target 'nasj' do # Pods for nasj pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector" pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec" pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired" pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety" pod 'React', :path => '../node_modules/react-native/' pod 'React-Core', :path => '../node_modules/react-native/' pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules' pod 'React-Core/DevSupport', :path => '../node_modules/react-native/' pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS' pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation' pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob' pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image' pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS' pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network' pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings' pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text' pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration' pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/' pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact' pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi' pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor' pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector' pod 'ReactCommon/jscallinvoker', :path => "../node_modules/react-native/ReactCommon" pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon" pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga' pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec' pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec' pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec' pod 'RCTRestart', :path => '../node_modules/react-native-restart/ios' pod 'react-native-twitter-signin', :path => '../node_modules/react-native-twitter-signin' pod 'RNFBApp', :path => '../node_modules/@react-native-firebase/app' pod 'RNFBMessaging', :path => '../node_modules/@react-native-firebase/messaging' pod 'RNDeviceInfo', :path => '../node_modules/react-native-device-info' pod 'CodePush', :path => '../node_modules/react-native-code-push' pod 'RNCheckNotificationPermission', :path => '../node_modules/react-native-check-notification-permission/ios' pod 'RNFastImage', :path => '../node_modules/react-native-fast-image' pre_install do |installer| puts("Image fix for ios14: remove this when upgradeing to >= 0.63.3") find = "_currentFrame.CGImage;" replace = "_currentFrame.CGImage ;} else { [super displayLayer:layer];" op = `sed -ie "s/#{find}/#{replace}/" ../node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m` puts("Image fix for ios14 done") end target 'nasjTests' do inherit! :search_paths # Pods for testing end use_native_modules! end target 'nasj-tvOS' do # Pods for nasj-tvOS target 'nasj-tvOSTests' do inherit! :search_paths # Pods for testing end end

السلام عليكم , كنت اعتقد ان render تعنى عرض الكمبوننت , اى ظهوره على الشاشة لكنى اعتقد ان هده الكلمة عميقة ولها معنى مختلف .. اريد ان اعرف شرح كلمة render المستخدة فى رياكت ورياكت ناتيف

أريد إستعمال دوال جافاسكربت أو الـ Regex لتحويل تواريخ من مثل “Tue Aug 31 2021 14:29:37 GMT+0200 (EET)” إلى “2021-08-31” هذه هي السلسلة النصية كاملة “Tue Aug 31 2021 14:29:37 GMT+0200 (EET)” قد حاولت استخدام سلسلة فرعية مثل : console.log (date.toString (). substring (4، 16) .replace (''، '-'))؛ وحصلت على هذا : Tue Aug 31 2021 15:06:04.520 و لكن أريد أن أجعلها تظهر على هذا النحو "2021-08-31" كيف أجعله باستخدام أساليب سلاسل Regex أو Javascript؟

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0. Use '--warning-mode all' to show the individual deprecation warnings. See https://docs.gradle.org/6.9/userguide/command_line_interface.html#sec:command_line_warnings 12 actionable tasks: 2 executed, 10 up-to-date

import React from 'react'; import {StyleSheet, View, Dimensions, Text, SafeAreaView} from 'react-native'; import Animated from 'react-native-reanimated'; import {PanGestureHandler, State} from 'react-native-gesture-handler'; const {width} = Dimensions.get('window'); const {cond, eq, add, call, set, Value, event, or} = Animated; export default class Example extends React.Component { constructor(props) { super(props); this.dragX = new Value(0); this.dragY = new Value(0); this.absoluteY = new Value(100); this.offsetX = new Value(width / 2); this.offsetY = new Value(100); this.gestureState = new Value(-1); this.onGestureEvent = event([ { nativeEvent: { // translationX: this.dragX, // translationY: this.dragY, state: this.gestureState, absoluteY: this.absoluteY, }, }, ]); // this.addY = add(this.offsetY, this.dragY); // this.addX = add(this.offsetX, this.dragX); this.circleY = add(this.absoluteY, new Value(200)); // this.transX = cond( // eq(this.gestureState, State.ACTIVE), // this.addX, // set(this.offsetX, this.addX) // ); // this.transY = cond(eq(this.gestureState, State.ACTIVE), this.addY, [ // set(this.offsetY, this.addY) // ]); this.state = {dragging: false, y: 0}; } start = ([]) => { this.setState({dragging: true}); }; moving = ([y, circleY]) => { this.setState({y}); }; done = ([]) => { this.setState({dragging: false}); }; render() { return ( <SafeAreaView style={styles.container}> <Text>y: {this.state.y}</Text> <Animated.Code> {() => cond(eq(this.gestureState, State.BEGAN), call([], this.start))} </Animated.Code> <Animated.Code> {() => cond( eq(this.gestureState, State.ACTIVE), call([this.absoluteY, this.circleY], this.moving), ) } </Animated.Code> <Animated.Code> {() => cond( or( eq(this.gestureState, State.END), eq(this.gestureState, State.FAILED), eq(this.gestureState, State.CANCELLED), ), call([], this.done), ) } </Animated.Code> {this.state.dragging && ( <Animated.View style={[styles.box, {top: this.circleY}]} /> )} <PanGestureHandler maxPointers={1} onGestureEvent={this.onGestureEvent} onHandlerStateChange={this.onGestureEvent}> <Animated.View style={[ // styles.box, { top: this.absoluteY, }, ]}> <Text>hello</Text> </Animated.View> </PanGestureHandler> </SafeAreaView> ); } }

ما هى أفضل مكتبات الانيميشن المتاحة ف الرياكت نيتف وما هى افضل واحده من حيث الاستخدام ؟