On iOS, it is possible to inspect the contents of a Realm database by opening the corresponding file with the Realm Browser. The path to that file can be printed by using the following line of code (as noted here):

print(Realm.Configuration.defaultConfiguration.path)

Is it possible to do the same when using the React Native version of Realm?

I'm quite new to the whole React Native and JS stuff so I might be making a silly mistake here. I have the following code that I got from here: https://reactnativecode.com/change-image-source-dynamically/

The code is a little bit adjusted as I want it to loop.

The problem is as follows: It changes the first time. Then when clicked again it changes the URL (as I have it in a Text component) but the image doesn't show up again. Then when pressed again (3th time) the Text (variable name) won't change anymore and the image will still not show up.

import React, { Component } from 'react';

import { StyleSheet, View, Text, Image, Button, Platform, TouchableHighlight } from 'react-native';

export default class App extends Component {

  constructor() {
    super();
    this.state = {
      imageURL: 'https://reactnativecode.com/wp-content/uploads/2017/10/Guitar.jpg'
    }
  }

  Load_New_Image = () => {
    if (this.state.imageURL == 'https://reactnativecode.com/wp-content/uploads/2017/10/Guitar.jpg'){
      this.setState({
        imageURL: 'https://reactnativecode.com/wp-content/uploads/2018/02/motorcycle.jpg'
      })
    }else{
      this.setState({
        imageURL: 'https://reactnativecode.com/wp-content/uploads/2018/02/Guitar.jpg'
      })
    }
  }

