I have created a new react-native project and I am trying to build the iOS code but it is failing with below error:

fatal error: module map file

'/Users/ritz/Library/Developer/Xcode/DerivedData/thoughtrail-blthhaitoghgvzenyxayuwazwzfm/Build/Products/Release-iphonesimulator/YogaKit/YogaKit.modulemap' not found

react-native versions:react-native-cli: 2.0.1react-native: 0.62.2

stack trace from Xcode:

CompileC /Users/ritz/Library/Developer/Xcode/DerivedData/thoughtrail-blthhaitoghgvzenyxayuwazwzfm/Build/Intermediates.noindex/thoughtrail.build/Release-iphonesimulator/thoughtrail.build/Objects-normal/x86_64/thoughtrail_vers.o /Users/ritz/Library/Developer/Xcode/DerivedData/thoughtrail-blthhaitoghgvzenyxayuwazwzfm/Build/Intermediates.noindex/thoughtrail.build/Release-iphonesimulator/thoughtrail.build/DerivedSources/thoughtrail_vers.c normal x86_64 c com.apple.compilers.llvm.clang.1_0.compiler (in target 'thoughtrail' from project 'thoughtrail')    cd /Users/ritz/Documents/workspace/threesixnine/thoughtrail/source/mobile/thoughtrail/ios    export LANG=en_US.US-ASCII    /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/clang -x c -target x86_64-apple-ios9.0-simulator -fmessage-length=0 -fdiagnostics-show-note-include-stack -fmacro-backtrace-limit=0 -std=gnu99 -fmodules -gmodules -fmodules-cache-path=/Users/ritz/Library/Developer/Xcode/DerivedData/ModuleCache.noindex -fmodules-prune-interval=86400 -fmodules-prune-after=345600 -fbuild-session-file=/Users/ritz/Library/Developer/Xcode/DerivedData/ModuleCache.noindex/Session.modulevalidation -fmodules-validate-once-per-build-session -Wnon-modular-include-in-framework-module -Werror=non-modular-include-in-framework-module -Wno-trigraphs -fpascal-strings -Os -fno-common -Wno-missing-field-initializers -Wno-missing-prototypes -Werror=return-type -Wunreachable-code -Werror=deprecated-objc-isa-usage -Werror=objc-root-class -Wno-missing-braces -Wparentheses -Wswitch -Wunused-function -Wno-unused-label -Wno-unused-parameter -Wunused-variable -Wunused-value -Wempty-body -Wuninitialized -Wconditional-uninitialized -Wno-unknown-pragmas -Wno-shadow -Wno-four-char-constants -Wno-conversion -Wconstant-conversion -Wint-conversion -Wbool-conversion -Wenum-conversion -Wno-float-conversion -Wnon-literal-null-conversion -Wobjc-literal-conversion -Wshorten-64-to-32 -Wpointer-sign -Wno-newline-eof -DCOCOAPODS=1 -isysroot /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator13.4.sdk -fasm-blocks -fstrict-aliasing -Wdeprecated-declarations -g -fvisibility=hidden -Wno-sign-conversion -Winfinite-recursion -Wcomma -Wblock-capture-autoreleasing -Wstrict-prototypes -Wno-semicolon-before-method-body -iquote /Users/ritz/Library/Developer/Xcode/DerivedData/thoughtrail-blthhaitoghgvzenyxayuwazwzfm/Build/Intermediates.noindex/thoughtrail.build/Release-iphonesimulator/thoughtrail.build/thoughtrail-generated-files.hmap -I/Users/ritz/Library/Developer/Xcode/DerivedData/thoughtrail-blthhaitoghgvzenyxayuwazwzfm/Build/Intermediates.noindex/thoughtrail.build/Release-iphonesimulator/thoughtrail.build/thoughtrail-own-target-headers.hmap -I/Users/ritz/Library/Developer/Xcode/DerivedData/thoughtrail-blthhaitoghgvzenyxayuwazwzfm/Build/Intermediates.noindex/thoughtrail.build/Release-iphonesimulator/thoughtrail.build/thoughtrail-all-target-headers.hmap -iquote /Users/ritz/Library/Developer/Xcode/DerivedData/thoughtrail-blthhaitoghgvzenyxayuwazwzfm/Build/Intermediates.noindex/thoughtrail.build/Release-iphonesimulator/thoughtrail.build/thoughtrail-project-headers.hmap -I/Users/ritz/Library/Developer/Xcode/DerivedData/thoughtrail-blthhaitoghgvzenyxayuwazwzfm/Build/Products/Release-iphonesimulator/include -I/Users/ritz/Documents/workspace/threesixnine/thoughtrail/source/mobile/thoughtrail/ios/Pods/Headers/Public -I/Users/ritz/Documents/workspace/threesixnine/thoughtrail/source/mobile/thoughtrail/ios/Pods/Headers/Public/CocoaAsyncSocket -I/Users/ritz/Documents/workspace/threesixnine/thoughtrail/source/mobile/thoughtrail/ios/Pods/Headers/Public/CocoaLibEvent -I/Users/ritz/Documents/workspace/threesixnine/thoughtrail/source/mobile/thoughtrail/ios/Pods/Headers/Public/DoubleConversion -I/Users/ritz/Documents/workspace/threesixnine/thoughtrail/source/mobile/thoughtrail/ios/Pods/Headers/Public/FBLazyVector -I/Users/ritz/Documents/workspace/threesixnine/thoughtrail/source/mobile/thoughtrail/ios/Pods/Headers/Public/FBReactNativeSpec -I/Users/ritz/Documents/workspace/threesixnine/thoughtrail/source/mobile/thoughtrail/ios/Pods/Headers/Public/Flipper -I/Users/ritz/Documents/workspace/threesixnine/thoughtrail/source/mobile/thoughtrail/ios/Pods/Headers/Public/Flipper-DoubleConversion -I/Users/ritz/Documents/workspace/threesixnine/thoughtrail/source/mobile/thoughtrail/ios/Pods/Headers/Public/Flipper-Folly -I/Users/ritz/Documents/workspace/threesixnine/thoughtrail/source/mobile/thoughtrail/ios/Pods/Headers/Public/Flipper-Glog -I/Users/ritz/Documents/workspace/threesixnine/thoughtrail/source/mobile/thoughtrail/ios/Pods/Headers/Public/Flipper-PeerTalk -I/Users/ritz/Documents/workspace/threesixnine/thoughtrail/source/mobile/thoughtrail/ios/Pods/Headers/Public/Flipper-RSocket -I/Users/ritz/Documents/workspace/threesixnine/thoughtrail/source/mobile/thoughtrail/ios/Pods/Headers/Public/FlipperKit -I/Users/ritz/Documents/workspace/threesixnine/thoughtrail/source/mobile/thoughtrail/ios/Pods/Headers/Public/OpenSSL-Universal -I/Users/ritz/Documents/workspace/threesixnine/thoughtrail/source/mobile/thoughtrail/ios/Pods/Headers/Public/RCTRequired -I/Users/ritz/Documents/workspace/threesixnine/thoughtrail/source/mobile/thoughtrail/ios/Pods/Headers/Public/RCTTypeSafety -I/Users/ritz/Documents/workspace/threesixnine/thoughtrail/source/mobile/thoughtrail/ios/Pods/Headers/Public/React-Core -I/Users/ritz/Documents/workspace/threesixnine/thoughtrail/source/mobile/thoughtrail/ios/Pods/Headers/Public/React-RCTText -I/Users/ritz/Documents/workspace/threesixnine/thoughtrail/source/mobile/thoughtrail/ios/Pods/Headers/Public/React-cxxreact -I/Users/ritz/Documents/workspace/threesixnine/thoughtrail/source/mobile/thoughtrail/ios/Pods/Headers/Public/React-jsi -I/Users/ritz/Documents/workspace/threesixnine/thoughtrail/source/mobile/thoughtrail/ios/Pods/Headers/Public/React-jsiexecutor -I/Users/ritz/Documents/workspace/threesixnine/thoughtrail/source/mobile/thoughtrail/ios/Pods/Headers/Public/React-jsinspector -I/Users/ritz/Documents/workspace/threesixnine/thoughtrail/source/mobile/thoughtrail/ios/Pods/Headers/Public/ReactCommon -I/Users/ritz/Documents/workspace/threesixnine/thoughtrail/source/mobile/thoughtrail/ios/Pods/Headers/Public/Yoga -I/Users/ritz/Documents/workspace/threesixnine/thoughtrail/source/mobile/thoughtrail/ios/Pods/Headers/Public/YogaKit -I/Users/ritz/Documents/workspace/threesixnine/thoughtrail/source/mobile/thoughtrail/ios/Pods/Headers/Public/glog -I/Users/ritz/Documents/workspace/threesixnine/thoughtrail/source/mobile/thoughtrail/ios/Pods/Headers/Public/react-native-webview -I/Users/ritz/Documents/workspace/threesixnine/thoughtrail/source/mobile/thoughtrail/ios/Pods/Headers/Private/React-Core -I/Users/ritz/Library/Developer/Xcode/DerivedData/thoughtrail-blthhaitoghgvzenyxayuwazwzfm/Build/Intermediates.noindex/thoughtrail.build/Release-iphonesimulator/thoughtrail.build/DerivedSources-normal/x86_64 -I/Users/ritz/Library/Developer/Xcode/DerivedData/thoughtrail-blthhaitoghgvzenyxayuwazwzfm/Build/Intermediates.noindex/thoughtrail.build/Release-iphonesimulator/thoughtrail.build/DerivedSources/x86_64 -I/Users/ritz/Library/Developer/Xcode/DerivedData/thoughtrail-blthhaitoghgvzenyxayuwazwzfm/Build/Intermediates.noindex/thoughtrail.build/Release-iphonesimulator/thoughtrail.build/DerivedSources -F/Users/ritz/Library/Developer/Xcode/DerivedData/thoughtrail-blthhaitoghgvzenyxayuwazwzfm/Build/Products/Release-iphonesimulator -fmodule-map-file=/Users/ritz/Library/Developer/Xcode/DerivedData/thoughtrail-blthhaitoghgvzenyxayuwazwzfm/Build/Products/Release-iphonesimulator/YogaKit/YogaKit.modulemap -fmodule-map-file=/Users/ritz/Documents/workspace/threesixnine/thoughtrail/source/mobile/thoughtrail/ios/Pods/Headers/Public/yoga/Yoga.modulemap -MMD -MT dependencies -MF /Users/ritz/Library/Developer/Xcode/DerivedData/thoughtrail-blthhaitoghgvzenyxayuwazwzfm/Build/Intermediates.noindex/thoughtrail.build/Release-iphonesimulator/thoughtrail.build/Objects-normal/x86_64/thoughtrail_vers.d --serialize-diagnostics /Users/ritz/Library/Developer/Xcode/DerivedData/thoughtrail-blthhaitoghgvzenyxayuwazwzfm/Build/Intermediates.noindex/thoughtrail.build/Release-iphonesimulator/thoughtrail.build/Objects-normal/x86_64/thoughtrail_vers.dia -c /Users/ritz/Library/Developer/Xcode/DerivedData/thoughtrail-blthhaitoghgvzenyxayuwazwzfm/Build/Intermediates.noindex/thoughtrail.build/Release-iphonesimulator/thoughtrail.build/DerivedSources/thoughtrail_vers.c -o /Users/ritz/Library/Developer/Xcode/DerivedData/thoughtrail-blthhaitoghgvzenyxayuwazwzfm/Build/Intermediates.noindex/thoughtrail.build/Release-iphonesimulator/thoughtrail.build/Objects-normal/x86_64/thoughtrail_vers.o

