I'm running a react native app and constantly running into the issue of the app not connecting to the code to do automatic updates.

Things I've tried:

• Reloading main.jsbundle via the following command: npx react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios/assets
• Completely removing node and react native from my computer
• Restarting my computer
• Running on a physical device and running on the simulator
• Cleaning derived data in Xcode

This is the screen on starting up, which offers the advice, "Connect to Metro to develop JavaScript."

From the metro bundler that automatically starts up, I get this message when I type 'r' to reload that says, "React Native: No apps connected."

I'm using 0.61 and always have been.

What else should I try?

EDIT

I was able to get it working by restarting my computer (again).

Every once in a while, a restart does the trick, yet most of the time it doesn't work. There still has to be a more reliable way of fixing this.

If one writes a custom app is it possible to be able to add a shortcut to the iOS lock screen? Or is that reserved for Apple sanctioned apps?

Currently, one can go into settings and add, say, the voice memo app to the lock screen control center. Of course, these shortcuts are available when you've signed in as well (by getting to the control center).

I like to use React Native and Expo, but my question is more general than that (but let me know if you know of any Expo tricks for this).

I developed mobile app which has video player in react native.
Then I built both Android and iOS app from the react native project.
But it's working well in Android but not playing in iOS.
If you've ever experienced this problem, please help me.

This is code and package information.

<WebView 
    allowsFullscreenVideo={true} 
    style={{ aspectRatio: 1.6, backgroundColor: "#000000", flex: 1 }}
    source={{ uri: 'https://sample.mp4' }}                    
/>

"react": "16.9.0",
"react-native": "0.61.5",
"react-native-webview": "^8.0.3",

I hope this is not a duplicate.

So I developed my first app for myself using react native and expo. I then wanted to deploy the app on my personal IPhone (possibly without using the app store), but I soon came to realize that an apple developer account is definitely needed for that. I would not mind purchasing a subscription for the developer account once, but I don't necessarily want to renew it every year.

So here my question: Is my app on my own device still going to work after my subscription runs out? Or do I have to redeploy it like it's the case with a free account and XCode after a week.

Any other idea on how to get my app on my own IPhone is welcome as well.

On Android I have no problems, on iOS I am able to catch onRegister event and get the token correctly, but when I test push notifications, the event onNotification seems not working: it never fires.

My configure code is:

const configure = async () => {
    console.log('push notification configured');
    PushNotificationIOS.addEventListener('registrationError', (e) => { alert(JSON.stringify(e)) });

    PushNotification.configure({

        onRegister: function (token) {
            //process token
            alert('Token! ' + JSON.stringify(token));
            console.log('[CATCHED] onRegister:', token);
            db.setToken(token).catch(
                console.log('[ERROR] device push token has not been saved on the database'),
            );
        },

        onNotification: async function (notification) {
            console.log('[CATCHED] onNotification: ' + JSON.stringify(notification));
            let notifType = '';
            //console.log('notification received: ' + JSON.stringify(notification));
            if (Platform.OS === 'ios') {
                notifType = getNotificationType(
                    JSON.parse(notification.data.data).type,
                );
            } else {
                notifType = getNotificationType(
                    notification.type,
                );
            }
            //console.log('notification type: >>>>>>>>>>>>>>>> ' + notifType);
            //console.log('notification s: ------------------> ' + JSON.stringify(notification));
            switch (notifType) {
                {...}
            }
            // process the notification
            // required on iOS only
            if (Platform.OS === 'ios') {
                notification.finish(PushNotificationIOS.FetchResult.NoData);
            }

        },
        senderID: '-----',

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

        popInitialNotification: true,
        requestPermissions: true,
    });
};

In iOS, the console log [CATCHED] onRegister: fires correctly, but [CATCHED] onNotification: is never fired.

I'm trying to make a react-native scrollview with 3 (or more) elements where the element in the middle of the screen is always 1.75 times the normal element size, and while scrolling the size changes dynamically. Can I find when the element is in the center of screen if the size of the scrollview will be changing? Is it possible to do without some complicated mathematical approach? I was trying putting conditions to all elements' styles but can't find a way to determine when the condition is met.

 handleScroll(event) {
    var x = event.nativeEvent.contentOffset.x;
    var page = x / this.state.totalWidth;
    this.setState({ position: page })
}

isElementFocused(start, stop) {
    return (this.state.position >= start && this.state.position < stop);
}

Element:

