• In my React-Native app, I have shown splash screen from react-native and not (Android/IOS) natively.
• But when splash screen loads it zooms in automatically and the same behavior is for other screens.

• It works well in Android but not in IOS.

• From Xcode(10.1) I have removed LaunchScreen.xib as my splash screen requires some api calls.

AfterBefore

I currently have a nested stack for React Navigation:

const FriendsStack = createStackNavigator({
    Friends: {
        screen: FriendsScreen,
    },
    MyProfile: {
        screen: MyProfileScreen,
    },
}, {
        navigationOptions: {
            header: null,
            gesturesEnabled: true,
            gestureResponseDistance: {
                horizontal: 500,
                vertical: 800,
            }
        },
        mode: 'modal',
        headerMode: 'none',
    }
)

const MainStack = createMaterialTopTabNavigator({
    Tracker: {
        screen: TrackerStack,
    },
    Friends: {
        screen: FriendsStack,
    },
}, {
        tabBarPosition: null,
    }
)

The main level has two screens, Tracker and Friends, under createMaterialTopTabNavigator which swipe horizontally. The Friends screen has a modal called MyProfile that swipes vertically. The problem is, after the MyProfile modals appears from the bottom vertically, I'm still able to swipe horizontally to the Tracker screen on the main level. This doesn't close the modal or anything, but becomes almost as if MyProfile became the main level screen with Tracker.

I want the MyProfile modal to only allow vertical gestures, not horizontal. gestureDirection property only determines whether the direction should be inverted or not and gesturesEnabled: false disables all the guestures. How do I disable only the horizontal gestures and not the vertical gestures? Otherwise, is there a way to disable a screen from navigating to another screen while the modal is open?

I've built a little iOS app in React Native that does location tracking, sending the lat/lng regularly to a server of the user's choosing. However this only works when the app is in the foreground. How can I run this task in the background when the user is in other apps?

I'm trying to do in my React Native App that each X min the app fetch some data of my application included if the app is closed. Or more similar, each X min I want to save a value in the AsyncStorage.

It suppose that the react-native-background-task does that but, unfortunately, the project is abandoned with a lot of errors and bugs that make using it unviable.

Is there any other way to do it?

I've created an app using re-natal init and but when I run react-native run run-ios, the build does finish and the simulator opens too, but the app icon never shows up. How can I fix that?

I want to integrate a third party chat SDK and they don't have React Native support. It's my first time working with Native Modules and from what I've seen I can only derive from NSObject to expose my swift module to obj C then that gets exposed to React Native side.

Right now, I have this native module code snippet in swift:

@objc
@IBAction func showAnswerBot() {
        do {
            let answerBotEngine = try AnswerBotEngine.engine()
            let supportEngine = try SupportEngine.engine()
            let messagingConfiguration = MessagingConfiguration()

            DispatchQueue.main.async {
                if let viewController = try? Messaging.instance.buildUI(engines: [answerBotEngine, supportEngine],
                                                                        configs: [messagingConfiguration]) {
                    let nvc = UINavigationController(rootViewController: viewController)

                    nvc.navigationItem.leftBarButtonItem = UIBarButtonItem(title: "back", style: .plain, target: self, action: "backAction")

                    UIApplication.shared.keyWindow?.rootViewController?.present(nvc, animated: true, completion: nil)
                }
            }

        } catch {
            // do something with error
        }
    }

    @objc
    @IBAction func backAction() -> Void {        
            UIApplication.shared.keyWindow?.rootViewController?.dismiss(animated: true)
    }

Here is my interface for objc code:

#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(ZendeskMessagingChatModule, NSObject)

RCT_EXTERN_METHOD(showAnswerBot)

@end

Right now "this works" in that it exposes the chat window as a modal window in my app but the user can't go back or cancel the chat/close the window even though I set the backbutton on the navigation item. I want to add the cancel button at the top but I'm not sure what I'm doing wrong here?

What am I missing above?

Thanks!

