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

React-navigation touches sometimes don't work

I'm hoping this is a known problem as I can't provide much to go on to get help solving it.
I'm using react-navigation for my app with the following setup:
AppContainer
Splash Screen
Setup Screen (A stack navigator)
Main screen (A stack navigator)
When my app starts it goes to the splash screen which decides if this is the first time running or not and depending on this decision calls this.props.navigation.navigate() with either main screen or setup screen.
So far this all works and is fairly standard.
When my app is launched for the first time the user is sent to the setup screen where they navigate through a series of screens entering data and selecting a next button to proceed to the next screen. This is where the problem occur. My first screen simply has some text and a next button (which is a regular button component) which when clicked calls this.props.navigation.push('nextviewname', {data: data}) to move to the next view.
The next view contains a textinput as well as back and next buttons which is where I'm having problems. When I reach this screen after freshly installing a release version of my app onto my Android X phone none of the inputs work. I can't:
Click next of back
Click the back arrow in the top left that is part of the header
Click the text input (the cursor does briefly show up in the text input but the keyboard never appears)
Click the hardware back key
On very rare occasions some of the above does work (e.g. the text input will sometimes work) and sometimes I'll even make it to the next step of my setup but it's rare that I make it all the way through
Weirdly this all works when I'm debugging my app on my phone.
Update: I've just tested on an Android 9 emulator and I'm getting the same issue.
Update 2: This is getting weird, when the app is in a broken state I can still bring up the react native debug menu however when I click Toggle Inspector nothing happens (i.e. I don't get the inspector UI). It's looking like this is somehow breaking everything.
Has anyone seen/solved this issue before? At the moment it's effectively made my app useless.
Update 3: Some code to hopefully make things clearer:
const SetupUser = createStackNavigator(
{
SetupUser: WelcomeScreen,
SetupName: UserName,
SetupCurrentWeight: CurrentWeight,
SetupGoalWeight: GoalWeight,
SetupGoalDate: GoalDate,
Summary: Summary,
LogWeight: LogWeight,
},
{
defaultNavigationOptions: {
headerStyle: {
backgroundColor: '#001830',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
},
},
);
const MainApp = createStackNavigator(
{
LogWeight: LogWeight,
LogWeightSummary: LogWeightSummary,
},
{
defaultNavigationOptions: {
headerStyle: {
backgroundColor: '#001830',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
},
},
);
export default createAppContainer(
createSwitchNavigator(
{
MainApp: MainApp,
SplashScreen: SplashScreen,
SetupUser: SetupUser,
},
{
initialRouteName: 'SplashScreen',
},
),
);
In getting this code snippit together (I've removed the tab navigator as the error is still there even without it) I think I've managed to track down the source of the issue however I'm still not sure how to fix it. The first view loaded is the splash screen which looks like this:
export default class SplashScreen extends React.Component {
constructor(props) {
super(props);
GoBinder.verifyDatabase()
.then(GoBinder.getLastUser())
.then(user => {
this.props.navigation.navigate(
user.user == null ? 'SetupUser' : 'MainApp',
);
})
.catch(error => {
GoBinder.toast('Error while checking initial user state: ' + error);
});
}
render() {
return (
<View style={styles.container}>
<ActivityIndicator />
<StatusBar barStyle="default" />
</View>
);
}
}
In the above code, GoBinder.verifyDatabase() and GoBinder.getLastUser() are calls to native code which perform some database operation to get things setup and check to see if there are any existing users. I believe the issue is this.props.navigation.navigate is firing too quickly which is causing react-navigation to load the next screen but get messed up in the process.
I've tried following the suggestions in this post https://www.novemberfive.co/blog/react-performance-navigation-animations about moving blocking code into InteractionManager.runAfterInteractions under componentDidMount however this made no difference. However, it I manually trigger the move to the new screen using a button everything works correctly so its really looking like the act of programatically changing screens is messing things up.
Update 4:
Looks like I jumped the gun a bit, its still freezing up a fair bit, moving my answer into an update:
So I'm not sure if this is the best solution but I have found a workaround. I am now calling my database code in InteractionManager.runArfetInteraction() as suggested in https://www.novemberfive.co/blog/react-performance-navigation-animations. I am then calling setState with the result of the DB functions to store the result. Finally, I am using a callback on setState to trigger the actual navigation. My complete working code is:
componentDidMount() {
InteractionManager.runAfterInteractions(() => {
GoBinder.verifyDatabase()
.then(
GoBinder.getLastUser().then(user => {
this.setState(
{
user: user.user,
},
() => {
this.props.navigation.navigate(
this.state.user == null ? 'SetupUser' : 'MainApp',
);
},
);
}),
)
.catch(error => {
GoBinder.toast('Error while checking initial user state: ' + error);
});
});
}
Thanks for your help

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 2 White screen in Android WebView

I am working on the migration of a JavaScript app from Sencha Touch 1.x to Sencha Touch 2.x. It is designated to run in a WebView inside a native Android app. The app worked on Sencha Touch 1.x. Meanwhile there has been a lot of refactoring and debugging to make it run on Sencha Touch 2.x. The current Sencha Touch version being used is 2.4.2.
I did some testing in a desktop version of Firefox. It basically worked out, but testing is limited since the Sencha Touch app is highly dependent on several objects and methods provided by the native Android app via JS-interface.
Now, when it comes to running it inside the Android WebView I am facing a strange issue: After startup and rendering all I get to see is nothing but a white screen, whereas all MVC-dependencies are loaded and the launch() in Ext.application is being triggered properly. There are no JavaScript errors in the console at all and all Ext classes/objects/methods are available.
This is the basic setup of my Ext.application block:
Ext.application({
name: 'MyApp',
models: [
'TestModel',
'UserModel',
'HauptmenueModel',
/* ... */
],
controllers: [
'MyController'
],
views: [
'Benutzer',
'Startseite',
/* ... */
],
stores: [
'TestStore',
'UserStore',
'HauptmenueStore',
/* ... */
],
launch: function () {
Ext.Viewport.add(Ext.create('MyApp.view.Startseite'));
console.log(document.body.innerHTML.length);
}
});
The views (e. g. the MyApp.view.Startseite view) are defined quite conventional:
Ext.define('MyApp.view.Startseite', {
extend: 'Ext.Panel',
config: {
id: 'Startseite',
layout: 'card',
items: [
/* ... */
]
},
/* ... */
});
What is interesting: Sencha Touch does indeed generate a lot of HTML content depending on the view I am loading via Ext.Viewport.add(), which I can deduce from the innerHTML.length I am logging. But nothing shows up in the WebView. The size consequently changes if I create a different view and load it via Ext.Viewport.add() but the viewport remains white.
What could be the reason for this? I am also very thankful for any tips on debugging this or somehow isolating this issue.

A possible reason for this could be the WebView’s layout itself. Please check the layout height of the WebView. Setting it to MATCH_PARENT should do the job.
It is recommended to set the WebView layout height to a fixed value or
to MATCH_PARENT instead of using WRAP_CONTENT.
See the Layout size section here:
http://developer.android.com/reference/android/webkit/WebView.html

Sencha Touch App freeze when multitouch / Android

I built a sencha touch (2.1.0) app and tested it on my Samsung Galaxy S2 (Android 4.0.3).
Once I did that with the native build command of snecha cmd and another I wrapped it with phonegap.
Both times I've got a freeze when I touch the screen with two fingers at the same time.
I cannot press a button or scroll anymore.
Has anyone a solution for that problem?
I also read the post in the Sencha forum (http://www.sencha.com/forum/showthread.php?249581-Multi-touch-and-phonegap), but that did not work for me or I'm doing something wrong.
Any help would be appreciable.

I recently came across this problem and visited the Sencha Forum link you mentioned and implemented it in my code which achieve the following.
1. With the fix incorporated app will never freeze with simultaneous tap.
2. You will have to tap somewhere on the screen one more time, after you simultaneously tapped at two or more points earlier.
Note: The issue is reproducible only with android 4.0.x and Sencha 2.1.
A big thanks to TROELS from Sencha Forum
In your app.js place the if condition outside your Ext.application as shown below
Ext.application({
name:xyz
requires:[abc]
//other stuffs
});
if(Ext.os.is.Android && Ext.os.version.equals(4.0)) {
Ext.define('app.overrides.TouchGesture', {
override: 'Ext.event.publisher.TouchGesture',
reset: function(e){
if(Ext.os.version.equals(4.0) && this.currentTouchesCount > 0){
e.changedTouches = Ext.Object.getValues(this.currentTouches);
this.onTouchEnd(e);
}
}
});
window.orgPinchEndMethod = Ext.event.recognizer.Pinch.prototype.end;
Ext.define('app.overrides.Pinch', {
override: 'Ext.event.recognizer.Pinch',
end: function(e){
var wasTracking = this.isTracking,
result = window.orgPinchEndMethod.apply(this, arguments);
if(wasTracking){
this._resetDetection(e);
}
return result;
},
_resetDetection: function(e){
var tg = Ext.event.Dispatcher.getInstance().getPublishers().touchGesture;
setTimeout(function(){
tg.reset(e);
}, 0);
}
});
}