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

Using react native on attached device

$
0
0

I am trying to run the React Native not on simulator but on actual attached device. I am getting Xcode error when running npx react-native run-ios --device "My iPhone"

error: Signing for "AwesomeProjectTests" requires a development team. Select a development team in the Signing & Capabilities editor. (in target 'AwesomeProjectTests' from project 'AwesomeProject')
error: "AwesomeProject" requires a provisioning profile. Select a provisioning profile in the Signing & Capabilities editor. (in target 'AwesomeProject' from project 'AwesomeProject')

Do I really need to pay 99 USD per year for developer account to enable to run the application and test it on my attached iPhone?

Surely there must be some other way. Btw official documentation of React Native doesn't mention anything. https://reactnative.dev/docs/running-on-device#2-configure-code-signing


Hand Drawing Polyline on map gets lagged - react native

$
0
0

I'm hand drawing a Polyline but it's really slow, is it a way to improve it? When the finger moves slow over the map the Polyline really gets rendered in a laggy way.

I'm using: "react-native": "0.59.10","react-native-map-clustering": "^3.1.2","react-native-maps": "^0.25.0".

Here is the code I'm using:

constructor(args) {
  this.state={
    regionLocal: {latitude: 37.78825,
                  longitude: -122.4324,
                  latitudeDelta: 0.1022,
                  longitudeDelta: 0.0521
              },
    polylines: [],               
    editing: null
  }
}

onPanDrag(e) {
  const { editing } = this.state;
  if (!editing) {
    this.setState({
      editing: {
        id: id++,
        coordinates: [e.nativeEvent.coordinate],
      },
    });
  } else {
    this.setState({
      editing: {
        ...editing,
        coordinates: [...editing.coordinates, e.nativeEvent.coordinate],
      },
    });
  }
}

render() {
  return (
      <MapView  mapRef={ref => this.map = ref}
          style={{
              position: 'absolute',
              top: 0,
              left: 0,
              right: 0,
              bottom: 0
          }} 
          initialRegion={this.state.regionLocal}
          showsUserLocation={true}
          showsPointsOfInterest={true}
          showsBuildings={true}
          showsMyLocationButton={false}
          loadingEnabled={true}
          clusterColor={"#140c98"}
          spiderLineColor={"#140c98"}
          radius={30}
          moveOnMarkerPress={false}
          maxZoom={13}
          scrollEnabled={false}
          onPanDrag={(e)=>{this.onPanDrag(e)}}>
              {this.state.polylines.map(polyline => (<Polyline
                    key={polyline.id}
                    coordinates={polyline.coordinates}
                    strokeColor="#000"
                    fillColor="rgba(255,0,0,0.5)"
                    strokeWidth={1}
                  />
                ))}
                {this.state.editing && (<Polyline
                    key="editingPolyline"
                    coordinates={this.state.editing.coordinates}
                    strokeColor="#F00"
                    fillColor="rgba(255,0,0,0.5)"
                    strokeWidth={1}
                  />
                )}</MapView>
  )}

Also Here's an example of the way I want it to work:

image description

react-native ios Podfile issue with "use_native_modules!"

$
0
0

In my react-native project (react-native@0.60) in the ios/ dir I run pod install and get this error:

[!] Invalid `Podfile` file: no implicit conversion of nil into String.

 #  from /Users/coryrobinson/projects/hhs2/ios/Podfile:37
 #  -------------------------------------------
 #  
 >    use_native_modules!
 #  end
 #  -------------------------------------------

I haven't added or changed anything in this Podfile - it's all react-native generated. (I'm not experienced in iOS dev so this might be a simple fix, I just don't know what to look for :-|) Thanks for any help!

Here is my Podfile

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

target 'hhs2' do
  # Pods for hhs2
  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-fishhook', :path => '../node_modules/react-native/Libraries/fishhook'
  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 'RNFS', :path => '../node_modules/react-native-fs'

  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'

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

  use_native_modules!
end

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

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

end

How to advertising device using bluetooth react native

$
0
0

I was thinking to do an app that using bluetooth and able to find other devices (iPhone and android devices) and my device will be discoverable. I mean that my device will be able to find other phone devices and other devices will be able to find my phone. All of that using bluetooth.

My app should be in react native... I was looking on two different libraries: react-native-ble-manager and react-native-ble-plx but I couldn't find a way that my device will be discovered while im scanning to find other devices...

React native keyboard is not using the right keyboard from the iOS settings

$
0
0

My react native app is not using the right keyboard. Sometimes, it shows as AZERTY, and sometimes it shows up at QWERTY independently of the phone settings.

Here is a screenshot of my settings and the keyboard in my React Native app.

enter image description here

enter image description here

React-native camera roll linking issue

$
0
0

I am trying to add library to my project @react-native-community/cameraroll. But it is not getting linked and build always fails in Xcode, not even displaying error.

My motto is to save images to cameraroll in iOS as well as android using react-native

I am using React-native version 0.60

How does the app Forest know when you've left the app?

$
0
0

Basically, how can you tell if the user locks the phone or leaves the app?

