How to disable iOS scrollbar bounce on RadListView? - nativescript

I used a RadListView in my Nativescript Vue application, but I can't disable the scroll bounce on iOS. I tried the following, but it doesn't work:
// XML
<RadListView for="(thread, index) in threads" layout="linear" #loaded="listViewLoaded">
...
// TypeScript
methods: {
listViewLoaded: function(args) {
if (args.object.ios) {
args.object.bounces = false;
}
}
}
What am I doing wrong?

The RadListView has the bounces property under the CollectionView instance instead of directly on the args.object.ios.
methods: {
listViewLoaded: function(args) {
if (args.object.ios) {
args.object.ios.collectionView.bounces = false;
}
}
}

Related

How do I make my own window frame in egui (eframe) Rust

Here is how I start my app and remove the window frame:
let app = RustClicker::default();
let mut native_options = eframe::NativeOptions::default();
native_options.decorated = false; // I remove window frame here
eframe::run_native(Box::new(app), native_options);
I made my own top-panel like this:
egui::TopBottomPanel::top("decoration").show(ctx, |ui| {
egui::menu::bar(ui, |ui| {
ui.with_layout(egui::Layout::left_to_right(), |ui| {
ui.label("🖱");
});
ui.with_layout(egui::Layout::right_to_left(), |ui| {
if ui.button("🗙").clicked() {
frame.quit();
}
let change_theme = ui.button("🎨");
if change_theme.clicked() {
if self.dark_theme {
self.dark_theme = false;
}
else {
self.dark_theme = true;
}
}
});
});
});
But I can't move it with holding moue button on, TopPanel is there anyway to fix this?
Found an example https://github.com/emilk/egui/tree/master/examples/custom_window_frame this works and the corners are also rounded

SwiftuUI NavigationLink inside touchBar

I'm trying to create NavigationLink in MacBook touchBar with help of SwiftUI. Actually with my piece of code, the button is shown in touchbar, but unfortunately the link doesn't work.
NavigationView {
.touchBar {
NavigationLink(destination: BookView()) {
Text("GoToBook")
}
}
}
struct BookView: View {
var body: some View {
Text("Hello")
}
}
Try instead with Button in touchBar activating NavigationLink programmatically, like below
#State private var isActive = false
...
// below in body
NavigationView {
SomeView() // << your view here
.background(NavigationLink(destination: BookView(), isActive: $isActive) {
EmptyView()
} // hidden link
)
.touchBar {
Button("GoToBook") { self.isActive.toggle() } // activate link
}
}

How could I create gaze buttons using React VR?

I'm writing an VR application using React VR and would make gaze buttons with a progress bar (or something) to show the user how long he must watch to that button. How could I do that?
I'm thinking to use this pseudocode (may be there are some bug's inside this code):
constructor(props) {
super(props);
this.state = {
watchTime: 3,
progress: 0,
watching: true
};
}
render() {
return (
<VrButton onEnter={ () => this.animateProgress() }
onExit={ () => this.stopProgress() }
onClick={ ()=> this.click() }></VrButton>
);
}
animateProgress() {
this.setState({watching: true});
while (this.state.watchTime >== this.state.progress && this.state.watching === true) {
// after a timeout of one second add 1 to `this.state.progress`
}
this.click();
}
stopProgress() {
this.setState({
progress: 0,
watching: false
});
}
click() {
// Handels the click event
}
Is there an easier way to do this?
You need to add some things to your project.
Install a simple raycaster using
npm install --save simple-raycaster
Inside vr/client.js add this code:
import { VRInstance } from "react-vr-web";
import * as SimpleRaycaster from "simple-raycaster";
function init(bundle, parent, options) {
const vr = new VRInstance(bundle, "librarytests", parent, {
raycasters: [
SimpleRaycaster // Add SimpleRaycaster to the options
],
cursorVisibility: "auto", // Add cursorVisibility
...options
});
vr.start();
return vr;
}
window.ReactVR = { init };
Source: npm simple-raycaster
Inside the index.vr.js use this code:
constructor(props) {
super(props);
this.click = this.click.bind(this); // make sure this.click is in the right context when the timeout is called
}
render() {
return (
<VrButton onEnter={ () => this.animateProgress() }
onExit={ () => this.stopProgress() }
onClick={ ()=> this.click() }></VrButton>
);
}
animateProgress() {
this.timeout = this.setTimeout(this.click, 1000); // or however many milliseconds you want to wait
// begin animation
}
stopProgress() {
clearTimeout(this.timeout);
this.timeout = null;
// end animation
}
click() {
// ...
}
Source: andrewimm at GitHub facebook/react-vr

How To apply css properties in react native by using refs dynamically

here is my instance
I need to get the login div and hide it using refs
How to achieve this ?
var Text=React.createClass({
componentDidMount:function(){
console.log(this.refs.login.getDOMNode());
},
render:function(){
return (<View ref="login">
<Text>Abc</Text>
<Text>123</Text>
</View>)
}
})`
You could do something like this:
render: function() {
if(this.props.show) {
return (<View ref="login">
<Text>Abc</Text>
<Text>123</Text>
</View>)
} else {
return null;
}
}

How to stop animation when listview is reloading in iOS xamarin form?

My app has some strange animation when my list view is reloading data and it only happens to iOS. It looks like a new cell insert into the list view every times it reloads.
How can I stop that from happening?
Do I need to work on the custom render to solve this case? and how can I do it?
The code to reload data:
protected override void OnAppearing()
{
base.OnAppearing();
if (App.AuthenticationContext == null)
{
DialogHelper.ShowLoading("");
if (!App.Reconnect())
{
Navigation.PushAsync(new LoginPage(new LoginViewModel()));
DialogHelper.HideLoading();
return;
}
Device.BeginInvokeOnMainThread(async () =>
{
await Task.Run(() =>
{
ReloadData();
});
DialogHelper.HideLoading();
});
}
ViewModel.CurrentAuthenticationContext = App.AuthenticationContext;
}

Resources