(https://i.stack.imgur.com/f8DyP.jpg)
<SearchBar
class="w-full rounded-full"
textFieldHintColor="#fff"
color="#fff"
textProperty="#fff"
backgroundImage="none"
v-model="search"
hint="Search..."
#submit="fetchData"/>
The documentation doesn't say anything about icons
There isn't any API to change the Icon color currently, as it's styled by the styles.xml from App_Resources.
Android uses SearchView, so you can style it like you'd do natively: https://stackoverflow.com/a/57735080
iOS uses UISearchBar, which can also be styled natively: How to change the color of the UISearchBar Icon?
searchViewLoaded(event) {
if(isAndroid) {
const searchIcon event.object.android.findViewById(androidx.appcompat.R.id.search_mag_icon);
searchIcon.setColorFilter(new Color('#ffffff').android, android.graphics.PorterDuff.Mode.SRC_IN);
} else {
// UISearchBar
event.object.ios.searchTextField.leftView?.tintColor = new Color('#ffffff').ios;
}
}
Related
I'm trying to find a way to remove the tab buttons on a element with an Angular 6 app but with no avail so far. Basically, I only want to keep the Tab contents and their swipe functionality.
Apparently there are specific android and iOS methods you can use but I'm unsure how to do that.
<TabView [(ngModel)]="tabSelectedIndex" (selectedIndexChanged)="onSelectedIndexChanged($event)" (loaded)="tabViewLoaded($event)">
<ng-container *ngFor="let article of articles" #tabView>
<StackLayout *tabItem="{title: article.id}">
<StackLayout>
<NewsDetails></NewsDetails>
</StackLayout>
</StackLayout>
</ng-container>
</TabView>
On my .ts file I can find a reference to the element like this:
#ViewChild("tabView") tabView: ElementRef;
ngAfterViewInit() {
console.dir(this.tabView.nativeElement);
}
But I have no idea what to do from now on. Any ideas? All previous questions regarding this have not worked.
Here is a sample playground link: https://play.nativescript.org/?template=play-ng&id=iK9ZTM
Use the code below with the loaded event of TabView.
onTabViewLoaded(event: EventData) {
const tabView = <TabView>event.object;
if (isIOS) {
tabView.viewController.tabBar.hidden = true;
}
if (isAndroid) {
const tabLayout = tabView.nativeViewProtected.tabLayout;
tabLayout.getLayoutParams().height = 0;
tabLayout.requestLayout();
}
}
I recently did that for a sample work I posted in Uplabs
I want my TabView bar to be the same color as my layout. There was a flat boolean added to NS to make this possible with the ActionBar, but how can I achieve this with my tab bar as well? If I set the tab-background-color property to black, I want it to actually be black, not dark grey due to the translucent property explained here: https://developer.apple.com/documentation/uikit/uitabbar/1623458-translucent?language=objc
I've found many posts/articles about solving this for the ActionBar but haven't seen anything about tabs yet
Try this on loaded event of TabView
onTabViewLoaded(args) {
const tabView = args.object;
if (tabView.ios) {
tabView.ios.tabBar.translucent = true; // false;
}
}
Is there a way i can disable scroll in webview?
For instance
<WebView rc="https://www.npmjs.com/package/nativescript-
openurl" height="300" tap="ontapvw" ></WebView>
Please find the native script playground link attached:
https://play.nativescript.org/?template=play-js&id=hh7ITB&v=2
You can disable the scroll by accessnig the native WebView and apoplying a native solution (direct access to the native APIs is one of the greatest advantages of nativeScript as this allows you to work with native solutions)
Example for Android
XML
<WebView loaded="onWebViewLoaded" src="https://www.npmjs.com/package/nativescript-openurl" height="300" ></WebView>
JavaScript
function onWebViewLoaded(args) {
let wv = args.object;
console.log(wv);
if(isAndroid) {
let webViewAndroid = wv.nativeView;
console.log(webViewAndroid);
// Hide the scrollbars, but not disable scrolling:
webViewAndroid.setVerticalScrollBarEnabled(false);
webViewAndroid.setHorizontalScrollBarEnabled(false);
// Disable scrolling
let myListener = new android.view.View.OnTouchListener({
onTouch: function (view, event) {
return (event.getAction() == android.view.MotionEvent.ACTION_MOVE);
}
})
webViewAndroid.setOnTouchListener(myListener);
}
}
exports.onWebViewLoaded = onWebViewLoaded;
Playground demo can be found here
I've got a TabView in my NativeScript page. The tabs content is programmatically populated.
How to hide / collapse the tabs buttons (because the tabs are switched programmatically)?
see Image above of TabView buttons bar - which needs to be collapsed
You can try
For ios:
var myTabView = page.getViewById("myTabView")
myTabView.ios.tabBar.hidden = true;
For android
myTabView.android.removeViewAt(1);
A better solution for android (I hope i translated it correctly from my working nativescript angular code)
const tabLayout = myTabView.android.tabLayout;
// use native android methods to hide the tabLayout containing the tab buttons
if(isFullscreen) {
tabLayout.setVisibility(android.view.View.GONE);
} else {
tabLayout.setVisibility(android.view.View.VISIBLE);
}
I am creating an Arabic(RTL) app with NativeScript. I want the action bar to be sorted in rtl direction so the title is the right and menu options is to the left.
I tired using css and horizontalAlignment but nothing worked.
How can I achieve this?
Thank you.
Example
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
<Page.ActionBar>
<ActionBar >
<Label text="TITLE"/>
</ActionBar>
</Page.ActionBar>
</Page>
And with css u can set to right side with or other styling of ActionBar
ActionBar Label{
text-align:right;
horizontal-align:right;
}
If you need RTL support due to language vs just "alignment" I would convert the entire app to RTL using android.view .View.LAYOUT_DIRECTION_RTL:
This code will make the ActionBar ( and other components ) across the app to RTL
# app.module.ts
import {
android as Android,
AndroidActivityEventData,
AndroidApplication } from '#nativescript/core/application';
Android.addEventListener(AndroidApplication.activityCreatedEvent, (event: AndroidActivityEventData) => {
event.activity.getWindow().getDecorView().setLayoutDirection(android.view .View.LAYOUT_DIRECTION_RTL);
});