Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all 16567 articles
Browse latest View live

React Native iOS and Android folders not present

$
0
0

I'm new to react native, and I've been having some trouble understanding the folder structure of the app which should supposedly be present in the project folder on creation. Basically, when creating the project with npm, I get some starting files (App.js etc.) and a node_modules folder. I've got it up and running with expo, which created the .expo folder as well.

However, when I go to react's official documentation or look into plugins/addons on git they talk several times about an android and an iOS folder in the project root. But they are nowhere to be seen. I then got some hints that I could install and run react-native-upgrade-git, which allegedly would generate these missing folders. But that didn't work either.

So what have I missed? Where are those folders located?

Edit: Here is a screen dump from a Youtube tutorial showing the project structure I'm looking for:

enter image description here


FlatList rendering causes subviews of the key window to be removed

$
0
0

I have a react native project, with a screen that is built using a Flat List component. Each rendered item is an image that acts as video preview.

Tapping on the video preview swaps out the video preview image with a native video player UIView that I've bridged. The video plays, and everything is good so far.

When I press the full screen button, the video goes full screen as expected. Under the hood, the video view controller achieves this by attaching the view to the keyWindow

- (UIWindow *)topWindow {
    if ([UIApplication sharedApplication].keyWindow) {
        return [UIApplication sharedApplication].keyWindow;
    }
    return [UIApplication sharedApplication].windows.firstObject;
}

Then further down inside the toggle full screen method

[self.topWindow addSubview:self.view];
[self.topWindow makeKeyAndVisible];

Debugging the view hierarchy in Xcode, I can see the view controller has been inserted as a child of UIWindow.

enter image description here

The problem

Everything at this point is fine, until I change the orientation of the device. The view is no longer present on the keyWindow, and the screen shows the FlatList again.

In the View debugger, the controller is gone:

enter image description here

The problem doesn't happen outside of the FlatList

To isolate the problem, I took the player outside of the flat list, made it full screen and the problem doesn't occur.

I assume the issue is caused in some way by the rendering of the flat list, if it works correctly when outside of it.

Can anyone can shed light on the root cause and whether there is a way to prevent this from happening?

Edit

Just so it's clear, the key function is set correctly on the FlatList so re-rendering should not be causing this.

Share video to Instagram on IOS with react-native-share

$
0
0

I'm using "rn-fetch-blob", "react-native-fs" and "react-native-share" to share video to instagram. Video is downloaded from server, stored in cache, then path provided to shareOptions.

On Andrid works perfectly but on IOS post in Instagram have black preview screen. I know that Instagram takes first frame from video to make preview and my video haven't any black frames. I suppose it's something wrong with "react-native-share" library, but i can't understand what is the problem

