Want to develop real time Chat/Messaging functionality in react native app. in which user can send videos,pictures,voice messages and emojis.

What are the best methods/ways/framework to achive this?

I'm working in Team of 3 people and having a lot of issues with working on the same project.Different Connection.

Please Help me.

I am reading:

• https://docs.expo.io/versions/latest/sdk/payments/
• https://tipsi.github.io/tipsi-stripe/docs/running-apple-pay-on-a-real-device.html
• https://github.com/stripe/react-stripe-elements/issues/21
• https://pusher.com/tutorials/react-native-payments
• https://medium.com/@lyzhovnik/using-stripe-payment-service-with-react-native-and-fetch-4177c8d992cb
• https://github.com/expo/stripe-expo

I want to integrate stripe payment within a react-native app build with expo sdk 36.

My project is not ejected and I would like to keep it so I can still run and debug iOS app without needing apple hardware. (it's for developer experience, but I want to see if there's a way before squeezing that.)

1. To me, it seems that stripe just need an HTTP client to communicate, while I have fetch, am I correct?
2. Why exactly do I need to eject, what native library do I need to plug and why the http client is not sufficient?
   • How can I integrate stripe to target all of the platforms (web/ios/native) with the less effort (what library should I get started with to resolve my goal.)

I'm using Cloud Messaging from react-native-firebase 7.0.1.

I do not want to store iOS device tokens in firebase, so I'm using getAPNSToken() method and then storing it on my backend.

I'm able to send notification on a device and after pressing it, the application opens.

But when I'm trying to get message from getInitialNotification() or onNotificationOpenedApp() it always returns null/undefined.

It works every time on Android.

PushHandler.js