Kindly advise.

I am building a React Native application to be able to stream my phone content to a local NodeJS server.

On android, it works great with MediaProjectionManager but on iOS this is more complicated.

I tried to do it with RPScreenRecorder, this is my code

#import "ScreenShare.h"@implementation ScreenShareRCT_EXPORT_MODULE();- (NSString *) imageFromSampleBuffer:(CMSampleBufferRef) sampleBuffer{  CVImageBufferRef imageBuffer = CMSampleBufferGetImageBuffer(sampleBuffer);  CIImage *ciImage = [CIImage imageWithCVPixelBuffer:imageBuffer];  CIContext *temporaryContext = [CIContext contextWithOptions:nil];  CGImageRef videoImage = [temporaryContext                           createCGImage:ciImage                           fromRect:CGRectMake(0, 0,                                               CVPixelBufferGetWidth(imageBuffer),                                               CVPixelBufferGetHeight(imageBuffer))];  UIImage *image = [[UIImage alloc] initWithCGImage:videoImage];  NSString *base64String = [UIImagePNGRepresentation(image) base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength];  CGImageRelease(videoImage);  return (base64String);}- (NSArray<NSString *> *)supportedEvents{  return @[@"ImageCaptured"];}RCT_REMAP_METHOD(start,                 startWithResolver:(RCTPromiseResolveBlock)resolve                 rejecter:(RCTPromiseRejectBlock)reject){  NSMutableDictionary *result = [[NSMutableDictionary alloc] init];  [result setObject:@true forKey:@"success"];  if (@available(iOS 11.0, *)) {    if([RPScreenRecorder.sharedRecorder isRecording]) {      return resolve(result);    }    [RPScreenRecorder.sharedRecorder startCaptureWithHandler:^(CMSampleBufferRef  _Nonnull sampleBuffer, RPSampleBufferType bufferType, NSError * _Nullable error) {      dispatch_sync(dispatch_get_main_queue(), ^{        if(bufferType == RPSampleBufferTypeVideo) {          NSString *strEncoded = [self imageFromSampleBuffer:sampleBuffer];          [self sendEventWithName:@"ImageCaptured" body:@{@"image": strEncoded}];        }      });    } completionHandler:^(NSError * _Nullable error) {      if(error == NULL) return resolve(result);      // The user declined application recording      if([error code] == -5801) {        return reject(@"401", [error localizedDescription], error);      }      reject([NSString stringWithFormat:@"%ld", [error code]], [error localizedDescription], error);    }];  } else {    NSError * error = [NSError errorWithDomain:@"com.xxx.ConnectApp" code:426 userInfo:nil];    reject([NSString stringWithFormat:@"%ld", [error code]], @"Failed to start screen capture", error);  };}RCT_REMAP_METHOD(stop,                 stopWithResolver:(RCTPromiseResolveBlock)resolve                 rejecter:(RCTPromiseRejectBlock)reject){  NSMutableDictionary *result = [[NSMutableDictionary alloc] init];  [result setObject:@true forKey:@"success"];  if (@available(iOS 11.0, *)) {    [RPScreenRecorder.sharedRecorder stopCaptureWithHandler:^(NSError * _Nullable error) {      if(error == NULL) return resolve(result);      reject([NSString stringWithFormat:@"%ld", [error code]], [error localizedDescription], error);    }];  } else {    NSError * error = [NSError errorWithDomain:@"com.xxx.ConnectApp" code:426 userInfo:nil];    reject([NSString stringWithFormat:@"%ld", [error code]], @"Failed to stop screen capture", error);  }}@end

