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).
Related
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
I have a project that simply displays a website. My code is:
function pencere() {
var self = Ti.UI.createView({ width:"100%", height:"100%" });
var webPencere = Ti.UI.createWebView({ left:1, right:1, top:1, bottom:1, url:"http://www.radyobasaksehir.com" });
self.add(webPencere);
return self;
}
My friend told me that the Android browser doesn't support the new CSS and HTML codes. I don't know the exact meaning of these but I think I need to revise my code but I couldn't figure that out.
The problem is related to chromium WebView being used Android 4.4.
There is developed a module for solving this. But, I found advice here in another topic
Just add borderRadius property with a minimum value. Sample code:
var webview = Ti.UI.createWebView({url: '..', borderRadius: 1});
I have a quite typical problem of laggy animations during component rendering. However, as far as I understand, the common solutions I found in the documentation of react-native cannot be applied to my use case.
Let me explain: I have a tab pager implemented with (i) a ViewPagerAndroid containing a set of pages and (ii) a tab bar composed of a set of touchables and a line (Animated.View) that moves (translateX transform) when the pager X-scroll value changes.
Each page component follows the same logic:
when componentDidMount is called, it triggers a network call for loading data
once the data are loaded, the state is updated with the new data and the component is rerendered
the render method simply returns a FlatList that displays the loaded data (20 items only)
My problem is: if the user clicks on a tab while the pages are rendered, the animations are horribly laggy. Given that the animation and the rerendering are performed on the UI thread, I'm guessing that they are competing in some way.
I eliminated various causes, but wasn't able to find a proper solution to keep the animation fluid:
I replaced the network call with hardcoded data and a simple timeout; the UI is still laggy when the pages are rerendered
I tried to improve the rerendering time, but the FlatList is quite slow even using pure components.
I tried in release mode and there is no differences
The problem occurs also on a physical device (Nexus 5X, which is quite powerful)
It's not specific to my implementation, I tried github.com/skv-headless/react-native-scrollable-tab-view and github.com/zbtang/React-Native-ViewPager
I know about InteractionManager and TimerMixin.requestAnimationFrame, but it's useless in my case: when the rendering is started, the user can still click on the tab bar buttons and it's not an option to wait the end of the render (laggy).
I uploaded my code in a github repository (https://github.com/benjaminbillet/tabbartest), in case you want to have more details. It's quite straightforward, but don't hesitate to ask me more details.
Some additional information:
react-native 0.46.4
node 8.2.0
npm 5.3.0
tried only on Android.
Do you think I should fill a bug report?
Thanks a lot.
EDIT-1 Here is a simplified version of the animation code:
render() {
const underlineStyle = {
position: 'absolute',
left: 0,
bottom: 0,
width: this.tabWidth,
height: underlineHeight,
backgroundColor: underlineColor,
transform: [{
translateX: this.pagerScrollX.interpolate({
inputRange: [0, 1],
outputRange: [0, this.tabWidth],
}),
}],
};
return (
<View style={[styles.tabs, style]}>
...
<Animated.View style={underlineStyle} />
</View>
);
}
onPageScroll(offset) {
const { offset, position } = e.nativeEvent;
this.pagerScrollX.setValue(position + offset);
}
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);
I am new to sencha touch mvc framework and i am using version1.1.1 on android os.I have created controller and view in my demo app.I am getting error in my app.js and viewport.js.
Here's app.js:-
Ext.regApplication({
name: 'MyApp',
defaultUrl: 'Home/index',
launch: function()
{
this.viewport = new MyApp.view.viewport();
},
});
and here's viewport.js:-
MyApp.view.viewport = Ext.extend(Ext.Panel,{
fullscreen: 'true',
layout: 'card',
cardSwitchAnimation: 'slide',
dockedItems: [
{
xtype: 'toolbar',
title: 'MvcTouch',
},
],
});
Now my problem is that when i run my app with above pieces of codes i am getting the following errors.
1) TypeError: Result of expression 'MyApp.view' [undefined] is not an object. at file:///android_asset/www/app/view/viewport.js:9
2) TypeError: Result of expression 'MyApp.view' [undefined] is not an object. at file:///android_asset/www/app/app.js:6
I write the code according to the standards explained here by Sencha's core developer .But when i change the line
MyApp.view.viewport = Ext.extend(Ext.Panel,{
to
viewport = Ext.extend(Ext.Panel,{ in viewport.js
and change the line
this.viewport = new MyApp.view.viewport();
to
this.viewport = new viewport(); in app.js
the app works well.Now I dont understand about the code that it works well when i am not using standard conventions of sencha and does not work when i used the standard convention.
Can anybody tell me what's happening here.Any help would be highly appreciated.Thanx in advance.
In Sencha Touch 1.1.1, the app views are defined with "views" not "view". So, try this:
MyApp.views.viewport = Ext.extend(Ext.Panel,{
This should work fine then.