import React from 'react';import messaging from '@react-native-firebase/messaging';export default class PushHandler extends React.Component {  constructor(props) {    super(props);    this.messageApp = messaging();  }  componentDidMount() {    this.messageApp.onNotificationOpenedApp(remoteMessage => {      if (remoteMessage) { // <- always null on iOS        // handle notification      }    });    this.messageApp.getInitialNotification().then(initialMessage => {      if (initialMessage) { // <- always undefined on iOS        // handle notification      }    });  }  render() {    return null;  }}

Hi I currently have a native iOS app and moving forward I want to use React Native, is there a way or library for react native to read and update the data in Core Data?

After installing the app from the AppStore or Testflight then I closed the app or switched to a different app whereas the app is running in the background because It's not closed completely, I am having an issue while returning back on the app after some time, the issue is It's just giving me a white screen.

I have been tried to reproduce and debug this issue by running the app on my phone by Xcode, but I am not getting any error.

Please help.

Thanks

I am facing following issue when import this:

import Icon from 'react-native-vector-icons/AntDesign';

Error:

error: bundling failed: Error: Unable to resolve module react-native-vector-icons/AntDesign from /Desktop/development/cbcvp-rn/cbcvp/node_modules/react-native-elements/src/helpers/getIconType.js: Module react-native-vector-icons/AntDesign does not exist in the Haste module map

This might be related to https://github.com/facebook/react-native/issues/4968To resolve try the following: 1. Clear watchman watches: watchman watch-del-all. 2. Delete the node_modules folder: rm -rf node_modules && npm install. 3. Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache. 4. Remove haste cache: rm -rf /tmp/haste-map-react-native-packager-*. at ModuleResolver.resolveDependency (/Users/amit/Desktop/development/cbcvp-rn/cbcvp/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:161:1460) at ResolutionRequest.resolveDependency (/Users/amit/Desktop/development/cbcvp-rn/cbcvp/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:91:16) at DependencyGraph.resolveDependency (/Users/amit/Desktop/development/cbcvp-rn/cbcvp/node_modules/metro/src/node-haste/DependencyGraph.js:272:4579) at dependencies.map.relativePath (/Users/amit/Desktop/development/cbcvp-rn/cbcvp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:376:19) at Array.map () at resolveDependencies (/Users/amit/Desktop/development/cbcvp-rn/cbcvp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:374:16) at /Users/amit/Desktop/development/cbcvp-rn/cbcvp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:212:33 at Generator.next () at step (/Users/amit/Desktop/development/cbcvp-rn/cbcvp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:313) at /Users/amit/Desktop/development/cbcvp-rn/cbcvp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:473 BUNDLE [ios, dev] ./index.js ▓▓▓▓▓▓░░░░░░░░░░ 38.0% (719/1166), failed.

how to fix this error anyone help me...

Thanks

The following build commands failed: CompileC /Users////Xcode/DerivedData/project-cjnpkxskhmofvscoog9qaznbuqhvs/Build/Intermediates.noindex/Pods.build/Debug-iphoneos/DoubleConversion.build/Objects-normal/arm64/DoubleConversion-dummy.o /Users////IO-iOS/ios/Pods/Target\ Support\ Files/DoubleConversion/DoubleConversion-dummy.m normal arm64 objective-c com.apple.compilers.llvm.clang.1_0.compiler(1 failure)

Tried

• npm install
• pod install
• DoubleConversion (1.1.6)

Failed every time, please help

Im new in react native, and i facing the problem: Im using react native with flipper pods, and my pod file contain this code:

add_flipper_pods!  post_install do |installer|    flipper_post_install(installer)  end

But i need change my deployment target version of other pods with

post_install do |pi|    pi.pods_project.targets.each do |t|      t.build_configurations.each do |config|        config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '11.0'      end    end  end

I get 3 different bugs, when try to solve this.How can i get combine this two hooks, or get other solutions to this problem?My pod file:

platform :ios, '9.0'require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'def add_flipper_pods!(versions = {})  versions['Flipper'] ||= '~> 0.33.1'  versions['DoubleConversion'] ||= '1.1.7'  versions['Flipper-Folly'] ||= '~> 2.1'  versions['Flipper-Glog'] ||= '0.3.6'  versions['Flipper-PeerTalk'] ||= '~> 0.0.4'  versions['Flipper-RSocket'] ||= '~> 1.0'  pod 'FlipperKit', versions['Flipper'], :configuration => 'Debug'  pod 'FlipperKit/FlipperKitLayoutPlugin', versions['Flipper'], :configuration => 'Debug'  pod 'FlipperKit/SKIOSNetworkPlugin', versions['Flipper'], :configuration => 'Debug'  pod 'FlipperKit/FlipperKitUserDefaultsPlugin', versions['Flipper'], :configuration => 'Debug'  pod 'FlipperKit/FlipperKitReactPlugin', versions['Flipper'], :configuration => 'Debug'  # List all transitive dependencies for FlipperKit pods  # to avoid them being linked in Release builds  pod 'Flipper', versions['Flipper'], :configuration => 'Debug'  pod 'Flipper-DoubleConversion', versions['DoubleConversion'], :configuration => 'Debug'  pod 'Flipper-Folly', versions['Flipper-Folly'], :configuration => 'Debug'  pod 'Flipper-Glog', versions['Flipper-Glog'], :configuration => 'Debug'  pod 'Flipper-PeerTalk', versions['Flipper-PeerTalk'], :configuration => 'Debug'  pod 'Flipper-RSocket', versions['Flipper-RSocket'], :configuration => 'Debug'  pod 'FlipperKit/Core', versions['Flipper'], :configuration => 'Debug'  pod 'FlipperKit/CppBridge', versions['Flipper'], :configuration => 'Debug'  pod 'FlipperKit/FBCxxFollyDynamicConvert', versions['Flipper'], :configuration => 'Debug'  pod 'FlipperKit/FBDefines', versions['Flipper'], :configuration => 'Debug'  pod 'FlipperKit/FKPortForwarding', versions['Flipper'], :configuration => 'Debug'  pod 'FlipperKit/FlipperKitHighlightOverlay', versions['Flipper'], :configuration => 'Debug'  pod 'FlipperKit/FlipperKitLayoutTextSearchable', versions['Flipper'], :configuration => 'Debug'  pod 'FlipperKit/FlipperKitNetworkPlugin', versions['Flipper'], :configuration => 'Debug'end# Post Install processing for Flipperdef flipper_post_install(installer)  installer.pods_project.targets.each do |target|    if target.name == 'YogaKit'      target.build_configurations.each do |config|        config.build_settings['SWIFT_VERSION'] = '4.1'      end    end  endendtarget 'escapenavigator' do  # Pods for escapenavigator  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/callinvoker', :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', :modular_headers => true  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 'RNCAsyncStorage', :path => '../node_modules/@react-native-community/async-storage'  # post_install do |pi|  #   pi.pods_project.targets.each do |t|  #     t.build_configurations.each do |config|  #       config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '11.0'  #     end  #   end  # end  target 'escapenavigatorTests' do    inherit! :complete    # Pods for testing  end  use_native_modules!  # Enables Flipper.  #  # Note that if you have use_frameworks! enabled, Flipper will not work and  # you should disable these next few lines.  add_flipper_pods!  post_install do |installer|    flipper_post_install(installer)  endendtarget 'escapenavigator-tvOS' do  # Pods for escapenavigator-tvOS  target 'escapenavigator-tvOSTests' do    inherit! :search_paths    # Pods for testing  endend

Thanks!

We are using deep links to complete verification for an app we're working on. Said deep links cause the app delegate method:

- (BOOL)application:(UIApplication *)application   openURL:(NSURL *)url   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options{

To be called. This app is using React Native, using the in-build Linking API. Some of the time making a network request when we get the Linking callback works, but sometimes we get a networking error:

Task <D47D1F90-E2D1-4AB7-8706-8737B68CC5E8>.<180> finished with error [-1005] Error Domain=NSURLErrorDomain Code=-1005 "The network connection was lost." UserInfo={_kCFStreamErrorCodeKey=53, NSUnderlyingError=0x283352ac0 {Error Domain=kCFErrorDomainCFNetwork Code=-1005 "(null)" UserInfo={NSErrorPeerAddressKey=<CFData 0x281ed9130 [0x1e9babcb0]>{length = 16, capacity = 16, bytes = 0x100201bb34d2847e0000000000000000}, _kCFStreamErrorCodeKey=53, _kCFStreamErrorDomainKey=1}}, _NSURLErrorFailingURLSessionTaskErrorKey=LocalDataTask <D47D1F90-E2D1-4AB7-8706-8737B68CC5E8>.<180>, _NSURLErrorRelatedURLSessionTaskErrorKey=("LocalDataTask <D47D1F90-E2D1-4AB7-8706-8737B68CC5E8>.<180>"

I've had a pretty extensive google and it seems to be suggested that this can be caused when a network request is made in the background, however Apple quite clearly state in the docs for this method:

If a URL arrives while your app is suspended or running in the background, the system moves your app to the foreground prior to calling this method.

Is there something we shouldn't be doing here? Has anyone else seen similar issues?

Update

It seems this works fine first time the link is opened after app-launch, but subsequent calls fail. Nothing seems to be called in a different order, so it's very confusing why we'd see this sort of pattern!

So developing in RN, I want to have VSCode + the mobile device open by pressing Cmd + Tab (or another command), and then close (or swap) with that same command. So instead of a single tab opening at once, I have multiple open.

Seems simple enough, but how do I go about this? Thanks! On a Mac Seirra.

How can I put a Vertical progress bar on React Native

I need to make a delivery bar progress

Example: driver is at point A and needs to go to point B ...

What are the options/approaches available in React-Native for developing a mobile dictionary app.

I am trying to display my fetched api data to the stimulator.When I print it in console. It does print the fetched api, but on the stimulator screen I cannot see anything. I assume its not printing anything on screen. My api has name, class, company. I need to only print the name and class on the screen like nameclass so name first and on bottom of it, it's class. I am using react-native and expo and displaying the data on iOS stimulator.

My code:

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({    myListData: [],  });  useEffect(() => {    renderWithData();   SearchScreen state  }, []);  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);      });  };  return (<TouchableWithoutFeedback onPress={Keyboard.dismiss}><View style={styles.container}><TextInput          style={styles.textinput}          placeholder="Search here"          placeholderTextColor="white"        /><FlatList          style={styles.flatstuff}          data={state.myListData}          keyExtractor={(item) => item.symbol}          renderItem={({ item }) => <Text key={item.symbol}>{item.data}</Text>}        /></View></TouchableWithoutFeedback>  );}const styles = StyleSheet.create({  textinput: {    color: "white",    height: "20",    fontSize: 18,  },  text: {    color: "white",  },  flatstuff: {    color: "white",  },});

I am not sure what am I doing wrong, but can someone tell why is it not printing on screen (stimulator) iOS?

Im using firebase in React native which works fine on Android side but on IOS when i try to add item its show me this error.

[Error: [firestore/invalid-argument] Client specified an invalid argument. Note that this differs from failed-precondition. invalid-argument indicates arguments that are problematic regardless of the state of the system (e.g., an invalid field name).]

 let story = firestore().collection('paidItems').doc();        await story.set({             id: story.id,            name: title,            url : image,            passLink,            password,            createdAt: firestore.FieldValue.serverTimestamp(),        });

Already try new Object()Object.assign({}, data)

Thanks.

So I wanted to install a dependency using npm which is react-native-router-flux, but since it wasn't working due to the compatibility versions with react & react-native, it was breaking my project app. So I removed it from the package.json file.

Tried removing it by doing:

npm uninstall --save react-native-router-flux

Even tried to remove it manually from the package.json file, but for some reason, now it looks like my whole project is broken due to that.Now whenever I do npm start

This is what is being displayed in my terminal:

error: bundling: Error: ENOENT: no such file or directory, open '/Users/marian-mac/Documents/dev/example/myapp/node_modules/react-native-router-flux/node_modules/react-native/Libraries/Components/ActivityIndicator/ActivityIndicator.js'    at Error (native)    at Object.fs.openSync (fs.js:634:18)    at Object.fs.readFileSync (fs.js:502:33)    at Module._readSourceCode (/Users/marian-mac/Documents/dev/example/myapp/node_modules/react-native/packager/src/node-haste/Module.js:200:29)    at Module._getCacheProps (/Users/marian-mac/Documents/dev/example/myapp/node_modules/react-native/packager/src/node-haste/Module.js:420:29)    at Module._readFromTransformCache (/Users/marian-mac/Documents/dev/example/myapp/node_modules/react-native/packager/src/node-haste/Module.js:376:29)    at Module.readCached (/Users/marian-mac/Documents/dev/example/myapp/node_modules/react-native/packager/src/node-haste/Module.js:363:25)    at Promise.resolve.then (/Users/marian-mac/Documents/dev/example/myapp/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:167:29)    at process._tickCallback (internal/process/next_tick.js:103:7)Bundling `index.ios.js`  94.0% (2941/3033)

I tried to rm -rf /node_modules 100 times and npm install another 100 times and this keeps failing and failing, I can't understand where is trying to access that file! if it was removed!!!

This is my package.json now:

{"name": "myapp","version": "0.0.1","private": true,"scripts": {"start": "node node_modules/react-native/local-cli/cli.js start","test": "jest"  },"dependencies": {"moment": "^2.18.1","native-base": "^2.1.3","react": "16.0.0-alpha.6","react-native": "0.44.0","react-native-flags": "^1.0.0"  },"devDependencies": {"babel-jest": "19.0.0","babel-preset-react-native": "1.9.1","jest": "19.0.2","react-test-renderer": "16.0.0-alpha.6"  },"jest": {"preset": "react-native"  }}

Is also throwing WARNINGS for versions and other things too:

npm WARN native-base-shoutem-theme@0.1.3 requires a peer of react@>=15.1.0 but none was installed.npm WARN @shoutem/animation@0.8.10 requires a peer of react@^15.0.0 but none was installed.npm WARN react-static-container@1.0.1 requires a peer of react@^0.13.0 || ^0.14.0 || ^15.0.0 but none was installed.

This is being thrown for native-base dependency:

 UNMET PEER DEPENDENCY react@^0.13.0 || ^0.14.0 || ^15.0.0

Can anyone help me? this is driving me crazy, been 'fighting' with this for hours now and I can't continue with my app.

Thanks in advance.

EDIT:

1) This is my current package.json

{"name": "myapp","version": "0.0.1","private": true,"scripts": {"start": "node node_modules/react-native/local-cli/cli.js start","test": "jest"  },"dependencies": {"moment": "^2.18.1","native-base": "^2.1.3","react": "16.0.0-alpha.3","react-native": "^0.43.0","react-native-flags": "^1.0.0"  },"devDependencies": {"babel-jest": "19.0.0","babel-preset-react-native": "1.9.1","jest": "19.0.2","react-test-renderer": "16.0.0-alpha.6"  },"jest": {"preset": "react-native"  }}

2) These are the warnings:

npm WARN react-native@0.43.4 requires a peer of react@16.0.0-alpha.6 but none was installed.npm WARN native-base-shoutem-theme@0.1.3 requires a peer of react@>=15.1.0 but none was installed.npm WARN @shoutem/animation@0.8.10 requires a peer of react@^15.0.0 but none was installed.npm WARN react-static-container@1.0.1 requires a peer of react@^0.13.0 || ^0.14.0 || ^15.0.0 but none was installed.npm WARN react-test-renderer@16.0.0-alpha.6 requires a peer of react@^16.0.0-alpha.6 but none was installed.

Also throws some UNMET PEER DEPENDENCY on native-base:

├─┬ native-base@2.1.3│├─┬ @shoutem/animation@0.8.10││├── hoist-non-react-statics@1.2.0││└── lodash@4.17.4│├── blueimp-md5@2.7.0│├── clamp@1.0.1│├─┬ color@0.11.4││├── clone@1.0.2││├─┬ color-convert@1.9.0│││└── color-name@1.1.2││└── color-string@0.3.0│├─┬ fs-extra@2.1.2││└── jsonfile@2.4.0│├── lodash@4.11.2│├── native-base-shoutem-theme@0.1.3│├── print-message@2.1.0│├── UNMET PEER DEPENDENCY react@^15.0.0│├── react-native-drawer@2.3.0│├── react-native-easy-grid@0.1.7│├── react-native-keyboard-aware-scroll-view@0.2.7│├─┬ react-native-scrollable-tab-view@0.7.4││├── UNMET PEER DEPENDENCY react@^0.13.0 || ^0.14.0 || ^15.0.0││└── react-static-container@1.0.1│├── react-native-vector-icons@4.0.1│├─┬ react-tween-state@0.1.5││└─┬ raf@3.3.2││└── performance-now@2.1.0│└── tween-functions@1.2.0├─┬ UNMET PEER DEPENDENCY react@16.0.0-alpha.3

And in console when run, throws the red screen error in the simulator from XCode saying:

No Dimension set for key window

Looks it's a known issue according to his github. But damn, I don't want react-native-router-flux anymore, I don't even have it in my package.json nor installed and is still causing trouble, this dependency is a virus.

Hi guys! This is an error I struggle with for the past 2 days. It happens when trying to run the react native project on ios. My package.json doesn't even have @react-native-community/viewpager dependency and I don't use it in my project, yet after 'npm install' , there are viewpager dependencies in my package-lock.json and in node_modules too.

Do I need viewpager to run this project? If yes, how can I make it work and if not, how do I eliminate it completly?

First off: This is more of a logical question than a code-specific question.

I am trying to create a view similar to the iOS AirDrop view where users can see other users. This means, every user needs to broadcast/advertise their custom username, which can be seen by all other nearby users that scan the area.

I have tried using react-native-ble-plx, since I read on the Apple developer forum that iPhones can act as BLE (bluetooth low energy) peripherals. (Also, I read that newer Android devices support this as well)

I've tried the following:

import ble, { BleManager, Characteristic } from 'react-native-ble-plx';// ...const bleManager = new BleManager();bleManager.startDeviceScan(null, null, async (e, d) => {    if (e) console.log(`BT Error: ${JSON.stringify(e)}`);    if (d && d.id && d.isConnectable) {        console.log(`Connecting to: ${d.id} ('${d.name}')...`);        const device = await d.connect();        const services = await device.services();        console.log('services: ', services.join(', '));        const characteristic = await device.writeCharacteristicWithResponseForService(BLE_SERVICE_UUID, BLE_SERVICE_UUID, '123');        console.log(`Characteristics: ${JSON.stringify(characteristic)}`);    }});

But I haven't found a way to broadcast a value which others can read, is that even possible with BLE?

I've also looked into beacons (specifically react-native-beacons-manager), but I'm not sure if that is what I want since an Android/iOS phone is not a 'beacon'..

So my question is: Are there technologies/libraries that allow broadcasting of a message (my custom username) which others can see? Ideally I want to communicate between them, like exchanging a token, but that's not a requirement.

I'd appreciate any help or pointings into the right direction here, thanks!

I'm displaying dynamic maps inside my app using using react-native-maps. I want Google Maps app to launch when user login ,but the map only can only on the iphoneSE simulator ,can't show on other iphone simulatorI'm not sure is it the xcode setting or style below is my code

import React from "react";import MapView,{ PROVIDER_GOOGLE, Marker, Callout} from 'react-native-maps';import {Text, Image,View} from "react-native"function GoogleMap() {    return(<View><MapView                provider={PROVIDER_GOOGLE}                 style={{                    width:"100%",                    height:"100%",                    }}                region={{                    latitude: 22.3204,                    longitude: 114.1698,                    latitudeDelta: 0.015,                    longitudeDelta: 0.0121,                }}><Marker coordinate={{latitude: 22.3204,longitude: 114.1698,}} title="Mk cai"></Marker><Marker coordinate={{latitude:22.3351448, longitude: 114.1868841}} title='Tecky Academy'><Callout><Text><Image style={{ height: 100, width:100 }} source={require('../image/Alex.jpg')} resizeMode="cover" /></Text></Callout></Marker></MapView></View>    )}export default GoogleMap

In React Native, when I try to scroll flatlist to top, I am getting an empty space. I am trying to scroll it to top by clicking a button calling scrollToIndex, still I am getting an empty space.

This issue is happening only in iOS, it works fine in Android.