Here is the code I`m using

RNFetchBlob.config({
fileCache: true,
appendExt: "mp4" })
   .fetch("GET", data.video)
   .then(async res => {
    const path = await res.path()
    const shareOptions = {
     url: path,
    }
    try {
      await Share.open(shareOptions)
....

React Native push notifications iOS - number pending notifications

$
0
0

I use React Push Notifications (https://github.com/zo0r/react-native-push-notification) with localNotificationSchedule for launch notifications, but in iOS the number of push notifications is never destroyed.

Even if I select notifications the number doesn't go down...

This number: (in icon from desktop)

enter image description here

My code:

import PushNotificationIOS from "@react-native-community/push-notification-ios";

var PushNotification = require("react-native-push-notification");

  PushNotification.configure({

    onRegister: function(token) {
      console.log("TOKEN:", token);
    },

    onNotification: function(notification) {
      console.log("NOTIFICATION:", notification);

        let num = 0;
        if (Platform.OS === 'ios') {
          num = notification.data.num;
        } else {
          num = notification.userInfo.num;
        }        

        switch(num) {

          case 1:
            NavigationService.navigate('OnePage');
            break;
          case 2:
            NavigationService.navigate('TwoPage');
            break;     
          default:
            NavigationService.navigate('Home');

      }

      if (Platform.OS === 'ios') {
        notification.finish(PushNotificationIOS.FetchResult.NoData);
      }
    },

    senderID: "YOUR GCM (OR FCM) SENDER ID",

    permissions: {
      alert: true,
      badge: true,
      sound: true
    },

    popInitialNotification: true,


    requestPermissions: true    
  });

class IndexNavigator extends React.Component {
...

Apparently, according to the documentation this code should be correct, but even if I press the notifications and redirect me to the page I want. The number in the icon never decreases, it always increases.

Anyone know why this can happen?

React Native KeyboardAvoidingView on IOS without predictive text causes errors when changing keyboards

$
0
0

When I disable predictive text on an IOS device keyboardAvoidingView no longer works when changing between the text keyboard and the emoji keyboard.

When you first focus on the textInput the keyboardAvoidingView works as expected, however if you then select the emoji keyboard option the keyboard avoiding view drops and the keyboard is covering the textInput.

Note this is only an issue on Apple devices when predictive text has been turned off in the settings.

Any suggestions on how to work around this would be great please.

How to profile React Native source code using Xcode/Instruments/Time Profiler

$
0
0

We're using React Native 0.59.10 and React-Redux 5.0.7, and are experiencing a CPU-bound performance issue, in which our Redux actions are taking ~0.25s to complete.

We've profiled using the Time Profiler configuration in Instruments, but none of our JS code is symbolicated.

Remotely debugging in Chrome seems to just debug the "remote inspector" page, which is entirely unhelpful.

Is there a way to build/attach a source map, or symbolicate the memory addresses seen below, to the JS function names/calls?

Instruments Callstack

How to add button in push-noitifications to iOS devices with react-native-firebase?

$
0
0

I have a doubt and I am not able to solve the problem of having buttons to perform an action (accept or reject) within a push-notification in iOS with react-native-firebase. For Android I can do it but for iOS I can't find a way to register the action. Next I show how is the code I have.

const notificationListener = () => {
  firebase.notifications().onNotification((notification) => {
    const localNotification = new firebase.notifications.Notification({
        sound: 'default',
        show_in_foreground: true,
      })
      .setSound('default')
      .setBody(notification.body)
      .setData(notification.data)
      .setTitle(notification.title)
      .setSubtitle(notification.subtitle)
      .setNotificationId(notification.notificationId);
    if (Platform.OS === 'android') {      
      localNotification
        .android.setBigText(notification.body)
        .android.setSmallIcon('ic_noti_logo_hnc')
        .android.setLargeIcon('ic_launcher')
        .android.setVisibility(firebase.notifications.Android.Visibility.Public)
        .android.setChannelId(CHANNEL_NOTIFICATIONS.CHANNEL_ID)
        .android.setPriority(firebase.notifications.Android.Priority.High);

      if (isEqual(localNotification.data.set_delay_time, "true")){
        // Build an action
        const acceptAction = new firebase.notifications.Android.Action('accept_action', 'default', 'Accept');
        const rejectAction = new firebase.notifications.Android.Action('reject_action', 'default', 'Reject');
        localNotification
          .android.addAction(acceptAction)
          .android.addAction(rejectAction);
      }

    } else if (Platform.OS === 'ios') {
      localNotification
        .ios.setBadge(notification.ios.badge);
    }
    firebase.notifications().displayNotification(localNotification)
      .catch(err => console.error(err));
  });
};

What I intend to do is something similar to what you find with Android but the only thing I found the most is IOSNotification.alertAction.

Could someone guide me with this? From already thank you very much!

Nico.

NrModalPicker/ Reac-native couldn't build for iOs

$
0
0

I installed RnModalPicker into my react native project, following This link. When I build project for iOs, I got this error:
No profile for team 'Q84UD28472' matching 'CodiantWildCard' found: Xcode couldn't find any provisioning profiles matching 'Q84UD28472/CodiantWildCard'. Install the profile (by dragging and dropping it onto Xcode's dock item) or select a different one in the General tab of the target editor. (in target 'RNModalPicker')
Clean and restart x-code not help!


How to use the prop allowsInlineMediaPlayback in react-native-WKWebView?

$
0
0

I'm using WKWebview in ios for my react native project. My project requirement is to disable the vidoe taking a full screen by default. This could be done in UIWebView by setting the the prop allowsInlineMediaPlayback to true but WKWebview does not support this prop. Is there any other way I can set this prop to in order to disable the video taking full screen in my Webview?

<WKWebView
source={{
uri: "videocheck/02_1.2_Objectives_in_financial_management.html"
}}
ref={webView => (this.webView = webView)}
originWhitelist={'["*"]'}
javaScriptEnabled={true}
domStorageEnabled={true}
startInLoadingState={true}
useWebKit={true}
//scalesPageToFit={true}
scrollEnabled={false}
// onLoad={() => this.sendPostMessage()}
allowFileAccess={true}
allowUniversalAccessFromFileURLs={true}
allowFileAccessFromFileURLs={true}
allowsInlineMediaPlayback={true}
mediaPlaybackRequiresUserAction={true}
/>

Expo ImagePicker crashed on IOS Gallery not opening

$
0
0

When I try to use expo imagepicker, the application freezes, opens the gallery or the camera and they close immediately, this only happens to me on ios, on android it works perfectly.

I hope someone can help me.

This is my code

  getPermissionAsync = async () => {
    if (Constants.platform.ios) {
      const { status } = await Permissions.askAsync(Permissions.CAMERA, Permissions.CAMERA_ROLL);
      if (status !== "granted") {
        alert(
          "Lo sentimos, necesitamos permisos de cámara para hacer que esto funcione!"
        );
      }
    }
  };

  _pickImage = async type => {
    let result = null;
    if (type == "galeria") {
      result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        quality: 0.5,
        base64: true
      });
    } else {
      result = await ImagePicker.launchCameraAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        quality: 0.5,
        base64: true
      });
    }

    if (result != null && !result.cancelled) {
      let arr = this.state.imagenesAdjuntas;
      arr.push(result);
      this.setState({ imagenesAdjuntas: arr });
    }
  };

These are the dependencies

"dependencies": {
    "@expo/vector-icons": "^10.0.3",
    "expo": "^33.0.0",
    "expo-asset": "^6.0.0",
    "expo-barcode-scanner": "~5.0.1",
    "expo-blur": "~5.0.1",
    "expo-constants": "~5.0.1",
    "expo-font": "~5.0.1",
    "expo-image-picker": "~5.0.2",
    "expo-linear-gradient": "^5.0.1",
    "expo-mail-composer": "~5.0.1",
    "expo-permissions": "~5.0.1",
    "expo-secure-store": "~5.0.1",
    "firebase": "^7.2.1",
    "prop-types": "^15.7.2",
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
    "react-native-animated-hide-view": "^1.0.0",
    "react-native-banner-carousel": "^1.0.3",
    "react-native-elements": "^1.2.6",
    "react-native-flip-card": "^3.5.5",
    "react-native-gesture-handler": "~1.2.1",
    "react-native-maps": "~0.24.0",
    "react-native-modal": "^11.1.0",
    "react-native-render-html": "^4.1.2",
    "react-native-smtp-mailer": "^1.2.1",
    "react-native-table-component": "^1.2.0",
    "react-native-web": "^0.11.4",
    "react-navigation": "^3.11.0",
    "sharp": "^0.22.1"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.1.1"
  },

This is the app.json

{
  "expo": {
    "name": "App Name",
    "slug": "appname",
    "privacy": "public",
    "sdkVersion": "33.0.0",
    "platforms": [
      "ios",
      "android"
    ],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "loading": {
      "icon": "./assets/icon.png",
      "hideExponentText": false
    },
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "cover",
      "backgroundColor": "#0088AD"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "packagerOpts": {
      "assetExts": [
        "ttf",
        "mp4",
        "otf",
        "xml",
        "html",
        "js"
      ]
    },
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.company.name"
    },
    "android": {
      "package": "com.company.name",
      "config": {
      }
    },
    "description": ""
  }
}

I will put the following to fill

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

React Native IOS Archive not working with react native new version

$
0
0

I am working on a project since 1 year and doing important updates regularly. Last time before 3 days i archive and generate a IPA but after loading screen, app is crashing. But when i run the app it is working fine and everything is working as before.

Check below link i am attaching the video of IOS.

http://cidev.in/demo.mp4

Run react-native application on iOS device directly from command line?

$
0
0

Is it possible to run react-native application on an iOS device directly from the command line like we do on simulator with react-native run ios --simulator "iPhone 5s"?

Duplicate symbols between react-native and GVRKit

$
0
0

I'm trying to get 360 Videos working in my iOS react-native app (With VR support)

I attempted using the various react-native npm packages that offer this functionality, they work on Android but not on iOS. (And most haven't been updated for at least 2 years...)

I decided to attempt making my own package to see if I could resolve the problem myself. But it seems react-native iOS and GVRKit just aren't compatible.

I'm getting "7 duplicate symbols for architecture x86_64":

duplicate symbol 'fLB::FLAGS_nolog_prefix' in:

    /Users/beau/Documents/MMT/ModuleTester/ios/Pods/GVRSDK/Libraries/libGVRSDK.a(logging_ddb19c79df368f1c1db7fe052bc2a5d9.o)
    /Users/beau/Library/Developer/Xcode/DerivedData/ModuleTester-eaufazkgozuyyvfhpezutrvzceza/Build/Products/Debug-iphonesimulator/glog/libglog.a(logging.o)
duplicate symbol 'fLB::FLAGS_log_prefix' in:
    /Users/beau/Documents/MMT/ModuleTester/ios/Pods/GVRSDK/Libraries/libGVRSDK.a(logging_ddb19c79df368f1c1db7fe052bc2a5d9.o)
    /Users/beau/Library/Developer/Xcode/DerivedData/ModuleTester-eaufazkgozuyyvfhpezutrvzceza/Build/Products/Debug-iphonesimulator/glog/libglog.a(logging.o)
duplicate symbol 'fLB::FLAGS_nosymbolize_stacktrace' in:
    /Users/beau/Documents/MMT/ModuleTester/ios/Pods/GVRSDK/Libraries/libGVRSDK.a(examine_stack_fca476d0593b9f715e19264b75811e08.o)
    /Users/beau/Library/Developer/Xcode/DerivedData/ModuleTester-eaufazkgozuyyvfhpezutrvzceza/Build/Products/Debug-iphonesimulator/glog/libglog.a(utilities.o)
duplicate symbol 'fLB::FLAGS_symbolize_stacktrace' in:
    /Users/beau/Documents/MMT/ModuleTester/ios/Pods/GVRSDK/Libraries/libGVRSDK.a(examine_stack_fca476d0593b9f715e19264b75811e08.o)
    /Users/beau/Library/Developer/Xcode/DerivedData/ModuleTester-eaufazkgozuyyvfhpezutrvzceza/Build/Products/Debug-iphonesimulator/glog/libglog.a(utilities.o)
duplicate symbol 'fLI::FLAGS_nov' in:
    /Users/beau/Documents/MMT/ModuleTester/ios/Pods/GVRSDK/Libraries/libGVRSDK.a(vlog_is_on_0129e25e84d5880e84b763ce61020e1c.o)
    /Users/beau/Library/Developer/Xcode/DerivedData/ModuleTester-eaufazkgozuyyvfhpezutrvzceza/Build/Products/Debug-iphonesimulator/glog/libglog.a(vlog_is_on.o)
duplicate symbol 'fLI::FLAGS_v' in:
    /Users/beau/Documents/MMT/ModuleTester/ios/Pods/GVRSDK/Libraries/libGVRSDK.a(vlog_is_on_0129e25e84d5880e84b763ce61020e1c.o)
    /Users/beau/Library/Developer/Xcode/DerivedData/ModuleTester-eaufazkgozuyyvfhpezutrvzceza/Build/Products/Debug-iphonesimulator/glog/libglog.a(vlog_is_on.o)
duplicate symbol 'fLS::FLAGS_vmodule' in:
    /Users/beau/Documents/MMT/ModuleTester/ios/Pods/GVRSDK/Libraries/libGVRSDK.a(vlog_is_on_0129e25e84d5880e84b763ce61020e1c.o)
    /Users/beau/Library/Developer/Xcode/DerivedData/ModuleTester-eaufazkgozuyyvfhpezutrvzceza/Build/Products/Debug-iphonesimulator/glog/libglog.a(vlog_is_on.o)
ld: 7 duplicate symbols for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

I can't get GVRKit and react-native to get along, is there anyway to resolve these errors myself?

Any suggestions are welcome! Thanks in advance! Beau

Edit

I have tried using this shell script (available with react-native-gvr) but it changed nothing :

    #!/bin/bash

cd ./Pods/GVRSDK/Libraries/
lipo -info libGVRSDK.a

# Divide to each platform
lipo -thin armv7 libGVRSDK.a -output libGVRSDK_armv7
lipo -thin i386 libGVRSDK.a -output libGVRSDK_i386
lipo -thin x86_64 libGVRSDK.a -output libGVRSDK_x86_64
lipo -thin arm64 libGVRSDK.a -output libGVRSDK_arm64

# Delete duplicate file
chmod 777 libGVRSDK_armv7
chmod 777 libGVRSDK_i386
chmod 777 libGVRSDK_x86_64
chmod 777 libGVRSDK_arm64

ar -dv libGVRSDK_armv7 vlog_is_on.o
ar -dv libGVRSDK_i386 vlog_is_on.o
ar -dv libGVRSDK_x86_64 vlog_is_on.o
ar -dv libGVRSDK_arm64 vlog_is_on.o

# rm libGVRSDK.a
lipo -create libGVRSDK_armv7 libGVRSDK_i386 libGVRSDK_x86_64 libGVRSDK_arm64 -output libGVRSDK.a

# Delete media
rm libGVRSDK_armv7
rm libGVRSDK_i386
rm libGVRSDK_x86_64
rm libGVRSDK_arm64

cd ../../../

The pod install output :

Architectures in the fat file: libGVRSDK.a are: armv7 i386 x86_64 arm64 
ar: vlog_is_on.o: not found in archive
ar: vlog_is_on.o: not found in archive
ar: vlog_is_on.o: not found in archive
ar: vlog_is_on.o: not found in archive
Integrating client project

I've tried replacing vlog_is_on.o with logging.o and utilities.o to see what happens, but they are also not found.

Any help would reeeaallly be appreciated ;) Thanks !

When attempting to run React-Native app on ios device, why are all RCT... references "undefined symbol" errors?

$
0
0

I'm trying to run my first React-Native app on a device but the build always fails with the following error:

ld: warning: directory not found for option '-L/Users/XXXX/Library/Developer/Xcode/DerivedData/nigh-hktjvygosupgnoaafsvgyowhzsqi/Build/Products/Debug-iphoneos/React'

ld: warning: directory not found for option '-L/Users/XXXX/Library/Developer/Xcode/DerivedData/nigh-hktjvygosupgnoaafsvgyowhzsqi/Build/Products/Debug-iphoneos/React'

ld: warning: directory not found for option '-L/Users/XXXX/Library/Developer/Xcode/DerivedData/nigh-hktjvygosupgnoaafsvgyowhzsqi/Build/Products/Debug-iphoneos/React'

ld: warning: ignoring file /Users/XXXX/Nigh/ReactNativeNigh/Nigh/ios/build/nigh/Build/Products/Debug-iphonesimulator/React/libReact.a, file was built for archive which is not the architecture being linked (arm64): /Users/XXXX/Nigh/ReactNativeNigh/Nigh/ios/build/nigh/Build/Products/Debug-iphonesimulator/React/libReact.a

Undefined symbols for architecture arm64:
  "_OBJC_CLASS_$_RCTBridge", referenced from:
      objc-class-ref in AppDelegate.o
  "_OBJC_CLASS_$_RCTBundleURLProvider", referenced from:
      objc-class-ref in AppDelegate.o
  "_OBJC_CLASS_$_RCTConvert", referenced from:
      objc-class-ref in libRNGestureHandler.a(RNFlingHandler.o)
      objc-class-ref in libRNGestureHandler.a(RNForceTouchHandler.o)
      objc-class-ref in libRNGestureHandler.a(RNLongPressHandler.o)
      objc-class-ref in libRNGestureHandler.a(RNNativeViewHandler.o)
      objc-class-ref in libRNGestureHandler.a(RNPanHandler.o)
      objc-class-ref in libRNGestureHandler.a(RNGestureHandlerModule.o)
      objc-class-ref in libRNGestureHandler.a(RNGestureHandler.o)
      ...

React directory not found error

A few things up front:

The project runs fine on the XCode emulator.

I am using cocoapods and am trying to run the build from the xcWorkspace instead of project (though the full path of the target is /Users/XXXX/Nigh/ReactNativeNigh/Nigh/ios/nigh.xcodeproj which confuses me a little).

I've removed and reinstalled node-modules, linked, and done new pod installs.

It looks like all I have to do is add React to the Debug-iphoneos folder, but I'm not sure how to do that or if that's the solution. My first attempt was to make sure React was in the Scheme's Build Targets. It was the first on the list with all boxes checked, except for some reason it said React(missing). Per React Native / Xcode Upgrade and now RCTConvert.h not found I removed React(missing) from the Targets list and attempted to add React again, but React does not even show up in the list. Also, the Pods/Products folder shows libReact.a differently than the other .a files, without the Archive(?) icon:

List of Pod/Products

Here's the podfile:


require_relative '../node_modules/react-native-unimodules/cocoapods'

target 'nigh' do
  # Pods for nigh
  use_frameworks!

    # pod 'AWSCore', '~> 2.12.0'
    pod 'AWSCore', '~> 2.10.2'
    pod 'AWSAppSync', '~> 2.14.2'

  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge',
    'DevSupport',
    'RCTActionSheet',
    'RCTAnimation',
    'RCTBlob',
    'RCTGeolocation',
    'RCTImage',
    'RCTLinkingIOS',
    'RCTNetwork',
    'RCTSettings',
    'RCTText',
    'RCTVibration',
    'RCTWebSocket',
  ]

  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
  pod 'RNGestureHandler', :podspec => '../node_modules/react-native-gesture-handler/RNGestureHandler.podspec'
  pod 'RNReanimated', :podspec => '../node_modules/react-native-reanimated/RNReanimated.podspec'
  pod 'react-native-google-maps', path: '../node_modules/react-native-maps'  # Uncomment this line if you want to support GoogleMaps on iOS
  pod 'GoogleMaps'  # Uncomment this line if you want to support GoogleMaps on iOS
  pod 'Google-Maps-iOS-Utils' # Uncomment this line if you want to support GoogleMaps on iOS

  use_unimodules!


  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

  pod 'react-native-maps', :path => '../node_modules/react-native-maps'

  pod 'RNDeviceInfo', :path => '../node_modules/react-native-device-info'

  pod 'react-native-slider', :path => '../node_modules/@react-native-community/slider'

  pod 'react-native-notifications', :path => '../node_modules/react-native-notifications'

  pod 'react-native-cameraroll', :path => '../node_modules/@react-native-community/cameraroll'

  pod 'react-native-image-picker', :path => '../node_modules/react-native-image-picker'

  pod 'RNFS', :path => '../node_modules/react-native-fs'

end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == 'react-native-google-maps'
      target.build_configurations.each do |config|
        config.build_settings['CLANG_ENABLE_MODULES'] = 'No'
      end
    end

    #if target.name == "React"
    #  target.remove_from_project
    #end
  end
end

I commented out the if target.name == "React" block, but the error shows up either way.

Am I right in assuming the problem is that React is not in the scheme's build targets, and if so does anyone know how to include it? If not, does anyone know what the real cause could be/how to fix/work around it?

Custom font not working in React Native

$
0
0

I want to use a font from google fonts in my app. Here is the font.

I have placed the .ttf file in app/fonts.

package.json:

{
    "name": "xxx",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "rnpm": {
        "assets": ["./app/fonts"]
    },
    "jest": {
        "preset": "react-native",
        "moduleNameMapper": {
            "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
            "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
        }
    },
    "dependencies": {
        "flow-typed": "^2.0.0",
        "immutable": "^3.8.1",
        "react": "~15.4.1",
        "react-native": "0.42.0",
        "react-native-vector-icons": "^4.0.0",
        "react-redux": "^5.0.3",
        "redux": "^3.6.0",
        "redux-immutable": "^4.0.0",
        "redux-observable": "^0.14.1",
        "rxjs": "^5.2.0"
    },
    "devDependencies": {
        "babel-eslint": "^7.1.1",
        "babel-jest": "19.0.0",
        "babel-preset-react-native": "1.9.1",
        "eslint": "^3.17.0",
        "eslint-plugin-flowtype": "^2.30.3",
        "eslint-plugin-jsx": "^0.0.2",
        "eslint-plugin-react": "^6.10.0",
        "eslint-plugin-react-native": "^2.3.1",
        "flow-bin": "^0.42.0",
        "jest": "19.0.2",
        "jest-cli": "^19.0.2",
        "react-test-renderer": "~15.4.1",
        "redux-devtools": "^3.3.2",
        "remote-redux-devtools": "^0.5.7"
    }
}

then ran react-native link.

Then use the font in my app:

import { View, Text } from 'react-native'
import React from 'react'
import Width from '../width/Width'
import Shape from '../shape/Shape'
import Height from '../height/Height'
import Thickness from '../thickness/Thickness'

export const Volcalc = () => (
  <View style={styles.container}>
    <Text style={styles.text}>SHAPE</Text>
    <Shape />
    <Text style={styles.text}>HEIGHT</Text>
    <Height />
    <Text style={styles.text}>WIDTH</Text>
    <Width />
    <Text style={styles.text}>THICKNESS</Text>
    <Thickness />
  </View>
)

const $mainColor = '#00d1b2'
const styles = {
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: $mainColor
  },
  text: {
    textAlign: 'center',
    color: 'rgba(255, 255, 255, 0.9)',
    fontSize: 15,
    fontFamily: 'Orbitron'
  }
}

In android it doesn't show the new font but has no error. In ios it has error:

Unrecognised font family "Orbitron"

What am I doing wrong?

How do I find out the EXACT value to place in fontFamily: 'xxx'?


Why is React(missing) in xcode scheme build targets list?

$
0
0

I'm trying to run my first React-Native app on an ios device using xcode and keep getting this error:

ld: warning: directory not found for option '-L/Users/XXXX/Library/Developer/Xcode/DerivedData/nigh-hktjvygosupgnoaafsvgyowhzsqi/Build/Products/Debug-iphoneos/React'

ld: library not found for -lReact
clang: error: linker command failed with exit code 1 (use -v to see invocation)

I'm assuming the cause is related to the fact that React is missing in my Scheme's build targets list. React is first on the list with all the boxes checked, but it says React(missing) instead of just React:

Screenshot of build targets list

If I click the '+' button React is not an option. Here is my podfile:

platform :ios, '10.0'

require_relative '../node_modules/react-native-unimodules/cocoapods'

target 'nigh' do
  # Pods for nigh
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge',
    'DevSupport',
    'RCTActionSheet',
    'RCTAnimation',
    'RCTBlob',
    'RCTGeolocation',
    'RCTImage',
    'RCTLinkingIOS',
    'RCTNetwork',
    'RCTSettings',
    'RCTText',
    'RCTVibration',
    'RCTWebSocket',
  ]

  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
  pod 'RNGestureHandler', :podspec => '../node_modules/react-native-gesture-handler/RNGestureHandler.podspec'
  pod 'RNReanimated', :podspec => '../node_modules/react-native-reanimated/RNReanimated.podspec'
  pod 'react-native-google-maps', path: '../node_modules/react-native-maps'  # Uncomment this line if you want to support GoogleMaps on iOS
  pod 'GoogleMaps'  # Uncomment this line if you want to support GoogleMaps on iOS
  pod 'Google-Maps-iOS-Utils' # Uncomment this line if you want to support GoogleMaps on iOS

  use_unimodules!


  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

  pod 'react-native-maps', :path => '../node_modules/react-native-maps'

  pod 'RNDeviceInfo', :path => '../node_modules/react-native-device-info'

  pod 'react-native-slider', :path => '../node_modules/@react-native-community/slider'

  pod 'react-native-notifications', :path => '../node_modules/react-native-notifications'

  pod 'react-native-cameraroll', :path => '../node_modules/@react-native-community/cameraroll'

  pod 'react-native-image-picker', :path => '../node_modules/react-native-image-picker'

  pod 'RNFS', :path => '../node_modules/react-native-fs'

end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == 'react-native-google-maps'
      target.build_configurations.each do |config|
        config.build_settings['CLANG_ENABLE_MODULES'] = 'No'
      end
    end
    if target.name == "React"
      target.remove_from_project
    end
  end
end

I've tried removing the if target.name == "React" block and still get the same error. I'm also opening xcode from .xcworkspace instead of .xcodeproject since I am using cocoapods. I've tried removing everything from the DerivedData folder and cleaning the build, and have also tried building using the Legacy Build System. The Legacy Build system shows warnings on nearly every library that read "Missing dependency target 'React'".

I needed to change my bundle name from org.reactjs.native.example.nigh to org.reactjs.native.name.nigh, so could that be responsible? I know that at some point React was not missing in the targets list. Despite React missing the app still runs fine on the xcode iphone emulator.

Also in the Pods/Products file libReact.a does not have an icon like the other .a files do

Can anyone tell me why this is happening and/or how to fix/work around it?

Check always location services are enabled or not in React Native (iOS and Android both)

$
0
0

I am working on react native application. There I have to fetch user locations like multiple if user moves/navigates from one place to other. This is working fine, but, If user disables location permission after some time like user goes to settings there disabled permission, I have to show some button like enable location and again Once user tap on that button It should ask to Request Permission for location.

But, If user first time gives permission and later in some time if he disables permission, The popup for Request permission not showing popup in Android on tap of button.

I am using following library to fetch user location details.

import Geolocation from 'react-native-geolocation-service';

// button on click method following
  enableLocationHandler = () => {
    if (Platform.OS === 'android') {
      this.requestLocationPermissions();
    } else {
      Linking.openURL('app-settings:');
      this.getLatitudeLongitude();
    }
  }



requestLocationPermissions = async () => {
    if (Platform.OS === 'android') {
        this.getLatitudeLongitude();
    } else {
      Geolocation.requestAuthorization();
      this.getLatitudeLongitude();
    }
  }



 getLatitudeLongitude() {
    Geolocation.getCurrentPosition((position) => {
      const initialPosition = JSON.stringify(position);
    },
      (error) => {
        if (error.code === 1) {
          this.setState({ errorMessage: 'Location permission is denied', isLoading: false });
          Geolocation.clearWatch(this.watchID);
        }
      },
      { enableHighAccuracy: true, distanceFilter: 100, timeout: 20000, maximumAge: 1000 }
    );
    this.watchID = Geolocation.watchPosition((position) => {
      // this.showLoader();
      // console.log('position', position);
    });
  }

Any suggestions?

How to test Firebase Dynamic Link with TestFlight (Unpublished ios app)

$
0
0

Developing a small app in react native for both android and ios, where I need to open my app by clicking on a firebase dynamic link.

This app is not published yet in AppStore, right now it is in TestFlight environment. I never have any experience in ios so don't know how to check the dynamic link with TestFlight.

In the Android Beta Environment, it is working very well. I am able to redirect in play store if the app is not already installed. If installed then the app opens itself.

The same scenario I want to test in ios before publishing to AppStore. Currently, it is in TestFlight Environment and unable to redirect if the app is not installed.

**I have gone through some post but no luck yet, posts are: **

How can I test Firebase Dynamic Links if my app is not in the App Store?

Test Firebase Dynamic Links for Unpublished App

Can anyone please suggest how I can test with TestFlight or is there any other possible way to check my dynamic link working fine or not?

Update React Native app to App Store that is published through expo

$
0
0

I have published an app to App Store through Expo and it handled all the ios certificates things for me at that time. But, Now I have re-created the whole app without expo and i have fetched the certificates from expo servers ie expo fetch:ios:certs Now I am not sure how can i use those certificates for my new build in bare React Native. I have managed to get it working on Play Store.

Disable application badge icon on receiving notification in ios

$
0
0

I am using react-native-applozic-chat for handling chats in my react-native app. My question is there any way to prevent the app badge icon from appearing on app icon after receiving any chat notification? I want to disable it specifically in ios because it does not appear in android.

Viewing all 16567 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>