I'm working on a reactnative project and i have to make 2 apps with exactly same topbar on ios and android Is it possible ? Even if it's not a native header Or maybe i have to custom android topbar so that seems same than ios ?

Thanks in advance! Maxime

I'm trying to display a downloaded pdf inside a WebView. I'm using react-native-webview (https://github.com/react-native-community/react-native-webview) and rn-fetch-blob to download it.

Basically i have a render that's just a WebView component:

if(this.state.path)
    return
        <WebView
            source={{ uri: this.state.path }}
            style={{ flex: 1 }}
        />
else return <Loader />

This component won't get rendered until the PDF is downloaded. After the download is complete i save the path into the state and show the WebView.

The PDF is downloaded correctly, i can manually go to the path i get in the state and open the PDF.

If i put the URL where i download the pdf from inside the uri like this (as example this is the google policy):

source = {{ uri : "https://static.googleusercontent.com/media/www.google.com/it//intl/it/policies/privacy/google_privacy_policy_it.pdf" }}

It works correctly and displays the pdf inside the WebView.

If i put my path to the pdf doing :

source = {{ uri : path/to/file.pdf}}

I get a blank screen.

Is there a way to display a file system pdf into the WebView ?

Note that i need to use the WebView, react-native-pdf and react-native-pdf-view are not the solution

I'm using Expo's Calendar API to create a calendar and events, but I'm getting the following error only on my real device when it works perfectly on the iOS simulator:

[Unhandled promise rejection: Error: Error: Calendar 'Expo Calendar' could not be saved: Error Domain=EKErrorDomain Code=17 "That account does notallow calendars to be added or removed." UserInfo={NSLocalizedDescription=That account does not allow calendars to be added or removed.}]

My code:

import React, { useEffect } from 'react';
import { View, Text, Button, Platform } from 'react-native';
import * as Calendar from 'expo-calendar';

export default function App() {
  useEffect(() => {
    (async () => {
      const { status } = await Calendar.requestCalendarPermissionsAsync();
      if (status === 'granted') {
        const calendars = await Calendar.getCalendarsAsync();
        console.log('Here are all your calendars:');
        console.log({ calendars });
      }
    })();
  }, []);

  return (
    <View
      style={{
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'space-around',
      }}>
      <Text>Calendar Module Example</Text>
      <Button title="Create a new calendar" onPress={createCalendar} />
    </View>
  );
}

const getDefaultCalendarSource = async () => {
    const defaultCalendar = await Calendar.getDefaultCalendarAsync();
    return defaultCalendar.source;
}

async function createCalendar() {
  const defaultCalendarSource =
    Platform.OS === 'ios'
      ? await getDefaultCalendarSource()
      : { isLocalAccount: true, name: 'Expo Calendar' };
  const newCalendarID = await Calendar.createCalendarAsync({
    title: 'Expo Calendar',
    color: 'blue',
    entityType: Calendar.EntityTypes.EVENT,
    sourceId: defaultCalendarSource.id,
    source: defaultCalendarSource,
    name: 'internalCalendarName',
    ownerAccount: 'personal',
    accessLevel: Calendar.CalendarAccessLevel.OWNER,
  });
  console.log(`Your new calendar ID is: ${newCalendarID}`);
}

The permission have been given to the calendar and all the calendars have "allowsModifications": true, but can't understand why it says it's not allowed only on a real device.

I've tried modifying the default calendars to different source as following:

async function getDefaultCalendarSource() {
  const calendars = await Calendar.getCalendarsAsync();
  const defaultCalendars = calendars.filter(
    each => each.source.name === 'Gmail' // or 'iCloud', 'Yahoo'
  );
  return defaultCalendars[0].source;
}

thinking that it may have to do with the source, but they result in the same error, "that account does not allow calendars to be added or removed."

I'm using Expo's Calendar API to create a calendar and events, but I'm getting the following error only on my real device when it works perfectly on the iOS simulator:

[Unhandled promise rejection: Error: Error: Calendar 'Expo Calendar' could not be saved: Error Domain=EKErrorDomain Code=17 "That account does notallow calendars to be added or removed." UserInfo={NSLocalizedDescription=That account does not allow calendars to be added or removed.}]

My code:

import React, { useEffect } from 'react';
import { View, Text, Button, Platform } from 'react-native';
import * as Calendar from 'expo-calendar';

export default function App() {
  useEffect(() => {
    (async () => {
      const { status } = await Calendar.requestCalendarPermissionsAsync();
      if (status === 'granted') {
        const calendars = await Calendar.getCalendarsAsync();
        console.log('Here are all your calendars:');
        console.log({ calendars });
      }
    })();
  }, []);

  return (
    <View
      style={{
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'space-around',
      }}>
      <Text>Calendar Module Example</Text>
      <Button title="Create a new calendar" onPress={createCalendar} />
    </View>
  );
}

const getDefaultCalendarSource = async () => {
    const defaultCalendar = await Calendar.getDefaultCalendarAsync();
    return defaultCalendar.source;
}

async function createCalendar() {
  const defaultCalendarSource =
    Platform.OS === 'ios'
      ? await getDefaultCalendarSource()
      : { isLocalAccount: true, name: 'Expo Calendar' };
  const newCalendarID = await Calendar.createCalendarAsync({
    title: 'Expo Calendar',
    color: 'blue',
    entityType: Calendar.EntityTypes.EVENT,
    sourceId: defaultCalendarSource.id,
    source: defaultCalendarSource,
    name: 'internalCalendarName',
    ownerAccount: 'personal',
    accessLevel: Calendar.CalendarAccessLevel.OWNER,
  });
  console.log(`Your new calendar ID is: ${newCalendarID}`);
}

The permission have been given to the calendar and all the calendars have "allowsModifications": true, but can't understand why it says it's not allowed only on a real device.

I've tried modifying the default calendars to different source as following:

async function getDefaultCalendarSource() {
  const calendars = await Calendar.getCalendarsAsync();
  const defaultCalendars = calendars.filter(
    each => each.source.name === 'Gmail' // or 'iCloud', 'Yahoo'
  );
  return defaultCalendars[0].source;
}

thinking that it may have to do with the source, but they result in the same error, "that account does not allow calendars to be added or removed."

I am trying to create separate builds for dev, stage and prod environments for my React Native project. Eventually I want to automate this using Fastlane, however first I want to understand how to do this manually. At this point, I am focusing on iOS only.

If I change the display name and/or the bundle identifier through Xcode, the react-native CLI immediately breaks. However I have been able to do successful builds using xcodebuild. So I am trying to understand where is the disconnect and what is the best way to achieve separate builds for multiple environments. I would like display names like MyApp, MyApp Dev& MyApp Stage. Also bundle identifiers like com.company.myapp, com.company.myapp.dev& comp.company.myapp.stage.

Here's my project on GitHub.

P.S. Several answers on Stackoverflow talk about how to change these fields permanently, however the process seems quite cumbersome and would not scale if I need to do this repeatedly.

I am following the tutorial in the link: https://medium.com/appandflow/react-native-scrollview-animated-header-10a18cb9469e . However I can't seem to understand how to add tabs to this such that the tab headers get fixed to top when scrolled up. Can anyone please suggest how to achieve this?

I have React Native project which stops working after Xcode upgrade to version 11.3.1. The error is following

Could not install at this time.
Failed to load Info.plist from bundle at path /Users/dmytro/Library/Developer/CoreSimulator/Devices/F0BD5650-04A4-4534-B3F6-56B74ED1B0C2/data/Library/Caches/com.apple.mobile.installd.staging/temp.aRWRdh/extracted/Target.app/Frameworks/RCTVibration.framework; Extra info about plist: ACL=<not found

and details

Details

This app could not be installed at this time.
Domain: IXUserPresentableErrorDomain
Code: 1
Failure Reason: Could not install at this time.
Recovery Suggestion: Failed to load Info.plist from bundle at path /Users/dmytro/Library/Developer/CoreSimulator/Devices/F0BD5650-04A4-4534-B3F6-56B74ED1B0C2/data/Library/Caches/com.apple.mobile.installd.staging/temp.aRWRdh/extracted/Target.app/Frameworks/RCTVibration.framework; Extra info about plist: ACL=<not found> 
--
Failed to load Info.plist from bundle at path /Users/dmytro/Library/Developer/CoreSimulator/Devices/F0BD5650-04A4-4534-B3F6-56B74ED1B0C2/data/Library/Caches/com.apple.mobile.installd.staging/temp.aRWRdh/extracted/Target.app/Frameworks/RCTVibration.framework; Extra info about plist: ACL=<not found> 
Domain: MIInstallerErrorDomain
Code: 35
User Info: {
    FunctionName = "-[MIBundle _validateWithError:]";
    LegacyErrorString = PackageInspectionFailed;
    SourceFileLine = 128;
}
--

I am facing this error while creating bundle of react-native app.

I am executing command react-native bundle --dev false --entry-file index.js --bundle-output ios/main.jsbundle --platform ios

error SHA-1 for file /usr/local/lib/node_modules/react-native/node_modules/metro/src/lib/polyfills/require.js (/usr/local/lib/node_modules/react-native/node_modules/metro/src/lib/polyfills/require.js) is not computed. Run CLI with --verbose flag for more details.
ReferenceError: SHA-1 for file /usr/local/lib/node_modules/react-native/node_modules/metro/src/lib/polyfills/require.js (/usr/local/lib/node_modules/react-native/node_modules/metro/src/lib/polyfills/require.js) is not computed
    at DependencyGraph.getSha1 (/usr/local/lib/node_modules/react-native/node_modules/metro/src/node-haste/DependencyGraph.js:258:13)
    at /usr/local/lib/node_modules/react-native/node_modules/metro/src/DeltaBundler/Transformer.js:211:26
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/usr/local/lib/node_modules/react-native/node_modules/metro/src/DeltaBundler/Transformer.js:46:24)
    at _next (/usr/local/lib/node_modules/react-native/node_modules/metro/src/DeltaBundler/Transformer.js:66:9)
    at /usr/local/lib/node_modules/react-native/node_modules/metro/src/DeltaBundler/Transformer.js:71:7
    at new Promise (<anonymous>)
    at /usr/local/lib/node_modules/react-native/node_modules/metro/src/DeltaBundler/Transformer.js:63:12
    at Transformer.transformFile (/usr/local/lib/node_modules/react-native/node_modules/metro/src/DeltaBundler/Transformer.js:236:7)
    at /usr/local/lib/node_modules/react-native/node_modules/metro/src/Bundler.js:87:34