<View style={styles.swipeBox,
                {
                    backgroundColor: this.isElementFocused(1, 2) ? this.getColor(1) : colors.primary,
                    width: this.isElementFocused(1, 2) ? this.getWidth(1) : this.state.baseWidth,
                    height: this.isElementFocused(1, 2) ? this.getHeight(1) : this.state.baseHeight,

                }}>
                    <Text>test</Text>
                </View>

I know we can load the local image with:

<Image source={require('folder/image.png')}/>

But i need to load the image like this:

<Image source={{uri: 'folder/image.png'}}/>

It works for network images but it doesn't work for local images and even it does not give any error for local images and silently does not display the image. Can anyone tell how to load the local image using the uri property?

im trying to set up firebase is my reactnative app usingthis website and its crashes every time after the loading screen i've installed the pods and linked everything is alright and even the app runs successfuly but it crashes after the loading screen with an error in xcode

    int main(int argc, char * argv[]) {
  @autoreleasepool {
    return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); || Thread 1: signal SIGABRT
  }
}

this my pod file i've searched everywhere and i couldn't fix it

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

target 'cloneFirst' do
  # Pods for cloneFirst
  pod 'Firebase/Core', '~> 6.5.0'
  pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"
  pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"
  pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"
  pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety"
  pod 'React', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native/'
  pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'
  pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'
  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-Core/RCTWebSocket', :path => '../node_modules/react-native/'

  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 'ReactCommon/jscallinvoker', :path => "../node_modules/react-native/ReactCommon"
  pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"
  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 'cloneFirstTests' do
    inherit! :search_paths
    # Pods for testing
  end

  use_native_modules!
end

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

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

end

