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

React Native KeyboardAvoidingView not working properly

$
0
0

I am trying to use the KeyboardAvoidingView with behavior="padding".

When I am trying to enter any text in TextInput, the TextInput field is not moving up. I have added a small view in the end which is moving up but the the view above it.

I have also with KeyboardAvoidingView height property with offset. It was working few components like 2 TextInputs. But when I add all the components the UI goes insane and behave jumbled up.

Any any idea whats happening over here?

Here the link of tutorial which I have followed.

render() {    return (<View style={styles.backgroundContainer}><Loader                loading={this.state.isLoading} /><KeyboardAvoidingView                keyboardVerticalOffset={10}                style={styles.mainContainer}                behavior='padding'><View style={styles.formContainer}><View style={[styles.centerContainer, { marginTop: 40 }]}><Image source={require('./../../Resources/logo.png')} /><Text style={{ fontWeight: 'bold', color: 'gray', fontSize: 25 }}>AppName</Text><Text style={styles.loginMsg}> Login to your Account </Text></View><View style={styles.inputFieldsContainer}><Image style={{ width: 30, height: 30, margin: 5 }} source={require('./../../Resources/logo.png')} /><TextInput                            placeholder='Email'                            returnKeyType='next'                            keyboardType='email-address'                            onChangeText={(value) => this.setState({ userEmail: value })}                            onSubmitEditing={() => this.passwordInput.focus()}                            style={styles.inputFields} /></View><View style={styles.inputFieldsContainer}><Image style={{ width: 30, height: 30, margin: 5, }} source={require('./../../Resources/logo.png')} /><TextInput                            returnKeyType='go'                            secureTextEntry                            placeholder='Password'                            ref={(input) => this.passwordInput = input}                            onChangeText={(value) => this.setState({ password: value })}                            style={styles.inputFields} /></View><View style={styles.buttonContainer}><Button                            fontSize='8'                            color='gray'                            title='Remember Me'                            onPress={() => {                                console.log('Remember Me Clicked');                            }} /><Button                            color='gray'                            title='Forgot Password?'                            onPress={() => {                                console.log('Forgot Password Clicked');                            }} /></View><TouchableOpacity                        style={styles.buttonLogin}                        onPress={() => {                                console.log('Login Clicked');                        }}><Text style={{ fontSize: 20, fontWeight: 'bold', color: 'white' }}>Login</Text></TouchableOpacity><View style={{ height: 1, backgroundColor: 'gray', marginTop: 20, marginBottom: 1 }}></View><View style={[styles.centerContainer, { marginBottom: 10 }]}><Text style={styles.loginMsg}>Don't have a Account</Text><TouchableOpacity                            style={styles.buttonRegister}                            onPress={() => navigate('Register')} ><Text style={styles.buttonRegisterText}>REGISTER NOW</Text></TouchableOpacity></View></View><View style={{ height: 10, backgroundColor: '#628499', }}></View></KeyboardAvoidingView></View>    );}const styles = StyleSheet.create({backgroundContainer: {    flex: 1, backgroundColor: 'green'},mainContainer: {    flex: 1, margin: 25,    borderWidth: 1, borderRadius: 5, borderColor: 'gray',    backgroundColor: 'white',    justifyContent: 'space-between'},formContainer: {    flex: 1, paddingLeft: 25, paddingRight: 25},centerContainer: {    alignItems: 'center', marginBottom: 10,},loginMsg: {    margin: 10,    fontSize: 20, color: 'gray'},inputFieldsContainer: {    flexDirection: 'row', margin: 10,    borderWidth: 1, borderRadius: 5, borderColor: 'gray',},inputFields: {    flexGrow: 1,    marginTop: 5, marginBottom: 5,    height: 30,    backgroundColor: 'rgba(255,255,255,0.4)',    paddingHorizontal: 10,},buttonContainer: {    flexDirection: 'row',    justifyContent: 'space-between'},buttonLogin: {    alignItems: 'center', height: 40, marginTop: 10, marginLeft: 50, marginRight: 50, padding: 5,    backgroundColor: '#2980b9',    borderWidth: 1, borderRadius: 5, borderColor: 'gray'},buttonRegister: {    alignItems: 'center', height: 40,    marginLeft: 50, marginRight: 50},buttonRegisterText: {    fontSize: 20, fontWeight: 'bold', color: 'gray'},loading: {    position: 'absolute',    left: 0, right: 0, top: 0, bottom: 0,    alignItems: 'center', justifyContent: 'center'}, });

react native fresh install build fails with Undefined symbol

$
0
0

I've been having an issue building my RN app for iOS. To eliminate my own code as a problem I created a fresh project but I'm getting the same errors. I did the following (I am using a Macbook Pro with the M1 chip):

  • added a fresh install using npx react-native init TestProject
  • did a pod update successfully
  • added a .swift file in the root of the project in xcode to create the bridging header
  • cleaned the build folder
  • tried npx react-native run-ios but that failed, so I tried to run from xcode and it also failed

The problem appears to be with linking, here are some warnings I get:

ld: warning: Could not find or use auto-linked library 'swiftFoundation'ld: warning: Could not find or use auto-linked library 'swiftDarwin'ld: warning: Could not find or use auto-linked library 'swiftUIKit'ld: warning: Could not find or use auto-linked library 'swiftCoreFoundation'ld: warning: Could not find or use auto-linked library 'swiftQuartzCore'ld: warning: Could not find or use auto-linked library 'swiftCore'ld: warning: Could not find or use auto-linked library 'swiftCoreGraphics'ld: warning: Could not find or use auto-linked library 'swiftObjectiveC'ld: warning: Could not find or use auto-linked library 'swiftDispatch'ld: warning: Could not find or use auto-linked library 'swiftSwiftOnoneSupport'ld: warning: Could not find or use auto-linked library 'swiftCoreImage'ld: warning: Could not find or use auto-linked library 'swiftMetal'

then has an error at the bottom saying clang: error: linker command failed with exit code 1 with about 23 errors listed, all saying Undefined symbol followed by a bunch of Swift methods.

Initially I thought it was an issue with how I configured my app, but since the same problem happens with a fresh install, I really have no idea where to go from here.

I've searched all over and tried all sorts of things like legacy build mode, changing all sorts of build settings, but nothing worked. Any help would be appreciated.

I'm using the following:

  • xcode 12.4
  • nodejs v16.0
  • npm v7.10.0
  • react v17.0.1
  • react-native v0.64.0

Changing status bar colour in React Native

$
0
0

In React Native, I'm trying to set the status bar to 'light-content' so it is more visible against the darker background. To do so I used , however when I ran the code I got the following error:


RCTStatusBarManager module requires that the                 UIViewControllerBasedStatusBarAppearance key in the Info.plist is set to NO-[RCTStatusBarManager setStyle:animated:]    RCTStatusBarManager.mm:157__invoking___-[NSInvocation invoke]-[NSInvocation invokeWithTarget:]-[RCTModuleMethod invokeWithBridge:module:arguments:]facebook::react::invokeInner(RCTBridge*, RCTModuleData*, unsigned int, folly::dynamic const&)facebook::react::RCTNativeModule::invoke(unsigned int, folly::dynamic&&, int)::$_0::operator()() constinvocation function for block in facebook::react::RCTNativeModule::invoke(unsigned int, folly::dynamic&&, int)_dispatch_call_block_and_release_dispatch_client_callout_dispatch_main_queue_callback_4CF__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE____CFRunLoopRunCFRunLoopRunSpecificGSEventRunModal-[UIApplication _run]UIApplicationMainmainstart0x0

I went into the info.plist page and set UIViewControllerBasedStatusBarAppearance to false as per the error message but that still didn't do anything.

Best API to implement iOS application similar to a photo editing app

$
0
0

I'm looking for advice for the best way to approach this application I'm trying to make. Essentially the user has to be able to look at a graphic that is going to be displayed onto a projection. The graphic needs to be able to be edited live while being on this output display. There should be options below to pick other graphics, create your own basic ones(such as basic editor where you can write, add shapes, etc), and upload graphics from the photo library. The interface would have the displayed graphic as the main element with a dropdown below that would have all the features I've described above. A photo editing app is the most similar other kind of project I can think of.

Right now my current approach is to just to implement purely in Swift with using the Photo Editing API. https://developer.apple.com/documentation/photokit/creating_photo_editing_extensions

I think there might be possible issues with representing the graphic as a photo in this extension but maybe there's a possible workaround.

Would React-Native have any utility here? Any input would be appreciated.

React Native - npx react-native run-ios doesn't work after initializing the project

$
0
0

After reading https://reactnative.dev/docs/environment-setup, I created a react-native project using npx react-native init ***.

It was successful, so, I tried to run the project using npx react-native run-ios, and got the below error:

** BUILD FAILED **The following build commands failed:    CompileC /Users/loser/Library/Developer/Xcode/DerivedData/test0205-dasunahpjpavelgmslwgmvjhesxy/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/Flipper.build/Objects-normal/x86_64/FlipperRSocketResponder.o /Users/loser/Documents/projects/test0205/ios/Pods/Flipper/xplat/Flipper/FlipperRSocketResponder.cpp normal x86_64 c++ com.apple.compilers.llvm.clang.1_0.compiler(1 failure)

React Native & iOS : Invariant Violation: Module RCTDeviceEventEmitter is not a registered callable module (calling emit)

$
0
0

I have been doing a project with react native. We were working in a team. The code was fine. Then one day my partner pushed an update to the repo. The code works fine in his macbook. But as for me, I got some errors as below. This error keeps on repeating in my console like an infinity loop. Please help me.

2021-04-27 16:25:29.017856+0900 MyApp[1694:462504] [javascript] Invariant Violation: Module RCTDeviceEventEmitter is not a registered callable module (calling emit)2021-04-27 16:25:29.021025+0900 MyApp[1694:462504] [javascript] Invariant Violation: Module RCTDeviceEventEmitter is not a registered callable module (calling emit)2021-04-27 16:25:29.028693+0900 MyApp[1694:462504] [javascript] Invariant Violation: Module RCTDeviceEventEmitter is not a registered callable module (calling emit)2021-04-27 16:25:29.031414+0900 MyApp[1694:462504] [javascript] Invariant Violation: Module RCTDeviceEventEmitter is not a registered callable module (calling emit)2021-04-27 16:25:29.039040+0900 MyApp[1694:462504] [javascript] Invariant Violation: Module RCTDeviceEventEmitter is not a registered callable module (calling emit)2021-04-27 16:25:29.044973+0900 MyApp[1694:462504] [javascript] Invariant Violation: Module RCTDeviceEventEmitter is not a registered callable module (calling emit)2021-04-27 16:25:29.050134+0900 MyApp[1694:462504] [javascript] Invariant Violation: Module RCTDeviceEventEmitter is not a registered callable module (calling emit)2021-04-27 16:25:29.054998+0900 MyApp[1694:462504] [javascript] Invariant Violation: No callback found with cbID 4923 and callID 2461 for module <unknown>. Args: '[231]'2021-04-27 16:25:29.060805+0900 MyApp[1694:462504] [javascript] Invariant Violation: No callback found with cbID 4939 and callID 2469 for module <unknown>. Args: '[232]'2021-04-27 16:25:29.065863+0900 MyApp[1694:462504] [javascript] Invariant Violation: No callback found with cbID 4955 and callID 2477 for module <unknown>. Args: '[233]'2021-04-27 16:25:29.070933+0900 MyApp[1694:462504] [javascript] Invariant Violation: Module RCTDeviceEventEmitter is not a registered callable module (calling emit)2021-04-27 16:25:29.076179+0900 MyApp[1694:462504] [javascript] Invariant Violation: Module RCTDeviceEventEmitter is not a registered callable module (calling emit)2021-04-27 16:25:29.081011+0900 MyApp[1694:462504] [javascript] Invariant Violation: No callback found with cbID 4971 and callID 2485 for module <unknown>. Args: '[234]'2021-04-27 16:25:29.086752+0900 MyApp[1694:462504] [javascript] Invariant Violation: No callback found with cbID 4987 and callID 2493 for module <unknown>. Args: '[235]'2021-04-27 16:25:29.092208+0900 MyApp[1694:462504] [javascript] Invariant Violation: Module RCTDeviceEventEmitter is not a registered callable module (calling emit)2021-04-27 16:25:29.096989+0900 MyApp[1694:462504] [javascript] Invariant Violation: Module RCTDeviceEventEmitter is not a registered callable module (calling emit)2021-04-27 16:25:29.102638+0900 MyApp[1694:462504] [javascript] Invariant Violation: Module RCTDeviceEventEmitter is not a registered callable module (calling emit)2021-04-27 16:25:29.107905+0900 MyApp[1694:462504] [javascript] Invariant Violation: Module RCTDeviceEventEmitter is not a registered callable module (calling emit)2021-04-27 16:25:29.113361+0900 MyApp[1694:462504] [javascript] Invariant Violation: Module RCTDeviceEventEmitter is not a registered callable module (calling emit)2021-04-27 16:25:29.118681+0900 MyApp[1694:462504] [javascript] Invariant Violation: Module RCTDeviceEventEmitter is not a registered callable module (calling emit)2021-04-27 16:25:29.124229+0900 MyApp[1694:462504] [javascript] Invariant Violation: Module RCTDeviceEventEmitter is not a registered callable module (calling emit)2021-04-27 16:25:29.129071+0900 MyApp[1694:462504] [javascript] Invariant Violation: Module RCTDeviceEventEmitter is not a registered callable module (calling emit)2021-04-27 16:25:29.134937+0900 MyApp[1694:462504] [javascript] Invariant Violation: Module RCTDeviceEventEmitter is not a registered callable module (calling emit)2021-04-27 16:25:29.140182+0900 MyApp[1694:462504] [javascript] Invariant Violation: No callback found with cbID 5003 and callID 2501 for module <unknown>. Args: '[236]'2021-04-27 16:25:29.145136+0900 MyApp[1694:462504] [javascript] Invariant Violation: No callback found with cbID 5019 and callID 2509 for module <unknown>. Args: '[237]'

Firestore returns invalid-argument while adding new data in react native ios

$
0
0

Im using firebase in React native which works fine on Android side but on IOS when i try to add item its show me this error.

[Error: [firestore/invalid-argument] Client specified an invalid argument. Note that this differs from failed-precondition. invalid-argument indicates arguments that are problematic regardless of the state of the system (e.g., an invalid field name).]

 let story = firestore().collection('paidItems').doc();        await story.set({             id: story.id,            name: title,            url : image,            passLink,            password,            createdAt: firestore.FieldValue.serverTimestamp(),        });

Already try new Object()Object.assign({}, data)

Thanks.

RNAlert causes 'keyboardWillHide' to be called twice

$
0
0

I use react-native-keyboard-aware-scroll-view to handle keyboard appearance.

"react-native": "0.62.2","react-native-keyboard-aware-scroll-view": "^0.9.1",

Here is the code sample:

<View style={{flex: 1}}><KeyboardAwareScrollView    alwaysBounceVertical={false}    showsVerticalScrollIndicator={false}    style={{flex: 1}}    keyboardShouldPersistTaps="handled"    extraHeight={100}><View style={{height: 1000}} /><TouchableOpacity onPress={() => Alert.alert('Hello', 'world!')}><View><Text>Press me</Text></View></TouchableOpacity><TextInput placeholder={'Give me text'} /></KeyboardAwareScrollView></View>

and encountered strange behavior. Steps to reproduce:

  • scroll view down
  • focus TextInput:
    • keyboard appears
    • view scrolls under the input
  • press TouchableOpacity:
    • keyboard disappears
    • view scrolls up to the top, TextInput goes off screen
    • alert appears
  • press OK:
    • alert disappears
    • keyboard appears
    • view scrolls under the input

Expected behavior:

  • scroll view down
  • focus TextInput:
    • keyboard appears
    • view scrolls under the input
  • press TouchableOpacity:
    • keyboard disappears
    • view scrolls up, but not TextInput is still visible
    • alert appears
  • press OK:
    • alert disappears
    • keyboard appears
    • view scrolls under the input

Diving into the code of KASV shows that 'keyboardWillHide' fired twice on calling Alert.alert. That causes defaultResetScrollToCoords to be nulled after first 'keyboardWillHide' and the second 'keyboardWillHide' causes scrollToPosition(0, 0, true).

I've tried to capture 'keyboardWillHide' with no any usage of KASV. 'keyboardWillHide' also fired twice.

Looks like that it's a bug of Alert, because opening RNModal fires 'keyboardWillHide' only once.

Is there any ideas how this issue can be solved?


How to add the Done button above the keyboard for iOS?

$
0
0

As per the screenshot below is what I want to achieve. Note the location of the Done button.In React Native, we have the returnKeyType prop for textInput but that sets the value of the button at the bottom right.

I had a look at this package;https://github.com/ardaogulcan/react-native-keyboard-accessory

Which does seem like it could work but don't know if there is a better way to do this.Plus with the amount of input boxes, could take a while for me to refactor.

enter image description here

React-Native: Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template

$
0
0

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... noxcrun: error: SDK "iphoneos" cannot be locatedxcrun: error: SDK "iphoneos" cannot be locatedxcrun: error: SDK "iphoneos" cannot be locatedxcrun: 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.

React Native / iOS SDK. No matching function for call to 'RCTBridgeModuleNameForClass' after update iOS SDK to 14.5

$
0
0

I have updated the iOS SDK platform to version 14.5. The xCode version is now 12.5. After updating, I cannot launch the application on my device. An error: No matching function for call to 'RCTBridgeModuleNameForClass'. I tried reinstalling the pods but it didn't help. How can fix it? Thanks

enter image description here

How to migrate to Xcode 12.5

$
0
0

I'm not able to build a React Native project, which built correctly using Xcode 11, using Xcode 12.5.

I can no longer use Xcode 11 because only more current versions of Xcode carry the necessary API to publish/upload to TestFlight and the app store.

Now I get three build errors:

Cannot initialize a parameter of type 'NSArray<id<RCTBridgeModule>> *' with an rvalue of type 'NSArray<Class> *'Cannot initialize a parameter of type 'NSArray<id<RCTBridgeModule>> *' with an rvalue of type 'NSArray<Class> *'Cannot initialize a parameter of type 'NSArray<id<RCTBridgeModule>> *' with an rvalue of type 'NSArray<Class> *'

I also noticed that deployment targets were automatically upgraded from 10 and 9:

- IPHONEOS_DEPLOYMENT_TARGET = 9.0;+ IPHONEOS_DEPLOYMENT_TARGET = 12.1;

Some new properties were added related to Clang:

+ CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES;

How can I configure the project to deploy this app using Xcode 12.5?

React Native 0.64 won't build iOS app after updating Xcode to 12.5 and iOS to 14.5

$
0
0

After upgrading Xcode to 12.5 and iOS to 14.5, I can't run the iOS app on a real device nor in the simulator.

After running npm run ios, I get this message:

The following build commands failed:        CompileC .../Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/Flipper-Folly.build/Objects-normal/x86_64/DistributedMutex.o /Users/guilherme/Documents/Dood/ios/Pods/Flipper-Folly/folly/synchronization/DistributedMutex.cpp normal x86_64 c++ com.apple.compilers.llvm.clang.1_0.compiler

If I try to run the app on a real device using Xcode, this is the error I get (related to Flipper-Folly):

.../ios/Pods/Headers/Private/Flipper-Folly/folly/synchronization/DistributedMutex-inl.h:1051:5: 'atomic_notify_one<unsigned long>' is unavailable

Ideas? Thanks!

How I can use my React Native app on Iphone?

$
0
0

I am bulding my first react native app to give as a present of Mother's Day to my mother. But I found a problem, how can I install the app in my mother's iphone? I don't want to pay the 99$ dollar fee yet to Apple Developer Program. How can I do that for free and not depending of my computer?

why every time i open xcode project it shows to revoke code signing certificate?

$
0
0

every time when i open xcode project for ios mobile app it show following message:

"Your account already has a signing certificate for this machine but it is not present in your keychain. To create a new one, you must first revoke the existing certificate."

and Every time create new certificate. it happnes after Developer account member ship is renewed.

please give me any solutions.enter image description here


How to import Swift View to React Native

$
0
0

I'am new in this Objc and Swift. I need some small example. I dont know what search.

Objective C very complicated for me.

Can anyone give any simple example, how in Objective C import Swift View as react-native module?

//this is swift fileimport SwiftUIstruct SwiftUIView: View {    var body: some View {        Text("Hello, World!")    }}
//i need use RCTView and RCTViewManager somehow in ObjectiveC files

Please give some example how import SwiftUIView or any other View from Swift to ObjectCand add export as RCTView

How to fix 'Video play but don't have sound on iOS with expo'

$
0
0

I use video component from expo. I can play video, but it doesn't sound in iOS. In Android it's okay. How can I fix it.

<Video style={{ width: 340,                                 height: 220,                                borderRadius: 10,                                 overflow: 'hidden' }}                                posterSource={require('../../assets/loading2.gif')}                                usePoster={true}                                rate={1.0}                                isMuted={false}                                useNativeControls = {true}                                volume={1.0}                                playsInSilentLockedModeIOS ={ true }                                resizeMode='cover'                                shouldPlay={true}                                 source={{uri : url}} />

Native module cannot be null. React Native iOS

$
0
0

react-native run-ios

Error Description during pod install

Pod File

Hello Everyone,

I am trying to run React Native Project in iOS it's throwing the following issue.

I am using React Native 0.60.4 . I am not able to understand which Native Module is null.

Can anyone please help me out on this. I have been trying this whole day.

I have attached the screenshot for the above issue.

Thanks in advance.

How to fix header style on iOS using react native and style components

$
0
0

I'm trying to fix the header layout on iOS. On android it's working/fitting perfectly.

I'm using react native, expo, xCode and style components. (using macbook pro and iPhone 12 pro max).

import styled from 'styled-components/native';import { Platform, StatusBar } from 'react-native';

export const Container = styled.View`  padding: 0 16px;  padding-top: ${Platform.OS === 'android' ? StatusBar.currentHeight : 0}px;  width: 100%;  height: ${64 + (Platform.OS === 'android' ? StatusBar.currentHeight : 0)}px;  background-color: #fff;  flex-direction: row;  justify-content: space-between;  align-items: center;  `;export const Logo = styled.Image`  width: 143px;  height: 31px;`;export const SearchIcon = styled.Image`  width: 32px;  height: 32px;`;

iOS simulator print screen

How to update to Xcode 12 without using App Store

$
0
0

I'm currently using Mac OS Catalina 10.15.4 and Xcode 11.Because of Apple's recent update about Xcode - all the app submissions need to be in Xcode 12 starting from April 26th, 2021, I have to update my Xcode.The problem is that my Mac has total space of 120 GB and currently 13 GB is available - I've tried to clean everything unnecessary.

Since most recent Xcode required Big Sur OS which was also problem for me because of low storage, I'm trying to update my current Xcode via downloading XCode 12.4 which can be run from Catalina from the Apple developer site.

After I downloaded xip file, I couldn't unzip it because of low storage.In this case, is there a way to install Xcode from the external harddrive or should I remove current XCode in my Mac and unzip it? If I remove current XCode 11, will there be any problems such as losing data?

Viewing all 16548 articles
Browse latest View live


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