I am following the tutorial in the link: https://medium.com/appandflow/react-native-scrollview-animated-header-10a18cb9469e . However I can't seem to understand how to add tabs to this such that the tab headers get fixed to top when scrolled up. Can anyone please suggest how to achieve this?
↧
Tabs with scrolling animated header - React native
↧
'UIKit/UIUserActivity.h' file not found, Xcode 9.4
I created a new react native 0.60.5 project called iostest with react native init, opened 'iostest.xcworkspace', clicked run and got - Build Failed:
/Users/ronsivan/Desktop/iostest/node_modules/react-native/Libraries/LinkingIOS/RCTLinkingManager.h:10:9: 'UIKit/UIUserActivity.h' file not found
I've tried deleting node_modules and npm install, reinstalling cocoapods didn't work.
I'm running hackintosh with macOS High Sierra 10.13.6 and Xcode 9.4. React Native documentation says that developing requires Xcode 9.4 or newer but this doesn't seem to be reliable.
↧
↧
React Native: Determine number of lines of Text component
As the title says, I've been trying to find a way to determine the number of lines the text component AFTER it has been given text. Look at my example below.
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi semper ut ipsum in ultrices. Vivamus fringilla lacinia odio in accumsan. Proin sit amet pellentesque tortor. Nam mollis sit amet ligula id convallis. Etiam in semper diam. Cras id elit consectetur, interdum ante id, tincidunt nisi. Integer non elit placerat, dignissim nibh at, faucibus sem. Curabitur nec posuere turpis. Vivamus rhoncus nulla vitae mi imperdiet, elementum eleifend mi laoreet. Vestibulum molestie turpis non nibh elementum, sed ornare magna tristique. Aliquam erat volutpat. Phasellus volutpat mi vel tempor finibus.
</Text>
At runtime, how can I determine how many lines this Text component has rendered. This number will vary depending on device (eg. iPhone 5 will need to render more lines vs iPhone 6+ as it has a smaller screen size). I've checked the source code for the Text component but there doesn't seem to be anything I'm looking for.
I am using React Native 0.24.
Any ideas?
Cheers.
↧
How to change the root view background in a managed expo app?
With the introduction of Page Sheets in iOS 13, there is a white background in my app that I cannot seem to be able to change (behind the white Page Sheet, and the grey top of the underlying page):
Obviously, for most apps a black background color would look much better.
While for ejected React Native apps, one could use:
https://github.com/johniak/react-native-root-view-background
I'm curious if anyone using managed Expo has figured out a way to deal with this. As I cannot find much complaints about this issue, other than:
↧
React native upload image as binary
I've seen several examples of uploading a file using react-native-fetch-blob to upload assets as Form data, unfortunately the server that I need to upload to doesn't support multipart but a binary stream of the file. I'm using react native (dettached) and created a native module (iOS) that returns the local Identifier and the local path of the file to upload, for example:
4697EAE5-50A3-4462-AE5A-71CC5D08C2D7/L0/001: file:///var/mobile/Media/DCIM/100APPLE/IMG_0038.JPG
however, when I specify the path to the library to upload, it uploads an empty stream and the server stores a zero-bytes size file, I'm uploading a snippet of what I'm doing right now:
export const uploadFile = (
action,
url,
data,
showLoading = true,
showError = true
) => (dispatch, getStore) => { // in the future it's going to be connected to redux
const uploadPath = RNFetchBlob.wrap(data.replace("file://", ""));
// uploadPath = "RNFetchBlob-file:///var/mobile/Media/DCIM/100APPLE/IMG_0033.JPG"
console.log("path to upload", uploadPath);
return RNFetchBlob.fetch(
"PUT",
url,
{
// appends the Bearer token of the server
...getConfigFromStore(getStore()).headers
"Content-Type": "application/octet-stream"
},
uploadPath
)
.then(response => console.log("response ok", response))
.catch(error => console.error("response error", error));
};
The response is a HTTP 204 (which is fine since the response doesn't contain a body)
An alternative is getting the base64 string data but it's not recommended due to memory limitations in the phone and I need to support videos upload in the future, any suggestions?
↧
↧
podspec setup for react native geolocation
Sorry for the noob question but I really have no clue how to setup this last bit of line for RN's Geolocation:
If you are using CocoaPods for React Native, make sure to include the RCTGeolocation sub-podspec.
I have a podfile already because I'm following guide from RNfirebase library, but not sure where to add RCTGeolocation.
here's what I currently have:
target 'Absent' do
# Uncomment the next line if you're using Swift or would like to use
dynamic frameworks
# use_frameworks!
# Pods for Absent
pod 'Firebase/Core', '~> 5.3.0'
pod 'Firebase/Messaging', '~> 5.3.0'
target 'AbsentTests' do
inherit! :search_paths
# Pods for testing
end
end
This is my first time customizing a project on mac and interacting with pod files. Any pointers would be greatly appreciated :D
↧
Implementing ssl pinning in a react-native application using TrustKit iOS
I'm trying to implement SSL pinning in a react-native application (RN 0.60) and I'm using Trustkit.
Following the guide posted in https://github.com/datatheorem/TrustKit these are the step that I've done:
1) Install TrustKit pod using pod 'TrustKit' and pod install
2) Added to my AppDelegate.m this piece of code:
#import <TrustKit/TrustKit.h>
//inside didFinishLaunchingWithOptions
NSDictionary *trustKitConfig =
@{
kTSKSwizzleNetworkDelegates: @YES,
kTSKPinnedDomains: @{
@"www.datatheorem.com" : @{
kTSKEnforcePinning:@YES,
kTSKIncludeSubdomains:@YES,
//Using wrong hashes so it fails
kTSKPublicKeyHashes : @[
@"Ca5gV6n7OVx4AxtEaIk8NI9qyKBTtKJjwqullb/v9hh=",
@"YLh1dUR9y6Kja30RrAn7JKnbQG/uEtLMkBgFF2Fuihh="
]
}}};
[TrustKit initSharedInstanceWithConfiguration:trustKitConfig];
When i try to do
RNFetchBlob.fetch('GET', "https://www.datatheorem.com", {}) //tried using standard fetch() but gives same results
.then(async(res) => {
console.log('RES => ' ,res)
})
// Something went wrong:
.catch((err) => {
console.log('ERROR =>', err);
})
It goes inside then and doesn't give any error but responds with a 200 status code (using wrong Hashes).
Otherwise, using Android it works correctly, going inside the catch and saying:
Error: Pin verification failed
↧
Detect if picture of picture taken in mobile app
I am working on a face recognition app where the picture is taken and sent to server for recognition.
I have to add a validation that user should capture picture of real person and of another picture. I have tried a feature of eye blink and in which the camera waits for eye blink and captures as soon as eye is blinked, but that is not working out because it detects as eye blink if mobile is shaken during capture.
Would like to ask for help here, is there any way that we can detect if user is capturing picture of another picture. Any ideas would help.
I am using react native to build both Android and iOS apps.
Thanks in advance.
↧
Why Keyboard dismiss not work on React Native when firebase call?
Keyboard.dismiss() not working when I implement firebase login. The keyboard stays up on to the next page where you have to manually close it. Does anyone know how to get the keyboard to go away?
When I commenting my firebase authentication code then keyboard.dismiss() work perfectly.
here is my working code snippet
but when I comment out of firebase authentication code Keyboard.dismiss() not working why happen this?
code:
handleLogin = () => {
Keyboard.dismiss();
this.setState({ isLoading: true });
const { email, password } = this.state;
firebase
.auth()
.signInWithEmailAndPassword(email, password)
.catch(function(error) {
Alert.alert('Error', error.message);
})
.then(response => {
this.setState({ isLoading: false });
if (response) {
this.setState({ isSuccessful: true });
this.storeName(response.user.email);
setTimeout(() => {
this.props.closeLogin();
this.setState({ isSuccessful: false });
setTimeout(() => {
Alert.alert('Congrats', "You've logged successfully!");
}, 200);
}, 1000);
}
});
};↧
↧
The version of CocoaPods used to generate the lockfile (1.5.3) is higher than the version of the current executable (1.5.2)
on $pod install it gives warning & fails
What is it trying to say ?
macOs : 10.11.6 osx el capitan
my pod version is : 1.5.3
What does"current executable" (1.5.2) means ?
and
how to update it ?
↧
How to refresh react native view when the other user changes the same data?
I have loaded my data in a react native component, however, the same data can be changed by another user in another app. What is the best way of telling the other app (component) of the data change to refresh? I am looking for something quick and easy.
- Is it push notifications?
- Opening a web socket with the server for data changes?
- Any other standard followed?
↧
React Native Tap and Pay - NFC
I'm writing a React Native app and I need to incorporate the Apple Pay tap-and-go nfc functionality.
I've been researching and I've only been able to see examples or documentation regarding the 'in-app-purchase' type of payment prompts (the classic pop up that appears every time you make a purchase in an app).
I have seen
tipsi-stripe, react-native-tap-payment, react-native-nfc-manager
but they don't seem to do what I would expect.
What I'm looking for is a way to trigger the NFC functionality that you use in shops when you tap and pay with your phone instead of with the card in your wallet (see https://support.apple.com/en-us/HT201239#stores).
Any suggestions on a good library that allows me to achieve that?
↧
first_open event is not showing on Google ads console for iOS
The Ad account is connected to Firebase analytics. I can see the first_open event on Firebase Analytics dashboard, but the event is not listed on Google ad console's Analytics Events column, all other events are showing. It's a react native app. This problem is not happening for Android version. Following are the configurations of iOS setup:
React Native Environment Info:
System:
OS: macOS 10.14
CPU: (2) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
Memory: 2.98 GB / 7.84 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.16.0 - /usr/local/bin/node
Yarn: 1.17.0 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
IDEs:
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.4 => 0.59.4
npmGlobalPackages:
react-native-cli: 2.0.1
react-native: 0.59.9
AppDelegate.m code to launch the app
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
#import "AppDelegate.h"
#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "RNSplashScreen.h"
#import <FBSDKCoreKit/FBSDKCoreKit.h>
@import Firebase;
#import "RNFirebaseNotifications.h"
#import "RNFirebaseMessaging.h"
#import "RCTLinkingManager.h"
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
moduleName:@"abc"
initialProperties:nil];
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [UIViewController new];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
↧
↧
Can't import events to Google Ads from Firebase
When importing events from Firebase analytics to Google Ads, I am seeing all other events except for first_open for iOS platform, it's showing for Android though. What could be wrong?
↧
React Native Ios Push Notification Not Working
I use '@react-native-firebase/messaging' module to send notifications. On Android everything works fine, Following is the error log I get when I try const fcmToken = await firebase.messaging().getToken(); on ios device.
NativeFirebaseError: [messaging/unknown] The operation couldn’t be completed. (com.firebase.iid error 1001.)
I have already implemented "react-native-permissions" to grant notification permission.
My AppDelegate.m contains :
if ([FIRApp defaultApp] == nil) {
[FIRApp configure];
}
Should I add anything else to it? Any help or suggestion will be very helpful. Thanks in advance
↧
RNFirebaseNotifications.h not found after migrating to firebase v6. React Native
I am migrating to a new version of RN and firebase as well . I did everything as it is written in migration guideline of firebase v6 but now, xcode shows me error 'RNFirebaseNotifications.h' file not found and RNFirebaseMessaging.h file not found. Since RN > 0.60 uses auto linking, can it be the reason that xcode cannot find required modules ? If you know how to solve the issue, please, let me know. My package.json
"dependencies": {
"@react-native-community/async-storage": "^1.7.1",
"@react-native-community/netinfo": "^5.0.1",
"@react-native-firebase/app": "^6.2.0",
"@react-native-firebase/messaging": "^6.2.0",
"@tinkoff/utils": "^1.0.2",
"buffer": "^5.2.1",
"connected-react-navigation": "^0.0.4",
"formik": "^1.5.2",
"jetifier": "^1.6.4",
"moment": "^2.22.2",
"react": "16.9.0",
"react-dom": "^16.8.6",
"react-native": "0.61.5",
}
Unfortunately, I've not found any solution on firebase github page :(
↧
I have a problem when trying to run my react native app
as referenced in the react native docs, I am trying to run my react native app with the command npx react-native run-ios on terminal. However, I am getting this error:
How do I fix it? I already tried deleting the build file in Xcode.
↧
↧
React-Native: React could not be found within project or in these directories
We have upgraded our react native project to the latest react native version (v0.61.2) with react (16.9.0) and it works perfectly fine on android. When we try to run it on ios thought, we get the message:
warning: the transform cache was reset. Loading dependency graph, done. error: bundling failed: Error: Unable to resolve module `React` from `ios/Pods/React/Libraries/react-native/react-native.js`: React could not be found within the project or in these directories: node_modules
If you are sure the module exists, try these steps:
1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules: rm -rf node_modules and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*
We have followed the upgrade guide, updated all dependencies to their latest version and updated the pods. I actually don't know where or how to start debugging this, since this seems to be coming from the Pods folder.
This is the content of our Pods folder:
ls ios/Pods/
Adjust GoogleDataTransport
Crashlytics GoogleDataTransportCCTSupport
DoubleConversion GoogleUtilities
Fabric Headers
Firebase Local Podspecs
FirebaseABTesting Manifest.lock
FirebaseAnalytics Pods.xcodeproj
FirebaseAnalyticsInterop Protobuf
FirebaseCore Pushwoosh
FirebaseCoreDiagnostics PushwooshInboxUI
FirebaseCoreDiagnosticsInterop React
FirebaseDynamicLinks Target Support Files
FirebaseInstanceID boost-for-react-native
FirebaseRemoteConfig glog
Folly nanopb
GoogleAppMeasurement
and in our node_modules folder, we have (with a lot more other packages):
...
react
depd react-deep-force-update
des.js react-devtools-core
destroy react-is
detect-libc react-lifecycles-compat
detect-newline react-native
...
I have, of course, tried all the steps, like clearing caches, reset-cache, clearing DerivedData, Clean and build, ... I don't know where to start looking.
↧
Rotate image and save in React-Native
I am going to rotate the image in react–native and I would to get base64 of rotated image. I used several libraries
react-native-image-rotate: It's working well on Android but on iOS I getrct-image-store://1as url so I tried to get base64 usingrn-fetch-blobbut it is throwing error about can't recognize that url.react-native-image-resizer: I used this but the response is not good in iOS. If I set -90 then rotate -180, if I set -180 then it's rotating as -270.
Please help me on this problem, how can I rotate the image in iOS.
I need to rotate image as -90, -180, -270, -360(original).
↧
Page break in html doesn't work as expected when I print the html with Print API in Expo (iOS)
I tried to add page break to an html and print the html using Expo Print API in my Expo app.
<html>
<body>
<h1>Page 1</h1>
<div class="pagebreak"></div>
<h1>Page 2</h1>
<div class="pagebreak"></div>
<h1>Page 3</h1>
<div class="pagebreak"></div>
</body>
<style>
@page print {
.pagebreak { break-before: page; }
}
@media print {
.pagebreak { break-before: page; }
}
@page print {
.pagebreak { page-break-before: always; }
}
@media print {
.pagebreak { break-before: always; }
}
</style>
</html>
However in iOS, none of these styles work.
But one of them work in android. Keep below style only,
@media print {
.pagebreak { break-before: page; }
}
then pick android mode in expo snack, then we find the expected page break.
The reproducible example: Expo snack example. I care about iOS mode only, so no need to worry about android or web.
Note: the question is similar to How to avoid page breaks inside content sections in output PDF generated from HTML using Expo.printToFileAsync on iOS but that question does not provide a reproducible example and its description contains some redundant information. That's why I create a new question here.
↧