react-native info command output

info Fetching system and libraries information...
System:
    OS: macOS Mojave 10.14.3
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 1.73 GB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.16.0 - /usr/local/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
    Android SDK:
      API Levels: 23, 25, 26, 27, 28, 29
      Build Tools: 27.0.3, 28.0.3
      System Images: android-29 | Google Play Intel x86 Atom
      Android NDK: 20.1.5948944
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5522156
    Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.5 => 0.61.5 
  npmGlobalPackages:
    create-react-native-app: 2.0.2
    react-native-cli: 2.0.1
    react-native: 0.61.5

Get all contacts from phonebook and upload to server but got following error.

While append image in request body FormData

Tried code

pass file url contact thumbnailPath

const path = con.thumbnailPath
body.append('image', {
     uri: path,
     type: 'image/jpeg',
     name: 'photo.jpg',
     type: 'multipart/form-data'
})

Tried code

pass file url contact thumbnailPath without "file://"

const path = con.thumbnailPath.replace('file://', '')
body.append('image', {
     uri: path,
     type: 'image/jpeg',
     name: 'photo.jpg',
     type: 'multipart/form-data'
})

Tried code

check file exist on path or not with using react-native-fs

if (con.thumbnailPath != '') {
     let isExist = RNFS.exists(con.thumbnailPath)
     if (isExist) {
         const path = con.thumbnailPath.replace('file://', '')
         console.log("Exist", path)
         body.append('image', {
             uri: path,
             type: 'image/jpeg',
             name: 'photo.jpg',
             type: 'multipart/form-data'
         })
     }
}