Even more interestingly, if you lock the app and the swipe on a notification from another app from the lock screen, how does Forest know you've unlocked your phone to another app?

(How Forest works: start a timer and lock your phone. If you use any other apps besides Forest while the timer is going on, you lose.)

No account for team "xxxxxxxxxxxxx". Add a new account in the Accounts preference pane or verify that your accounts have valid credentials

$
0
0
  • me and my team member are building an ios app using react native.
  • he created an identifier and logged in with his credentials in my machine, since build worked fine in his machine.
  • so we thought in my machine also we will use his credentials and do a build.
  • I changed identifier name from Sports to SportsOneTwo
  • but build is failing.
  • so I used my credentials and did a build but still its failing.
  • can you tell me how to fix it.
  • providing my part of project.pbxproj file below.
  • when I did build through xcode I see below two issues.
  • so In account prefernces I added my credentials but still same issue.
  • its showing my team member email id
  • I referred the below link but still not helping me

' No account for team 'LXxxxxxxx' ' build error on Xcode 9.4

error

No account for team "xxxxxxxxxxxxx". Add a new account in the Accounts preference pane or verify that your accounts have valid credentials.

Signing certificate is invalid. Signing certificate "Apple Development: john@sports.com (yyyyyyyyyyy)", serial number "zzzzzzz, is not valid for code signing. It may have been revoked or expired.

project.pbxproj

13B07F941A680F5B00A75B9A /* Debug */ = {
            isa = XCBuildConfiguration;
            baseConfigurationReference = D125F182D60E6491D3BE8244 /* Pods-Sports.debug.xcconfig */;
            buildSettings = {
                ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
                CURRENT_PROJECT_VERSION = 1;
                DEAD_CODE_STRIPPING = NO;
                DEVELOPMENT_TEAM = 66T3AAPSC5;
                INFOPLIST_FILE = Sports/Info.plist;
                LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
                OTHER_LDFLAGS = (
                    "$(inherited)",
                    "-ObjC",
                    "-lc++",
                );
                PRODUCT_BUNDLE_IDENTIFIER = org.reactjs.native.example.SportsOneTwo;
                PRODUCT_NAME = Sports;
                VERSIONING_SYSTEM = "apple-generic";
            };
            name = Debug;
        };
        13B07F951A680F5B00A75B9A /* Release */ = {
            isa = XCBuildConfiguration;
            baseConfigurationReference = 7165D3DED1294FF61E714935 /* Pods-Sports.release.xcconfig */;
            buildSettings = {
                ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
                CURRENT_PROJECT_VERSION = 1;
                DEVELOPMENT_TEAM = 66T3AAPSC5;
                INFOPLIST_FILE = Sports/Info.plist;
                LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
                OTHER_LDFLAGS = (
                    "$(inherited)",
                    "-ObjC",
                    "-lc++",
                );
                PRODUCT_BUNDLE_IDENTIFIER = org.reactjs.native.example.SportsOneTwo;
                PRODUCT_NAME = Sports;
                VERSIONING_SYSTEM = "apple-generic";
            };
            name = Release;
        };

Error when trying to install react-devtools

$
0
0

I am trying to install react-devtools with this code

sudo npm install -g react-devtools

after running this command, I am getting this error.

/usr/local/bin/react-devtools -> /usr/local/lib/node_modules/react-devtools/bin.js

> electron@1.6.11 postinstall /usr/local/lib/node_modules/react-devtools/node_modules/electron
> node install.js

/usr/local/lib/node_modules/react-devtools/node_modules/electron/install.js:47
  throw err
  ^

Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/react-devtools/node_modules/electron/.electron'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! electron@1.6.11 postinstall: `node install.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the electron@1.6.11 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/jayakrishnan/.npm/_logs/2017-08-07T11_22_05_742Z-debug.log

How can I correct this? I am desperately in need of devtools for debugging. If possible, please suggest better debugging tools for React Native.

xcode 10 - Could not build module 'Foundation' - react native

$
0
0

I am trying to add an external module to my react native project but I am stuck getting this error in xcode "Could not build module 'Foundation'"

I tried all solutions on similar questions but none of them works.

enter image description here

How can i create a react-native module with storyboard

$
0
0

I have received a sdk with a storyboard and multiple view controllers. In my react-native module I want to expose a method that will transition to this storyboard and the get the result back. I have tried to follow this answer: React-Native iOS - How can I navigate to a non-React-Native view (native iOS view controller) from a React-Native view with a button press?

I have also tried this code (but we don't have access to the navigationController):

- (void)openStoryBoard{
    UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"NAME_OF_THE_STORYBOARD" bundle:nil];
    UIViewController *vc = [storyboard instantiateInitialViewController];
    [self.navigationController pushViewController:vc animated:true];
}

in Android i have just called StartActivityForResult but i couldn't figure it out in ios.

any suggestions are welcomed.

How to get app latest version from PlayStore/AppStore react native

$
0
0

I need to compare my app's version with the latest version from PlayStore/AppStore. I used react-native-version-check but it's not working properly for my app. Is there a way to call directly to the stores which will contain the version in the response? (using react native)