The video quality is not really good and it stops when I am outside the app. The goal of the app is to be able to stream outside the app and not the app.

I investigate another solution to create an airplay server on my NodeJS local server but I can not found any documentation, the only documentation or module I get are old and did not work.

I'm beginner for react-native, my assignment is in functional react native form. I wish someone can help me solve this problem. This is the class component react native codefrom this source: https://github.com/nathvarun/React-Native-Layout-Tutorial-Series/blob/master/Project%20Files/12%20Tinder%20Swipe%20Deck/%232%20Complete%20Animation/App.js

import React from 'react';import { StyleSheet, Text, View, Dimensions, Image, Animated, PanResponder } from 'react-native';const SCREEN_HEIGHT = Dimensions.get('window').heightconst SCREEN_WIDTH = Dimensions.get('window').widthimport Icon from 'react-native-vector-icons/Ionicons'const Users = [  { id: "1", uri: require('./assets/1.jpg') },  { id: "2", uri: require('./assets/2.jpg') },  { id: "3", uri: require('./assets/3.jpg') },  { id: "4", uri: require('./assets/4.jpg') },  { id: "5", uri: require('./assets/5.jpg') },]export default class App extends React.Component {  constructor() {    super()    this.position = new Animated.ValueXY()    this.state = {      currentIndex: 0    }    this.rotate = this.position.x.interpolate({      inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],      outputRange: ['-10deg', '0deg', '10deg'],      extrapolate: 'clamp'    })    this.rotateAndTranslate = {      transform: [{        rotate: this.rotate      },      ...this.position.getTranslateTransform()      ]    }    this.likeOpacity = this.position.x.interpolate({      inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],      outputRange: [0, 0, 1],      extrapolate: 'clamp'    })    this.dislikeOpacity = this.position.x.interpolate({      inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],      outputRange: [1, 0, 0],      extrapolate: 'clamp'    })    this.nextCardOpacity = this.position.x.interpolate({      inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],      outputRange: [1, 0, 1],      extrapolate: 'clamp'    })    this.nextCardScale = this.position.x.interpolate({      inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],      outputRange: [1, 0.8, 1],      extrapolate: 'clamp'    })  }  componentWillMount() {    this.PanResponder = PanResponder.create({      onStartShouldSetPanResponder: (evt, gestureState) => true,      onPanResponderMove: (evt, gestureState) => {        this.position.setValue({ x: gestureState.dx, y: gestureState.dy })      },      onPanResponderRelease: (evt, gestureState) => {        if (gestureState.dx > 120) {          Animated.spring(this.position, {            toValue: { x: SCREEN_WIDTH + 100, y: gestureState.dy }          }).start(() => {            this.setState({ currentIndex: this.state.currentIndex + 1 }, () => {              this.position.setValue({ x: 0, y: 0 })            })          })        }        else if (gestureState.dx < -120) {          Animated.spring(this.position, {            toValue: { x: -SCREEN_WIDTH - 100, y: gestureState.dy }          }).start(() => {            this.setState({ currentIndex: this.state.currentIndex + 1 }, () => {              this.position.setValue({ x: 0, y: 0 })            })          })        }        else {          Animated.spring(this.position, {            toValue: { x: 0, y: 0 },            friction: 4          }).start()        }      }    })  }  renderUsers = () => {    return Users.map((item, i) => {      if (i < this.state.currentIndex) {        return null      }      else if (i == this.state.currentIndex) {        return (<Animated.View            {...this.PanResponder.panHandlers}            key={item.id} style={[this.rotateAndTranslate, { height: SCREEN_HEIGHT - 120, width: SCREEN_WIDTH, padding: 10, position: 'absolute' }]}><Animated.View style={{ opacity: this.likeOpacity, transform: [{ rotate: '-30deg' }], position: 'absolute', top: 50, left: 40, zIndex: 1000 }}><Text style={{ borderWidth: 1, borderColor: 'green', color: 'green', fontSize: 32, fontWeight: '800', padding: 10 }}>LIKE</Text></Animated.View><Animated.View style={{ opacity: this.dislikeOpacity, transform: [{ rotate: '30deg' }], position: 'absolute', top: 50, right: 40, zIndex: 1000 }}><Text style={{ borderWidth: 1, borderColor: 'red', color: 'red', fontSize: 32, fontWeight: '800', padding: 10 }}>NOPE</Text></Animated.View><Image              style={{ flex: 1, height: null, width: null, resizeMode: 'cover', borderRadius: 20 }}              source={item.uri} /></Animated.View>        )      }      else {        return (<Animated.View            key={item.id} style={[{              opacity: this.nextCardOpacity,              transform: [{ scale: this.nextCardScale }],              height: SCREEN_HEIGHT - 120, width: SCREEN_WIDTH, padding: 10, position: 'absolute'            }]}><Animated.View style={{ opacity: 0, transform: [{ rotate: '-30deg' }], position: 'absolute', top: 50, left: 40, zIndex: 1000 }}><Text style={{ borderWidth: 1, borderColor: 'green', color: 'green', fontSize: 32, fontWeight: '800', padding: 10 }}>LIKE</Text></Animated.View><Animated.View style={{ opacity: 0, transform: [{ rotate: '30deg' }], position: 'absolute', top: 50, right: 40, zIndex: 1000 }}><Text style={{ borderWidth: 1, borderColor: 'red', color: 'red', fontSize: 32, fontWeight: '800', padding: 10 }}>NOPE</Text></Animated.View><Image              style={{ flex: 1, height: null, width: null, resizeMode: 'cover', borderRadius: 20 }}              source={item.uri} /></Animated.View>        )      }    }).reverse()  }  render() {    return (<View style={{ flex: 1 }}><View style={{ height: 60 }}></View><View style={{ flex: 1 }}>          {this.renderUsers()}</View><View style={{ height: 60 }}></View></View>    );  }}const styles = StyleSheet.create({  container: {    flex: 1,    backgroundColor: '#fff',    alignItems: 'center',    justifyContent: 'center',  },});