Request

fetch(url, {
    method: 'POST',
    headers: {
        'Authorization': token,
        'token': token
    },
    body: params 
})
.then((res) => res.json())
.then((json) => {
    console.log("RESPONSE:- ", json)
    if (json.response[0].status == 'false') {
        let msg = json.response[0].response_msg
        callback(new Error(msg), json.response[0])
    }
    else {
        callback(null, json.response[0])
    }
})
.catch((err) => {
    console.log(err)
    callback(err, null)
})

In my react native project react-native@60.5 in the iOS dir I get this issue when running a pod install

[!] Invalid `Podfile` file: No such file or directory - ./node_modules/.bin/react-native.

 #  from /Users/username/appname/ios/Podfile:44
 #  -------------------------------------------
 #  
 >    use_native_modules!
 #  end
 #  -------------------------------------------

This is a React Native fresh init from >@60.0; All worked perfect until I cleared my cache and installed node_modules with the following commands - this may have not been necessary or a good move on my part.

watchman watch-del-all && 
rm -rf $TMPDIR/react-native-packager-cache-* &&
rm -rf $TMPDIR/metro-bundler-cache-* && 
rm -rf node_modules/ 
&& npm cache clean --force &&
npm install && 
npm start -- --reset-cache

Here is my podfile

platform :ios, '9.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target 'XXX' do
  # Pods for XXX
  pod 'React', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native/React'
  pod 'React-DevSupport', :path => '../node_modules/react-native/React'
  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-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket'

  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 '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'

  # Required by RNFirebase
  pod 'Firebase/Core', '~> 6.3.0'
  pod 'Firebase/Auth', '~> 6.3.0'
  pod 'Firebase/Firestore', '~> 6.3.0'

  pod 'GoogleIDFASupport', '~> 3.14.0'
  pod 'Fabric', '~> 1.10.2'
  pod 'Crashlytics', '~> 3.13.2'

  target 'XXXTests' do
    inherit! :search_paths
    # Pods for testing
  end

  use_native_modules!
