How does one debug their React code with React Native while the app is running in app simulator?

In my scenario, I am trying to create a validation logic within render return. I have asycstorage value I am getting value and validate by using below code

render() {    const value = AsyncStorage.getItem(‘username’);  return ({value !== null &&        (<View……………..</View> )})}

Above code not validating also based on validation result it is not rendering. If value not equal to null mean, I need to render view. How to achieve this?

I am new to react native, I want to make a VPN client app for Android and IOS. VPN protocol should be IPSec or IKEv2 or any other. I have tried these:

1. OpenVPN

node-openvpn and openvpn-bin but no luck

const openvpnmanager = require('node-openvpn'); **const opts = {  host: '127.0.0.1', // normally '127.0.0.1', will default to if undefined  port: 1337, //port openvpn management console  timeout: 1500, //timeout for connection - optional, will default to 1500ms if undefined  logpath: 'log.txt' //optional write openvpn console output to file, can be relative path or absolute};const auth = {  user: 'vpnUserName',  pass: 'vpnPassword',};const openvpn = openvpnmanager.connect(opts)// will be emited on successful interfacing with openvpn instanceopenvpn.on('connected', () => {  openvpnmanager.authorize(auth);})

2. react native open settings

react-native-device-setting and react-native-open-settings in which they have showed to programmatically open android phone settings like:

install package: npm install react-native-device-settings --save

usage:

import DeviceSettings from 'react-native-device-settings';DeviceSettings.open(); // Open settings menuDeviceSettings.app(); // Open app settings menuDeviceSettings.wifi(); // Open wifi settings menu

but there is no method to open VPN Settings and configure VPN. 47306057 has also asked the same problem

Can anyone help me out in this? Thanks

We are trying to put an iOS build using react native but our build got stuck with the below error. kindly help us resolve this issue.

we are using cocoapods: 1.8.4 version

ld: library not found for -lCocoaAsyncSocket [sshexec] [exec] clang: error: linker command failed with exit code 1 (use -v to see invocation) [sshexec] [exec] [sshexec] [exec] ** ARCHIVE FAILED ** [sshexec] [exec] [sshexec] [exec] [sshexec] [exec] The following build commands failed: [sshexec] [exec] Ld /Users/macbuild/Library/Developer/Xcode/DerivedData/spm_mobile-awskmlvxgyrsozddnaorzehbvupe/Build/Intermediates.noindex/ArchiveIntermediates/spm_mobile/IntermediateBuildFilesPath/spm_mobile.build/Release-iphoneos/spm_mobile.build/Objects-normal/armv7/spm_mobile normal armv7 [sshexec] [exec] Ld /Users/macbuild/Library/Developer/Xcode/DerivedData/spm_mobile-awskmlvxgyrsozddnaorzehbvupe/Build/Intermediates.noindex/ArchiveIntermediates/spm_mobile/IntermediateBuildFilesPath/spm_mobile.build/Release-iphoneos/spm_mobile.build/Objects-normal/arm64/spm_mobile normal arm64 [sshexec] [exec] (2 failures) [sshexec] [exec] + GenerateArchive [sshexec] [exec] + /Applications/Xcode_11_3_1.app/Contents/Developer/usr/bin/xcodebuild -exportArchive -exportOptionsPlist /Users/macbuild/WH_DIR/Apr_20_2020/SPM_MOBILE_IOS/3025072/MACSRC/build/profiles/Appstore/exportOptions.plist -archivePath /Users/macbuild/WH_DIR/Apr_20_2020/SPM_MOBILE_IOS/3025072/MACSRC/build/../ios/spm_mobile.xcarchive -exportPath /Users/macbuild/WH_DIR/Apr_20_2020/SPM_MOBILE_IOS/3025072/MACSRC/build/../ios/spm_mobile.xcarchive/Products/Applications [sshexec] [exec] ** EXPORT FAILED ** [sshexec] [exec] [sshexec] [exec] error: archive not found at path '/Users/macbuild/WH_DIR/Apr_20_2020/SPM_MOBILE_IOS/3025072/MACSRC/ios/spm_mobile.xcarchive' [sshexec] [exec] Result: 65 [sshexec] [echo] ExitValue from the task is : 65

I have a React Native project with two version numbers. The first is the one that's configured in XCode for the iOS version of the app, and the other is from the version property in the project's package.json file. Apple restricts the format that the version number can take to just numbers and two dots, however I'm using Semver and the additional fields this provides are useful for internal and TestFlight pre-releases.

XCode marketing version: 4.0.0
npm Semver version: 4.0.0-alpha.2

I want to display the Semver version in the app UI to make it clear which version is in use, and whether it is a pre-release. The obvious way to do this, is to import the package.json file, and access the version property directly:

import { version } from 'App/package.json'...<Text>v{version}</Text>

This works, however, when I come to bundle the JavaScript for a deployment, I find that Metro copies the package.json file into the ios/assets folder in the React Native project. This causes the XCode build to fail with the error:

error: File /Users/.../main.jsbundle does not exist.

Attempting to bundle the JavaScript again produces another error:

Loading dependency graph...jest-haste-map: Haste module naming collision: App  The following files share their name; please adjust your hasteImpl:    * <rootDir>/App/package.json    * <rootDir>/ios/assets/App/package.json...npm ERR! app@0.0.0 build-ios:prod: `react-native bundle --platform ios --dev false --entry-file index.js --bundle-output ios/main.jsbundle --assets-dest ios`npm ERR! Exit status 1

How can I get Metro to play nice so that package.json can be imported without breaking the bundle? Is there another/better way of getting the version number from the package.json file?

With this code how would I add a second or multiple panresponders that can be moved independently of each other? If I use the same panresponder instance and code they move together as one. I want to know how to have several independently draggable panresponders.

'use strict';var React = require('react-native');var {  PanResponder,  StyleSheet,  View,  processColor,} = React;var CIRCLE_SIZE = 80;var CIRCLE_COLOR = 'blue';var CIRCLE_HIGHLIGHT_COLOR = 'green';var PanResponderExample = React.createClass({  statics: {    title: 'PanResponder Sample',    description: 'Shows the use of PanResponder to provide basic gesture handling.',  },  _panResponder: {},  _previousLeft: 0,  _previousTop: 0,  _circleStyles: {},  circle: (null : ?{ setNativeProps(props: Object): void }),  componentWillMount: function() {    this._panResponder = PanResponder.create({      onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,      onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,      onPanResponderGrant: this._handlePanResponderGrant,      onPanResponderMove: this._handlePanResponderMove,      onPanResponderRelease: this._handlePanResponderEnd,      onPanResponderTerminate: this._handlePanResponderEnd,    });    this._previousLeft = 20;    this._previousTop = 84;    this._circleStyles = {      style: {        left: this._previousLeft,        top: this._previousTop      }    };  },  componentDidMount: function() {    this._updatePosition();  },  render: function() {    return (<View        style={styles.container}><View          ref={(circle) => {            this.circle = circle;          }}          style={styles.circle}          {...this._panResponder.panHandlers}        /></View>    );  },  _highlight: function() {    const circle = this.circle;    circle && circle.setNativeProps({      style: {        backgroundColor: processColor(CIRCLE_HIGHLIGHT_COLOR)      }    });  },  _unHighlight: function() {    const circle = this.circle;    circle && circle.setNativeProps({      style: {        backgroundColor: processColor(CIRCLE_COLOR)      }    });  },  _updatePosition: function() {    this.circle && this.circle.setNativeProps(this._circleStyles);  },  _handleStartShouldSetPanResponder: function(e: Object, gestureState: Object): boolean {    // Should we become active when the user presses down on the circle?    return true;  },  _handleMoveShouldSetPanResponder: function(e: Object, gestureState: Object): boolean {    // Should we become active when the user moves a touch over the circle?    return true;  },  _handlePanResponderGrant: function(e: Object, gestureState: Object) {    this._highlight();  },  _handlePanResponderMove: function(e: Object, gestureState: Object) {    this._circleStyles.style.left = this._previousLeft + gestureState.dx;    this._circleStyles.style.top = this._previousTop + gestureState.dy;    this._updatePosition();  },  _handlePanResponderEnd: function(e: Object, gestureState: Object) {    this._unHighlight();    this._previousLeft += gestureState.dx;    this._previousTop += gestureState.dy;  },});var styles = StyleSheet.create({  circle: {    width: CIRCLE_SIZE,    height: CIRCLE_SIZE,    borderRadius: CIRCLE_SIZE / 2,    backgroundColor: CIRCLE_COLOR,    position: 'absolute',    left: 0,    top: 0,  },  container: {    flex: 1,    paddingTop: 64,  },});module.exports = PanResponderExample;

I'm trying to detect when my app is open and the device get's locked vs when the app is left. Currently Expo appstate always shows Inactive -> Background for both locking the device and leaving the app. Shouldn't the state stay on inactive since the app is never really 'left' when locking the device?

I could only find one similar post but the answer hasn't been updated with the users solution.React Native: How to detect device lock/unlock event?

Problem

Incorporate new features built using react-native into already running iOS stack.

Explanation

I already have an app running in built in objective-c. Requirement is to build new features in react-native and incorporate those in already running stack.

Research:

I have explored for it and every link get me to the react-native modules but my problem is different what those native modules solve.

Question

Is this possible to get, if yes then how?

Thanks

In my react-native project (react-native@0.60) in the ios/ dir I run pod install and get this error:

[!] Invalid `Podfile` file: no implicit conversion of nil into String. #  from /Users/coryrobinson/projects/hhs2/ios/Podfile:37 #  ------------------------------------------- #  >    use_native_modules! #  end #  -------------------------------------------

I haven't added or changed anything in this Podfile - it's all react-native generated. (I'm not experienced in iOS dev so this might be a simple fix, I just don't know what to look for :-|) Thanks for any help!

Here is my Podfile

platform :ios, '9.0'require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'target 'hhs2' do  # Pods for hhs2  pod 'React', :path => '../node_modules/react-native/'  pod 'React-Core', :path => '../node_modules/react-native/React'  pod 'React-DevSupport', :path => '../node_modules/react-native/React'  pod 'React-fishhook', :path => '../node_modules/react-native/Libraries/fishhook'  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-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket'  pod 'RNFS', :path => '../node_modules/react-native-fs'  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 '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 'hhs2Tests' do    inherit! :search_paths    # Pods for testing  end  use_native_modules!endtarget 'hhs2-tvOS' do  # Pods for hhs2-tvOS  target 'hhs2-tvOSTests' do    inherit! :search_paths    # Pods for testing  endend

I have facing the problem in my ios project. symbols not found for architecture x86_64 in xcode clang: error: linker command failed with exit code 1 (use -v to see invocation)

I am facing an issue with archiving my React Native project for the production scheme on Xcode. The app is able to run on my real device, however, archiving the project always fails with the following error.

Undefined symbols for architecture arm64:"_RCTSharedApplication", referenced from:      -[MyAppTests testRendersWelcomeScreen] in MyAppTests.old: symbol(s) not found for architecture arm64clang: error: linker command failed with exit code 1 (use -v to see invocation)

It was working just fine until a few weeks ago, and it still works just fine for the staging scheme. It just suddenly stopped working.Although I tried the following things so far, I got no luck.

What I tried so far:

1. Clean and re-archive the project
2. Delete cached data in DerivedData
3. Update Cocopods to 1.9.0
4. Downgrade Xcode to 11.4
5. Change Build Active Architecture Only to YES following this answer: How solve 'Undefined symbols for architecture armv7' in React Native iOS?

My current environment is:

• OS: macOS Catalina Version 10.15.4
• Xcode: Version 11.4.1
• React Native: Version 0.61.2
• Cocopods: Version 1.9.0

I am stuck in this problem for a while now. Any help would be deeply appreciated.

I'm building an app in React-Native. When I open up project.xcworkspace I get this error which seems to be coming from one of the pods 'AppAuth'. I don't know Objective-C so not sure how to fix this one but this is the line of code that throwing an error.

// Transforms the request URL and opens it.  NSURL *requestURL = [request externalUserAgentRequestURL];  requestURL = _URLTransformation(requestURL);  BOOL openedInBrowser = [[UIApplication sharedApplication] openURL:requestURL];  return openedInBrowser;}

I have created a react-native app using the tools - VS Code, expo, react-native.

I am able to run the app on expo client as well as xcode simulator easily on my laptop. What I want now is to make a distributive file for iOS like we have .apk for androids for this app.

I reffered this question How to build .ipa application for react-native-ios?and tried

react-native run-ios --configuration=release

but it gave an error -

error iOS project folder not found. Are you sure this is a React Native project?

Don't know what I am missing here ? I am a beginner with react-native, would really appreciate any help on this.

I've installed @react-native-community/art after install pod it should produce an issue duplicate interface definition for class 'art brush'

I am new in react native and doing the menu for ecommerce. There is menu with different nesting depth on server. For example:

Main Category List

[    {"category_id": xxx,        "name": "parent_1",        //level_1        child {"category_id": xxx,        "name": "xxx","parent_id": xxx            //level_2            child {"category_id": xxx,        "name": "xxx","parent_id": xxx                //level_3                 child {"category_id": xxx,        "name": "xxx","parent_id": xxx                    //level_4                    child {"category_id": xxx,        "name": "xxx","parent_id": xxx                        //product_list                        product{"category_id": xxx,        "name": "xxx","description": xxx                        }                    }                }            }        }    },    {"category_id": xxx,       "name": "parent_2",        //level_1        child {"category_id": xxx,        "name": "xxx","parent_id": xxx            //level_2            child {"category_id": xxx,        "name": "xxx","parent_id": xxx                //product_list                product{"category_id": xxx,        "name": "xxx","description": xxx                }            }        }    },    {"category_id": xxx,"name": "parent_3",        child {"category_id": xxx,        "name": "xxx","parent_id": xxx            //level_2            child {"category_id": xxx,        "name": "xxx","parent_id": xxx                //level_3                 child {"category_id": xxx,        "name": "xxx","parent_id": xxx                    //product_list                    product{"category_id": xxx,        "name": "xxx","description": xxx                    }                }            }        }    },    {"category_id": xxx,"name": "parent_4",            //product_list            product{"category_id": xxx,        "name": "xxx","description": xxx            }    },    ...]

In example you can see that categories has vary structure such as parent_category->product_list or parent_category->level_1->level_2->level_3->level_4->product_list.

Question: I cannot create transition between pages after fetching menu data from parent_category to product. How to create flexible menu depending from nesting depth? I think it need two pages Category.js and Product.js. In to the Category.js passed value of category_id and to Product.js value of product_id. Or i need to create page for every category personally?Could you help me?

Main.js

import * as React from 'react';import { Text, View } from 'react-native';import { Icon } from 'native-base';import { NavigationContainer } from '@react-navigation/native';import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';import Home from './page/Home'import Category from './page/Category'import Cart from './page/Cart'function ProfileScreen() {  return (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>Профиль!</Text></View>  );}const Tab = createMaterialBottomTabNavigator();export default function Main() {  return (<NavigationContainer><Tab.Navigator      // initialRouteName="Home"      // activeColor="#f0edf6"      // inactiveColor="#fff"      screenOptions={({ route }) => ({          tabBarIcon: ({ focused, color, size }) => {            let iconName;            if (route.name === 'Главная') {              iconName = focused ? 'ios-home' : 'ios-home';            } else if (route.name === 'Каталог') {              iconName = focused ? 'ios-list' : 'ios-list';            } else if (route.name === 'Корзина') {              iconName = focused ? 'ios-cart' : 'ios-cart';            } else if (route.name === 'Профиль') {              iconName = focused ? 'ios-person' : 'ios-person';            }            // You can return any component that you like here!            return <Icon name={iconName} size={100} color="#F79A3D" />;          },        })}      barStyle={{ backgroundColor: '#fff' }}><Tab.Screen name="Главная" component={Home} /><Tab.Screen name="Каталог" component={Category} /><Tab.Screen name="Корзина" component={Cart} /><Tab.Screen name="Профиль" component={ProfileScreen} /></Tab.Navigator></NavigationContainer>  );}

src/Category.js

import React from 'react';import { StyleSheet, Text, FlatList, ActivityIndicator, View, TouchableOpacity,ScrollView} from 'react-native';import {  SearchBar, Avatar } from "react-native-elements";import { Container, Content, List, ListItem, Button, Icon } from 'native-base';import { createStackNavigator } from '@react-navigation/stack';import {NavigationContainer} from '@react-navigation/native';const Stack = createStackNavigator();export default class Category extends React.Component { constructor(props) {    super(props);    this.state  = {      isLoading: true,      dataSource: null,    }  }  componentDidMount() {    return fetch('http://app.site.ru/catalog') //How to pass this value of category_id?      .then (( response ) => response.json())      .then (( responseJson ) =>{        this.setState({          isLoading: false,          dataSource: responseJson,          })        })      .catch((error) => {        console.log(error)      });  }  render() {    if (this.state.isLoading) {      return (<View styles={[styles.container]}><ActivityIndicator size="large" /></View>      )    } else {      let category = this.state.dataSource.map((val, key) => {        return (<List key={key}><ListItem><TouchableOpacity              onPress={() => {                ???;              }}><Text>{val.name}</Text></TouchableOpacity></ListItem></List>        );      });      return (<ScrollView>          {category}</ScrollView>      );    }  }}

When trying to use webkit flag true like CookieManager.getAll(true) the following reject is trown Error: WebKit/WebKit-Components are only available with iOS11 and higher!

Is there any way to get the WebView cookies using CookieManager in iOS lower than 11?I would mention that all the cookies are httpOnly for security reasons so the postMessage solutions are not effective.

package.json

....

"react-native": "0.61.5","@react-native-community/cookies": "^2.0.3","react-native-webview": "^7.4.2",

Thanks in advance.

I am creating Azure build pipeline for react native app and in that while installing pods using cocoapod task that is:

- task: CocoaPods@0  inputs:    forceRepoUpdate: true    projectDirectory: '$(system.defaultWorkingDirectory)/ios'  displayName: 'pod install using the CocoaPods'

I get this error on running the pipeline:

/usr/local/lib/ruby/gems/2.6.0/bin/pod --version1.9.1/usr/local/lib/ruby/gems/2.6.0/bin/pod install --repo-update --project-directory=/Users/runner/runners/2.166.2/work/1/s/iosUpdating local specs repositoriesAdding spec repo `trunk` with CDN `https://cdn.cocoapods.org/`Analyzing dependencies[!] No podspec found for `RNPDF` in `../node_modules/react-native-view-pdf`[!] Automatically assigning platform `iOS` with version `9.0` on target `SiteFuelBuyer` because no platform was specified. Please specify a platform for this target in your Podfile. See `https://guides.cocoapods.org/syntax/podfile.html#platform`.##[error]The process '/usr/local/lib/ruby/gems/2.6.0/bin/pod' failed with exit code 1##[error]The 'pod' command failed with error: The process '/usr/local/lib/ruby/gems/2.6.0/bin/pod' failed with exit code 1

I am unable to find the cause for this error, so need some help with this.My podfile is like this:

# Uncomment the next line to define a global platform for your project# platform :ios, '9.0'target 'abcd' do  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks  # use_frameworks!  # Pods for abcd   pod 'Firebase/Core'   pod 'Firebase/Messaging' pod 'react-native-webview', :path => '../node_modules/react-native-webview' pod 'RNPDF', :path => '../node_modules/react-native-view-pdf' pod 'rn-fetch-blob', :path => '../node_modules/rn-fetch-blob' pod 'react-native-pdf', :path => '../node_modules/react-native-pdf' target 'abcdTests' do    inherit! :search_paths    # Pods for testing  endendpost_install do |installer|        installer.pods_project.build_configurations.each do |config|            config.build_settings['CODE_SIGNING_REQUIRED'] = "NO"            config.build_settings['CODE_SIGNING_ALLOWED'] = "NO"        endend

If you need any other detail, please let me know in comments.

I was working on a react native project with the local database. I used this https://github.com/andpor/react-native-sqlite-storage for local database access. It was working fine with RN 0.41.

But now when I upgrade my RN version to 0.44 I am getting following errors with pod install.

Unable to satisfy the following requirements:- `Yoga (= 0.44.0.React)` required by `React/Core (0.44.0)`None of your spec sources contain a spec satisfying the dependency: `Yoga (= 0.44.0.React)`.You have either: * out-of-date source repos which you can update with `pod repo update`. * mistyped the name or version. * not added the source repo that hosts the Podspec to your Podfile.Note: as of CocoaPods 1.0, `pod repo update` does not happen on `pod install` by default.

This is my podfile:

target 'ProjectName' do  pod 'React', :path => '../node_modules/react-native'<br>  pod 'react-native-sqlite-storage', :path => '../node_modules/react-native-sqlite-storage'end

I have tried lots of things but not able to solve this error. I created a new react project but and it was not working in that too

I’m new to expo and I’m trying to build an app for iOS for a firm. I already have an Apple Enterprise
Account. With that I build .IPA for my app using “expo build : iOS” and I let the expo to
handle all the certificate generation process.

My expo build : iOS was succeeded (100%) without any error and I am having .IPA file in my hand.

The problem comes here when I open the .IPA in iPhone it is not showing any installation option. So I
tried to extract the archive .IPA file. It has folder structure Payload > ExpoKitApp.app. With in
that .app folder I having all the necessary files related to my app.

I don’t know how to manually install the .IPA file in my iPhone. Can anyone please help me with this.

Thanks in advance

Can anyone please provide any library for displaying and searching in a PDF or doc files in React Native? .

I've tested WebView , react-native-pdf-lib ,react-native-pdf-view , react-native-doc-viewer library

but i can't search in any files

thanks for any help