This I rewrite in functional component react native but it get the error cant get panresponder

import React, { useEffect,useState } from 'react';import { StyleSheet, Text, View, Dimensions, Image, Animated, PanResponder } from 'react-native';const SCREEN_HEIGHT = Dimensions.get('window').heightconst SCREEN_WIDTH = Dimensions.get('window').widthimport Icon from 'react-native-vector-icons/Ionicons'const Users = [  { id: "1", uri: require('../image/antman.jpg') },  { id: "2", uri: require('../image/butterfly.jpg') },  { id: "3", uri: require('../image/captainmarvel.jpg') },  { id: "4", uri: require('../image/antman.jpg') },  { id: "5", uri: require('../image/antman.jpg') },]const SignUpScreen = () =>{    const position = new Animated.ValueXY()    const [currentIndex,setCurrentIndex] =useState(0);    //const [PanResponder,setPanResponder] = useState('');    const rotate = position.x.interpolate({      inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],      outputRange: ['-10deg', '0deg', '10deg'],      extrapolate: 'clamp'    })    const rotateAndTranslate = {      transform: [{        rotate: rotate      },      ...position.getTranslateTransform()      ]    }    const likeOpacity = position.x.interpolate({      inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],      outputRange: [0, 0, 1],      extrapolate: 'clamp'    })    const dislikeOpacity = position.x.interpolate({      inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],      outputRange: [1, 0, 0],      extrapolate: 'clamp'    })    const nextCardOpacity = position.x.interpolate({      inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],      outputRange: [1, 0, 1],      extrapolate: 'clamp'    })    const nextCardScale = position.x.interpolate({      inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],      outputRange: [1, 0.8, 1],      extrapolate: 'clamp'    })  useEffect(() => {    const panResponder = PanResponder.create({      onStartShouldSetPanResponder: (evt, gestureState) => true,      onPanResponderMove: (evt, gestureState) => {        position.setValue({ x: gestureState.dx, y: gestureState.dy })      },      onPanResponderRelease: (evt, gestureState) => {        if (gestureState.dx > 120) {          Animated.spring(position, {            toValue: { x: SCREEN_WIDTH + 100, y: gestureState.dy }          }).start(() => {            setState({ currentIndex: currentIndex + 1 }, () => {              position.setValue({ x: 0, y: 0 })            })          })        }        else if (gestureState.dx < -120) {          Animated.spring(position, {            toValue: { x: -SCREEN_WIDTH - 100, y: gestureState.dy }          }).start(() => {            setState({ currentIndex: currentIndex + 1 }, () => {              position.setValue({ x: 0, y: 0 })            })          })        }        else {          Animated.spring(position, {            toValue: { x: 0, y: 0 },            friction: 4          }).start()        }      }    })  })  renderUsers = () => {    return Users.map((item, i) => {      if (i < currentIndex) {        return null      }      else if (i == currentIndex) {        return (<Animated.View            {...panResponder.panHandlers}            key={item.id} style={[rotateAndTranslate, { height: SCREEN_HEIGHT - 120, width: SCREEN_WIDTH, padding: 10, position: 'absolute' }]}><Animated.View style={{ opacity: likeOpacity, transform: [{ rotate: '-30deg' }], position: 'absolute', top: 50, left: 40, zIndex: 1000 }}><Text style={{ borderWidth: 1, borderColor: 'green', color: 'green', fontSize: 32, fontWeight: '800', padding: 10 }}>LIKE</Text></Animated.View><Animated.View style={{ opacity: dislikeOpacity, transform: [{ rotate: '30deg' }], position: 'absolute', top: 50, right: 40, zIndex: 1000 }}><Text style={{ borderWidth: 1, borderColor: 'red', color: 'red', fontSize: 32, fontWeight: '800', padding: 10 }}>NOPE</Text></Animated.View><Image              style={{ flex: 1, height: null, width: null, resizeMode: 'cover', borderRadius: 20 }}              source={item.uri} /></Animated.View>        )      }      else {        return (<Animated.View            key={item.id} style={[{              opacity: nextCardOpacity,              transform: [{ scale: nextCardScale }],              height: SCREEN_HEIGHT - 120, width: SCREEN_WIDTH, padding: 10, position: 'absolute'            }]}><Animated.View style={{ opacity: 0, transform: [{ rotate: '-30deg' }], position: 'absolute', top: 50, left: 40, zIndex: 1000 }}><Text style={{ borderWidth: 1, borderColor: 'green', color: 'green', fontSize: 32, fontWeight: '800', padding: 10 }}>LIKE</Text></Animated.View><Animated.View style={{ opacity: 0, transform: [{ rotate: '30deg' }], position: 'absolute', top: 50, right: 40, zIndex: 1000 }}><Text style={{ borderWidth: 1, borderColor: 'red', color: 'red', fontSize: 32, fontWeight: '800', padding: 10 }}>NOPE</Text></Animated.View><Image              style={{ flex: 1, height: null, width: null, resizeMode: 'cover', borderRadius: 20 }}              source={item.uri} /></Animated.View>        )      }    }).reverse()  }    return (<View style={{ flex: 1 }}><View style={{ height: 60 }}></View><View style={{ flex: 1 }}>          {renderUsers()}</View><View style={{ height: 60 }}></View></View>    );    };const styles = StyleSheet.create({  container: {    flex: 1,    backgroundColor: '#fff',    alignItems: 'center',    justifyContent: 'center',  },});export default SignUpScreen;

Can anybody help me for this error? Thank you very much

For some reason I'm not able to do NPM install on my project anymore since I'm getting the following messages:

  SOLINK_MODULE(target) Release/.nodeclang: warning: using sysroot for 'iPhoneSimulator' but targeting 'MacOSX' [-Wincompatible-sysroot]ld: warning: building for macOS, but linking in .tbd file (/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator13.5.sdk/usr/lib/libc++.tbd) built for iOS Simulatorld: warning: building for macOS, but linking in .tbd file (/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator13.5.sdk/usr/lib/libSystem.tbd) built for iOS Simulatorld: warning: building for macOS, but linking in .tbd file (/usr/lib/system/libcache.dylib) built for iOS Simulatorld: warning: building for macOS, but linking in .tbd file (/usr/lib/system/libcommonCrypto.dylib) built for iOS Simulatorld: warning: building for macOS, but linking in .tbd file (/usr/lib/system/libcompiler_rt.dylib) built for iOS Simulatorld: warning: building for macOS, but linking in .tbd file (/usr/lib/system/libcopyfile.dylib) built for iOS Simulatorld: warning: bui

How to fix this???? I have tried uninstalling node and reinstalling node but I'm still getting the same error.

I have came across few solutions specific for ios and Android to prevent screen-capturing and taking screenshots. But how do i disable screen-capturing in react native?

I am trying to use RNFirebase MLKit image labelling in my RN app. It works fine on android, but on iOS i get the following error,

NativeFirebaseError: [vision/file-not-found] The local file specified does not exist on the device.

The images are taken though "@react-native-community/cameraroll" and the ios image path is as follows,

ph://45983F53-3C96-42D0-9337-C9F681293627/L0/001

The fixes i have tried are,

import {utils} from '@react-native-firebase/app';${utils.FilePath.PICTURES_DIRECTORY}/${                d[key].node.image.filename             }

'assets-library'+'://asset/asset.JPEG?id='+               d[key].node.image.uri.substring(5).replace('/L0/001', '') +'&ext=JPEG'

ph-upload://45983F53-3C96-42D0-9337-C9F681293627/L0/001

None of the above worked.

The Build versions are,

"react-native": "0.62.2"."@react-native-community/cameraroll": "^1.5.2"."@react-native-firebase/ml-vision": "^7.1.0","@react-native-firebase/app": "^7.1.0",

I am building an app with React Native.

After a user takes a photo of an invoice, I would like to be able to extract some key data from the text in the image. I know I will need an OCR of some sort. Is there an easy solution to this? I've seen react-native-text-detector. Is that my best option? Is there a best solution to this?

Below is a sample of what needs to be achieved in React Native:

Title1

Some description that spans horizontally using a ScrollView (horizontal prop)...............................

Title2

Some description that spans horizontally using a ScrollView (horizontal prop)...............................

Title3

Some description that spans horizontally using a ScrollView (horizontal prop)...............................

The code for the same is:

FlatList --> View --> Title + ScrollView (description)

Now, the expectation is when I scroll the description of one row, all the descriptions from the other row should scroll in sync.

Below is the structure:

<View><TouchableOpacity><View style={styles.titleContainer}><Text style={styles.title}>{name}</Text></View></TouchableOpacity><ScrollView      onMomentumScrollEnd={e => this.onScroll(e, index)}      ref={node => { this.scrollRef[index] = node; }}      scrollEventThrottle={16}      showsHorizontalScrollIndicator={false}      horizontal      style={styles.fundContainer}><View style={styles.statsContainer}><Text>Some Description</Text></View></ScrollView></View>

And the method that I run on scroll:

  onScroll = (event: Object, index: number) => {    this.scrollRef.forEach((scrollItem, scrollIndex) => {      if (scrollIndex !== index) {        scrollItem.scrollTo({          x: event.nativeEvent.contentOffset.x,          y: event.nativeEvent.contentOffset.y,          animated: true,        });      }    });  };

I am using onMomentumScrollEnd which scrolls the item on scroll end. If I use onScroll, it creates a performance bottleneck and lags miserably.

Are there any workaround to scroll the list in sync?

I am building a chat app. When a notification is received, I want to show an indication that a new message is received. I don't want to show badge count. Showing a dot or star is enough. Can I show star or dot instead of badge count on main app icon?

Is it possible to get the current scroll position, or the current page of a <ScrollView> component in React Native?

So something like:

<ScrollView  horizontal={true}  pagingEnabled={true}  onScrollAnimationEnd={() => {       // get this scrollview's current page or x/y scroll position  }}>  this.state.data.map(function(e, i) { <ImageCt key={i}></ImageCt>   })</ScrollView>

It's so weird, yesterday morning everything works well, but after trying to install on a physical iOS device, I got this error:

module map file '/Users/[MyUser]/Library/Developer/Xcode/DerivedData/MyApp-gnlhcsjnsvnzkdddngvwhnmspcto/Build/Products/Debug-iphoneos/YogaKit/YogaKit.modulemap' not found

I even cannot initiate a React Native project, right after the npx react-native init MyNewApp command I get this error:

clang: warning: using sysroot for 'iPhoneOS' but targeting 'MacOSX' [-Wincompatible-sysroot]ld: warning: ignoring file /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/lib/libc++.tbd, missing required architecture x86_64 in file /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/lib/libc++.tbd (4 slices)ld: warning: ignoring file /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/lib/libSystem.tbd, missing required architecture x86_64 in file /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/lib/libSystem.tbd (4 slices)clang: warning: using sysroot for 'iPhoneOS' but targeting 'MacOSX' [-Wincompatible-sysroot]In file included from ../fsevents.cc:6:In file included from ../../nan/nan.h:55:In file included from /Users/amerllica/Library/Caches/node-gyp/12.18.0/include/node/uv.h:52:In file included from /Users/amerllica/Library/Caches/node-gyp/12.18.0/include/node/uv/errno.h:25:In file included from /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/../include/c++/v1/errno.h:31:In file included from /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/errno.h:23:In file included from /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/sys/errno.h:72:/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/sys/cdefs.h:807:2: error: Unsupported architecture#error Unsupported architecture ^In file included from ../fsevents.cc:6:In file included from ../../nan/nan.h:55:In file included from /Users/amerllica/Library/Caches/node-gyp/12.18.0/include/node/uv.h:55:In file included from /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/../include/c++/v1/stdio.h:107:In file included from /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/stdio.h:64:In file included from /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/_stdio.h:71:In file included from /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/_types.h:27:In file included from /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/sys/_types.h:33:/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/machine/_types.h:34:2: error: architecture not supported#error architecture not supported ^In file included from ../fsevents.cc:6:In file included from ../../nan/nan.h:55:In file included from /Users/amerllica/Library/Caches/node-gyp/12.18.0/include/node/uv.h:55:In file included from /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/../include/c++/v1/stdio.h:107:In file included from /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/stdio.h:64:In file included from /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/_stdio.h:71:In file included from /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/_types.h:27:/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/sys/_types.h:55:9: error: unknown type name '__int64_t'; did you mean'__int128_t'?typedef __int64_t       __darwin_blkcnt_t;      /* total blocks */        ^note: '__int128_t' declared here/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/sys/_types.h:56:9: error: unknown type name '__int32_t'; did you mean'__int128_t'?typedef __int32_t       __darwin_blksize_t;     /* preferred block size */        ^note: '__int128_t' declared here/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/sys/_types.h:57:9: error: unknown type name '__int32_t'; did you mean'__int128_t'?typedef __int32_t       __darwin_dev_t;         /* dev_t */        ^note: '__int128_t' declared here/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/sys/_types.h:60:9: error: unknown type name '__uint32_t'; did you mean'__uint128_t'?typedef __uint32_t      __darwin_gid_t;         /* [???] process and group IDs */        ^note: '__uint128_t' declared here/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/sys/_types.h:61:9: error: unknown type name '__uint32_t'; did you mean'__uint128_t'?typedef __uint32_t      __darwin_id_t;          /* [XSI] pid_t, uid_t, or gid_t*/        ^note: '__uint128_t' declared here/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/sys/_types.h:62:9: error: unknown type name '__uint64_t'; did you mean'__uint128_t'?typedef __uint64_t      __darwin_ino64_t;       /* [???] Used for 64 bit inodes */        ^note: '__uint128_t' declared here/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/sys/_types.h:68:9: error: unknown type name '__darwin_natural_t'typedef __darwin_natural_t __darwin_mach_port_name_t; /* Used by mach */        ^/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/sys/_types.h:70:9: error: unknown type name '__uint16_t'; did you mean'__uint128_t'?typedef __uint16_t      __darwin_mode_t;        /* [???] Some file attributes */        ^note: '__uint128_t' declared here/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/sys/_types.h:71:9: error: unknown type name '__int64_t'; did you mean'__int128_t'?typedef __int64_t       __darwin_off_t;         /* [???] Used for file sizes */        ^note: '__int128_t' declared here/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/sys/_types.h:72:9: error: unknown type name '__int32_t'; did you mean'__int128_t'?typedef __int32_t       __darwin_pid_t;         /* [???] process and group IDs */        ^note: '__int128_t' declared here/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/sys/_types.h:73:9: error: unknown type name '__uint32_t'; did you mean'__uint128_t'?typedef __uint32_t      __darwin_sigset_t;      /* [???] signal set */        ^note: '__uint128_t' declared here/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/sys/_types.h:74:9: error: unknown type name '__int32_t'; did you mean'__int128_t'?typedef __int32_t       __darwin_suseconds_t;   /* [???] microseconds */        ^note: '__int128_t' declared here/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/sys/_types.h:75:9: error: unknown type name '__uint32_t'; did you mean'__uint128_t'?typedef __uint32_t      __darwin_uid_t;         /* [???] user IDs */        ^note: '__uint128_t' declared here/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/sys/_types.h:76:9: error: unknown type name '__uint32_t'; did you mean'__uint128_t'?typedef __uint32_t      __darwin_useconds_t;    /* [???] microseconds */        ^note: '__uint128_t' declared hereIn file included from ../fsevents.cc:6:In file included from ../../nan/nan.h:55:In file included from /Users/amerllica/Library/Caches/node-gyp/12.18.0/include/node/uv.h:55:In file included from /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/../include/c++/v1/stdio.h:107:In file included from /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/stdio.h:64:In file included from /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/_stdio.h:71:/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/_types.h:43:9: error: unknown type name '__uint32_t'; did you mean'__uint128_t'?typedef __uint32_t      __darwin_wctype_t;        ^note: '__uint128_t' declared hereIn file included from ../fsevents.cc:6:In file included from ../../nan/nan.h:55:In file included from /Users/amerllica/Library/Caches/node-gyp/12.18.0/include/node/uv.h:55:In file included from /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/../include/c++/v1/stdio.h:107:In file included from /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/stdio.h:64:In file included from /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/_stdio.h:75:In file included from /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/sys/_types/_va_list.h:31:/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/machine/types.h:37:2: error: architecture not supported#error architecture not supported ^In file included from ../fsevents.cc:6:In file included from ../../nan/nan.h:55:In file included from /Users/amerllica/Library/Caches/node-gyp/12.18.0/include/node/uv.h:55:In file included from /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/../include/c++/v1/stdio.h:107:In file included from /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/stdio.h:64:In file included from /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/_stdio.h:75:/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.5.sdk/usr/include/sys/_types/_va_list.h:32:9: error: unknown type name'__darwin_va_list'typedef __darwin_va_list va_list;        ^fatal error: too many errors emitted, stopping now [-ferror-limit=]20 errors generated.make: *** [Release/obj.target/fse/fsevents.o] Error 1gyp ERR! build error gyp ERR! stack Error: `make` failed with exit code: 2gyp ERR! stack     at ChildProcess.onExit (/Users/amerllica/.nvm/versions/node/v12.18.0/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23)gyp ERR! stack     at ChildProcess.emit (events.js:315:20)gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)gyp ERR! System Darwin 19.5.0gyp ERR! command "/Users/amerllica/.nvm/versions/node/v12.18.0/bin/node""/Users/amerllica/.nvm/versions/node/v12.18.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js""rebuild"gyp ERR! cwd /Users/amerllica/.npm/_npx/15892/lib/node_modules/react-native/node_modules/fseventsgyp ERR! node -v v12.18.0gyp ERR! node-gyp -v v5.1.0gyp ERR! not ok

I tried many ways, even I uninstall XCode and then re-install XCode. set everything from scratch but I get this error for initializing React Native application.

I'm using react-native-community/sliderand in my case, i want to disabled user change value so i enable disabled prop,After enabling it the slider color turned gray.so how can I change it?

I'm trying to play with library code but i can't find this thing!

disabled = true

disabled = false

"that's what i want after change disabled to true"

Code snippet

<Slider       thumbTintColor="#ebff64"       maximumTrackTintColor="grey"       minimumTrackTintColor="#ebff64"       style={styles.seekBar}       step={1}       minimumValue={0}       maximumValue={this.state.duration}       value={this.state.currentTime}       disabled={true} />

I am using react-native and expo. When I click on first screen (there are some json data) such as:

AAcompanyBBcompany

When user clicks on A it send them to second screen and it shows the A symbol there, but when I go back to first screen the first A symbol get disappeared and only the other symbol display such as if I click on B this time so only B is there but A has disappeared.

My code: First class:

import React, { useState, useEffect } from "react";import {  StyleSheet,  View,  TouchableWithoutFeedback,  Keyboard,  FlatList,  TextInput,  Button,  Text,} from "react-native";import { useStocksContext } from "../contexts/StocksContext";import { scaleSize } from "../constants/Layout";import { Ionicons } from "@expo/vector-icons";import { ListItem } from "react-native";export default function SearchScreen({ navigation }) {  const { ServerURL, addToWatchlist } = useStocksContext();  const [state, setState] = useState({    /*  initial state here */    myListData: [],  });  const [search, setSearch] = useState("");  useEffect(() => {    renderWithData();    // FixMe: fetch symbol names from the servner and save in local SearchScreen state  }, []);  const updateSearch = (text) => {    setSearch(text);  };  renderWithData = () => {    return fetch("http://131.181.190.87:3001/all")      .then((res) => res.json())      .then((json) => {        setState({          isLoaded: true,          myListData: json,        });        setTimeout(() => {          //console.log(state.myListData);        }, 10000);      });  };  let filteredItems = state.myListData.filter((item) => {    return (      item.symbol.toUpperCase().indexOf(search.toUpperCase()) !== -1 ||      item.name.indexOf(search) !== -1    );  });  let movies = filteredItems.map((val) => {    return (<View key={val.symbol} style={styles.text}><Text          style={styles.text}          onPress={() => navigation.navigate("Stock", { stuff: val.symbol })}>          {val.symbol}</Text><Text style={styles.text}>{val.name}</Text></View>    );  });  return (<TouchableWithoutFeedback onPress={Keyboard.dismiss}><View style={styles.container}><TextInput          style={styles.textinput}          placeholder="Search here"          placeholderTextColor="white"          value={search}          onChangeText={(text) => updateSearch(text)}        /><Text>csdn</Text><View style={styles.text}>{movies}</View></View></TouchableWithoutFeedback>  );}const styles = StyleSheet.create({  textinput: {    color: "white",    height: "20",    fontSize: 18,  },  text: {    color: "white",    backgroundColor: "black",  },  flatstuff: {    color: "white",  },  // use scaleSize(x) to adjust sizes for small/large screens});

Second class:

import React, { useState, useEffect } from "react";import {  TouchableWithoutFeedback,  Keyboard,  FlatList,  TextInput,  Button,  Text,} from "react-native";import {  StyleSheet,  View /* include other react-native components here as needed */,} from "react-native";import { useStocksContext } from "../contexts/StocksContext";import { scaleSize } from "../constants/Layout";// FixMe: implement other components and functions used in StocksScreen here (don't just put all the JSX in StocksScreen below)export default function StocksScreen({ route }) {  const { ServerURL, watchList } = useStocksContext();  const [state, setState] = useState({    myListData: [],    /* FixMe: initial state here */  });  const { stuff } = route.params;  renderWithData = () => {    return fetch(`http://131.181.190.87:3001/history?symbol=${stuff}`)      .then((res) => res.json())      .then((json) => {        setState({          isLoaded: true,          myListData: json,        });      // console.log(state.myListData[0]);      });  };  // can put more code here  useEffect(() => {    renderWithData();    // FixMe: fetch stock data from the server for any new symbols added to the watchlist and save in local StocksScreen state  }, [watchList]);  //let item = state.myListData[0];  let item = state.myListData.length && state.myListData[0]; let movie = (<View  style={styles.text}><Text style={styles.text} key={item.symbol}>      {item.high}</Text><Text style={styles.text} key={item.symbol}>      {item.close}</Text></View>)  return (<TouchableWithoutFeedback onPress={Keyboard.dismiss}><View style={styles.container}><Text style={styles.text}>bb</Text><View>{movie}</View></View></TouchableWithoutFeedback>   );}const styles = StyleSheet.create({  text: {    color: "black",    backgroundColor: "white",  },});

that is the second screen code above. How can I save my symbol name?

I already have this class how do I store the data here and connect to other classes:

import React, { useState, useContext, useEffect } from "react";import { AsyncStorage } from "react-native";const StocksContext = React.createContext();export const StocksProvider = ({ children }) => {  const [state, setState] = useState([]);  return (<StocksContext.Provider value={[state, setState]}>      {children}</StocksContext.Provider>  );};export const useStocksContext = () => {  const [state, setState] = useContext(StocksContext);  // can put more code here  function addToWatchlist(newSymbol) {    //FixMe: add the new symbol to the watchlist, save it in useStockContext state and persist to AsyncStorage  }  useEffect(() => {    // FixMe: Retrieve watchlist from persistent storage  }, []);  return { ServerURL: 'http://131.181.190.87:3001', watchList: state,  addToWatchlist };};

Json data:

 Object {   "close": 63.37,   "high": 67.5599,   "industry": "Health Care",   "low": 62.09,   "name": "Agilent Technologies Inc",   "open": 66.8,   "symbol": "A",   "timestamp": "2020-03-23T14:00:00.000Z",   "volumes": 2989560, } Object {   "close": 63.37,   "high": 67.5599,   "industry": "Health Care",   "low": 62.09,   "name": "Agilent Technologies Inc",   "open": 66.8,   "symbol": "A",   "timestamp": "2020-03-23T14:00:00.000Z",   "volumes": 2989560, }

import wd from 'wd';jest.setTimeout(60000);const PORT = 4723;const config = {  platformName: 'iOS',  deviceName: `iPhone X`,  platformVersion: '12.2',  app: '/path/to/my.app',  useNewWDA: true,  autoLaunch: false,};let screenshotIndex = 0const driver = wd.promiseChainRemote('localhost', PORT);directory = '../screenshots';`enter code here`beforeAll(async () => {  await driver.init(config);  await driver.sleep(7000); // wait for app to load});afterEach(async () => {  await driver.takeScreenshot().then(    function (image, err) {      require('fs').writeFile(`screenshot-${screenshotIndex++}.png`, image, 'base64');    }  );});test('appium renders', async () => {  let contexts = await driver.contexts();  console.log('contexts', contexts);  await driver.context(contexts[1]);  await driver.elementById('username').type('abc@example.com');  await driver.elementById('password').type('#1234');  await driver.elementById('Login').click();});

//Timeout - Async callback was not invoked within the 60000ms timeout specified by jest.setTimeout.Error: Timeout - Async callback was not invoked within the 60000ms timeout specified by jest.setTimeout.

After I run this I get the above error. Not sure where am i going wrong

react-native synchronous movement of 5 of scrollView .how do you ı sync.

<ScrollView horizontal ref={scrolListRef}                        onScrollEndDrag={(e) =>                            //ref get xcoordvalue//scrollListRef map into ref xcoord asssigment                         }                        pagingEnabled                        scrollEventThrottle={16}>

onScroll : leads to an endless loop onScrollEndDrag:it creates a delay problem

I use react-native-iap, And I have Non-Consumable so I use getAvailablePurchases() but in every time I get this error

Cannot connect to iTunes Store

So I can't test what I do while developing or if the user buying successfully or not or what the result of data should return when using getAvilablePurchases() or other methods

So is there a way to solve this issue?

Screen

Code

const items = Platform.select({     ios:"com.myapp.premium"  });export default class PurchaseScreen extends Component {  componentDidMount() {    this.getPurchases();  }  getPurchases = async () => {    try {      const init = await RNIap.initConnection();      console.log('init?', init);      const availablePurchases = await RNIap.getAvailablePurchases(items);      console.log('availablePurchases', availablePurchases);    } catch (err) {      console.warn(err);    }  };subscribe = ()=>{    ...}  render() {    return (<TouchableOpacity onPress={()=>this.subscribe()} style={styles.btn}><Text style={styles.lable}>Subscrib</Text></TouchableOpacity>   )  }}

Good Day everyone.. Does anyone know how to integrate adyen to React Native which works on both IOS and ANDROID.

Thanks in advance :)

Is there any way to store values other than strings with AsyncStorage? I want to store simple boolean values for example.

AsyncStorage.setItem('key', 'ok');

Is no problem, but:

AsyncStorage.setItem('key', false);

Does not work..

I have an app built in react-native in which I have to share these data to LinkedIn

const options = {            title: 'Share via',            message: 'some message',            image:'images need to be shared' //may be multiple images            } 

I tried so many ways but not working. How can I do this?

I have some questions about the performance of a react native app.

I'm developing a react native app (RN 0.62.2). I'm testing on various IOS simulators as well as on a real device (iPhone 7, ios 13.3).

I'm mostly using the simulator because it's the fastest way to check the output of the code, but when I'm testing on my iPhone 7, I see some performance issues.

First of all: I'm using react navigation. When I open the perf monitor on the simulator and I navigate to a new screen (in the same stack navigator), the JS thread drops with about 6-8 frames (from 60 to 52-54). On the real device with 18-20 frames (from 60 to 40-42). I navigate to the exact same screen.

Secondly, I load local images through require. On the simulator, they appear almost instantly. On the real device, it takes some time before they appear. For example, I have a screen with a background image. On the simulator, it's instantly shown. On the real device however, it takes about a second to load.

I'm using a lot of animations in my app. I'm using reanimated to run the animations on the UI thread. In the simulator, they all work very smoothly, but on the real device, it seems like they are having some issues. They're not that smooth as on the simulator.

Another thing: when entering some text in a textinput (text is stored in a useState-variable while typing through onChangeText={v => setValue(v)}. Frame drops about 6-8 frames on the simulator, but again around 18-20 frames on the real device.

My question now is: what could possibly be the reason for this difference in performance? I've come up with some possible answers, is one (or more of them) correct?

Reason 1: metro server

I'm testing on the real device, so the react native code is still on my laptop. The app is not running on my phone yet, so all request go through the cable which connects my phone to my laptop. This results in some lag.

Reason 2: old device

My iphone 7 is old. I'm running ios 13.3 but the iphone is almost 4 years old. However, when I test on an iphone 7 simulator (ios 11.4), it all works smoothly.

Also I noticed something weird: running the same app in the simulator consumes about the double of RAM memory then on the real device. In the perf monitor on the simulator, when I open the app, or I do some actions, there is more RAM memory used than on the real device (around 30-40 mb, sometimes around 70-80 mb, depeding on the simulator type and ios version).

I have not tested it with a release build yet because my app is far from done. Is there a performance difference between an app testing through the metro server and a release build?

Edit:

I've tested the release build instead of the debug build on my real device. I see a better performance than in the debug build, so that's good. The problem now is: I can't check the perf monitor. Does someone know a good tool to check the performance of a release build?