end

target 'XXX-tvOS' do
  # Pods for XXX-tvOS

  target 'XXX-tvOSTests' do
    inherit! :search_paths
    # Pods for testing
  end

end

Here is my package.json

{
  "name": "XXX",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@gigasz/react-native-sketch-canvas": "github:jramalho/react-native-sketch-canvas",
    "@react-native-community/async-storage": "1.6.1",
    "@react-native-community/geolocation": "2.0.2",
    "@react-native-community/netinfo": "4.2.0",
    "@react-native-mapbox-gl/maps": "7.0.1",
    "@turf/turf": "5.1.6",
    "awaity": "1.0.0",
    "base-64": "0.1.0",
    "d3-scale": "3.1.0",
    "deepmerge": "4.0.0",
    "jetifier": "^1.6.4",
    "mobx": "5.13.0",
    "mobx-react": "6.1.3",
    "moment": "2.24.0",
    "prop-types": "15.7.2",
    "react": "16.8.6",
    "react-native": "0.60.5",
    "react-native-device-info": "2.3.2",
    "react-native-firebase": "5.5.6",
    "react-native-fs": "2.14.1",
    "react-native-gesture-handler": "1.4.1",
    "react-native-image-picker": "1.1.0",
    "react-native-image-progress": "1.1.1",
    "react-native-indicators": "0.13.0",
    "react-native-masked-text": "1.13.0",
    "react-native-modal-datetime-picker": "7.5.0",
    "react-native-paper": "2.16.0",
    "react-native-pdf": "5.1.4",
    "react-native-shake": "3.3.1",
    "react-native-status-bar-height": "2.4.0",
    "react-native-svg": "9.8.4",
    "react-native-svg-charts": "5.3.0",
    "react-native-vector-icons": "6.6.0",
    "react-navigation": "4.0.0",
    "react-navigation-material-bottom-tabs": "1.1.1",
    "react-navigation-stack": "^1.5.1",
    "rn-fetch-blob": "0.10.16",
    "uuid": "3.3.3"
  },
  "devDependencies": {
    "@babel/core": "7.5.5",
    "@babel/runtime": "7.5.5",
    "@react-native-community/eslint-config": "0.0.5",
    "babel-jest": "24.9.0",
    "babel-plugin-transform-remove-console": "6.9.4",
    "eslint": "6.3.0",
    "jest": "24.9.0",
    "metro-react-native-babel-preset": "0.54.1",
    "react-test-renderer": "16.8.6"
  },
  "jest": {
    "preset": "react-native"
  }
}

