I've got a nativescript core app and I've set some animated transitions between pages like so:
var navigationOptions={
moduleName:'views/achievement/achievement-page',
animated: true,
transition: {
name: 'slideLeft',
duration: 300,
curve: 'easeInOut'
},
context:{
id: item.id
}
}
frameModule.topmost().navigate(navigationOptions);
I've been testing in iOS simulator, an iphone 6, and on my own Android device (Samsung S9+) and the animations are quite choppy on the adroid device, but they are nice and smooth on the iphone 6 and in the sim.
I'm not sure how I should really go about troubleshooting this issue.
Related
I upgraded to iOS 14 + XCode-beta Version 12 beta 3 and from that moment React Native Image component not render an image from external URL. On Android, the Image component runs still perfectly.
Here is my code on how I calling an image.
const avatarImageUrl = Config.IMAGE_BASE_URL + this.props.data.avatar;
<Image source={{uri: avatarImageUrl}} style={styles.avatarImage}/>
And this is my Config component:
export default Config = {
API_BASE_URL: 'link-to-api',
IMAGE_BASE_URL: 'link-to-api',
// date when Realm database is updated with fresh API data and
bundled with app
BUILD_DATE: '2020-06-18',
};
And styles
avatarImage: {
flex: 3,
width: '100%',
height: '100%',
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
backgroundColor: '#cccccc',
width: "100%",
marginLeft: 0,
marginRight: 0,
},
It's there anyone who has the same problem with React Native on iOS14?
Thaks
Robert
You can try few things:
A. Use the following package to fix the issue by running:
npm install --save react-native-fix-image
npx react-native-fix-image
Then rebuild project.
Note: each time after reinstalling node_modules you'll have to run npx react-native-fix-image.
B. Upgrade react-native to V0.63.2 then rebuild the project.
I used solution A.
When I use publisher.cycleVideo() to switch cameras during a session, the video stream is always mirrored when using the rear camera. Is there any way to change the mirroring when using cycleVideo? I've tried the following code to switch the mirroring after cyclevideo to the rear camera but does nothing:
mirror=true; // Have tried with both mirror true and false
constraints = {
advanced: [{
mirror: mirror
}],
};
OT.getUserMedia().then((stream) => {
populateDeviceSources(audioSelector, 'audioInput');
populateDeviceSources(videoSelector, 'videoInput');
stream.getTracks().forEach(track => track.applyConstraints(constraints));
});
I am trying to do a simple transition using angular 5. The transition itself is working but when I try to adjust the ease-in / ease out period of the transition. My setup is based off of the angular documentation, so I am really at loss as to why the transition time isn't changing.
component.ts
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
animations: [
trigger('homeState', [
state('hide', style({
backgroundColor: '#eee',
transform: 'translateX(0%)'
})),
state('show', style({
backgroundColor: '#cfd8dc',
transform: 'translateX(100%)'
})),
transition('show => hide', animate('6000ms ease-out')),
transition('hide => show', animate('1000ms ease-in'))
])
]
})
component.html
<h1 [#homeState]="stateName">{{title}}</h1>
<button (click)="toggle()"></button>
The toggle function changes between the show and hide states. Can someone please point me in the right direction? thanks.
UPDATE:
Okay, so I have done some more digging. I downloaded the source code of the animations. The source code has the easing effect working. So i copied that code over to my project and still the ease effect is not working. But when I copied my original code over to the animations project everything works.
Your global Angular CLI version (1.7.4) is greater than your local
version (1.6.5). The local Angular CLI version is used.
Okay, I finally figured it out. I had the noop testing module as well as the regular angular animations in my file (this is my fault, I copied someone else's setup without fully understanding what I was doing). The noop is a no operation module used solely for testing.
more info:
What's the difference between BrowserAnimationsModule and NoopAnimationsModule?
Once I removed this from my app.module.ts all was good:
import { NoopAnimationsModule } from '#angular/platform-browser/animations';
I hope this helps someone down the road.
I created a tab-based Ionic 2 project and I'm using the following lifecycle hooks to define a trigger property for animations to occur when a given page loads:
ionViewDidEnter() {
this.state = 'active';
console.log(this.state);
}
ionViewWillLeave() {
this.state = 'inactive';
console.log(this.state);
}
This is what the animations looks like in the component decorator:
animations: [
trigger('focusPanel', [
state('inactive', style({
opacity: '0'
})),
state('active', style({
transform: 'translateY(-80px)',
opacity: '1'
})),
transition('* <=> active', animate('.5s ease-out'))
]),
]
This works when the app loads. I can click on a different tab and go back, and the animation works as expected.
However, if I go back a third time, while the console.log is accurate and consistent, the animations no longer play. It doesn't fade from 0 opacity, and it does not animate up based on translateY.
Any idea of what's going on? I've tried different lifecycle hooks, as well as different transition() properties in the animations above.
I am building a Rails 3.2.11 app with Flot. I want to render my Flot charts in PDFs using Prawn. My Flot charts render in the browser fine. I can create Prawn PDFs fine (though not with chart images yet).
I want to use the Flot canvas plugin to render my axes, etc. on the canvas so they are included when I Ajax the image data to the server using the .getCanvas() and .toDataURL() methods, but I can’t seem to get it to work.
I am using jquery.flot.min.js 0.8.0 and jquery.flot.canvas.min.js (no version indicated). In the Chrome console I see that both are loading.
My Coffeescript looks like this:
temp_plot = $.plot $("#barchart"), [
data: $("#barchart").data("bardata")
bars:
show: true
barWidth: (365/12)*24*60*60*1000*0.8
align: 'center'
],
xaxis:
mode: "time"
timeformat: "%b"
tickSize: [1, "month"]
yaxis:
position: 'right'
labelWidth: '40'
reserveSpace: true
canvas: true
barchart_canvas = temp_plot.getCanvas()
I am able to see the Ajax payload and it is indeed the Flot chart canvas, just without the axes, etc. I appreciate any advice. Thanks!
Just to be extra clear, code as Javascript looks like this:
var barchart_canvas, temp_plot;
temp_plot = $.plot($("#barchart"), [
{
data: $("#barchart").data("bardata"),
bars: {
show: true,
barWidth: (365 / 12) * 24 * 60 * 60 * 1000 * 0.8,
align: 'center'
}
}
], {
xaxis: {
mode: "time",
timeformat: "%b",
tickSize: [1, "month"]
},
yaxis: {
position: 'right',
labelWidth: '40',
reserveSpace: true
},
canvas: true
});
barchart_canvas = temp_plot.getCanvas();
UPDATE - SUCCESS
I updated Flot to 0.8.1 and included the jquery.flot.canvas.js file that came in the 0.8.1 .zip archive. (I was getting some strange rendering behavior using plugins from Flot 0.8.0 with jquery.flot.js 0.8.1, so watch out for that.)
Now my axes render on the canvas. Great! My thanks to the Flot gods!
Your options look okay, assuming (I'm not familiar with CoffeeScript) that last bit is supposed to be missing curly braces.
Your Flot version can't be 1.1, though; the latest is 0.8.1, and jquery.flot.canvas.min.js was introduced in 0.8.0. So you're using either the wrong version, or some Flot-derivative that may not support the canvas plugin.
Note that the canvas plugin currently only affects the axes; the legend is still rendered in HTML. Complete support for rendering everything on canvas will come in 0.9.