I would like to know how to render gender selection view like this...

Once I clicked on Male I want to render Yellow Image (Checked) and Once I clicked on Female I want to make Male Image to Default and Female Image in to Yellow Image (Checked).

Note - I have 4 separate images

eg - Male_Checked / Male_Unchecked / Female_Checked / Female_Unchecked (PNG)

Whats the difference between xcode and react-native and which platform is better in a long run to design an application that controls iot devices

Error info

requiring unknown module "519", if you are sure the module exists, try restarting Metro. You may also want to run 'yarn' or 'npm install'

I just add ant-design in my rn program and run pod install and restart android app.

No error in my iOS Application, but wrong with Android application.

What can I do to fix that?

How do i change the default thickness of a slider bar(of 'react-native' library) ? I couldn't find relevant props in the documentation https://facebook.github.io/react-native/docs/slider.html

Here is my code below:

`action.JS`

export const stockList = (id) => (dispatch) => {

    dispatch({ type: STOCK_LIST });

    // alert('api called')
    callApiStockList(dispatch)
};

const callApiStockList = (dispatch) => {
    const URL = 'http://dashboardstaging.africanmanagers.org:8084/api/v1/stocks/10'
    fetch(URL, {
        method: 'GET',
        headers: '',
    })
        .then(response => response.json())
        .then(responseJson => {

            if (responseJson.data !== undefined) {

                const obj = {               
               data: responseJson.data
                }

                getStockListSuccess(dispatch ,obj);

              } 
              else 
              {
                // alert('failed')
                getStockListFail(dispatch, 'get stock list failed');
              }  
          })
        .catch(error => {
            console.log('ERROR:', error);
            getStockListFail(dispatch, "stock list failed");
        });
};

`reducer.JS`

import {
    CATEGORY_LIST_SUCCESS,
    CATEGORY_LIST_FAIL,
    CATEGORY_LIST

} from '../actions/types';

const INITIAL_STATE = {
    categorylistData:[],
    loading: false,
    error: ''
};

export default (state = INITIAL_STATE, action) => {

    switch (action.type) {

        case CATEGORY_LIST:
            return { ...state, loading: true, error: '' }

        case CATEGORY_LIST_SUCCESS:
            return { ...state, loading:false, error: '', categorylistData:action.payload.data }

        case CATEGORY_LIST_FAIL:
            return { ...state, loading:false, categorylistData :[] }

        default:
            return state;
    }
}

i get updated categorylistData in action file's callApiStockList function where i get obj in response of api.i want to compare categoryID's of categorylistdata and responseJson.data for getName of category from categorylistData.I tried with getState method but not working.Please anyone can help me.

I have a basic react native app that is using React Native Maps to display 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 was 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

Log:

Scanning folders for symlinks in /Users/../../../__app__/node_modules
Found Xcode workspace Name.xcworkspace
CoreData: annotation:  Failed to load optimized model at path '/Applications/Xcode.app/Contents/Applications/Instruments.app/Contents/Frameworks/InstrumentsPackaging.framework/Versions/A/Resources/XRPackageModel.momd/XRPackageModel 9.0.omo'

Could not find iPhone 6 simulator

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! AppName@10.0.17 start:ios: `react-native run-ios && react-native log-ios`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the AppName@10.0.17 start:ios script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/../.npm/_logs/2019-11-19T11_21_06_483Z-debug.log

Checked here: https://github.com/react-native-community/cli/issues/739 but I'm not sure if this is my exact issue.

Beginner to react-native following the getting started guide here https://facebook.github.io/react-native/docs/getting-started.html

Trying to set up the environment for another app on GitHub I'm working on and running into a couple of issues.

Steps I've already taken (to run on ios).

1. I've installed the dependencies in project directory
2. Set up .env for local dev
3. Installed cocoapods sudo gem install -n /usr/local/bin cocoapods
4. pod install cd ios && pod install

Now when I try to run the emulator using this command: npm run start:ios With this script: react-native run-ios && react-native log-ios in package.json

Xcode is closed while trying to do all of this.

While executing npx react-native init MyProject I ran into the following error:

✖ Installing CocoaPods dependencies (this may take a few minutes)
error Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template.

Which seems to be related to an earlier error displayed:

checking for arm-apple-darwin-gcc... /Library/Developer/CommandLineTools/usr/bin/cc -arch armv7 -isysroot 
checking whether the C compiler works... no
xcrun: error: SDK "iphoneos" cannot be located
xcrun: error: SDK "iphoneos" cannot be located
xcrun: error: SDK "iphoneos" cannot be located
xcrun: error: unable to lookup item 'Path' in SDK 'iphoneos'

XCode and its CLI seem to all run fine.

My configuration:

• MacOS Catalina 10.15.1 (19B88)
• NPM 6.11.3
• React-Native 0.61.4
• XCode 11.2.1 (11B500)

Any leads appreciated.

Possible solution

I found a solution myself in the meanwhile, probably not so 'clean'.

In App.js I specify my initialRouteName like this:

import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';

import Home from './screens/Home';
import Form from './screens/Form';
import {Linking, Platform} from 'react-native';
import React from 'react';

function getRoute() {
  let route = "";
  Linking.getInitialURL().then(url => {
    route = url;
  })

  if (route === 'playgroundapp://form') {
    return 'Form';
  } else {
    return "Home"
  }
}

const AppNavigator = createStackNavigator(
    {
  Home: { screen: Home },
  Form: { screen: Form },
}, {
      initialRouteName: getRoute()
    });

export default createAppContainer(AppNavigator);

Question

I want to be able to deep link to my React Native application from my iOS widget.
Linking works fine when the app is running in the background, it navigates to the correct page. But when the app is killed, it only opens the app, but does not navigate to the correct page anymore.

I followed this tutorial: https://medium.com/react-native-training/deep-linking-your-react-native-app-d87c39a1ad5e

With a few adjustments from the official documentation: https://facebook.github.io/react-native/docs/linking

AppDelegate.m

#import "AppDelegate.h"

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

#import <React/RCTLinkingManager.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
   openURL:(NSURL *)url
   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}

- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
 restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
{
 return [RCTLinkingManager application:application
                  continueUserActivity:userActivity
                    restorationHandler:restorationHandler];
}

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

@end

App.js

import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';

import Home from './screens/Home';
import Form from './screens/Form';

const AppNavigator = createStackNavigator({
  Home: { screen: Home },
  Form: { screen: Form },
});

export default createAppContainer(AppNavigator);

Home.js

import React, {Component} from 'react';

import {
  Linking,
  Platform,
  Text,
  View,
} from 'react-native';

import Form from './Form';

export default class Home extends Component {
  componentDidMount() {
    if (Platform.OS === 'android') {
      Linking.getInitialURL().then(url => {
        this.navigate(url);
      });
    } else {
      Linking.addEventListener('url', this.handleOpenURL);
    }
  }

  componentWillUnmount() {
    Linking.removeEventListener('url', this.handleOpenURL);
  }

  handleOpenURL = event => {
    console.log(event.url)
    this.navigate(event.url);
  };

  navigate = url => {
    const {navigate} = this.props.navigation;
    const route = url.replace(/.*?:\/\//g, '');

    const routeName = route.split('/')[0];
    if (routeName === 'form') {
      navigate('Form');
    }
  };

  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.h1}>Playground</Text>
      </View>
    );
  }
}

So from my widget I link to the app like this: extensionContext?.open(URL(string: "playgroundapp://form")! , completionHandler: nil)

Why doesn't it work when the app is not running in the background? I found a few similar questions, but no answers that worked for me or which were outdated.

I have a simple React Native app that I've been testing on Android and now want to test on iOS. It's using React Navigation.

I ran npm run ios but I'm getting the following error:

info In file included from 

/Users/rbbit/reactnative/testproj1/ios/testproj1/main.m:10:

/Users/rbbit/reactnative/testproj1/ios/testproj1/AppDelegate.h:9:9: fatal error: 'UMReactNativeAdapter/UMModuleRegistryAdapter.h' file not found

#import <UMReactNativeAdapter/UMModuleRegistryAdapter.h>
        ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

info 1 error generated.

I opened XCode but I'm basically getting the same message, nothing else that would help me debug this.

I do see that there is a package called react-native-adapter (https://github.com/expo/expo/tree/master/packages/%40unimodules/react-native-adapter), however I'm hesitant to just install this since I followed the instructions on how to include react-navigation and didn't mention that, assuming this is related.

Also, that page says If you are using react-native-unimodules, this package will already be installed and configured!, and react-native-unimodules already is in my dependencies.

Any pointers on how to solve this? Thank you!

I am building my first react-native app, and Implementing tabs using react-native-tabview. Stuck with the error :

"TypeError: undefined is not an object (evaluating '_this.props.navigationState.routes.length').

This is a screenshot of error I'm getting.

import * as React from 'react';
import {
  Platform, StyleSheet, Text, View, Dimensions, StatusBar, FlatList, ImageBackground, TextInput
} from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';

const FirstRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#ff4081' }]} />
);

const SecondRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);

export default class App extends React.Component {
  state = {
    index: 0,
    routes: [
      { key: 'first', title: 'First' },
      { key: 'second', title: 'Second' },
    ],
  };

  render() {
    return (
      <View style={styles.container}>
        <TabView
          navigationState={this.state}
          renderScene={SceneMap({
            first: FirstRoute,
            second: SecondRoute,
          })}
          onIndexChange={index => this.setState({ index })}
          initialLayout={{ width: Dimensions.get('window').width }}
          style={styles.container}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    marginTop: StatusBar.currentHeight
  },

  scene: {
    flex: 1,
  },
});

I could build my react native app using expo build:ios and I have the .ipa file. I went to App Store Connect to upload my app. However, it is not showing an option to download the Application Loader. How can I get the Application Loader or upload without it?

Thanks

I have an iOS app that is building on both xcode8 (Sierra) and on xcode9 (High Sierra).

When I'm doing exportArchive it passes on xcode8 but fails on xcode9.

I have the provisioningProfiles section in my plist, and the failure in on correct format.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN""http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>method</key>
    <string>enterprise</string>
    <key>teamID</key>
    <string><Our teamID></string>
    <key>signingStyle</key>
    <string>manual</string>
    <key>signingCertificate</key>
    <string><Our signingCertificate></string>
    <key>provisioningProfiles</key>
    <dict>
        <key><Our bundleID></key>
        <string><App Name></string>
    </dict>
</dict>
</plist>

I have another app that I'm building and everything is fine. Both xcode8 and xcode9. All the IDs are correct.

This the error that I'm getting:

2018-04-11 02:16:07.014 xcodebuild[25609:10463244] [MT] IDEDistribution: Step failed: <IDEDistributionPackagingStep: 0x7fe89376c690>: Error Domain=NSCocoaErrorDomain Code=3840 "No value." UserInfo={NSDebugDescription=No value., NSFilePath=/var/folders/y0/5_70v74n4830lyzmjs08pm4w0000gn/T/ipatool-json-filepath-KoS1w8}
[09:16:07][iOS: Build release version] ** EXPORT FAILED **
[09:16:07][iOS: Build release version] error: exportArchive: The data couldn’t be read because it isn’t in the correct format.
[09:16:07][iOS: Build release version] 
[09:16:07][iOS: Build release version] 
[09:16:07][iOS: Build release version] Error Domain=NSCocoaErrorDomain Code=3840 "No value." UserInfo={NSDebugDescription=No value., NSFilePath=/var/folders/y0/5_70v74n4830lyzmjs08pm4w0000gn/T/ipatool-json-filepath-KoS1w8}

Thanks.

I followed the link below to install new reactNative App ..

https://facebook.github.io/react-native/docs/getting-started

After Successfully Installed I am able to run the iOS target but not tvOS while running tvOS I am getting below error ..

Library not found for -lPods-AwesomeProject-tvOS

It seems in podfile cocoapods not included for tvos target .. So I added cocoaPods for tvos target and then build again but getting below warning and errors..

I am also adding my Podfile here please suggest any changes

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

  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 'ReactNativeSampleTests' do
    inherit! :search_paths
    # Pods for testing
  end

  use_native_modules!
end

target 'ReactNativeSample-tvOS' do
  # Pods for ReactNativeSample-tvOS
platform :tvos, '9.2'

All same pods in above target included here as well..

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

end ```

Is it possible to run react-native application on an iOS device directly from the command line like we do on simulator with react-native run ios --simulator "iPhone 5s"?

So I'm working on this project where I'm fixing the deep link issue on IOS.

The problem is the app's behaviour is that when you open a link or a shared link created by my app: https://www.sampleurl.com/?property=555

The app opens(previously close, not running in the background) it will return to my welcome screen after a few seconds. I want it to just stay to the specific screen(property detail screen).

Here's the code for when the app is opened:

loadApp = async () => {
    const hasLoggedIn = await AsyncStorage.getItem('has_logged_in');
    const defaultBiz = await AsyncStorage.getItem('biz_view');

    if (hasLoggedIn && defaultBiz === '1') {
      Api.getToken();
      this.props.navigation.navigate('Biz');
    } else {
      if (hasLoggedIn) {
        Api.getToken();
      }
      setTimeout(() => {
        this.props.navigation.navigate('Auth');
        const prop_id = this.props.navigation.getParam('property_id');
      }, 3000);
    }
  };

this function is being passed to

componentDidMount(){
this.loadApp();
}

Here is the stack navigator:

const AppNavigator = createSwitchNavigator(
  {
    AuthLoading: {
      screen: AuthLoadingScreen,
      path: ''
    },
    Auth: {
      screen: AuthStackNavigator,
      path: ''
    },
    App: {
      screen: MainAppNavigator,
      path: ''
    },
    Biz: {
      screen: BizAppNavigator,
      path: ''
    }
  },
  {
    initialRouteName: 'AuthLoading'
  }
);

So my investigation is that I am able to see the specific property detail(on PropertyDetailScreen) for a few seconds because of the delay (the setTimeOut => 2000 ms) that I set up.

I want to create a condition that if the app receives a data from the deep link, it won't do the navigation on 'Auth'(which where my WelcomeScreen is included). Is there a way I can receive a specific data/information from the deep link?

The correct behaviour that I want to happen is when I open the url, the app will go directly on the specific property detail(rendered on the PropertyDetailScreen), and won't return to my WelcomeScreen ('Auth')

Auth = to my exported AuthStackNavigator

const AuthStackNavigator = createStackNavigator({
  Welcome: WelcomeScreen,
  Login: LoginScreen,
  Verification: VerifyMobileScreen,
  ProfileUpdateName: ProfileUpdateNameScreen
});

On android, the setup is working fine.

I want to make a app that will have two activity with different app launching icon in IOS(React Native).

I have made this in Android. The code is given bellow.

<activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>

      <activity
        android:name=".NotifierActivity"
        android:label="SOS"
        android:icon="@mipmap/ic_launcher_sos"
        android:roundIcon="@mipmap/ic_launcher_sos_round"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>

I am beginner. So, I need your help badly.

I've been developing a react native application with Expo that should work both on Android and iOS.

I've an iPhone in hands and use an android simulador to check how things are going with the Android version of the app, as there are multiple times, as everyone developing on react-native knows, you encounter difference on those.

My problem now is that I have some javascript code running on a WebView which I found out I can debug on the android using Google Chrome Dev Tools but for the iPhone side of things, the only thing I found was Safari equivalent of Google Chrome Dev Tools which only works on a Mac (How to debug a webview in react native).

And to clarify why this is important to me, right now, I got that webview code working on android but that same code doesn't work on iPhone.

Is there another alternative to debug javascript code inside react-native web view on iOS?

I'm hitting a production breaking bug and the solution seems elusive, but tantalisingly close.

That odd thing is, the app runs on the simulator if I run from Xcode (With the play button), but when I run react-native run-ios it brings up the simulator and shows the splash screen, but then immediately fails out, with little to go on in the logs. I suspect something is not getting included when the app is run from command line that is included when run from xcode.

Can anyone with a better understanding of ios dev suggest any pointers?

I need to implement the permissions mechanism for both android and ios. For that, I am using react-native-permissions@2.0.0 (also: react-native@0.60.6).
When I build the project for android everything is fine. Both in the build process and runtime.
However, when I build the project for IOS, it does completes the build process, but then an error screen appears on the device (I build the app on a real device and not on a simulator).
This is the error:

SyntaxError: /Users/someUser/www/myApp/app/node_modules/react-native-permissions/src/index.ts: Unexpected token (11:59)
10 | const ANDROID = Object.freeze({
11 |   ACCEPT_HANDOVER: 'android.permission.ACCEPT_HANDOVER' as const,

There is a similar thread on github: https://github.com/react-native-community/react-native-permissions/issues/335 (it wasn't tagged as an issue yet).

I have tried to downgrade the react native library, upgrade metro-react-native-babel-preset to the latest, but the problem wasn't resolved.