My CI build system still works fine with the same podfile and package.json

Any help will be appreciated!

I tried to build the app through expo but failed, and I tried to reinstall expo-cli. So, I entered the code below to remove the expo-cli.

npm -g uninstall expo-cli --save

and

(base) Bongui-MacBookPro:expo-firebase-master bong$ npm uninstall expo-cli -g
up to date in 0.042s

However, if i type expo, it will run.

So if you ignore it again and try to reinstall expo-cli, The following errors occur:

npm ERR! code EEXIST
npm ERR! syscall symlink
npm ERR! path ../lib/node_modules/expo-cli/bin/expo.js
npm ERR! dest /Users/bong/npm-global/bin/expo-cli
npm ERR! errno -17
npm ERR! EEXIST: file already exists, symlink '../lib/node_modules/expo-cli/bin/expo.js' -> '/Users/bong/npm-global/bin/expo-cli'
npm ERR! File exists: /Users/bong/npm-global/bin/expo-cli
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/bong/.npm/_logs/2020-01-28T09_18_38_604Z-debug.log

Thank you, teachers. Please help me solve the problem. Thank you.

I am new to react-native and have found an error that makes absolutely no sense to me.

I am trying to include a calendar library: https://github.com/wix/react-native-calendars

I have included the dependency for that library in my package.json file and run npm install

The project was running fine and as expected. I have simply added one line of code to the project:

import { Calendar, CalendarList, Agenda } from 'react-native-calendars';

Nothing else. However now I am getting a red error message when the app loads on device and this is what my console is saying:

error: bundling failed: Error: While trying to resolve module xdate from file /Users/Alex/Documents/workspace/mobile/node_modules/react-native-calendars/src/index.js, the package /Users/Alex/Documents/workspace/mobile/node_modules/xdate/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js. Indeed, none of these files exist:

* /Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)

* /Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json) at ResolutionRequest.resolveDependency (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:103:15) at DependencyGraph.resolveDependency (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/node-haste/DependencyGraph.js:272:4579) at dependencies.map.relativePath (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:376:19) at Array.map () at resolveDependencies (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:374:16) at /Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:212:33 at Generator.next () at step (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:313) at /Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:473 at

