I am trying to set up a react-native development environment. I would like to set up an iOS emulator (preferably an iPhone 10) to run my app on. I am using a Macbook Pro 2016 running on MacOS 10.14.3. I have installed my react-native app through the command create-react-native-app (running version 2.0.2). I also have installed XCode running version 10.2(10E125). When I scan the QR code that Expo generates and run it on my iPad or my Android device it works just fine, but when I try to load the iOS emulator by pressing i after expo start it returns the error

Trying to open the project in iOS simulator...
Simulator is installed but is identified as 'com.apple.CoreSimulator.SimulatorTrampoline'; don't know what that is.
Simulator not installed. Please visit https://developer.apple.com/xcode/download/ to download Xcode and the iOS simulator. If you already have the latest version of Xcode installed, you may have to run the command `sudo xcode-select -s /Applications/Xcode.app`

I have already tried running the command sudo xcode-select -s /Applications/Xcode.app

I have also tried running the command xcode-select -r

I have also confirmed that in my XCode->Preferences->Locations Command Line Tools is selected as "Xcode 10.2(10E125)"

None of these have worked.

I am expecting that after pressing i after expo start an iOS emulator loads up. Thank you.

-----EDIT-------

After some more research, I found out that running open -a Simulator and then running expo start loads the app on an emulator and works for my purposes. But still if I just run expo start without running open -a Simulator it still gives the same error. I want to ask if this is the best I am going to get?

Hey , like you see in the picture when i am try to launch my react native app by doing react-native run-ios my terminal just block on the info Building (using "xcodebuild ...)

I also tried to run directly from Xcode but Xcode not responding when i open the xcode file ...

I am on Mac Os Catalina 10.15.2 and Xcode 10.2.1

I was trying to do some fingerprinting on user's devices because we have a few functions that is to make sure that whatever transaction that user made, cannot be executed again. Plus we want to detect whether this user have used our app before prior to the app uninstall.

I have tried few methods to achieve this. MAC address is not available on iOS and using getUniqueId() from react-native-device-info library is not really I want because the unique ID will be removed when the app uninstalled. I have tried on caching values by using react-native-webview with window.localStorageinjectedJavascript() but the key-value pairs that I've cached through the webview browser was removed too.

I hope there's idea or solution for this use case. I have been breaking my brains on doing this for awhile.

I'm developing a inventory system for my fathers company and on of the requisites is to be able to use an external Barcode/QR Code scanner.

I've developed everything using the camera as well, but i really need to use the scanner whithout showing the keyboard.

Do any of you guys know if it's possible? if not, can it be done in any other way?

I'm trying to animate my View component in two different ways, one when it first loads, and second when it is clicked on. The problem is, the first animation style is preventing the second to be executed.

    const [addressAnimation] = useState(new Animated.Value(0))
    const [buttonAnimation] = useState(new Animated.Value(0))
    useEffect(() => {
        Animated.stagger(200, [
            Animated.timing(addressAnimation, {
                toValue: 1,
                duration: 500,
            }),
            Animated.timing(buttonAnimation, {
                toValue: 1,
                duration: 500,
            }),
        ]).start()
    }, [])

    const createAnimationStyle = animation => {
        const translateY = animation.interpolate({
            inputRange: [0, 1],
            outputRange: [10, 0],
        })
        return {
            opacity: animation,
            transform: [
                {
                    translateY,
                }
            ]
        }
    }
    const addressStyle = createAnimationStyle(addressAnimation)

The first animation simply brings the View onto the screen by animating opacity and transform.

The View looks as follows:

<Animated.View
    style={[styles.fieldset, addressStyle]}
>
  // some component
</Animated.View>

When a user clicks on the View, I want it to animate to another transform:

    const [googlePlacesAnimation] = useState(new Animated.Value(0))
    const onFocusAnimation = () => {
        Animated.timing(googlePlacesAnimation, {
            toValue: 1,
            duration: 300,
        }).start(() => {
            setFocus(true)
        })
    }
    const translateInterpolate = googlePlacesAnimation.interpolate({
        inputRange: [0, 1],
        outputRange: [0, 300],
        extrapolate: "clamp",
    })

    const addressFocusStyle = {
        transform: [
            {
                translateY: translateInterpolate
            }
        ],
    }

This animation transfroms the View in the opposite direction and by a larger degree. I added the new animation style to the View:

<Animated.View
    style={[styles.fieldset, addressStyle, addressFocusStyle]}
>
  // some component
</Animated.View>

Because the first animation style already sets the translateY to be at a certain point, the second animation doesn't effect the style of the View.

I am trying to run my React Native app in XCode and I keep getting this error. I cannot figure out how to resolve the issue. Any suggestions?

Screen Shot of Error in XCode:

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?

Running into a build failure on Xcode with my react native project. the error is 'folly/Portability.h' file not found

I have been trying to fix this issue on my own for the last few days but unable resolve it.

RN info:

  React Native Environment Info:
    System:
      OS: macOS 10.14
      CPU: (4) x64 Intel(R) Core(TM) i5-4670 CPU @ 3.40GHz
      Memory: 641.79 MB / 8.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 12.6.0 - /usr/local/bin/node
      Yarn: 1.17.3 - /usr/local/bin/yarn
      npm: 6.9.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
    IDEs:
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: 0.59.8 => 0.59.8 
    npmGlobalPackages:
      react-native-cli: 2.0.1

podfile

# Uncomment the next line to define a global platform for your project
platform :ios, '9.0'
# Required by RNFirebase
pod 'Firebase/Core', '~> 5.20.1'

target 'WhosThat_app' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!
  pod 'Firebase/Firestore'
  pod 'Firebase/Storage'
  pod 'Firebase/Auth'
  pod 'GoogleMaps', '~> 2.7.0'
  pod 'Fabric', '~> 1.10.1'
  pod 'Crashlytics', '~> 3.13.1'
  # Pods for WhosThat_app
  pod 'RNImageCropPicker', :path => '../node_modules/react-native-image-crop-picker'
  pod 'RNBackgroundGeolocation', :path => '../node_modules/react-native-background-geolocation'
  pod 'RNBackgroundFetch', :path => '../node_modules/react-native-background-fetch'
  pod 'RNDeviceInfo', :path => '../node_modules/react-native-device-info'
  pod 'React', :path => '../node_modules/react-native'
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
  pod 'Folly', podspec: '../node_modules/react-native/third-party-podspecs/Folly.podspec'

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


  end

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

end

Tried removing the pods folder and reinstalling them and removing node-modules folder

I am Using cocoapods to install react native and react. I just want to use a toast component(https://www.npmjs.com/package/react-native-simple-toast) which does ti have a cocoapods Installation. when i install and and run the app I am getting an error "" file not found error. I have added header search path but still getting this error. 1)error

2)react-native-simple-toast xcode project Header search path

3) Main project Header search path