I put a button in absolute position to on WebView.
This button works on any simulators and my iPhone 5s real device, but not work on iPhone Plus real device.
The button reacts when tapping, but doesn't fire onPress. It works when set position as relative.
All simulators and devices are same iOS version (12.2).

Does anyone know about this issue?

Environments
React Native 0.56
iOS 12.2

import React, { Component } from 'react';
import { ActivityIndicator, BackHandler, Keyboard, NetInfo, Platform, ScrollView, StatusBar, StyleSheet, Text, TouchableOpacity, View, WebView } from 'react-native';
import { Button, Icon } from 'react-native-elements'

export default class SignInScreen extends React.Component {
    constructor(props) {
        super(props)
    }

    handleBackPress() {
        this.refs['WEBVIEW_REF'].goBack()
        return true
    }

    render() {
        return (
            <View style={styles.container}>
                <StatusBar backgroundColor="white" barStyle="dark-content" />
                <WebView
                    ref="WEBVIEW_REF"
                    bounces={false}
                    source={{ uri: 'https://example.com' }}
                    style={styles.container}
                />
                <Button
                    onPress={this.handleBackPress.bind(this) }
                    buttonStyle={styles.buttonBack}
                    title=""
                    icon={{
                    name: 'chevron-left',
                    type: 'material-community',
                    iconStyle: { color: global.color.normal }
                    }}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    buttonBack: {
        width: 45,
        height: 45,
        position: 'absolute',
        left: 10,
        bottom: 60,
        backgroundColor: '#bfbfbf',
        opacity: 0.9
    },
    container: {
        flex: 1,
        paddingTop: 25,
        backgroundColor: '#fff'
    },
});

I am doing an app with expo SDK36, for some reason, the API they provide does not work on Safari.

The orientation is UNKNOWN and the event listener does not get bind.

This is how I am trying to detect the orientation:

import React, { cloneElement } from 'react';
import { ScreenOrientation } from 'expo';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import omit from 'lodash.omit';
import { createStructuredSelector } from 'reselect';
import { orientationChange as orientationChangeAction } from '../reducers/app/layoutReducer/actions';
import { selectDimensions, selectOrientation } from '../reducers/app/layoutReducer/selectors';

const mapStateToProps = createStructuredSelector({
  orientation: selectOrientation,
  dimensions: selectDimensions,
});

const mapDispatchToProps = (dispatch) => ({
  orientationChange: (dimensions) => dispatch(orientationChangeAction(dimensions)),
});

class ConnectedOrientationProvider extends React.Component {
  constructor(props) {
    super(props);
    this.onOrientationChange = this.onOrientationChange.bind(this);
  }

  // eslint-disable-next-line camelcase
  UNSAFE_componentWillMount() {
    this.subscription = ScreenOrientation.addOrientationChangeListener(this.onOrientationChange);
  }

  async componentDidMount() {
    await this.detectOrientation();
  }

  componentWillUnmount() {
    ScreenOrientation.removeOrientationChangeListener(this.subscription);
  }

  onOrientationChange({ orientationInfo: { orientation } }) {
    this.setOrientation(orientation);
  }

  setOrientation(orientation) {
    const { orientationChange } = this.props;
    orientationChange(orientation.split('_')[0]);
  }

  async detectOrientation() {
    let { orientation } = await ScreenOrientation.getOrientationAsync();

    /**
     * fix for safari (See https://github.com/expo/expo/issues/6949)
     * TODO: addOrientationChangeListener fix for Safari on iOS
     */
    if (orientation === ScreenOrientation.Orientation.UNKNOWN) {
      const { width, height } = this.props.dimensions;
      orientation = width > height ? ScreenOrientation.Orientation.LANDSCAPE : ScreenOrientation.Orientation.PORTRAIT;
    }
    this.setOrientation(orientation);
  }