However I have checked in the directory and in fact /Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js does exist. However I do not see any of this part: (.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`

As to how /Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js/index can exist, that doesn't make sense because xdate.js is not a directory.

Any help?

I am launching a mapbox navigation through a bridge (in react native) I would like to know how to catch event when user close the navigation view or stop navigation mapboxnavigation version :0.35.0

here is my navigation code:

 if (CLLocationManager.locationServicesEnabled()) {
        locationManager.startUpdatingLocation() // start location manager
      }

      let origin = Waypoint(coordinate: CLLocationCoordinate2D(latitude: number2, longitude: number), name: "Origin")
      let destination = Waypoint(coordinate: CLLocationCoordinate2D(latitude: number4, longitude: number3), name: "Destination")
      let options = NavigationRouteOptions(waypoints: [origin, destination])

      Directions.shared.calculate(options) { (waypoints, routes, error) in
        guard let route = routes?.first else { return }

        let viewController = NavigationViewController(for: route)
        let appDelegate = UIApplication.shared.delegate
        appDelegate!.window!!.rootViewController!.present(viewController, animated: true, completion: nil)
      }

I am working on a react native project, where i need a notification with actions.

I am using this module for handling notifications: https://github.com/wix/react-native-notifications

Presenting the notification works fine, and you are able to select one of two actions. As seen here: screenshot of notification

When an option is selected or the notification is tapped the following event is triggered:

Notifications.events().registerNotificationOpened((notification, completion) => {
    console.log("Notification opened by device user", notification);

    // I need to identify action here
    // notification doesn't include anything i can use to identify the action

    completion();
});

But from here i cant figure out how to identify what action was selected. I have been searching though the documentation and examples for hours without finding an answer.

I hope someone can point me in the right direction, thanks!

In React Native, there are certain third-party components which compile their own libraries that can be included in your main React project. Examples of such third-party libraries are these:

• https://github.com/naoufal/react-native-touch-id
• https://github.com/lazaronixon/react-native-qrcode-reader
• https://github.com/brentvatne/react-native-modal

Now, I would very much like to create my own React Native component with a linked library (iOS only, so I only need the Cocoa library that I would link using this method: https://facebook.github.io/react-native/docs/linking-libraries-ios.html), and so far, all I found is this: http://moduscreate.com/react_native_custom_components_ios/

The resulting project does not, however, specify a library target, and is not linkable to a different project.

I have also tried copying the Touch ID repository and try changing that one's code, but alas, I found it to be uncompilable without being referenced from a different project, which in turn would be the one to be compiled.

Where can I find any guides at all regarding how to do that? Thanks!

I have seen already a number of border cases and strange developer interface.

From the "shake your device", which is really impractical, specially with a tablet

To working around Android studio to simulate a button press.

Is there a consistent way to do it? Can't we use a intern API to have a debug button within our app to launch such menu as navigator.popUpDevMenu()?

And if not, how do you shake your tablet to get it working. This is intended to solve How To configure HMR on a real device, too. React native does improve the development experience, but I'd say that particular thing slows it a little bit.

When I try to subscribe to topic in iOS device(iPhone) it fail strangely...

In debug when code reaches messaging().subscribeToTopic('adminDevices'); it does not go on without any errors or warning If I GET on postman for take information about firebase token it result not subscribed to topic instead ig i run application with android the device will subscribe to topic. I have permission and i have FCM token, i try to subscribe after these operations and when i send message with token it works.

The others messaging() functions works correctly. I have already tried to move it in App.js and before and after getToken() this is my appdelegate.m

#import <Firebase/Firebase.h>
#import "FirebaseMessaging.h"
#import <Firebase.h>
#import <UserNotifications/UserNotifications.h>
#import <FirebaseMessaging/FirebaseMessaging.h>
#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
      [FIRApp configure];
        [FIRMessaging messaging].delegate = self;
        if ([UNUserNotificationCenter class] != nil) {
          [UNUserNotificationCenter currentNotificationCenter].delegate = self;
          UNAuthorizationOptions authOptions = UNAuthorizationOptionAlert |
          UNAuthorizationOptionSound | UNAuthorizationOptionBadge;
          [[UNUserNotificationCenter currentNotificationCenter]
            requestAuthorizationWithOptions:authOptions
            completionHandler:^(BOOL granted, NSError * _Nullable error) {
            }];
        } else {
          UIUserNotificationType allNotificationTypes =
          (UIUserNotificationTypeSound | UIUserNotificationTypeAlert | UIUserNotificationTypeBadge);
          UIUserNotificationSettings *settings =
          [UIUserNotificationSettings settingsForTypes:allNotificationTypes categories:nil];
          [application registerUserNotificationSettings:settings];
        }

       [application registerForRemoteNotifications];

       [[FIRInstanceID instanceID] instanceIDWithHandler:^(FIRInstanceIDResult * _Nullable result,
                                                           NSError * _Nullable error) {
         if (error != nil) {
           NSLog(@"Error fetching remote instance ID: %@", error);
         } else {
           NSLog(@"Remote instance ID token: %@", result.token);
           NSString* message =
           [NSString stringWithFormat:@"Remote InstanceID token: %@", result.token];
         }
       }];
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"appName"
                                            initialProperties:nil];

  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

- (void)messaging:(FIRMessaging *)messaging didReceiveRegistrationToken:(NSString *)fcmToken {

  NSLog(@"FCM registration token: %@", fcmToken);
  NSDictionary *dataDict = [NSDictionary dictionaryWithObject:fcmToken forKey:@"token"];
  [[NSNotificationCenter defaultCenter] postNotificationName:
   @"FCMToken" object:nil userInfo:dataDict];
  // TODO: If necessary send token to application server.
  // Note: This callback is fired at each app startup and whenever a new token is generated.
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

@end

On Android all works correctly.

Thanks

I am new to react native and am trying to add a google map to my app.

I started by installing react-native-maps and creating a new file with the following code.

import React from 'react';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';

export default class MapScreen extends React.Component  {  
        render() {    
            return ( 

                <MapView 
                provider={ PROVIDER_GOOGLE }
                style={{flex: 1}} 
                region={{
                    latitude: 54.721344, 
                    longitude: -6.199981
                }} 
                showsUserLocation={true} />
                ); 
                 }
        }

After this I added the following code to the Podfile file found in the ios folder.

 target 'MapExamplw' do
    pod 'Yoga', path: "./node_modules/react-native/ReactCommon/yoga/Yoga.podspec"
    pod 'GoogleMaps'
  end

After getting my api key from google, I opened Xcode and added the AirGoogleMap folder to my project. I then went into my build settings and add 'HAVE_GOOGLE_MAPS+1' to Preprocessor Macros Macros.

Next I went into my AppDelegate.m file and added the following lines

@import GoogleMaps;

[GMSServices provideAPIKey:@"YOUR_API_KEY"]

After all this was done I ran my app in the iOS simulator and when I did this an error appeared as shown below.

I am unsure as to why I am getting this error as I have added the AirGoogleMap to my project via Xcode. Is there any way to fix this?

How to call native iOS viewController' code when in RN?

Like use RN to push to a native iOS viewController and then let the native code do the job.

Problem summary : I would like to submit an app to the Apple App store (TestFlight). I am using Transporter v1.1 to submit the app. I am getting the following error in Transporter during the submission process. Please note that I am not using Xcode in this process.

Actual result: ERROR ITMS-90596: "Invalid Bundle. The asset catalog at 'Payload/ExpoKitApp.app/GoogleMaps.bundle/GMSCoreResources.bundle/Assets.car' can't be processed. Rebuild your app, and all included extensions and frameworks, with the latest GM version of Xcode and resubmit."

Expected result : successful submission to the app store.

Development environment : Expo 36.0.0 / macOS High Sierra v 10.13.6 / Processor 2,3 GHz Intel Core i5 / Transporter v 1.1

What have I tried ? : 1. Deleting all node modules and installing them again (npm install). 2. Deleting any old Xcode folders on my mac. Please note that I am not using Xcode. 3. Checked the version of xcode in package-lock.json. It is 2.0.0 but it is being used as dependancy and not as a direct tool in the submission process. 4. Generate a new build thrice and submitting it once more in Transporter.

Can anyone please help me in this process ? I know this question has been asked before but the case is not applicable to me because I am not using xcode or application loader to submit the app. Any help will be appreciated.