I have a website that is developed in React, in which we have implemented logging in to a third party via an iFrame. This works as expected in all browsers we have to support, except for WKWebview on iOS, which refuses to set cookies on another domain in the iFrame. We have a React Native app that shows the webpage in this webview, so we kinda have to support it.. From a lot of googling around I've found various workarounds that no longer work, and ended up at Webkits bug page: https://bugs.webkit.org/show_bug.cgi?id=204109 and this from SalesForce: https://help.salesforce.com/articleView?id=000351155&language=en_US&type=1&mode=1 It is unclear though whether or not this is actually fixed or if it has been reintroduced (seems like it has, as it's not working on iOS 13.3 devices). Has anyone had similar experiences, and even better, a potential workaround?

Thanks in advance

I have a react-native app with multiple environments.

Dev, prod, ... Which means that I have multiple 'copies' of the app installed on the phone App Dev, App Prod.

These are under a different bundle identifier:

• com.myapp.dev
• com.myapp.prod

I use deep links to open the app, this works perfect on Android because it asks with which app you want to open it, but on iOS it just opens the first app that founds installed 😞 and i can't find the way to, for example:

• Launch develop-app://whatever/1 and open it in the Dev app
• Launch prod-app://whatever/1 and open it in the Prod app

What am i missing?

This are my defined url types:

Also the apple-app-site-association file looks like this:

{
    "applinks": {
        "apps": [],
        "details": [
            {
                "appID": "1234.com.myapp.dev",
                "paths": ["*"]
            },
            {
                "appID": "1234.com.myapp.prod",
                "paths": ["*"]
            },
        ]
    }
}

I have created a React Native application for iOS and Android. It is using some custom fonts. Please check the size of the folders :

1. Font folder - 18mb

2. Assets folder - 1mb

3. coding files - 118kb

This is in my package.json file.

But my complete app is showing on the app store is around 65.5mb and after download it's size is showing around 77.5 MB.

Can anyone suggest me what should I do to reduce my iOS application size? These libraries are necessary for different functionalities of my application. Please help me to reduce the size of the app. There are multiple tutorials available to reduce android application size but how can I reduce my iOS application size.

Also, I have tried to minimize the size of the .otf file but not find any tool or website that works for a mobile app.

Thank you.

I don't understand why the positionning of these elements changes on the Testflight version of my app like bellow, it is supposed to be all aligned on the same line.

I am unable to reproduce this bug on both real device and simulator but when I open my app in Testflight, it shows.

Any idea what this could be linked to?

Here is my code:

<View style={{flex: 1}}>
  <SafeAreaView />
  <View style={{display: 'flex', flexDirection: 'row', marginBottom: 5}}>
    <ButtonIcon
      uri={require('../../image/filter.png')}
      onPress={() => props.navigation.navigate('FilterModal', {activityType: activityType})}
    />
    <View style={{flex: 1}}>
      <SearchBar search={search} onChange={(value) => setSearch(value)} />
    </View>
    <ButtonIcon
      uri={require('../../image/add.png')}
      onPress={() => props.navigation.navigate('Activity')}
    />
  </View>