  render() {
    console.log('source: ', this.state.imageURL)
    return (
      <View style={styles.MainContainer}>
        <TouchableHighlight onPress={this.Load_New_Image}>
        <Image
          key={this.state.imageURL}
          source={{ uri: this.state.imageURL }}
          style={styles.imageStyle} />
        </TouchableHighlight>

        <Text>{this.state.imageURL}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({

  MainContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
    paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
    margin: 10
  },

  imageStyle: {
    width: 200,
    height: 300,
    resizeMode: 'center'

  }

});

Starting a new react-native project, the xcode-project gots the bundle-identifier "org.reactjs.native.example.XYZApp". XYZ is the placeholder here for my real project name.

Is there any way to change this bundle identifier on react-native side? Sure, I can change it in XCode. But this is not safe because it can be overriden when react-native will recreate the xcode-project, which could happen at any time, as well es when rebuilding the project.

I need to exit app when a certain button click. BackHandler.exitApp() working well on android, but not working on ios.

I think react-native-exit-app is best solution. But it have null object error. How to exit app in react native? If anyone know the solving then please advance me. Thanks

My goal is to get ONLY numeric keyboard without punctuation. number-pad is not working properly on every device and it also allows to enter symbols "-, _." that is not what I want. I noticed that when secureTextEntry is set to true on TextInput the keyboard is just the one I want, but I can't use it like this because my text is getting masked. So I wonder is there a way to use that keyboard without masking the text? Maybe a hack in the native code exists?

The screen of desired keyboard

I'm using this react native tinder demo ->https://github.com/brentvatne/react-native-animated-demo-tinder

Is it possible to make the cards 'clickable' so it would navigate to another view on click? I've tried wrapping the "Touchable" components around the animated view but doing so disables the animations.

Any ideas would be highly appreciated, thanks!

I am developing an app with React Native and Expo and all has been working fine until I ejected the app. Now the root SwitchNavigator is not operating as intended, at least on iOS.

I have 3 possible main Routes AuthLoading, Auth, Main as shown below:

import { createAppContainer, createSwitchNavigator } from "react-navigation";

import MainTabNavigator from "./MainTabNavigator";
import AuthLoadingScreen from "../screens/auth/AuthLoadingScreen";
import AuthStack from "./auth/AuthStack";
import TestScreen from "../screens/TestScreen";

export default createAppContainer(
  createSwitchNavigator(
    {
      AuthLoading: AuthLoadingScreen,
      Auth: AuthStack,
      Test: TestScreen,
      Main: MainTabNavigator
    },
    {
      headerMode: "none",
      initialRouteName: "AuthLoading"
    }
  )
);

Unless I comment out the last route it will always move there.

Using

React Native Expo SDK: 36.0.1

React Navigation: 3.12.0

I am developing an application using React native library and I wonder how can I disable switching text color in the status bar to white color when dark mode on IOS phone is on ? I would like always have black text color.

I tried to set <StatusBar barStyle="dark-content" /> but text color changes to white anyway.

Any options to solve the issue are welcomed either using IOS solution or using RN solution

Thanks in advanced

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);

My AppDelegate.m file::

/**
 * 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 <ReactNativeNavigation/ReactNativeNavigation.h>
#import "RNSplashScreen.h"


@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{

  NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

  [ReactNativeNavigation bootstrap:jsCodeLocation launchOptions:launchOptions];
  [RNSplashScreen show];

  return YES;
}

@end

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

In my application I want to disable screen shots function for IOS in React-native.

Please suggest me any working package or any native code which can disable screen shots in IOS.

I have created a react native app and followed this Link to deploy the app in app store, I can install my app through Testflight after redeem my code only when my mac( where I have developed and build the code using xcode) is in its active stage. But when I shutdown my mac and when I tried to install the app from Testflight,it gets waited for some seconds in the splash screen and then it gets crashed. Though I have uploaded the archive build to app store it still get loaded from my mac.

I think I have made something wrong in the settings when I build the app. In schema there is an option like Debug and Release modes in (Run,Test Profile, Analyse and Archive) Also there is a debug Executable checkbox what to do with this?, I don't know whether this has anything related to my issue or did I made anything wrong with the process of deploying my app to app store by referring the above link. Can someone please help to rectify this issue.

This problem doesn't have any code to provide in my question since I hope this is something related to the setting issues while building the Archive. I have been submitting more that 5 build for past few weeks but all get rejected with the same reason. Someone please help If they encounter with the some issue Thanks in Advance

I just upgraded my React Native and now the iOS simulator has a bunch of warnings. Besides fixing them, how do I hide these warnings so that I can see what's underneath?

how can I navigate between AppContainers?

I'm detecting a correct stack in App.js

const stack = User.isAuthorized() ? authStack : unauthStack;

After user enter the login and password, he need switch the stack from unauthStack.SignIn to authStack.List.

const unauthStack = createAppContainer(createStackNavigator({
    SignIn: { screen: SignIn },
    ForgotPassword: { screen: ForgotPassword },
}));

const authStack = createAppContainer(createBottomTabNavigator({
        List: { screen: GeneralStack },
        Add: { screen: NewEventStack },
}));

I've tried to Google it but can't find any working examples. And saw some information that complete reload the app could be a reason of memory leak or something like that...

So what's the correct way to do this?

I am new to react-native and have found an error that makes absolutely no sense to me.

I am trying to include a calendar library: https://github.com/wix/react-native-calendars

I have included the dependency for that library in my package.json file and run npm install

The project was running fine and as expected. I have simply added one line of code to the project:

import { Calendar, CalendarList, Agenda } from 'react-native-calendars';

Nothing else. However now I am getting a red error message when the app loads on device and this is what my console is saying:

error: bundling failed: Error: While trying to resolve module xdate from file /Users/Alex/Documents/workspace/mobile/node_modules/react-native-calendars/src/index.js, the package /Users/Alex/Documents/workspace/mobile/node_modules/xdate/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js. Indeed, none of these files exist:

* /Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)

* /Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json) at ResolutionRequest.resolveDependency (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:103:15) at DependencyGraph.resolveDependency (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/node-haste/DependencyGraph.js:272:4579) at dependencies.map.relativePath (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:376:19) at Array.map () at resolveDependencies (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:374:16) at /Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:212:33 at Generator.next () at step (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:313) at /Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:473 at

However I have checked in the directory and in fact /Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js does exist. However I do not see any of this part: (.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`

As to how /Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js/index can exist, that doesn't make sense because xdate.js is not a directory.

Any help?

The Text input is center aligned, how to fix this text input so that it takes input from top left corner

Here is my css for text input

/* The Text input is center aligned, how to fix this text input so that it takes input from top left corner */

input: {
  flex: 1, padding: 4, marginRight: 1, marginTop: 5, fontSize: 18, borderWidth: 1, borderRadius: 4, borderColor: '#E6E5ED', backgroundColor: '#F8F8F9', justifyContent: 'flex-start', height: 150
}

Hello and thank you for your interest in my problem.

I spent 3 days trying to use the react-native-image-picker library without success. This is why I write here in search of help.

Here is the error I encounter : Error: react-native-image-picker: NativeModule.ImagePickerManager is null.

I start my project on : React Native CLI Quickstart& currently working on IOS (simulator: Iphone 11 / IOS 13.2)

Here is my dependencies :

"dependencies": {
    "react": "16.9.0",
    "react-native": "0.61.2",
    "react-native-image-picker": "^1.1.0",
    ...
  },

Here is the error I encounter when I downgrade the image-picker dependency to "^0.24.0" : TypeError: null is not an object (evaluating 'ImagePickerManager.showImagePicker')

I follow this install guide for IOS : https://github.com/react-native-community/react-native-image-picker/blob/master/docs/Install.md

My steps:

1- npm install react-native-image-picker

2- cd ios/ && pod install

3- To ios/myapp/Info.plist I add :