Webivew onNavigationStateChange method call multiple time in react native

$
0
0

I am making react native application and one screen I am used webview for that and I want to handle onNavigationStateChange props one time call right now it is calling multiple times so any idea how can I solve this issue. refer below code

<WebView 
         ref={r => this.webview = r}
         style={{width:globals.screenWidth, height:globals.screenHeight}}
         bounces={false}
         style={{ flex: 1 }}
         startInLoadingState
         scalesPageToFit
         javaScriptEnabledAndroid={true}
         javaScriptEnabled={true}
         domStorageEnabled = {true}
         onNavigationStateChange={data =>
            this.handleNavigationStateChange(data)
        }
         onLoadStart={() => {
             console.log("onLoadStart-->");
         }}
         onLoadEnd={() => {
            console.log("onLoadEnd-->");
         }}
         source={{uri: globals.MYURL}}
         onError={(error) => this.onError()}
        />


handleNavigationStateChange = navState => {
    console.log("navState >>>>" + JSON.stringify(navState));

};

When i run above code navState >>>> print 3 times I want to handle it 1 time so how can I solve this issue? Your all suggestions are appreciable.

App build failed in xcode with Continuing in background (Failed to display Xcode notification) due to the sentry

$
0
0

Unable to build my app suddenly. This is the error which I got after running the caused by: script error: osascript: no such component "JavaScript".

  Continuing in background.

       Error: Failed to display Xcode notification
          caused by: script error: osascript: no such component "JavaScript".

        /Users//Library/Developer/Xcode/DerivedData/App-dvcafjcjvuogulagizfflouagntd/Build/Intermediates.noindex/ArchiveIntermediates/App/IntermediateBuildFilesPath/App.build/Release-iphoneos/App.build/Script-00199139199199133.sh: line 5: debug]: command not found
Add --log-level=[info|debug] or export SENTRY_LOG_LEVEL=[info|debug] to see more output.
Please attach the full debug log to all bug reports

How to set Staging, Development and Live Environment in React Native

$
0
0

I want to setup a Staging, Live, and Development environment in React Native for both iOS and Android Platform. How should I do that? What should be the structure of the Application?


Styling react-native-material-menu

$
0
0

I'm creating a react-native-app which consists of the material menu. My app requires a vertical menu. I have set the width for the menu. I have images inside the menu to choose the font size. Somehow the images are taking padding without me setting anything. Please help me how can I go about this. The images in the menu are appearing cut even though it is the correct resolution. and each image is taking padding which doesn't allow all 3 to appear.

enter image description here

Bluetooth broadcast in react native

$
0
0

I want to build app in react native that able to scan and discover other mobile devices and in the same time able to advertise(broadcast). I mean that other mobile devices which using my app will be able to discover my phone and my phone will be able to discover other phones which using my app.

I tried many bluetooth libraries for react native but I couldn't find even one that able to do that.. Do you know anything or can explain me why it can't work?

Thank you

Notification Service Extensions stops to receive pushes

$
0
0

React Native. iOS only:

I installed rich push notification extensions according to the documentation here. I have 4 targets, so I created 4 extensions "rich", 4 separate Bundle Identifiers (for example, "appname.rich") and 4 separate provisioning profiles (for example, "appname.rich").

The provisioning profile is explicit, push notifications are enabled there and app group also exist "group.appname".

The provisioning profile of the main target "appname" has all certificates (dev and .p12). .p12 we use at SFMC to send pushes.

The problem is as soon as I add the extension for rich pushes, my app stops to receive all notifications in production (enriched or simple). When I remove extension - everything works fine in production.

Target in Deployment info for both - iOS 10.0.

Please advise, what this can be.

I will be happy to provide more information.

Thanks.

Unrecognized Font Family on React Native

$
0
0

I'm running into a peculiar error using React Native. Inside my button.js I am doing

import Icon from "react-native-vector-icons/MaterialIcons";
const icon = (Icon name="menu size={20} color="green"/>);
render()
    return(
         {icon}
    )

But I'm given the error

Unrecognized Font Family 'Material Icons'

However when I import FontAwesome as:

import Icon from "react-native-vector-icons/FontAwesome";

I get no error.

How to prevent layout from overlapping with iOS status bar

$
0
0

I am working on tutorial for React Native navigation. I found out that all layout starts loading from top of screen instead of below of the status bar. This causes most layouts to overlap with the status bar. I can fix this by adding a padding to the view when loading them. Is this the actual way to do it? I don' think manually adding padding is an actual way to solve it. Is there a more elegant way to fix this?

import React, { Component } from 'react';
import { View, Text, Navigator } from 'react-native';

export default class MyScene extends Component {
    static get defaultProps() {
            return {
                    title : 'MyScene'    
            };  
    }   
    render() {
            return (
                    <View style={{padding: 20}}> //padding to prevent overlap
                            <Text>Hi! My name is {this.props.title}.</Text>
                    </View> 
            )   
    }    
}

Below shows the screenshots before and after the padding is added. enter image description here

Viewing all 16908 articles
Browse latest View live


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