Develop Reference

Layout Animation does not work on Android even with UIManager experimental settings

I've been trying to implement LayoutAnimation to animate the insertion and deletion of items from scrollView. I've added the below code for the same.
import { LayoutAnimation, NativeModules } from 'react-native';
// Animation setup for android
const { UIManager } = NativeModules;
UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);
to set the layout animation
// Animate the add or removal of shortlisted Rail
useEffect(
() => LayoutAnimation.configureNext({ ...LayoutAnimation.Presets.easeInEaseOut, duration: 500 }),
[shortlistItems],
);
Can anyone help me with this? why is this not working in android?
I've been following this documentation : https://reactnative.dev/docs/layoutanimation
NB : This works great in iOS without any issue.

I used Reanimated to overcome this. Now the application works really great.
REF 1 : https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/layout_animations/
REF 2 : https://youtu.be/6UXfS6FI674

I found the code mentioned here works better on Android:
https://github.com/facebook/react-native/issues/13207
LayoutAnimation.configureNext({
duration: 300,
create: {
type: LayoutAnimation.Types.easeInEaseOut,
property: LayoutAnimation.Properties.opacity,
},
update: { type: LayoutAnimation.Types.easeInEaseOut },
});
Apparently there is some issue with the delete animation

Accessing android view in Nativescript

I'm trying to use a loader-plugin for nativescript and run into an error that says:
Error creating Loading Indicator Pop Over: Cannot read property 'drawable' of undefined
It seems that the error comes from using android.view.View in the options for the loader.
There's not much additional information about this error, but from my experience with mobile apps I'd say that this error occurs because the view hasn't loaded, yet.
I tried to apply a timeout, move the call around (from onNavigatingTo to onPageLoad), nothing helped.
Here's the code I'm using:
const options = {
message: "Daten werden geladen…",
details: "Bitte warten",
progress: 0.65,
margin: 10,
dimBackground: true,
color: "#fff", // color of indicator and labels
// background box around indicator
// hideBezel will override this if true
backgroundColor: "black",
userInteractionEnabled: false, // default true. Set false so that the touches will fall through it.
hideBezel: true, // default false, can hide the surrounding bezel
mode: Mode.AnnularDeterminate, // see options below
android: {
view: android.view.View, // Target view to show on top of (Defaults to entire window)
cancelable: true,
cancelListener: function (dialog) {
console.log("Loading cancelled");
}
},
ios: {
view: UIView, // Target view to show on top of (Defaults to entire window)
}
};
loader.show(options);
Nativescript 7.x using Javascript
Any ideas?

First of all, I don't like using platform-specific code like android.view.View or UIView without appropriate isIOS/isAndroid wrappers.
So I'd advise to use this.page.nativeView or this.page.getViewById('someIdHere').nativeView instead.
Adding zero milliseconds timeout is also a good practice. Just to be sure that page content is available.
Would be great if you could provide me some small example, so I could check on my side

memory problems on Titanium app

I'm developing an app in Titanium that needs to work on android and IOS, but I'm getting some memory problems.
In my app.js file I have this:
var win = Ti.UI.createWindow({
backgroundColor : 'white',
url : 'Home.js'
});
win.open();
Ti.App.View = [];
The Ti.App.View array is tu keep a reference to all my container views along my project so I can close them or check if they are already visible.
Then in my Home.js file I have some buttons to open some views. Ex:
var view = Ti.UI.createView({
height : deviceHeight,
width : deviceWidth,
backgroundColor : 'white'
});
Ti.UI.currentWindow.add(view);
var viewMenu = Ti.UI.createView({
layout : 'vertical',
width : deviceWidth * 0.20,
backgroundColor : 'transparent',
});
view.add(viewMenu);
viewMenu.addEventListener('click', function() {
var Favorites = require("Eventos");
Events.AddLayout();
});
This is the way how I add a new layout to the same window.
Then on my Events.js file I have a function like this and a global event :
exports.AddLayout = function(e) {
//adding all my layout.....
}
Ti.App.addEventListener('Update', function() {
// due something in hear
});
My question is how can I remove all Ti.UI objects created in the AddLayout function from memory when I press back button? And how can I remove the global event created by the Events.js file?
I have tried to reference te container view to null but it has not solved my problem.

Have you considered developing this with Alloy? It uses a commonJS approach and would remove the need to use Global events like this and structure the app in a way that's easier to represent views, open and destroy views etc.
If not, try to avoid using Global Event listeners -- typically there's no need to use these and they'll end up causing all kinds of memory leaks.
This is a great video on the subject:
Your Apps Are Leaking
Hope this helps!

React native Android VerticalDownSwipeJump bug

I use the VerticalDownSwipeJump when rendering a new scene in my React Native project. New scenes are supposed to come into view from above, pushing the current scene out of view.
On iOS this works as expected, on Android however the new scene being rendered comes into view from the above AND the right side as well.
Not sure why this is the case on android and not on iOS...
I haven't found any reports of this issue on SO or the React Native Github.
Any clues why this is happening?

This is quite old question, but maybe somebody will have the same problem. First of all, You can customize this view. The animations are defined here:
node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfig.js
Below steps which I have made:
1.
I've created my own object:
var FromTheRightCustom = {
opacity: {
value: 1.0,
type: 'constant',
},
scaleX: {
value: 1,
type: 'constant',
},
scaleY: {
value: 1,
type: 'constant',
},
};
I've replaced FromTheRight to FromTheRightCustom in two places:
i)
var FromTheDown = {
...FromTheRightCustom,
ii)
var FromTheTop = {
...FromTheRightCustom,
The only difference, that in Android you will have empty space made by StatusBar. This can be fix e.g. by backgroundColor of navigator (sceneStyle).

Sencha touch + phonegap. Dataview render on android 4.0

I'm stuck with android 4.0.3 problem. When my app is loaded dataview should appear(on the main page). But there is an empty space until I tap this space. After tap everything is ok. The same applies to the list and nested list view. Just load app, then empty screen and after tap - no problem. Everything is ok on iPhone or elder android versions.
Maybe someone's faced with the same problem?
Dataview code(nothing special):
xtype: 'dataview',
itemTpl: '<div class="judge-list-item"><tpl if="img"><img src="{img}"/></tpl><small>{description}</small><h4>{title}</h4></div>',
scrollable: false,
styleHtmlContent: true,
listeners: {
initialize: function () {
...
},
itemtap: function (dataview, indexx, target, record, eOpts) {
...
}
}

Try:
Ext.defer(function() {
myDataview.refresh();
}, 50);