I'm sure I'm missing something simple. I have a React Native project working and I'm attempting to get it on the app stores. Following those instructions, after I have created my provisioning profile in the Apple Developer Dashboard, it says to double click the developer provisioning profile to launch xcode. It's these instructions exactly:

Now find the files you just downloaded on your computer, and double-click each of them in turn, causing Xcode to launch. Verify the profiles are there by opening a project or starting a new one for this test.

So I double-click my file, and xcode does launch but no windows open up. I do not have an xcode project for my react native app so I have nothing to open. There is no menus for 'build settings' or 'general' so I'm not sure how to proceed.

For reference, here is my react native directory structure:

my_project/
    .expo/
    assets/
    node_modules/
    src/
    .bablerc
    .gitignore
    App.js
    app.json
    package-lock.json
    package.json
    README.md

Did I miss a step somewhere? How do I get an xcode project from this?

Recently I have integrated AppCenter for CI & Distribution in one of my react-native projects.Android is working fine.I am facing issues in iOS.Particularly I am not able to take build for iOS.The issue is pod installation gets failed. Anyone who has integrated AppCenter for iOS successfully pls do help me out. I will add the screenschot of the error below:

Images are rendered in different aspects in ios and android using image component from react-native. I’m trying to display image with 45 degree angle cutoff every corner.

I have tried to use cover, contain and center of the resizeMode prop cover fills the image inside the view giving the 45 degree cut but crops either width or height.

Center does not crop the image but if the image isn’t similar ratio as the view the 45 degree angles aren’t cut of the image, Android does this well though.

