React Native - "ProgressBarAndroid is deprecated. Use ActivityIndicator instead" - android

I'm running into the error: "ProgressBarAndroid is deprecated. Use ActivityIndicator instead" but when I go to the docs, it doesn't look like it's actually deprecated.
I'm using
react-native-cli: 2.0.1
react-native: 0.40.0
Here's my current related code:
import React from 'react';
import { ProgressViewIOS, ProgressBarAndroid, Platform } from 'react-native';
export default function ProgressBar(props) {
if(Platform.OS === 'ios'){
return (
<ProgressViewIOS
progress={props.progress}
style={{height: 3}}
progressViewStyle={'bar'}
progressTintColor={props.progressTintColor}
/>
)
}else if(Platform.OS === 'android'){
return <ProgressBarAndroid styleAttr="Horizontal" progress={props.progress} />
}else{
console.log('NO PROGRESS')
return null
}
}
Even though I specify styleAttr="Horizontal" (which I believe should set indeterminate as false) my progress bar in android is indeterminate (it just keeps moving). This is not the same functionality I see on iOS. iOS works as expected.
Another error says "You are manually calling a React.PropType validation function for indeterminate prop on ProgressBarAndroid, however as you see in my code that is not the case. I also don't believe there is a third party doing this as the project is small and I haven't seen this error until I implemented as shown above:
Any help appreciated.

If it's warning you that it's deprecated why not just use the API its suggesting? What use case do you have that you feel it's necessary to use ProgressViewIOS over the component that it's being replaced by? (Especially since ActivityIndciator works on both iOS and Android)
To answer your question it may not be deprecated in the docs, but it is warning you that it has been deprecated in favor of the new API. You can continue to use it if you wish, but you won't get any updates and it may be removed in future versions.

Related

How to get statusbar insets for android app?

I'm trying to make my android app "edge to edge" (make statusbar and navbar translucent). I've read many articles online about this topic but since so many methods and classes are deprecated now, I tried to write it using new ways. The app runs Ok on my physical Samsung phone running android 11, but it gives me runtime error for getting insets while launching the app on my android studio emulator running android 10. Take a look at the code and error:
code (onCreateView() in mainFragment.kt):
binding.appbar.setOnApplyWindowInsetsListener { view, windowInsets ->
val insets = windowInsets.getInsets(WindowInsets.Type.statusBars())
view.updatePadding(top = insets.top)
windowInsets
}
error:
java.lang.NoSuchMethodError: No static method statusBars()I in class Landroid/view/WindowInsets$Type; or its super classes (declaration of 'android.view.WindowInsets$Type' appears in /system/framework/framework.jar!classes3.dex)
.MainFragment$onCreateView$1.onApplyWindowInsets(MainFragment.kt:44)
update: There is also no problem with an emulator running android 11! Now I think I had to do the job differently for lower APIs, but how exactly?!
Try to use the same method that you're using from the androidX lib.
ViewCompat.setOnApplyWindowInsetsListener(view, listener)

Android status bar show in Unty

I'm triyng to show the status bar in an Android phone using Unity. I have try this code:
void Start() {
this.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
}
But an error appear;
Assets/Scenes/Control/control.cs(15,34): error CS0103: The name 'WindowManager' does not exist in the current context
Does I need to call or import another package? Some could help me with this detail. Thanks in advance.
You cannot use Android Java functions directly in Unity. You can only use whats available in Unity C Sharp. Unity doesn’t understand the method. Suggested workaround, use a ‘Slider’ UI element and manipulate it in a custom c sharp script. Complicated workaround create a custom Unity Plugin which calls the native Android method (possible but complex).

'LikeView' has no propType 'RCTFBLikeView.onLayout' of native type 'boolean' if you haven't changed this

LikeView has no propType for native prop RCTFBLikeView.onLayout of native type boolean
If you haven't changed this prop yourself, this usually means that your versions of the native code and JavaScript code are out of sync. Updating both should make this error go away.
Not sure why I am getting this error. I'm not using LikeView at all in the android app. I've tried running npm start --reset-cache.
Also iOS version of the app runs no problem. This only occurs for android.
Any suggestions welcomed.
Thanks!
I figured out that the problem is (as RN points out) a mismatch between the native props and the JS ones on the props that every view uses. Namely:
renderToHardwareTextureAndroid
onLayout
accessibilityLiveRegion
accessibilityComponentType
importantForAccessibility
accessibilityLabel
testID
Since I am not using any of the views that the package uses, namely:
FBLikeView
FBLoginButton
FBSendButton
FBShareButton
I tried to set this props as 'native only', so that they are not bound to the JavaScript side. In every component (in the example, FBShareButton.js), I replaced:
const RCTFBShareButton = requireNativeComponent(
'RCTFBShareButton',
ShareButton,
);
with
const RCTFBShareButton = requireNativeComponent(
'RCTFBShareButton',
ShareButton,
{
nativeOnly: {
onChange: true,
onLayout: true,
testID: true,
importantForAccessibility: true,
accessibilityLiveRegion: true,
accessibilityComponentType: true,
accessibilityLabel: true,
renderToHardwareTextureAndroid: true,
}
},
);
I am now going to check if the views are getting rendered properly and edit my post later, but if you just want to be able to compile your app in order to continue development (as it is my case at the moment), that should let you do so.
Edit
I successfully rendered the LoginButton component using the example in the README with my changes.
Edit 2
I made a pull request with my changes to the package. I don't like the solution, but it might raise FB's attention. In the meantime, you can just use my fork. In your package.json, just replace the fbsdk line with this:
"react-native-fbsdk": "git+https://github.com/motius/react-native-fbsdk.git#fix-views"
This other pull request might be a better solution, actually.
Similar to the solution suggested by #martinarroyo, I figured that it has to do with some components that are not synced between the native code and the js code.
If you are not using these components, instead of adding the nativeOnly property in every js file you use it, I commented out the exports from the react-native-fbsdk index.js as follows:
//native components
// exports.LikeView = require('./FBLikeView');
// exports.LoginButton = require('./FBLoginButton');
// exports.SendButton = require('./FBSendButton');
// exports.ShareButton = require('./FBShareButton');
Obviously this is just a workaround but that should get you through that error
You can downgrade react-native-fbsdk to 0.5.1 to avoid this issue until a fix has been merged into a new version.
So after countless experimentation and banging my head on the table, i think the solution was the versioning of the dependency.
Here's a list of things I attempted and the one I think that resolved the issue is marked with an * because I'm not 100% sure if it was this step that resolved it.
removing node_modules folder and reinstalling it.
doing the react-native-git-upgrade as #matt suggested
reinstalled react-native-fbsdk multiple times following the instructions and double checking the code.
changing the buildToolsVersion & targetSdkVersion to 25.
5**. ultimately running react-native uninstall react-native-fbsdk followed by react-native install react-native-fbsdk#0.5.0.
Note* number 5 was attempted throughout the past two days..yet only now it worked...So I don't know what black magic it is that caused it to work just now...
The issue with number 5 is that prior to yesterday the fbsdk dependency version was 0.5.0 and as of yesterday, it was upgraded to 0.6.0. SO I am not sure why even though I reinstalled it yesterday too, it did not fix the bug.
If someone who is more familiar with this can provide an explanation as to why this occurred I would be inclined to learn.

Status Bar Hide Cordova

If I remove the status bar, every time I open the keyboard (
or a notification arrives) there is a bug.
App.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.StatusBar) {
StatusBar.hide();
}
});
});
Any suggestion? Thank you!
Updated:
Actually, there is a fix for cordova-plugin-statusbar that has been committed on github and should land in version 2.1.4+ (i.e. you don't need an additional plugin like my original answer stated). To get the latest cordova-plugin-statusbar now, type
cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git
The statusbar should now stay hidden when interacting with inputs, keyboard etc.
Original Answer:
I fixed it with the plugin cordova-plugin-fullscreen
cordova plugin add cordova-plugin-fullscreen
Then, after deviceready:
StatusBar.hide();
if (typeof AndroidFullScreen !== 'undefined') { // Fullscreen plugin exists ?
function errorFunction(error) { console.error(error); }
AndroidFullScreen.isSupported(AndroidFullScreen.immersiveMode, errorFunction);
}
ImmersiveMode keeps it hidden while interacting with inputs, keyboard etc.
Note: as per the cordova-plugin-fullscreen docs, this method is only supported on Android 4.4+. There is also a 'lean mode' for Android 4.0+, but this shows the status bar while interacting (not ideal)

Phonegap window.open does not work on Android

I have an iOS/Android app built on cordova 2.6 and jqm 1.3. I need to open a link to an external website after the user clicks on a button. The code I am using is:
var ref = window.open('http://google.com','_self','location=yes');
ref.addEventListener('loadstart',function(event) {
console.log('load started');
});
ref.addEventListener('loadstop',function(event) {
console.log('load stopped');
});
ref.addEventListener('loaderror',function(event) {
console.log('load error = ' + JSON.stringify(event));
});
On iOS everything performs like I would expect. A new browser window opens with the google website loaded. But I cannot get anything to to load in Android. When I click on the button, nothing happens. I have put in console statements before and after the window.open, so I know the code is at least being executed.
My config.xml should be wide open for white listed sites:
<access origin=".*"/>;
I have tested on a Nexus 7 (android 4.2) and an android 2.2 emulator with the same results on both.
Does anyone know why window.open would not be firing correctly on android?
It looked like it was a problem with 2.6 loading plugins on Android. I upgraded to 2.7 and everything started to work.
Perhaps it's a solution to use the ChildBrowser plugin? This gives you a bit more control over the operation itself, while still preserving platform compatibility between iOS and Android.
In most cases, I use something like the following snippet to use the childbrowser to display an external page.
function openBrowser(url) {
// determine if the childbrowser plugin is available
var useChildBrowser = ('plugins' in window && window.plugins.childBrowser);
if (useChildBrowser) {
popup = window.plugins.childBrowser;
popup.showWebPage(url, { showLocationBar: false, showAddress: false });
} else {
popup = window.open(url, 'Share', "['width=600px', 'height=400px', 'resizable=0', 'fullscreen=yes']");
}
}
Note that this falls back to using window.open if the ChildBrowser plugin isn't available, so you won't break anything else with this. Could be worth a shot, perhaps?

Categories

Resources