my appdelegate.m :

   /**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

#import "AppDelegate.h"

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import <Firebase.h>
@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"cloneFirst"
                                            initialProperties:nil];
  [FIRApp configure];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

@end

the error :

   2020-02-29 23:00:07.576274+0200 cloneFirst[96817:5538343]  - <AppMeasurement>[I-ACS036002] Analytics screen reporting is enabled. Call +[FIRAnalytics setScreenName:setScreenClass:] to set the screen name or override the default screen class name. To disable screen reporting, set the flag FirebaseScreenReportingEnabled to NO (boolean) in the Info.plist
2020-02-29 23:00:07.737 [info][tid:main][RCTRootView.m:293] Running application cloneFirst ({
    initialProps =     {
    };
    rootTag = 1;
})

all helps are appreciated thank you

I got these errores when I was adding AsyncStorage dependencies (https://github.com/react-native-community/async-storage)

I was using React Native CLI, not expo, I had ran 'react-native link @react-native-community/async-storage' in the project root.

My problem was when i ran '--clearCache' flag, maybe that was my problem, I don't know. If you know how to run the flag '--clearCache' please help me.

How can I regenerate ios and android folder in React Native project?

react-native-cli: 2.0.1 react-native: 0.61.2

❯ react-native eject error Unrecognized command "eject". info Run "react-native --help" to see a list of all available commands.

❯ react-native upgrade --legacy true error: unknown option `--legacy'

I am using react-native-firebase:: 5.6.0, I am having issue while getting initial link for iOS device. On android it's working fine. I am using "Firebase Dynamic Links" to redirect user inside login screen of my app if in case he is not logged in inside app, otherwise just opening app if he is already logged in. It's working for android app but having an issue with ios app. I have used two function one is the get dynamic link if app is closed "getInitialLink" and another one is to check when app is opened "onLink".

This is function I am using after closing splash screen, only called once when opening app from closing state.

firebase.links().getInitialLink().then((url) => {
    if (url && url === 'https://mycustomdomain.co.in') {
        navigationToScreen(AUTH, INITIAL_SCREEN);
    } else {
        // INITIALIZE APP HERE
    }
});

If app already opened I am getting dynamic link url value inside this function::

this.unsubscribeHandleOpenAppDynamicLinks = firebase.links().onLink(async (url) => {
    let isLoggedIn = await AsyncStorage.getItem(LocalStorageKeys.IS_LOGGEDIN);
    if (url) {
        if ( isLoggedIn !== 'yes'&& url === 'https://mycustomdomain.co.in') {
            navigationToScreen(AUTH, INITIAL_SCREEN);
        }
    }
});


and clearing that listener on componentWillUnmount:: this.unsubscribeHandleOpenAppDynamicLinks();

In case of iOS only "onLink" function is working and I am getting url value as "undefined". getInitialLink() function will returns the URL that the app has been launched from. If the app was not launched from a URL the return value will be null, but I am getting "undefined" even when launching an app from url in case of iOS only. I am getting url inside onLink() in case of iOS when app is launched. Why this is happening??

Please suggest what I am doing wrong here.

I have a FlatList component with an Input inside each row. When I select the input I want it to scroll up above the keyboard.

My code:

return (
    <KeyboardAvoidingView behavior='padding' style={{ flex: 1 }} >
    <FlatList
      style={{ flex: 1, backgroundColor: '#fff' }}
      data={ds}
      renderItem={({ item }) => <ListItem data={item} />}
      ListFooterComponent={this.renderButton}
    />
  </KeyboardAvoidingView>
);

In this scenario, the FlatList is never loaded. When I delete flex:1 from both components, FlatList renders properly but selecting an Input does not make it scroll up

I'm using react-native-firebase for getting new notification

• I would like to send from fcm data-only message, but i can't save this data when IOS app is closed or in background.

• For android the solution is 'Headless JS', so if someone know any solution like Headless JS for IOS it's will be helpful.

https://rnfirebase.io/docs/v5.x.x/messaging/introduction

• I was looking for IOS background services but all of them working every some minutes and i need to be a real time app

I am not able to compile my project through expo.I have followed all steps to eject expo for run the app in iOS.Please find below error screen shot for your reference.enter link description here

My application built in react-native needs to support different user modes. When I am on the screen I don't know the user-mode I am in. My customer are complaining about it. Is there any control in ios/android or react-native that I can display on every screen to tell the user-mode currently selected.

The other option I am doing is to show the user mode in the drawer, but that makes the user click the drawer, verify user mode and go back to what he was doing.

Please suggest.

Description

I have a submit button and i use this function to handle the response. When i use the Alert.alert() api, it automatically closes expo without any warning.

Expected Behavior

I expected to see an alert pop up on the simulator What action did you perform, and what did you expect to happen?

Observed Behavior

Expo immediately closes on the phone or simulator

Environment

Expo CLI 3.13.1 environment info: System: OS: macOS 10.15.3 Shell: 5.7.1 - /bin/zsh Binaries: Node: 12.14.0 - /usr/local/bin/node Yarn: 1.21.1 - /usr/local/bin/yarn npm: 6.13.7 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman IDEs: Android Studio: 3.5 AI-191.8026.42.35.6010548 Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild npmPackages: expo: ^36.0.0 => 36.0.2 react: 16.9.0 => 16.9.0 react-native: https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz => 0.61.4 npmGlobalPackages: expo-cli: 3.13.1

Iphone 11 simulator and also on expo physical iphone x

Reproducible Demo

import {Alert, Button, } from 'react-native';
const submitButton =  () => {
    Alert.alert('error', [{ text: 'Ok' }]);
 }

//inside return func
<Button title="Submit" onPress={submitButton} />

In native iOS we can specify shouldAllowExtensionPointIdentifier to disable 3rd party keyboard.

-(BOOL)application:(UIApplication *)application shouldAllowExtensionPointIdentifier:(NSString *)extensionPointIdentifier
{

    if (extensionPointIdentifier == UIApplicationKeyboardExtensionPointIdentifier)
    {
        return NO;
    }

    return YES;
}

In android is there a solution?

Is there a NPM package to block or detect 3rd party keyboard on both iOS and Android? Or we to write it in native and integrate it?

I am using react-native with a limited number of lines, that are shown as '...' using

<Text numberOfLines={4}> {myText} </Text>

Now my issue is, if the text is cut off I would like to show it some special image, to navigate to a new view. I am wondering whether there is a property i can use to test if the text is being cut off?

Hi all i want to try implement react-native-dark-mode but not worked in my project. "react-native": "0.61.5"

I Already try like this :

import { useDarkMode } from 'react-native-dark-mode'

export default class Login extends Component {
    render(){
    const isDarkMode = useDarkMode() // i think this make error
       return(
          <View style={{ backgroundColor: isDarkMode ? 'black' : 'white' }}></View>
       )
    }
}

This my error error-output

any solutions?

I'm trying to redo the default ios refresh control, into something similar on the android platform.

Anyone who has experienced or had a good idea is welcome.

Thank you very much.

Refresh Control IOS:

Refresh Control Android: