Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all 16565 articles
Browse latest View live

Audio background mode not working with react-native-track-player

$
0
0

I'm currently use react-native-track-player to stream audio from Internet. Works fine.

I would like now to use it in background mode, to be able to continue to listen to radio if my ap is in background mode.

I followed instructions from https://react-native-kit.github.io/react-native-track-player/background/, so add capabilities in xCode, with should be enough.

It doesn't work so I also add

TrackPlayer.updateOptions({
    stopWithApp: false
});

but stil not working.

Any idea or experience with this audio library in background mode ? Thanks !


React Native - How to Application X open Application Y if Application Y has been installed

$
0
0

I want My Application (say Application X) want to open Application Y, if Application Y installed. And work in Android and iOS (open App Store / Play store if Application Y not installed)

What i have done :

Linking.openURL(applicationStoreURL);

The code above success open Play Store/App Store of Application Y, but actually the application Y has been installed so i want to direct open to Application Y from Application X.

Background color of exception page is white instead of red in ios simulator in react native project

$
0
0

Project is using React-native framework and is running on ios simulaor. Background color of Error page in debug mode and its text messages are all white where background should be red and text color should be white. Please help. Thanks

react-native-code-push not working in react native setup

$
0
0

I am using react native , I have added react-native-code-push using pod installation , I am have all steps as per docs https://github.com/microsoft/react-native-code-push/blob/master/docs/setup-ios.md . able build APP, I am able to run app success full but when I am trying

import codePush from "react-native-code-push";

console.log ('codePush===', codePush) , getting undefined , and not able open debug menu also , reload and all is stoped working

here is version info

package.json

"react": "16.8.3",
  "react-native": "0.59.8",
 "react-native-code-push": "5.6.0",

pod file :

  # React Native requirements
 pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge', # Include this for RN >= 0.47
    'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # Needed for debugging
    'RCTAnimation', # Needed for FlatList and animations running on native UI thread
    # Add any other subspecs you want to use in your project
 ]
  # Explicitly include Yoga if you are using RN >= 0.42.0
 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'

  # CodePush plugin dependency
  pod 'CodePush', :path => '../node_modules/react-native-code-push'

enter image description here

unable to understand issue , any one can help on this issue ,

React Native - how to present/show swift screen from library or custom screen view?

$
0
0

I want to implement apple pay sdk. for example from this swift tutorial for apple pay

let applePayController = PKPaymentAuthorizationViewController(paymentRequest: request)
    self.present(applePayController!, animated: true, completion: nil)

I have only class with methods where I define some info, but How to present PKPaymentAuthorizationViewController over RN with Swift?

I use react-navigation, but I want to understand how push/present - custom native screen view? For example I want to try make native screen with kind "present modally" or full screen with some native stuff etc

I know how to export methods to RN, but how to show native screens/modals from sdk or libraries with swift

main.jsbundle file showing in my iOS project but still throwing "No bundle url present"

$
0
0

I am creating new React native app but facing error like "No bundle url present" while running it on iOS Simulator.

Command to Run App on iOS:

react-native run-ios --port=8089

I tried every possible solution suggested on below links.

What is the meaning of 'No bundle URL present' in react-native?

https://www.andrewcbancroft.com/2017/04/22/solving-react-natives-no-bundle-url-present-error/

and lots of other references but no luck at all.

Solution 1: I tried to add AppTranportSecurity flags in info.plist.

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <key>NSAllowsArbitraryLoadsInWebContent</key>
        <true/>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
        <dict>
            <key>NSAllowsLocalNetworking</key>
            <true/>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

Solution 2: Try to remove the build form iOS folder and build it again.

  • Remove the build folder with rm -r build
  • Run react-native run-ios again

Solution 3: Added below line in Package.json file

"build:ios": "react-native bundle --entry-file ./index.js --platform ios --bundle-output ios/main.jsbundle"

No luck at all.

Even my metro builder running on port 8089 as 8081 uses by MacFee firewall app.

enter image description here

Any help will be appreciated.

Thanks in Advanced!

How do I make an iOS UIPicker in react native with multiple columns and titles?

$
0
0

Let's pretend my problem is I want a user to be able to select an amount of apples, and an amount of pears, with one control. I see the picker in the "Timer" section of the clock app bundled with iOS, and I like it.

iOS Timer picker

I want exactly that, except instead of three columns, I want two, and instead of "hours" and "min", I want "apples" and "pears".

So far, I'm able to put two pickers next to each other, which, while not curving the items towards each other slightly as if they were on the same wheel, is good enough for me for my columns problem for now. I'm as yet unable to put titles on the rows, though.

Here's what I have:

  render() {
    let PickerIOSItem = PickerIOS.Item
    return (
      <View style={styles.container}>
        <PickerIOS style={styles.column}>
          <PickerIOSItem value={1} label="0" />
          <PickerIOSItem value={2} label="1" />
          <PickerIOSItem value={3} label="2" />
          <PickerIOSItem value={4} label="3" />
          <PickerIOSItem value={5} label="4" />
        </PickerIOS>
        <PickerIOS style={styles.column}>
          <PickerIOSItem value={1} label="0" />
          <PickerIOSItem value={2} label="1" />
          <PickerIOSItem value={3} label="2" />
          <PickerIOSItem value={4} label="3" />
          <PickerIOSItem value={5} label="4" />
        </PickerIOS>
      </View>
    );
  }

styles.container has display: flex and flex-direction: row, and styles.column has width: 49%.

My garbage attempt

terminating with uncaught exception of type NSException react-native [duplicate]

$
0
0

This question already has an answer here:

I have upgraded a react-native project (RN0.30 to RN0.35) following the docs:

(https://facebook.github.io/react-native/docs/upgrading.html)

Xcode 8.0 builds the project successfully however I am getting an uncaught NSException return error and the device simulator does not load up the project.

Xcode project screenshot with error log

I have tried deleting node_modules and re-installing them, uninstalling and reinstalling watchman, clearing the npm cache yet no luck!


Passing navigation params in react-navigation to component's methods

$
0
0

Trying to figure out how params are passed in react-navigation. Once a user selected an option from the Filter using the left header button, loadItems(filter) should be called with that filter as a parameter. How do I catch such event?

export default class FavoritesView extends Component {
    static navigationOptions = ({navigation}) => ({
        headerLeft: (
            <Button
                onPress={()=>{FavoritesView.showFilteringMenu(navigation)}}
                title="Filter"
            />
        ),
    });
    static showFilteringMenu(navigation) {
        let FILTERS = [
            'A',
            'B',
            'C'
        ];
        ActionSheet.showActionSheetWithOptions({
                title: "Filter options",
                options: FILTERS
            },
            (buttonIndex) => {
                navigation.setParams({
                    selectedOption: FILTERS[buttonIndex]
                }); // A parameter is set here
            });
    }
    loadItems(filter) { // This function should be called
        StorageService.getItems(filter).then(v => this.setState({ data: v }));
    }
    render() {
        let {navigation} = this.props;
        return (
            <SafeAreaView style={styles.container}>
                <NavigationEvents
                    onWillFocus={payload => this.loadItems()} // This works only for initial load
                />
            </SafeAreaView>
        );
    }
}

How to create Horizontal Scrolling Flatlist with 2 rows and 3 columns visible in React Native?

$
0
0

I want to create a Horizontal Scrolling Flatlist with 2 rows and 3 columns visible. Data will be dynamic from api. I have managed to create vertical scrolling Flatlist which looks like this: Vertical Scrolling Flatlist. There is numOfColumns to specify count of columns but there is nothing for rows. When I tried to set horizontal={true}, layout became weird: Horizontal Scrolling Flatlist Also it throws error that numOfColumns can not be applied with Horizontal Scrolling Flatlist. Please refer attached screenshot for Desired output: Desired Output.

My Code for Vertical Scrolling Flatlist:

<FlatList
        ref={(ref) => { this.flatListRef = ref; }}
        style={{ width: '90%', marginTop: 10, marginLeft: 10, backgroundColor: 'transparent', borderRadius: 5, alignSelf: 'center' }}
        bounces={false}
        // horizontal={true}
        numColumns={3}
        data={this.state.categoryData}
        renderItem={({ item: data, index }) => {
        return (
          <ServiceView viewWidth={'100%'} viewHeight={'100%'} viewPaddingLeft={1} viewPaddingRight={10} viewPaddingTop={1} viewPaddingBottom={12} serviceName={(globalUserType == 'provider') ? data.services.name : data.name} serviceIconUrl={(globalUserType == 'provider') ? data.services.image : data.image} jobCount={(globalUserType == 'provider') ? '' : ''} showDot={(globalUserType == 'provider') ? false : false} 
           serviceAction={
           () => this.navigateTo('category', data)

         }/>

What changes should i make to get desired output.

Error while archiving react-native iOS project for testflight, app-icon

$
0
0

I am trying to Archive a react-native iOS app in preparation of distributing via TestFlight. I already added app icons of several resolutions, but I am still getting errors of missing app icons.App Icon

and here is the error.

Error while Archiving

I also have App Icons Source set to AppIcon in the General tab of the project.

This is a react native app, which I am trying to distribute it to testers via TestFlight.

Upgrade JS only react-native library to RN 0.60

$
0
0

I have a react-native component library, which only contains javascript code. I don't have ios/android directory (in library). I want to make it compatible with react-native 0.60. My library has some dependencies which which needs linking. Until this point I was just asking consumers to link these dependencies manually.

Now for autolinking (in RN 0.60) to work, I will need to a podspec for my project. But I don't really have any ios code (or directory) in my library. So I can't create podspec. So in this case, only way I can see is to ask consumers of my library to manually install all the NPM dependencies of my libraries and then pod install. Is there some other way that I can configure it in my library, that will let cocoapods know to install the dependencies of my library as well?

P.S. I am not really much familiar with ios or cocoapods. So if this question sounds a bit silly, please pardon me.

React Native Module, Cocoapod file not found

$
0
0

I am building a module for React Native, as a part of this, there is some native iOS code that is wrapped in a cocoapod. I have this working fine, and I can install the cocoapod and see the native classes from the RN side no problem. One of the native classes is trying to get the path to a local mp3 file inside a sub folder proj/Audio/file.mp3. Using the following ObjC code: NSString *path = [[NSBundle mainBundle] pathForResource:@"file" ofType:@"mp3" inDirectory:@"Audio"];

This is returning nil and as such causing an error when trying to get the NSURL for the file. I have the mp3 extension added to the podspec @ s.source_files = "ios/**/*.{h,m,swift,mp3}" so it is moving the file over. However, I assume I have to be missing something as it ultimately cannot find the file.

I have gone into the source xcode project and added the mp3 file to the Copy files phase in build phases. I have also made sure that the file was linked to the target. I am not sure what else I could be missing at this point for it to not be able to be found.

How to fix JSON value '' of type NSNull cannot be converted to NSString in iOS react-native-config and AsyncStorage?

$
0
0

I'm having problems with react native config and AsyncStorage, where null data from .env is not readable on iOS,

below is my code:

  _authAsync = async () => {
    const userToken = await syncStorageA.getItem(Config.ACCESS_TOKEN)
    this.props.navigation.navigate(userToken ? 'App' : 'Auth')
  }

Please help.

I'm having this problem only on the iOS platform on Android is working fine.

Youtube blocked by the great firewall of china [closed]

$
0
0

In one of our mobile application we are using the youtube but it is blocked by the great firewall of china. Which platform do we use and does it work with the firewall for iOS Android?

or any other solution to implement this functionality.

Thanks!


React Native IOS Archive not working with react native new version

$
0
0

I am working on a project since 1 year and doing important updates regularly. Last time before 3 days i archive and generate a IPA but after loading screen, app is crashing. But when i run the app it is working fine and everything is working as before.

Check below link i am attaching the video of IOS.

http://cidev.in/demo.mp4

Pod install not working in react-native mac os catalina 10.15

$
0
0

Error: System/Library/Frameworks/Ruby.framework/Versions/2.3/usr/bin/ruby: bad interpreter: No such file or directory

in mac os catalina

Duplicate symbols in cocoa-pods libraries when building for iOS

$
0
0

Xcode throws the following linker error:

duplicate symbol '_kSessionVariantKey' in:
    /Users/apple/Library/Developer/Xcode/DerivedData/SmallcaseIos-fntvhvlzlxqompcrpbimpmiwsjiq/Build/Products/Debug-iphonesimulator/CleverTap-iOS-SDK/libCleverTap-iOS-SDK.a(CTABTestUtils.o)
    /Users/apple/Library/Developer/Xcode/DerivedData/SmallcaseIos-fntvhvlzlxqompcrpbimpmiwsjiq/Build/Products/Debug-iphonesimulator/Mixpanel/libMixpanel.a(MPABTestDesignerConnection.o)
duplicate symbol '_OBJC_IVAR_$__MPRunLoopThread._waitGroup' in:
    /Users/apple/Library/Developer/Xcode/DerivedData/SmallcaseIos-fntvhvlzlxqompcrpbimpmiwsjiq/Build/Products/Debug-iphonesimulator/CleverTap-iOS-SDK/libCleverTap-iOS-SDK.a(CTWebSocket.o)
    /Users/apple/Library/Developer/Xcode/DerivedData/SmallcaseIos-fntvhvlzlxqompcrpbimpmiwsjiq/Build/Products/Debug-iphonesimulator/Mixpanel/libMixpanel.a(MPWebSocket.o)
duplicate symbol '_OBJC_IVAR_$__MPRunLoopThread._runLoop' in:
    /Users/apple/Library/Developer/Xcode/DerivedData/SmallcaseIos-fntvhvlzlxqompcrpbimpmiwsjiq/Build/Products/Debug-iphonesimulator/CleverTap-iOS-SDK/libCleverTap-iOS-SDK.a(CTWebSocket.o)
    /Users/apple/Library/Developer/Xcode/DerivedData/SmallcaseIos-fntvhvlzlxqompcrpbimpmiwsjiq/Build/Products/Debug-iphonesimulator/Mixpanel/libMixpanel.a(MPWebSocket.o)
duplicate symbol '_OBJC_CLASS_$__MPRunLoopThread' in:
    /Users/apple/Library/Developer/Xcode/DerivedData/SmallcaseIos-fntvhvlzlxqompcrpbimpmiwsjiq/Build/Products/Debug-iphonesimulator/CleverTap-iOS-SDK/libCleverTap-iOS-SDK.a(CTWebSocket.o)
    /Users/apple/Library/Developer/Xcode/DerivedData/SmallcaseIos-fntvhvlzlxqompcrpbimpmiwsjiq/Build/Products/Debug-iphonesimulator/Mixpanel/libMixpanel.a(MPWebSocket.o)
duplicate symbol '_OBJC_METACLASS_$__MPRunLoopThread' in:
    /Users/apple/Library/Developer/Xcode/DerivedData/SmallcaseIos-fntvhvlzlxqompcrpbimpmiwsjiq/Build/Products/Debug-iphonesimulator/CleverTap-iOS-SDK/libCleverTap-iOS-SDK.a(CTWebSocket.o)
    /Users/apple/Library/Developer/Xcode/DerivedData/SmallcaseIos-fntvhvlzlxqompcrpbimpmiwsjiq/Build/Products/Debug-iphonesimulator/Mixpanel/libMixpanel.a(MPWebSocket.o)
ld: 5 duplicate symbols for architecture x86_64

clang: error: linker command failed with exit code 1 (use -v to see invocation)

It seems like there are duplicate symbols in libCleverTap-iOS-SDK.a and libMixpanel.a.

I'm on RN-0.61 and both the libraries are auto linked. The pod-file is using use_modular_headers! because some dependencies need it.

Both the libraries were linked and used to work fine before I put in use_modular_headers!.

I can't seem to figure out what I'm doing wrong.

podfile -

# Uncomment the next line to define a global platform for your project
platform :ios, '10.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target 'SmallcaseIos' do
  # react pods
  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', :modular_headers => false
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec', :modular_headers => false
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec', :modular_headers => false

  # Pods for SmallcaseIos
  use_modular_headers!
  pod 'SwiftyJSON', '3.1.4'
  pod 'Charts', '3.3.0'
  pod 'Branch', '0.27.1'

  use_native_modules!
end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['SWIFT_VERSION'] = '5.0'
    end
  end
end

There was problem loading requested app.it looks like you may be using LAN URL

$
0
0

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 hereenter image description here

React native IOS InputAccessoryView disappear from the screen after close modal

$
0
0

When I have on my screen InputAccessoryView which has component without nativeID (So it is constantly showing even if the keyboard is not shown) and I open and close Modal (react-native modal) then InputAccessoryView disappear from the screen with the component. I don't know why this is happening and also I don't know how to keep this InputAccessoryView on the screen.

Here is the code to reproduce it:

import * as React from 'react';
import { View, ScrollView, AppRegistry, TextInput, InputAccessoryView, Button } from 'react-native';
import {Modal, Text, TouchableHighlight, Alert} from 'react-native';
import Constants from 'expo-constants';

export default class App extends React.Component {

constructor(props) {
    super(props);
    this.state = {text: 'Placeholder Text', modalVisible: false,};
  }

  setModalVisible(visible) {
    this.setState({modalVisible: visible});
  }

  render() {
    return (
      <View style={{flex:1}}>
        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
          }}>
          <View style={{marginTop: 22, padding: 50, backgroundColor: '#0066ff'}}>
            <View>
              <TouchableHighlight
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}>
                <Text style={{color:"#ffffff"}}>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>


        <ScrollView style={{ backgroundColor: '#6ED4C8'}}>
         <Text></Text>
          <TouchableHighlight
          onPress={() => {
            this.setModalVisible(true);
          }}>
          <Text style={{padding: 40, backgroundColor: "#ff3300"}}>Show Modal</Text>
        </TouchableHighlight>
        </ScrollView>
        <InputAccessoryView backgroundColor="#ff9900">
           <TextInput
            style={{
              padding: 20,
              paddingTop: 50,
            }}
            onChangeText={text => this.setState({text})}
            value={this.state.text}
          />
        </InputAccessoryView>
      </View>
    );
  }
}

Here you can find the online version (Keep in mind that the issue is only relevant for IOS): https://snack.expo.io/SJB7ipm6B

Some Images:

enter image description here

enter image description here

enter image description here

Thank you for your time and your help!

Viewing all 16565 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>