    ...
    <key>NSPhotoLibraryUsageDescription</key>
    <string>$(PRODUCT_NAME) would like access to your photo gallery</string>
    <key>NSCameraUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to use your camera</string>
    <key>NSPhotoLibraryAddUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to save photos to your photo gallery</string>
    ...

4- I open the IOS folder on my project into Xcode and select RNImagePicker.xcodeproj from node_modules like the guide say.

5- I click on RNImagePicker.xcodeproj => Build Phases => Link Binary With Libraries

6- I drag and drop libRNImagePicker.a from RNImagePicker.xcodeproj / Products / libRNImagePicker.a into Link Binary With Libraries

7- npx react-native run-ios

Before compile I git this : (I never never run the npx react-native link react-native-image-picker because Im over 0.60..)

error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually: 
  - react-native-image-picker (to unlink run: "react-native unlink react-native-image-picker")

After compile I got this warning :

warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 7.0, but the range of supported deployment target versions is 8.0 to 13.2.99. (in target 'react-native-image-picker' from project 'Pods')

but my current target version is 9.0

Here is my code :

import React, { useState } from 'react';
import { SafeAreaView, View, Image, StyleSheet, Button } from 'react-native';
import ImagePicker from 'react-native-image-picker';

export default function EditPhotoScreen() {
  const [state, setState] = useState({
    avatarSource: null,
  });

  const handlePhotoPicker = () => {
    ImagePicker.launchImageLibrary({ noData: true, mediaType: 'photo' }, (response) => {
      console.log('Response = ', response);

      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        const source = { uri: response.uri };

        setState({ avatarSource: source });
      }
    });
  };
  return (
    <SafeAreaView>
      <View>
        <Button title="Im so tired please render something" onPress={() => handlePhotoPicker()} />
        {state ?
          <Image source={state.avatarSource} />
          : null
        }
      </View>
    </SafeAreaView>
  );
}

I have some code that I implemented a couple of months ago that fixed the ability for a user to who was reading an article on my app and wanted to click on a hyperlink inside that article, once having done so, the user would be taken to an external browser. This is the implementation:

<View style={styles.content}>
            {Boolean(this.props.article.VideoID) && (
              <VimeoVideo videoId={this.props.article.VideoID.toString()} />
            )}
            {Boolean(this.props.article.Summary) && (
              <Text style={styles.boldParragraph}>
                {this.props.article.Summary}
              </Text>
            )}
            {this.props.article.Sections.map(s => (
              <WebViewAutoHeight
                key={s.Body.substr(10)}
                source={{
                  //prettier-ignore
                  html: `<body style="font-family: -apple-system, Roboto, sans-serif; background-color: ${lightTheme.grey2} !important; color: ${v2Colors.charcoalDarkest}; font-size: ${moderateScale(14, 0.2)}px;">${s.Body}</body>`
                }}
                // onNavigationStateChange={event => {
                //   if (event.url !== uri) {
                //     Linking.openURL(event.url);
                //   }
                // }}
              />
            ))}
          </View>

