Im working on my mobile app, and trying to code it with nativescript,
but Im having a problem I want to animate view of item, in listView ...
Here is my code so far:
let page = args.object;
const radList = page.getViewById('myList');
const item = radList.getItemAtIndex(0);
const itemView = radList.getViewForItem(item);
But my itemView is always undefined, also I tried with getChildAt() method but it doesnt work...
I dont want to use, itemDeleteAnimation because I want to use my own animation
I think you are hitting a timing issue, which can be resolved by using setTimeout. Another possibility (if applicable) is to use the itemLoading event to get a reference to the view via ListViewEventData
Here is an example of both:
TypeScript
export function onRadLoaded(args) {
const radList = <RadListView>args.object;
setTimeout(() => {
const item = radList.getItemAtIndex(0);
const view = radList.getViewForItem(item);
console.log(view);
}, 300);
}
export function onItemLoading(args: ListViewEventData) {
console.log("args.view: ", args.view);
console.log("args.data: ", args.data);
console.log("args.index: ", args.index);
}
Related
I am using FlatList component of ReactNative and it is working perfectly. Now i want to scroll it to bottom whenever user enters new element/comment.
<FlatList style={styles.commentList}
data={commentList}
keyExtractor={(item, index) => index}
renderItem={this.renderRow.bind(this)}
/>
Now whenever user enters new comment, commentList will be updated and FlatList also gets refresh, but i want to be scroll to the bottom so that user can read latest comment posted.
Check this out:
Its not my solution, but i got working using this method.
https://exp.host/#xavieramoros/snack-SyN4FJikz
source code:
https://github.com/xavieramoros/flatlist-initialScrollIndexIssue/blob/master/App.js
Expo 22 - RN 0.49
A great thanks to https://expo.io/#xavieramoros
Edited: If you just want to scroll to bottom then scrollToEnd (https://facebook.github.io/react-native/docs/flatlist.html#scrolltoend) is available in new RN.
use it like
<FlatList
ref={ (ref) => { this.flatList = ref; }}
data={this.data}
renderItem={ this.renderItem }
keyExtractor={ this.keyExtractor}
onScroll={ this.scrollToEnd}
/>
......
and in your method
scrollToEnd = () => {
const wait = new Promise((resolve) => setTimeout(resolve, 0));
wait.then( () => {
this.flatList.scrollToEnd({ animated: true });
});
}
Try FlatList with inverted prop as true. (might as well reverse the data array)
Since flatlist is inverted, the new data is added on the first position, and because of this update flatlist automatically scrolls to first position, which in your case is the bottom location
I am trying to update the background color of a Label inside a TableViewRow. I am using a View/Controller for the rows, creating them in code and appending them as an array to the TableView. Using onClick of the TableViewRow and Label.setBackgroundColor() inside the TableViewRow controller.
ExampleRow.xml
<TableViewRow id="exampleRow" class="exampleClass" onClick="exampleClick">
<Label id="exampleLabel" text="test" />
</TableViewRow>
ExampleRow.js
var test = 1;
function exampleClick(e) {
if(test == 1) {
$.exampleLabel.setBackgroundColor('#0f0');
test = 0;
} else {
$.exampleLabel.setBackgroundColor('#fff');
test = 1;
}
}
ExamplePage.xml
<TableView id="exampleTable" />
ExamplePage.js
var tableViewRows = [];
for(var i = 0; i < 5; i++) {
tableViewRows.push(
Alloy.createController('exampleRow', {}).getView()
);
}
$.exampleTable.setData(tableViewRows);
The problem is this does not work on the first page as soon as the app loads. If I scroll the TableViewRows outside of the screen and back in, the background color change works. If an alert box is popped up the background change works. But after first app load, the background color will not change. It also works if we use appendRow for each row, but this is substantially slower.
appendRow fix example:
for(var i = 0; i < 5; i++) {
$.exampleTable.appendRow(
Alloy.createController('exampleRow', {}).getView()
);
}
appending the rows individually sometimes fixes the bug (not every row), but for our list takes 5-8 seconds to display the table, rather than <1second using setData*
Example of the real app not working:
Example of the real app working:
This occurs after having an alert box displayed or scrolling the rows out and back in to the screen, or using appendRow for each row
Methods I have attempted to fix (did not fix):
using animations
removing the label then recreating and adding a new label in code
removing class from the TableViewRow
I am using Titanium SDK 5.0.2.GA and compiling on android 5.1.1.
Try to use click event of tableView instead of tableViewRow :
<TableView onClick="yourTableViewClickEvent"></TableView>
and then define what logic will be executed inside this function callback :
function yourTableViewClickEvent(e){
// access selected row
var currentSelectedRow = e.row;
// current selected Label we assume here that the row contain a label as first child (exactly what you have in your row definition
var currentLabel = currentSelectedRow.children[0]
// change label background color
currentSelectedRow.backgroundColor = "#0f0"
// You can even (i know it is no good to do that :)) test if the color is white or #0f0 like so
if(currentSelectedRow.backgroundColor == "#fff")
currentSelectedRow.backgroundColor = "#0f0"
else
currentSelectedRow.backgroundColor = "#fff"
}
I have a problem with Xamarin.Forms (version 1.2.2) on Android (Nexus 5).
The alignment of Button.Text is often not centered after performing a click.
In a short project, I figured out, that updating the UI causes the problem.
public class App
{
public static Page GetMainPage()
{
var label = new Label {
Text = "label",
};
var buttonBad = new Button {
Text = "buttonBad",
Command = new Command(() => label.Text += "1"),
};
var buttonGood = new Button {
Text = "buttonGood",
};
return new ContentPage {
Content = new StackLayout {
Children = {
buttonBad,
buttonGood,
label,
}
}
};
}
}
A click on "buttonBad" (updating the label.Text) causes the text-alignment of this button to not be centered anymore. A click on "buttonGood" does not cause the problem.
Is there a good workaround to solve this problem?
This workaround seems to be too complicated:
http://forums.xamarin.com/discussion/20608/fix-for-button-layout-bug-on-android
edit:
A programatically edit of the UI also cases the bug. Changing the label.Text in an async method after a short waiting leads the "buttonGood" to align its text wrong after a click.
edit2:
I created an example / test project on GitHub:
https://github.com/perpetual-mobile/ButtonTextAlignmentBug.git
The alignment is correct, when the StackLayout is replaced by an AbsolutLayout, but i need the StackLayout to work well.
Ok, after hours of dealing with this silly bug, I resolved it by implementing a custom renderer and overriding ChildDrawableStateChanged:
public override void ChildDrawableStateChanged(Android.Views.View child)
{
base.ChildDrawableStateChanged(child);
Control.Text = Control.Text;
}
I'm developing an app in Titanium. I've divided it in four different views to make a scrollView. I want to put another view always visible only from the second view and beyond. How can I do that?
Ther is my app.js code:
(function(e){
var principal = Ti.UI.createWindow({
backgroundColor: '#fbfbfb',
exitOnClose:true,
navBarHidden: true
}),
pantallaBienvenida = require('ui/pantallaBienvenida'),
pantallaTitular = require('ui/pantallaTitular'),
pantallaDependiente = require('ui/pantallaDependiente'),
pantallaAsistenciaMedica = require('ui/pantallaAsistenciaMedica'),
primeraPantalla = new pantallaBienvenida,
segundaPantalla = new pantallaTitular,
terceraPantalla = new pantallaDependiente,
cuartaPantalla = new pantallaAsistenciaMedica,
scrollView = Ti.UI.createScrollableView({
views:[primeraPantalla,segundaPantalla,terceraPantalla,cuartaPantalla]
});
principal.add(scrollView);
principal.open();
})();
You are using ScrollableView not ScrollView, they are very different.
If you want to show some additional info when user goes to second element of your ScrollableView you have to add new element to Window, set it's property visible = false.
Then create event listener and when dragend is fired make that view visible.
Some example code:
floatingView = require('ui/floatingview')
floatingView.visible = false;
principal.add(floatingView);
scrollView.addEventListener('dragend', function(event){
if (this.currentPage !== 0) {
floatingView.visible = true;
} else {
floatingView.visible = false;
}
});
If I have a view - myCoolView - and I'd like to change the text of a button in the view, how do I do it?
Given that I know that the button is called, say, myCoolButton, and it was added to the view in some function, and now, in a different function I have access to myCoolView, how do I change the button text?
I checked the Titanium API and I cannot see a "getter" call on a view to access anything that was added to it via the add method.
Use the "children" property, as documented.
// Create the views.
var myCoolView = Ti.UI.createView();
var myCoolButton = Ti.UI.createButton({
title: 'My Cool Button',
id: 'myButtonsID'
});
myCoolView.add(myCoolButton);
// Later, find the button.
var children = myCoolView.children;
if (children) {
for (var i = children.length - 1; i >= 0; i--) {
if (children[i].id === 'myButtonsID') {
children[i].title = 'My Updated Cool Button';
break;
}
}
}