I am going to rotate the image in react–native and I would like to get base64 of rotated image. I used several libraries

1. react-native-image-rotate: It's working well on Android but on iOS I get rct-image-store://1 as url so I tried getting base64 using rn-fetch-blob but it throws error that can't recognize that url.

2. react-native-image-resizer: I used this but the response is not good in iOS. If I set -90 then rotate -180, if I set -180 then it's rotating as -270.

Please help me on this problem, how can I rotate the image in iOS.

I need to rotate the image as -90, -180, -270, -360(original).

This is a complex project and I'm not sure what is the correct language to use, but I thought asking here would be a great start.

I operate a react-native mobile application that stores images and videos of users during an activity. At the end of their activity we would like to combine text overlays, images and videos into one video that can be shared. What I need is very similar to how facebook creates memories, friend anniversary, and year end videos. EG: this

We currently store the assets in firebase. Our developers can create an api for you to get the url of the assets. Assets are stored as .jpg and .mp4.

Thoughts on the first steps to create this?

I am working on map using react-native-maps.

The thing is, if I just want to show the map of specific region, let's say Africa, the other place can be ignored.

Is there anyway we can limit the region we want to show to user using react-native-maps (only Africa, not the whole world map)?

Thank you in advance!

I am working on a Native UI Component. I'm trying to figure out how to invalidate the native view so that it re-renders to the screen. What I'm trying to achieve is something like an HTML canvas that would allow dynamically drawing different shapes and images as well as animating those shapes over time. To do this I thought I could just override the draw() methods on each platform, and it would render out whatever my heart imagined.

However, when I call View.invalidate() or UIView.setNeedsDisplay(), the draw method is not called. Moreover, even if I invoke the draw() method, nothing is re-rendered to the screen.

On Android I was finally able to find a workaround by invoking View.invalidateOutline(). For whatever reason, this method resulted in draw() being invoked and the screen being re-rendered. But I have not been able to find a similar workaround on iOS, though I've tried everything under the sun.

I even tried installing the ART objective-C library to see if it would do what I want, but saw the same problem (SurfaceView.invalidate()) would not invoke draw().

I am guessing React Native controls whether things are redrawn through some kind of internal messaging. My question is: is there some way to notify that a native view has changed and should be redrawn. Or else, is this a bug that UIView.setNeedsDisplay() does not re-render?

React Native version: 61.5

Steps To Reproduce

iOS (objective-c):

- (void)createShape:(int)x y:(int)y
{
    // add a new shape object to be drawn
    [shapes addObject:[NSNumber numberWithInt:x]];

    // drawRect() is not called
    [self setNeedsDisplay];

    // drawRect() is called, but the screen does not update/re-render with the new shape
    [[self layer] setNeedsDisplay];
}

- (void)drawRect:(CGRect)rect
{
    RCTLog(@"drawRect()");
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGRect bounds = self.bounds;
    CGContextClearRect(context, bounds);

    CGContextSetRGBFillColor(context, 1.0, 0.0, 0.0, 1.0);
    // even when this method is called, the rectangle is not drawn
    CGContextFillRect(context, rectangle);
}

Android (kotlin):

  fun createShape(x: Float, y: Float) {
        shapes.add(Drop(x, y, 0F))

        draw(_canvas)

        // screen does not update
       invalidate()

       // updates screen
        invalidateOutline()
    }

Also link to the entire project as it currently stands (there's a lot of commented/scratch code as I'm trying all different methods): https://github.com/twalk4821/draw

Thanks.

I have a React-Native app, and I want to know is there a way to see logs output after generated a release ask?

I can do it in debug mode as usual but I have some things that should be tested after release, so I want to ensure everything works well and sees my console.log() output.

I specifically want it in Android right now.

I am trying to include ios sdk framework in my react-native module library. I turned always embed swift standard library to Yes in build setting. Everything compiles fine.

Then I include the node module in an app using npm i react-native-my-framework, open sampleapp.xcworkspace and build in XCode, I get an error MyFramework/MyFramework-Swift.h not found. I tried following permutation combinations:

1. Put MyFramework to Frameworks, Library and Embedded Contents. and tried some other combination of build settings.
2. Set the framework search path in the library project - $(PROJECT_DIR)/../node_modules/react-native-my-framework/ios/
3. I manually included libMyFramework.a to Libraries group.

But I am still facing the same issue. What am I missing here? Also, MyFramework is not on Cocoa pods

I wanna make an app that its main functionality depends on sending SMS. before i was developing android(native) but now im using React-Native to make it for both IOS and Android.

in android it's possible to send sms in background if you get user permission. but after searching through net i couldn't find a way to do it in react-native. i read that Apple doesn't let apps to do so. i'm wondering if there is anyway to send SMS in background for both Android and IOS.

the libraries i've already seen, open phone sms interface(filled with number and smsBody) and then user must push send button(i wanna remove this step. i mean app sends sms automatically).

after all, is there anyway( library, ...) that can sends sms in background without opening sms interface for both android and ios?