The commented out part. It works for iOS but on Android, as soon as the user clicks on READ MORE, it takes them to open up another browser in their phone not sure of the connection because onPress={mainActionButtonPress} is what the user is pressing and mainActionButtonPress is connected to a function:

 _goto = article => {
    this.props.setSelectedArticle(article);
    this.props.navigation.navigate("ArticleDetails", { isRead: true });
  };

how is onNavigationStateChange property inside of AutoHeightWebView being triggered by the _goto function? So I looked into this further and my best guess is that when _goto triggers this.props.navigation.navigate("ArticleDetails", { isRead: true });, JavaScript executes everything inside of there including onNavigationStateChange even though it should only do so when event.url !== uri.

I was able to find a solution with:

 onShouldStartLoadWithRequest={request => {
   if (Platform.OS === "android") {
        const url = request.url;
             console.log(request);
             if (url !== uri) {
               Linking.openURL(url);
             }
              // return false;
             }
   }}

but then this somehow cancels out the iOS solution. So this is not working:

<WebViewAutoHeight
                key={s.Body.substr(10)}
                source={{
                  //prettier-ignore
                  html: `<body style="font-family: -apple-system, Roboto, sans-serif; background-color: ${lightTheme.grey2} !important; color: ${v2Colors.charcoalDarkest}; font-size: ${moderateScale(14, 0.2)}px;">${s.Body}</body>`
                }}
                // onShouldStartLoadWithRequest={request => {
                //   if (Platform.OS === "android") {
                //     const url = request.url;
                //     console.log(request);
                //     if (url !== uri) {
                //       Linking.openURL(url);
                //     }
                //     // return false;
                //   }
                // }}
                onNavigationStateChange={event => {
                  if (Platform.OS === "ios") {
                    if (event.url !== uri) {
                      Linking.openURL(event.url);
                    }
                  }
                }}
              />

I tried a ternary operator, but I got syntax errors all over the place. I need some help in getting these working on their respective platforms.

i was new to react native, now i face a problem to retrieve object array data from redux. same code working on ios simulator but on android emulator fail(TypeError:undefined is not an object)

      onPressme =()=>{
    alert(this.props.groupddl.groupDdl[0].label)
  }

    function mapStateToProps(state) {
  return {
      groupddl: state.attendanceReducers
  };
}

my reducer declare as groupDdl=[]

same code working on ios simulator, fail on android. Any solution will be appreciate. thanks

I need to remove/hide the Weekend dates from dygraphs Plots in React native?. IS there any solution?

I have added react-navigation-drawer for implementing drawer navigation in my app. I have created a file named PrimaryNav.js and added all navigation code in it.

import Login from './components/Login';
import Employee from './pages/Employee';
import { createAppContainer,SafeAreaView, } from 'react-navigation'
import { createDrawerNavigator, DrawerItems } from 'react-navigation-drawer';
import React from 'react';

const Primary_Nav = createDrawerNavigator({
    Login: {
      screen: Login,
      navigationOptions: {
        drawerLabel: () => null
      }
    },
    Home_kitchen: {
      screen: Home_kitchen,
      navigationOptions: {
        drawerLabel: "Home"
      }
    },
    Employee: {
      screen: Employee,
      navigationOptions:{
        drawerLabel:"Employee",
      }
    },
  },{
    initialRouteName:'Login',
    drawerPosition: 'left',
    drawerType: "slide",
    }
});

const PrimaryNav = createAppContainer(Primary_Nav);
export default PrimaryNav;

Something like above. I have called this file in the App.js, the issue I am facing is I need to set a drawer item based on the role which the user has. So if the user role is cashier he should not be able to see all the menu.

All the pages are coming properly in the drawer menu but the question is how should I want to manage menu role wise in my app and changed the menu based on the roles of the user?