  render() {
    const { children, ...rest } = omit(this.props, ['orientationChange', 'orientation', 'dimensions']);
    return cloneElement(children, rest);
  }
}

ConnectedOrientationProvider.propTypes = {
  orientationChange: PropTypes.func.isRequired,
};

export default connect(mapStateToProps, mapDispatchToProps)(ConnectedOrientationProvider);

How can I detect being on safari and how can I listen for orientation change on safari mobile ios?

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

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

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

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

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

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

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

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

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

@import GoogleMaps;

[GMSServices provideAPIKey:@"YOUR_API_KEY"]

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

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

I would like the user to select an Album and then display the photos of it in react-native. There is the CameraRoll and it has the ability to filter by groupName, but I did not find a way of how to retrieve these groupNames. Does anybody know how to do this, or do I need to write a native plugin?

I would like to delete application data like local storage without reinstalling the app.

I am using AsyncStorage in react-native, and have persisted some data. To quickly test storage, I would like to be able to clear AsyncStorage manually through the simulator, without implementing a logout/ clear AsyncStorage button in the app. (React-Native AsyncStorage.clear() is failing on IOS).

So I'm learning React Native now, and I'm wondering how to set up an app manually, without using react-native-cli. The reason is that I want to set up app code within another project, but whenever I try to move code from a react-native-cli app to another folder containing other project code, I get build errors when running npx react-native run-ios (specifically, xcodebuild errors out with exit code 65). Actually, even if you create a project with react-native-cli and then just change the folder name you get the same build error.

I have template repos I use to start React projects, and I'd like to set one up for native projects, but it looks like it's not possible with the react-native-cli workflow. Is there another way to initialize a React Native project? I know the React docs have a section on integrating RN with existing native apps (https://facebook.github.io/react-native/docs/integration-with-existing-apps), but I don't have an existing native app, I'm starting a new one!

I have scoured the documentation and found nothing on this. Is there any way to find out what commands are run by react-native-cli? How can I set up my RN app from scratch?

EDIT: yes I have heard of Expo! It's all over the RN documentation. I'm asking about how to do the things that react-native init does, but with a more specialized/templated project structure.

I use '@react-native-firebase/messaging' module to send notifications. On Android everything works fine, Following is the error log I get when I try const fcmToken = await firebase.messaging().getToken(); on ios device.

NativeFirebaseError: [messaging/unknown] The operation couldn’t be completed. (com.firebase.iid error 1001.)

I have already implemented "react-native-permissions" to grant notification permission.

My AppDelegate.m contains :

if ([FIRApp defaultApp] == nil) {
    [FIRApp configure];
 }

Should I add anything else to it? Any help or suggestion will be very helpful. Thanks in advance

I am running a react-native application on Mac. but I am getting "RNCSafeAreaView" was not found in the UIManager.

I can't find this information. Is it true that Android React Native runs on sdkMin18 and therefore makes it supported by most android versions?

I want to upgrade react native from 0.59 to 0.60. With 0.60 Podfile automatically gets generated if you are creating a new project. But my project already have a Podfile. So what steps should I follow to do the migration?

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

I am using auth0 on a React Native iOS project, and I have completed the following steps:

First you need to run the following command to install react-native-lock npm install --save react-native-lock

After that, link react-native-lock with your iOS project: react-native link react-native-lock

When running the above, cocoapods installs a few dependencies which all install successfully:

Adding Podfile to iOS project
Installing Pods
Analyzing dependencies
Downloading dependencies
Using AFNetworking (3.1.0)
Using Lock (1.28.2)
Using Masonry (0.6.4)
Using SimpleKeychain (0.7.0)
Using TouchIDAuth (0.2.0)
Generating Pods project
Integrating client project
Sending stats
Pod installation complete! There are 4 dependencies from the Podfile and 5 total pods installed.

In my Project > Build Settings > Other Linker Flags I have:

lc++
${inherited}
-ObjC

However, when I build the project to my physical iPhone, I get this error for every installed dependency:

ld: warning: directory not found for option '-L/Users/dan/Library/Developer/Xcode/DerivedData/myapp-acmwajylejkvendtsdryuouwuvnl/Build/Products/Debug-iphoneos/AFNetworking'

My Xcode Archive took 10+ minutes. Buildtime mostly on react-xxx targets under project 'Pods', rather than my own code. (I mostly use VS Code for react native and don't use Xcode) Could I do anything to skip building those react-xxx targets?

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