<View style={(this.state.controlsDisplayed) ? styles.flexLR : styles.flexLRBlack}>

  <View style={{flex: (Platform.OS === ‘ios’) ? 0.85 : 0.5}} />

  <View style={styles.imageWrapView}>

    <Image source={{uri: ‘file://’ + item.photoLeft}} key={“TDVIEW”} resizeMode={(Platform.OS == ‘ios’) ? ‘cover’ : ‘center’} style={styles.floatingImagePartView} />

  </View>

  <View style={{flex: (Platform.OS === ‘ios’) ? 0.85 : 0.5}} />

</View>

Want to get uncropped images on ios that have corners cut of by 45 degrees. Same as is in the android images. Here are images from android device that are rendered correctly.

Here are the images rendered on ios using center and cover

This is rendered using contain on ios

How can I get the images rendered with 45 degree cutoff on ios device as it is on an android device?

I use the react-native-in-app-utils (6.0.2) component in my react-native app. After upgrading a lot of components and libraries I'm unable to get the users receiptData using the InAppUtils.receiptData() function. Before upgrade this works fine.

After running

InAppUtils.receiptData((error, receiptData)=> {
  if(error) {
    Alert.alert('itunes Error', 'Receipt not found.');
  } else {
    // receiptData is undefined/empty and I'am therefore unable to verify the receipe with the users iTunes-account.
  }
});

receiptData is undefined/empty and I'am therefore unable to verify the receipe with the users iTunes-account.

Before trying to get the receipt I run InAppUtils.loadProducts(..) which works fine, I get all my products.

Any suggestions?

Why does react-native's onlayout return in a apparently random order when used in array.map on IOS devices?

I'm using onlayout in a function that returns a number of touchableopacity components, based on a array of objects. It finds the first one which has not yet passed and then stores its position to scroll to it using the following code:

renderScrollViewContent () {
var data = this.state.dataSource.topics[this.state.TopicID].programs
return (
  <View style={{flex: 1, marginTop: 7}}>
    {
        data.map((l, i) => (
          console.log("B:" + l.title),
          <TouchableOpacity key={i}
            onLayout={event => {
              console.log("C:" + l.title)
              if (this.state.scrollPosition === 0 && Moment().isBefore(l.end_time)) {
                const layout = event.nativeEvent.layout
                this.state.scrollPosition = layout.y  
                ...

The problem is that while B: is always in the same order, C: is different each time, like its being drawn async, but only on IOS devices - android testing shows the same each time.

Is there a way I can get it to act sync or otherwise get the y position of the first array element whose end time has not yet passed? And what is the difference between the way ios and android utilises onlayout?

I am still fairly new to ios development so bear with me. I am developing a react-native module for IOS which checks if the audio is muted. The module is a copy of the ios app: Github repo.

I got everything to work in my react-native module except that it can't find the audio file, which is needed to check if the audio is muted. The following line is used to find the url of the audio file, but it always returns null:

NSURL* url = [[NSBundle mainBundle] URLForResource:@"MuteChecker" withExtension:@"caf"];

I have tried linking this file in my project, but without any result. Could someone explain if you need to search another way in react-native?

I am creating RN app with react-native-firebase, using Firebase Realtime Database as my DB. It is like tinder app and I want to apply a couple of filters while fetching users from the backend (for example I want to fetch users with defined age thresholds, distance from me, etc.).

How can I make a couple of filtering with react-native-firebase? Also how can I get request users only with defined destination from me?

I recently integrated react-native-quikkly to my app. While working with it, I have some questions. I can't see the original image in rendered image. I can get svg file data using 'createImage' function.

Quikkly.createImage({
  value: 123456,
  template: "template0002style11",
  skin: {
    backgroundColor: '#5cb7a6',
    borderColor: '#ffffff',
    dataColor: '#000000',
    maskColor: '#5cb7a6',
    overlayColor: '#ffffff',
    imagePath: 'https://s3-eu-west-1.amazonaws.com/docs.quikkly.io/img/1481647718.png'
  }
}).then((result) => {
  console.log(result)
})

Here, I tried to set imagePath as weburi, local storage path. But nothing worked. I want to know the reason and how to set imagepath. And also I need to use custom blueprint file. But I can't get any document about how to set custom blueprint file in react-native. Anyone who is good at quikkly, please help me.

So I'm trying to run an iOS app project that is written in react-native, after cloning and npm install, I encountered a problem while trying to pod install in iOS folder.

This is the error:

[!] No podspec found for ReactNativePermissions in ../node_modules/react-native-permissions

due to:

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

I tried to search but couldn't find any working solution, can anyone help me with this?

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

I am getting this error .unable to build .I have tried pod deintegrate and again pod install but issue. still not fix.

Pods/Headers/Public/abseil/absl/numeric/int128.h:726:10: fatal error: 'absl/numeric/int128_have_intrinsic.inc' file not found

here is my pod version

# Required by RNFirebase

  pod 'Firebase/Core', '~> 6.13.0'
  pod 'Firebase/Auth', '~> 6.13.0'
  pod 'Firebase/Database', '~> 6.13.0'
  pod 'Firebase/Functions', '~> 6.13.0'
  pod 'Firebase/DynamicLinks', '~> 6.13.0'
  pod 'Firebase/Firestore', '~> 6.13.0'
  pod 'Firebase/Messaging', '~> 6.13.0'
  pod 'Firebase/RemoteConfig', '~> 6.13.0'
  pod 'Firebase/Storage', '~> 6.13.0'
  pod 'Firebase/Performance', '~> 6.13.0'
  pod 'Fabric', '~> 1.10.2'
  pod 'Crashlytics', '~> 3.14.0'

and

"react-native-firebase": "^5.6.0",
  "react": "16.8.3",
    "react-native": "0.59.8",

let me whats the why its coming

I created my first react native app using the following command.

react-native init PropertyFinder

This created a project for ios in Objective-C. The problem is I don't know Objective-C but I work on Swift.

This gist shows how to link react-components to a swift project. But is there a way to directly create the project in Swift language?

I wrote my program with React Native. I did some research on adding icons to the iOS app and found I needed Xcode but couldn't install the Mac for various reasons. Now I want to know if I have any other way to change the iOS app icon?   Thank you for helping me

I need help in designing this button in react-native. Please help me?

When i run the app with expo start then after 5 seconds i got blank screen and this error

C:\Users\lp\apps\test\App>expo start
Starting project at C:\Users\lp\apps\test\App
Expo DevTools is running at http://localhost:19002
Opening DevTools in the browser... (press shift-d to disable)


Invalid regular expression: /(.*\\__fixtures__\\.*|node_modules[\\\]react[\\\]dist[\\\].*|website\\node_modules\\.*|heapCapture\\bundle\.js|.*\\__tests__\\.*)$/: Unterminated character class


Metro Bundler process exited with code 1

A Geofence background task I've defined and registered gets triggered multiple times instead of once. This behavior generates multiple Enter and Leave events with different region ids(expo region type.

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

import * as TaskManager from 'expo-task-manager';
import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';

const SAMPLE_TASK = 'sample-task';
//
// Location.stopGeofencingAsync(SAMPLE_TASK);
// TaskManager.unregisterTaskAsync(SAMPLE_TASK);

const askPermission = async () => {
  let status = await Permissions.askAsync(Permissions.LOCATION);
  console.log(status);
  if (status.status !== 'granted') {
    console.log('Permission to access location was denied');
  }
};

const monitorGeoFenceTask = async (payload) => {
  console.log(payload);
};

const registerGeofenceTask = async () => {
  const registered = await TaskManager.isTaskRegisteredAsync(SAMPLE_TASK);
  console.log('Is registered', registered);

  if (registered) {
    const stopGeo =  await Location.stopGeofencingAsync(SAMPLE_TASK);
    Location.startGeofencingAsync(SAMPLE_TASK, [
      {
        latitude: 32.296048,
        longitude: -90.178607,
        radius: 50,
      }]);
  }
  else{
    Location.startGeofencingAsync(SAMPLE_TASK, [
      {
        latitude: 32.296048,
        longitude: -90.178607,
        radius: 50,
      }]);
  }
};


askPermission();
registerGeofenceTask();

TaskManager.defineTask(SAMPLE_TASK, monitorGeoFenceTask);

export default class App extends Component {
  render() {
    return (
        <View>
          <Text>Open up App.js to start working on your app!</Text>
        </View>
    );
  }
}

I've tried using Location.stopGeofencingAsync(SAMPLE_TASK) and TaskManager.unregisterTaskAsync(SAMPLE_TASK) to delete old tasks but it doesn't seem work.

Output from idevicesyslog | grep sample-task

Dec 22 22:06:52 iPhone IoPrealphar[2920] <Notice>: EXTaskService: Executing task 'sample-task' for app '@app'.
Dec 22 22:06:54 iPhone IoPrealphar[2920] <Notice>: EXTaskService: Executing task 'sample-task' for app '@app'.

Issue Description::

I am working on react-native-ios app, most of the times it stuck after splash. I have created a duplicate splash screen inside my react native code. When app started I am redirecting it to dummy splash screen which is exactly like a splash. Here I am loading complete required data of app from API. After loading complete data I am pushing it initial screen. But most of the time my stuck after splash screen, or sometimes crash after loading splash(when moving from original splash to dummy splash screen where I am loading whole app required data).

There is no error inside terminal, I am getting this following mentioned error inside xcode output window, whenever my app crashed or when app stuck on splash screen.

Error::

• Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Application windows are expected to have a root view controller at the end of application launch'

• libc++abi.dylib: terminating with uncaught exception of type NSException

My iOS app working working fine if I am redirecting to login screen, but having issue whenever i am redirecting to dummy splash. I have also changes my dummy screen name to "initializer.js" but nothing happened. iOS app crashed or stuck after splash it redirecting it to screen where i am loading complete required data for app.

App Intializer Screen Code(dummy splash)::

/**
 * Splash Screen
 */
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import * as Animatable from 'react-native-animatable';
import { View, Text } from 'react-native';
import { Spinner } from 'native-base';
import Toast from 'react-native-simple-toast';
import NetInfo from '@react-native-community/netinfo';
import SplashScreen from 'react-native-splash-screen';
import AsyncStorage from '@react-native-community/async-storage';
//Global Components
import { ImageView } from '../../Components/GlobalComponent';
//Form Components
import { Button } from '../../Components/FormComponent';
// APIResponseMessages
import APIResponseMessages from '../../Constants/APIResponseMessages';
// Actions
import { appInitialize, loader } from '../../Actions';
//Style
import { GlobalStyles, Colors } from '../../Styles';
//Images
import Images from '../../Assets/Images';
//Navigation Screen
import { AUTH, INITIAL_SCREEN, setRootScreen } from '../../Navigation';
import LocalStorageKeys from '../../Constants/LocalStorageKeys';
// singleton class
import APIURLServiceSingleton from '../../Services/APIURLService';
// Strings
import { en } from '../../Strings';
//Base Controller
import BaseController from '../BaseController';

const { overlayContainer, flex1, w100, mb30, h100, justifyContentCenter, alignItemsCenter, mb20, px20, px10, textWhite, textCenter } = GlobalStyles;

class Splash extends BaseController {
    state = {
        showTryButton: false,
    };

    isConnected = false;

    /*
    * lifecycle method called when component mount
    */
    componentDidMount() {
        NetInfo.isConnected.addEventListener('connectionChange', this._handleConnectionChange);
        // hide splash screen

        setTimeout(() => {
            SplashScreen.hide();
            NetInfo.isConnected.fetch().done((isConnected) => {
                this._handleConnectionChange(isConnected);
                this.initializeApp();
            });
        }, 1000);
    }

    /**
     * Function to initialize Application
     */
    async initializeApp() {
        if (this.isConnected) {
            let currentUser = await AsyncStorage.getItem(LocalStorageKeys.CURRENT_USER);
            let currentBusiness = await AsyncStorage.getItem(LocalStorageKeys.CURRENT_BUSINESS);
            if (currentUser) {
                await APIURLServiceSingleton.getInstance().saveUser(JSON.parse(currentUser));
                await APIURLServiceSingleton.getInstance().saveCustmrBusiness(currentBusiness);
                await this.props.appInitialize(JSON.stringify(currentUser));
            } else {
                await setRootScreen(AUTH, INITIAL_SCREEN);
            }
        } else {
            Toast.showWithGravity('Please check your internet connection and try again.', Toast.LONG, Toast.CENTER);
        }
    }

    /*
    * lifecycle method called when component unmount
    */
    componentWillUnmount() {
        NetInfo.isConnected.removeEventListener('connectionChange', this._handleConnectionChange);
    }

    /**
     * Function to handle connection change
     */
    _handleConnectionChange = (isConnected) => {
        if (isConnected) {
            this.isConnected = isConnected;
        } else {
            this.isConnected = isConnected;
            this.setState({ showTryButton: true });
        }
    };

    /**
     * Function called on try again
     */
    async onTryAgain() {
        if (this.isConnected) {
            this.setState({ showTryButton: false });
        }
        await this.initializeApp();
    }

    // render method
    render() {
        const { showTryButton } = this.state;
        const { serverError } = this.props;
        return (
            <View style={[flex1]}>
                <ImageView style={[overlayContainer, w100, h100]} resizeMode="cover" source={Images.splash} />
                <View style={[flex1, justifyContentCenter, alignItemsCenter]}>
                    <ImageView animation="fadeInDown" style={[mb30]} source={Images.appLogoLight} />
                    <Animatable.View animation="fadeInUp">
                        <Spinner color={Colors.white} />
                    </Animatable.View>
                    {(showTryButton || serverError) &&
                        <View style={[mb20, px20]}>
                            <Text style={[textWhite, textCenter, mb20, px10]}>
                                {this.props.serverError ? APIResponseMessages.SERVER_TIMEOUT : APIResponseMessages.COULD_NOT_CONNECT_TO_THE_NETWORK}
                            </Text>
                            <Button large block onPress={this.onTryAgain.bind(this)}>{en.tryAgain}</Button>
                        </View>
                    }
                </View>
            </View>
        );
    }
}

// map state to props
const mapStateToProps = ({ AppInitializer, Common }) => {
    // const { showLoading } = Common;
    const { serverError } = AppInitializer;
    return { serverError };
};

export default connect(mapStateToProps, { appInitialize, loader })(Splash);

Environment Description::

• "react-native": "0.61.4"
• "react": "16.12.0"
• "react-native-navigation": "3.5.1"

• "react-native-splash-screen": "3.2.0"

• xcode: 11.2.1

Is there any other open source plugin for voice and video calling other than webrtc-react-native? I tried this one https://github.com/oney/react-native-webrtc but it require a signalling server and not restricted to peer to peer connection on public server.

I'm looking to dismiss the keyboard when the user clicks on anywhere outside the keyboard or the input, but the keyboard is not being dismissed when I click elsewhere:

<TouchableWithoutFeedback style={styles.container} onPress={Keyboard.dismiss}>
            <View style={styles.inputContainer}>
                <TextInput
                    placeholder="Search Term"
                    style={styles.input}
                    onChangeText={setSearch}
                    value={search}
                    returnKeyType="search"
                    onSubmitEditing={handleSubmit}
                />
            </View>
        </ TouchableWithoutFeedback>

The styling is pretty standard:

   container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    inputContainer: {
        position: 'absolute',
        top: stackHeaderHeight + 10,
        height: height * .1,
        width: '100%',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },

I have a basic react native app that is using React Native Maps to display the location markers (whose latitude & longitude is pulled from my API).

However, this app is using well over 200MB of memory on the iPhone 7 simulator. Is this normal? I've developed apps using Swift before and the memory usage were rarely ever over 100MB.

If I make a sample app , simply using this file they've provided in their examples, it's still using over 200MB of memory: Draggable Markers