Monorepo that contains all of the NativeScript Material Design plugins.
Home Page: https://nativescript-community.github.io/ui-material-components/
License: Apache License 2.0
Did this, demo does not run.
Didn't see this issue mentioned.
The demo app does not run when following the instructions in Readme.md.
`
npm run demo.android
[email protected] demo.android /Users/charles/projects/kanayo/mymobile-native-26/current/mymobile-native/nativescript-material-components
cd ./demo && tns run android --syncAllFiles
{
The option 'syncAllFiles' is not supported.
Run 'tns run android --help' for more information.
`
Describe the steps to reproduce it.
npm i
npm run tsc
npm run demo.ios
npm run demo.android
The solution is simple, unless we want to support loading node_modules in {N} < 6 AND {N} >= 6
Hello, I just installed the material textfield component on a brand new installation of Nativescript-vue.
I'm on iOS, trying to get it to work for Android. Haven't tried it for iOS yet.
TNS Version: 6.1.0
TNS Android: 6.0.0
tns-core-modules/package.json
{
"_from": "tns-core-modules@^6.0.0",
"_id": "[email protected]",
"_inBundle": false,
"_integrity": "sha512-dWwmjGmG65uDI76IJS2FmXnuoe6HDCSD+L2LvPyO4TX2R9LftiJMW+81JDhsDStgiFAFevTZgbmMjo5pfNYZog==",
"_location": "/tns-core-modules",
"_phantomChildren": {},
"_requested": {
"type": "range",
"registry": true,
"raw": "tns-core-modules@^6.0.0",
"name": "tns-core-modules",
"escapedName": "tns-core-modules",
"rawSpec": "^6.0.0",
"saveSpec": null,
"fetchSpec": "^6.0.0"
},
"_requiredBy": [
"/"
],
"_resolved": "https://registry.npmjs.org/tns-core-modules/-/tns-core-modules-6.1.0.tgz",
"_shasum": "37e0705fa3460f02e51f92c6f035729992af38dc",
"_spec": "tns-core-modules@^6.0.0",
"_where": "/Users/misterbrownza/Documents/mobile/materialtest",
"bundleDependencies": false,
"dependencies": {
"reduce-css-calc": "^2.1.6",
"tns-core-modules-widgets": "6.1.0",
"tslib": "^1.9.3"
},
"deprecated": false,
"description": "Telerik NativeScript Core Modules",
"devDependencies": {
"@types/node": "~7.0.5",
"tns-platform-declarations": "next"
},
"files": [
"**/*.d.ts",
"**/*.js",
"**/platforms/ios/**",
"**/package.json",
"!android17.d.ts",
"!ios.d.ts",
"!bin/",
"!apps/",
"!build/",
"!node-tests/",
"!declarations.android.d.ts",
"!declarations.ios.d.ts",
"!gruntfile.js",
"!org.nativescript.widgets.d.ts"
],
"homepage": "https://www.nativescript.org",
"license": "Apache-2.0",
"name": "tns-core-modules",
"nativescript": {
"platforms": {
"ios": "5.0.0",
"android": "5.0.0"
}
},
"repository": {
"type": "git",
"url": "https://github.com/NativeScript/NativeScript/commit/d23ffb8dbfb08815dde083807ba9ece5c2fbf3fb"
},
"scripts": {
"version": "conventional-changelog -p angular -i ../CHANGELOG.md -s && git add ../CHANGELOG.md"
},
"snapshot": {
"android": {
"tns-java-classes": {
"modules": [
"ui/frame/activity",
"ui/frame/fragment"
]
}
}
},
"typings": "tns-core-modules.d.ts",
"version": "6.1.0"
}
package.json
{
"name": "materialtest",
"version": "1.0.0",
"description": "A native application built with NativeScript-Vue",
"author": "Duwayne <[email protected]>",
"license": "MIT",
"nativescript": {
"id": "org.nativescript.application",
"templateVersion": "v2",
"tns-android": {
"version": "6.0.0"
},
"tns-ios": {
"version": "6.0.1"
}
},
"dependencies": {
"@vue/devtools": "^5.0.6",
"nativescript-material-textfield": "^2.3.23",
"nativescript-socketio": "^3.2.1",
"nativescript-toasty": "^1.3.0",
"nativescript-vue": "^2.4.0",
"nativescript-vue-devtools": "^1.2.0",
"tns-core-modules": "^6.0.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"babel-loader": "^8.0.2",
"nativescript-dev-webpack": "^1.0.0",
"nativescript-vue-template-compiler": "^2.0.0",
"nativescript-worker-loader": "~0.9.0",
"node-sass": "^4.9.2",
"vue-loader": "^15.4.0"
}
}
I get the following error:
Warning: there already is an extend called org.nativescript.material.TextInputEditText.
Warning: The static binding generator will generate extend from:vendor.js implementation
Exception in thread "main" java.io.IOException: File already exists. This may lead to undesired behavior.
Please change the name of one of the extended classes.
File:/Users/misterbrownza/Documents/mobile/materialtest/platforms/android/app/src/main/java/org/nativescript/material/TextInputEditText.java Clas
s: org.nativescript.material.TextInputEditText
at org.nativescript.staticbindinggenerator.Generator.writeBindings(Generator.java:112)
at org.nativescript.staticbindinggenerator.Main.main(Main.java:50)
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:runSbg'.
> Process 'command '/Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home/bin/java'' finished with non-zero exit value 1
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 1m 0s
Unable to apply changes on device: emulator-5554. Error is: Command ./gradlew failed with exit code 1.
Steps to reproduce:
tns run android --bundleRipple somehow consumes the TouchEvent and prevents its propagation to parent control.
Steps to reproduce:
Actual: Does not navigate to example, since itemTap is not fired at all.
Expected: Navigate to the selected example
Example:
If you setup XML like this:
<GridLayout tap="{{ onTap }}">
<mdr:Ripple>
<Label text="ripple"/>
</mdr:Ripple>
</GridLayout>
onTap callback will never be called
Note sure why this happens, but I believe it's related to that how Ripple handles TouchEvent.
Just for the test you can add isPassThroughParentEnabled="true" to the <mdr:Ripple> and navigate to examples properly
<MDCardView rippleColor="transparent" *ngIf="!isAndroid" class="w-full">
<ng-content></ng-content>
</MDCardView>
The blur event only works when a keyboard execute next button, but when the focus of the component is removed by clicking on another component the blur event is not triggered.
In Nativescript TextField this runs in both cases.
Look:
code:
html:
<TextField hint="Enter date" (focus)="onFocus($event)" (blur)="onBlur($event)" ></TextField>
<MDTextField #tvNumCard (focus)="onFocus($event)" (blur)="onBlur($event)" class="input" variant="filled" hint="Field 1" returnKeyType="next"></MDTextField>
<MDTextField class="input" variant="filled" hint="Field 2" returnKeyType="next"></MDTextField>
<MDTextField class="input" variant="filled" hint="Field 3" returnKeyType="next"></MDTextField>
<MDTextField class="input" variant="filled" hint="Field 4" keyboardType="datetime" returnKeyType="done"></MDTextField>
ts
onFocus(event) {
console.log("onFocus")
}
onBlur(event) {
console.log("onBlur")
}
images:
Nativescript: 5.4.1
Angular: 8.0.0
Please, ensure your title is less than 63 characters long and starts with a capital
letter.
How do I can access the JS methods in Vue.JS (code example: https://stackoverflow.com/questions/58310717/nativescript-vue-access-class-functions). I can't find a way to set badges and select tabs programatically.
Regards
Tobias
This is just a question.
I am trying to use the MDTextField error outline to indicate that a wrong username and/or password has been submitted. However I don't want to display any error message, since I will be handling that differently.
I am using NativeScript with Angular on the latest versions while using NativeScript Sidekick to build on an android device.
An example of my textfield:
<MDTextField
[placeholderColor]="stylingService.getPrimary()"
hint="Wachtwoord"
[(ngModel)]="password"
variant="outline"
row="5"
col="1"
secure="true"
[error]="wrongInput ? ' ' : ''"
></MDTextField>
wrongInput is set based on the result of an HTML request.
Right now it changes the state from normal to error, but as it wants to render the space it also changes the height of the textfield. Is it possible to change the state without showing an error message?
How do we style the various elements of the textfield?
For example, the filled version is medium-light gray and the hint is white when it animates to the top. The gray is not bad but it would be nice to change it. And the white hint text after animation is completely unreadable. Seems like that should be an off black.
Android 10 and iOS 13 introduce system-wide dark appearance for all user interface elements, known as Dark theme for Android and Dark Mode for iOS.
The components can take advantage of MaterialComponents’ dark theme for Android: https://material.io/develop/android/theming/dark/
Checked
Checked
Please, ensure your title is less than 63 characters long and starts with a capital
letter.
Each time you nest an MDButton in a StackLayout, the elevation shadow increases even if it is specified explicitly.
Although this also happens within nested Angular controls, you can recreate this problem by pasting this code into any project that has the material button plugin:
<StackLayout>
<MDButton elevation="10" text="Test me"></MDButton>
<StackLayout>
<MDButton elevation="10" text="Test me"></MDButton>
<StackLayout>
<MDButton elevation="10" text="Test me"></MDButton>
<StackLayout>
<MDButton elevation="10" text="Test me"></MDButton>
<StackLayout>
<MDButton elevation="10" text="Test me"></MDButton>
<StackLayout>
<MDButton elevation="10" text="Test me"></MDButton>
<StackLayout>
<MDButton elevation="10" text="Test me"></MDButton>
<StackLayout>
<MDButton elevation="10" text="Test me"></MDButton>
<StackLayout>
<MDButton elevation="10" text="Test me"></MDButton>
<StackLayout>
<MDButton elevation="10" text="Test me">
</MDButton>
<StackLayout>
<MDButton elevation="10" text="Test me">
</MDButton>
<StackLayout>
<MDButton elevation="10" text="Test me">
</MDButton>
<StackLayout>
<MDButton elevation="10"
text="Test me"></MDButton>
<StackLayout>
<MDButton elevation="10"
text="Test me"></MDButton>
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
You will see something like this:
I have already tried to define by css color property, but only changes the written text and not the placeholder. I also tried using the :: placeholder this way
::placeholder { /* Firefox, Chrome, Opera */
color: red;
}
but in fact it changes the native Toggle from NativeScript and does not change the Placeholder of the MDTextField.
Nativescript: 5.4.1
Angular: 8.0.0
nativescript-material-textfield: 2.2.16
I understand this plugin can build only modal bottom-sheet, not a persistent, that I want. I wish you will implement this feature in the future.
Quote from https://material.io/components/sheets-bottom/#standard-bottom-sheet
"Standard bottom sheets co-exist with the screen’s main UI region and allow for simultaneously viewing and interacting with both regions. They are commonly used to keep a feature or secondary content visible on screen when content in main UI region is frequently scrolled or panned."
Expected result:
Some of the packages have declaration files that point to android implementation, that creates a problem, the android implementations have types that come from platform declarations, i can add tns-platform-declarations and a references.d.ts but doing this slows down the compilation
ERROR in node_modules/nativescript-material-activityindicator/activityindicator.android.d.ts(3,26): error TS2503: Cannot find namespace 'android'.
node_modules/nativescript-material-bottomsheet/bottomsheet-common.d.ts(37,27): error TS2503: Cannot find namespace 'android'.
node_modules/nativescript-material-button/button.android.d.ts(3,26): error TS2503: Cannot find namespace 'android'.
node_modules/nativescript-material-button/button.android.d.ts(5,23): error TS2503: Cannot find namespace 'android'.
node_modules/nativescript-material-button/button.android.d.ts(6,25): error TS2503: Cannot find namespace 'globalAndroid'.
node_modules/nativescript-material-cardview/cardview.android.d.ts(4,26): error TS2503: Cannot find namespace 'android'.
node_modules/nativescript-material-cardview/cardview.android.d.ts(5,17): error TS2503: Cannot find namespace 'android'.
node_modules/nativescript-material-cardview/cardview.android.d.ts(6,21): error TS2503: Cannot find namespace 'android'.
node_modules/nativescript-material-cardview/cardview.android.d.ts(6,67): error TS2503: Cannot find namespace 'android'.
node_modules/nativescript-material-cardview/cardview.android.d.ts(7,18): error TS2503: Cannot find namespace 'android'.
node_modules/nativescript-material-cardview/cardview.android.d.ts(10,23): error TS2503: Cannot find namespace 'android'.
node_modules/nativescript-material-cardview/cardview.android.d.ts(11,25): error TS2503: Cannot find namespace 'globalAndroid'.
node_modules/nativescript-material-cardview/cardview.android.d.ts(13,36): error TS2503: Cannot find namespace 'android'.
node_modules/nativescript-material-floatingactionbutton/floatingactionbutton.android.d.ts(3,26): error TS2503: Cannot find namespace 'android'.
node_modules/nativescript-material-floatingactionbutton/floatingactionbutton.android.d.ts(4,23): error TS2503: Cannot find namespace 'android'.
node_modules/nativescript-material-floatingactionbutton/floatingactionbutton.android.d.ts(5,25): error TS2503: Cannot find namespace 'globalAndroid'.
node_modules/nativescript-material-progress/progress.android.d.ts(3,26): error TS2503: Cannot find namespace 'android'.
node_modules/nativescript-material-ripple/ripple.android.d.ts(3,26): error TS2503: Cannot find namespace 'android'.
node_modules/nativescript-material-ripple/ripple.android.d.ts(4,13): error TS2503: Cannot find namespace 'android'.
node_modules/nativescript-material-ripple/ripple.android.d.ts(5,25): error TS2503: Cannot find namespace 'org'.
node_modules/nativescript-material-ripple/ripple.android.d.ts(6,21): error TS2503: Cannot find namespace 'android'.
node_modules/nativescript-material-ripple/ripple.android.d.ts(9,29): error TS2503: Cannot find namespace 'android'.
node_modules/nativescript-material-slider/slider.android.d.ts(3,26): error TS2503: Cannot find namespace 'android'.
@farfromrefug this was the typing issue i was talking you about on #23
This works:
This doesn't:
<MDTextField [variant]="input.variant">
Dynamically it always returns the filled variant.
The demo/bottomSheet examples crash, since there is no such method showBottomSheet on View.
The problem might be related to the overriden version of View interface that should extend View with showBottomSheet"
declare module 'tns-core-modules/ui/core/view/view' {
interface View {
showBottomSheet(options: BottomSheetOptions): ViewBase;
_setupAsRootView(context: any): void;
callLoaded(): void;
callUnloaded(): void;
_removeFromFrameStack(): void;
}
}
Is there a way to use "ngModel"? I tried it, but it doesn't work.
<MDTextField [(ngModel)]='model.mytext'></MDTextField>
I've checked but can't find anything.
Done
Normal material button seems to not honour the theme colour, whereas floating-action-button etc. do:
How can I make the button use the theme colour?
When i add v-model in the text field, i got an error JS: [Vue warn]: You may have an infinite update loop in a component render function. and i am not able to use this field.
install method is not found in nativescript-material-bottomsheet and I had to use it as I saw in one of your example, from nativescript-material-core but I am not sure it is the same.
Also, this is not the way it should work, to import it from another module even if it is the core.
On this line you use org.nativescript.widgets.TextInputEditText, running for android sometimes shows error about that java class missing and i can't really find it anywhere xD Do you mind to explain why its there and why sometimes it just runs fine ?
Also, do you have any strategy to fix the typing errors on all packages ?
My project works completely fine both on iOS and Android, but when I download the package nativescript-material-textfield, iOS still works but Android fails with this:
1 exception was raised by workers:
java.lang.RuntimeException: Duplicate class com.google.common.util.concurrent.ListenableFuture found in modules guava-18.0.jar (com.google.guava:guava:18.0) and listenablefuture-1.0.jar (com.google.guava:listenablefuture:1.0)
I deleted and update npm and the project works again.
I then tired to download only, nativescript-material-core, and I get the same error.
Here is my dependencies in package.json:
"dependencies": {
"@angular/animations": "8.0.0",
"@angular/common": "8.0.0",
"@angular/compiler": "8.0.0",
"@angular/core": "8.0.0",
"@angular/forms": "8.0.0",
"@angular/http": "8.0.0-beta.10",
"@angular/platform-browser": "8.0.0",
"@angular/platform-browser-dynamic": "^8.1.3",
"@angular/router": "8.0.0",
"@fortawesome/angular-fontawesome": "0.4.0",
"@fortawesome/fontawesome-svg-core": "^1.2.18",
"@fortawesome/free-solid-svg-icons": "^5.8.2",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"@ngxs-labs/emitter": "^1.9.0",
"@ngxs/store": "^3.5.0",
"@nstudio/nativescript-loading-indicator": "^1.0.0",
"ajv": "^6.10.0",
"bootstrap": "^4.3.1",
"core-js": "3.1.4",
"i": "^0.3.6",
"jquery": "^3.4.1",
"nativescript-angular": "^8.1.0",
"nativescript-audio": "^5.0.2",
"nativescript-azure-mobile-apps": "^2.0.3",
"nativescript-background-http": "^3.4.1",
"nativescript-camera": "^4.5.0",
"nativescript-cardview": "^3.2.0",
"nativescript-drawingpad": "^3.1.0",
"nativescript-geolocation": "^5.1.0",
"nativescript-imagepicker": "^6.3.0",
"nativescript-iqkeyboardmanager": "^1.5.1",
"nativescript-local-notifications": "^4.0.1",
"nativescript-material-textfield": "^2.3.16",
"nativescript-permissions": "^1.3.6",
"nativescript-photo-editor": "^1.1.0",
"nativescript-plugin-firebase": "^9.0.4",
"nativescript-secure-storage": "^2.4.0",
"nativescript-theme-core": "^1.0.6",
"nativescript-ui-dataform": "5.0.0",
"nativescript-ui-listview": "7.0.0",
"nativescript-ui-sidedrawer": "7.0.0",
"npm": "^6.10.2",
"popper.js": "^1.15.0",
"reflect-metadata": "~0.1.12",
"rxjs": "^6.3.3",
"tns-core-modules": "^6.1.0-next-2019-08-05-140314-02",
"zone.js": "0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.13.9",
"@angular/cli": "^7.3.9",
"@angular/compiler-cli": "8.0.0",
"@nativescript/schematics": "~0.6.0",
"@types/jasmine": "2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "12.6.3",
"codelyzer": "^5.0.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^2.1.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"nativescript-dev-webpack": "1.0.0",
"node-sass": "4.12.0",
"protractor": "^6.0.0",
"tns-platform-declarations": "6.0.1",
"ts-node": "8.3.0",
"tslint": "5.18.0",
"typescript": "3.4.5"
}
}
When I add an MDButton to a page, the page comes up blank when navigating to it.
This is an Nativescript/Angular project. All the latest updates to Nativescript have been made.
NativeScriptMaterialButtonModule has been added to the imports section in the module.
Improve Vue support for all existing MD components. That is:
import FooPlugin from 'nativescript-material-foo/vue';
Vue.use(FooPlugin);
v-model directive for binding dynamic instance data where applicable.Components to implement:
Hi, I'm trying to add the material button but I get the following error.
I have placed these directives in the app.js file :
import Vue from 'nativescript-vue';
import ButtonPlugin from 'nativescript-material-button/vue';
Vue.use(ButtonPlugin);
but when placing the tag I get that error. can you help me?...
An uncaught Exception occurred on "main" thread.
Calling js method onCreateView failed
Error: android.content.res.Resources$NotFoundException: Resource ID #0x0
android.content.res.ResourcesImpl.getValue(ResourcesImpl.java:216)
android.content.res.Resources.loadXmlResourceParser(Resources.java:2148)
android.content.res.Resources.getLayout(Resources.java:1157)
android.view.LayoutInflater.inflate(LayoutInflater.java:421)
com.tns.Runtime.callJSMethodNative(Native Method)
com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1242)
com.tns.Runtime.callJSMethodImpl(Runtime.java:1122)
com.tns.Runtime.callJSMethod(Runtime.java:1109)
com.tns.Runtime.callJSMethod(Runtime.java:1089)
com.tns.Runtime.callJSMethod(Runtime.java:1081)
com.tns.FragmentClass.onCreateView(FragmentClass.java:53)
androidx.fragment.app.Fragment.performCreateView(Fragment.java:2612)
androidx.fragment.app.FragmentManagerImpl.moveToState(FragmentManagerImpl.java:874)
androidx.fragment.app.FragmentManagerImpl.moveFragmentToExpectedState(FragmentManagerImpl.java:1228)
androidx.fragment.app.FragmentManagerImpl.moveToState(FragmentManagerImpl.java:1293)
androidx.fragment.app.BackStackRecord.executeOps(BackStackRecord.java:439)
androidx.fragment.app.FragmentManagerImpl.executeOps(FragmentManagerImpl.java:2066)
androidx.fragment.app.FragmentManagerImpl.executeOpsTogether(FragmentManagerImpl.java:1856)
androidx.fragment.app.FragmentManagerImpl.removeRedundantOperationsAndExecute(FragmentManagerImpl.java:1811)
androidx.fragment.app.FragmentManagerImpl.execPendingActions(FragmentManagerImpl.java:1717)
androidx.fragment.app.FragmentManagerImpl$2.run(FragmentManagerImpl.java:150)
android.os.Handler.handleCallback(Handler.java:789)
android.os.Handler.dispatchMessage(Handler.java:98)
android.os.Looper.loop(Looper.java:164)
android.app.ActivityThread.main(ActivityThread.java:6944)
java.lang.reflect.Method.invoke(Native Method)
com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:327)
com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1374)
StackTrace:
Frame: function:'Button.createNativeView', file:'file:///data/data/org.nativescript.educontrol/files/app/vendor.js', line: 460, column: 64
Frame: function:'ViewBase._setupUI', file:'file:///data/data/org.nativescript.educontrol/files/app/vendor.js', line: 35198, column: 25
Frame: function:'', file:'file:///data/data/org.nativescript.educontrol/files/app/vendor.js', line: 35253, column: 13
Frame: function:'LayoutBaseCommon.eachChildView', file:'file:///data/data/org.nativescript.educontrol/files/app/vendor.js', line: 46286, column: 20
Frame: function:'ViewCommon.eachChild', file:'file:///data/data/org.nativescript.educontrol/files/app/vendor.js', line: 36699, column: 10
Frame: function:'ViewBase._setupUI', file:'file:///data/data/org.nativescript.educontrol/files/app/vendor.js', line: 35252, column: 10
Frame: function:'', file:'file:///data/data/org.nativescript.educontrol/files/app/vendor.js', line: 35253, column: 13
Frame: function:'ContentView.eachChildView', file:'file:///data/data/org.nativescript.educontrol/files/app/vendor.js', line: 32462, column: 7
Frame: function:'PageBase.eachChildView', file:'file:///data/data/org.nativescript.educontrol/files/app/vendor.js', line: 47726, column: 36
Frame: function:'ViewCommon.eachChild', file:'file:///data/data/org.nativescript.educontrol/files/app/vendor.js', line: 36699, column: 10
Frame: function:'ViewBase._setupUI', file:'file:///data/data/org.nativescript.educontrol/files/app/vendor.js', line: 35252, column: 10
Frame: function:'ViewBase._addViewCore', file:'file:///data/data/org.nativescript.educontrol/files/app/vendor.js', line: 35123, column: 12
Frame: function:'ViewBase._addView', file:'file:///data/data/org.nativescript.educontrol/files/app/vendor.js', line: 35106, column: 10
Frame: function:'FragmentCallbacksImplementation.onCreateView', file:'file:///data/data/org.nativescript.educontrol/files/app/vendor.js', line: 42625, column: 13
Frame: function:'FragmentClass.onCreateView', file:'file:///data/data/org.nativescript.educontrol/files/app/vendor.js', line: 40078, column: 34
at com.tns.Runtime.callJSMethodNative(Native Method)
at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1242)
at com.tns.Runtime.callJSMethodImpl(Runtime.java:1122)
at com.tns.Runtime.callJSMethod(Runtime.java:1109)
at com.tns.Runtime.callJSMethod(Runtime.java:1089)
at com.tns.Runtime.callJSMethod(Runtime.java:1081)
at com.tns.FragmentClass.onCreateView(FragmentClass.java:53)
at androidx.fragment.app.Fragment.performCreateView(Fragment.java:2612)
at androidx.fragment.app.FragmentManagerImpl.moveToState(FragmentManagerImpl.java:874)
at androidx.fragment.app.FragmentManagerImpl.moveFragmentToExpectedState(FragmentManagerImpl.java:1228)
at androidx.fragment.app.FragmentManagerImpl.moveToState(FragmentManagerImpl.java:1293)
at androidx.fragment.app.BackStackRecord.executeOps(BackStackRecord.java:439)
at androidx.fragment.app.FragmentManagerImpl.executeOps(FragmentManagerImpl.java:2066)
at androidx.fragment.app.FragmentManagerImpl.executeOpsTogether(FragmentManagerImpl.java:1856)
at androidx.fragment.app.FragmentManagerImpl.removeRedundantOperationsAndExecute(FragmentManagerImpl.java:1811)
at androidx.fragment.app.FragmentManagerImpl.execPendingActions(FragmentManagerImpl.java:1717)
at androidx.fragment.app.FragmentManagerImpl$2.run(FragmentManagerImpl.java:150)
at android.os.Handler.handleCallback(Handler.java:789)
at android.os.Handler.dispatchMessage(Handler.java:98)
at android.os.Looper.loop(Looper.java:164)
at android.app.ActivityThread.main(ActivityThread.java:6944)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:327)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1374)
Caused by: android.content.res.Resources$NotFoundException: Resource ID #0x0
at android.content.res.ResourcesImpl.getValue(ResourcesImpl.java:216)
at android.content.res.Resources.loadXmlResourceParser(Resources.java:2148)
at android.content.res.Resources.getLayout(Resources.java:1157)
at android.view.LayoutInflater.inflate(LayoutInflater.java:421)
... 24 more
The recent changes to the bottomsheet on iOS to improve the empty top/bottom spacing between the NS layout and the bottom sheet added a small visual bug when IQKeyboardManager is used on a textfield shown in the bottomsheet. See image below:
IQKeyboard is open with the keyboard here:
IQKeyboardManager closed (keyboard dismissed):
Describe the steps to reproduce it.
Great work on this awesome package! I know there are a lot of Material components and recreating them all in ns takes time. One that would be really helpful would be a Material TextView (the metaphor from web would be textarea)
Question 1: rippleColor=”red” on <mds:Slider> just sets thumbColorProperty with no rippleEffect. Is this expected?
Question 2: color=”red” paints everything (thumb, trackbar..). Is this expected?
When color=”red” is set you cannot change thumb circle color even if thumbColor=”blue” is set for Android. On iOS thumbColor="blue" is respected as expected.
When I use the underline variant in Android I'm not seeing any underline
With ouline or filled I can see the outline in the primary color.
Also the underline variant in IOS is showing an underline
I'm trying to implement BottomSheet on NS + Angular but unfortunately, there is no demo project and based on demo (Plain NS) it doesn't work.
According to demo (Plain NS), it says to get the showBottomSheet from a View. I have tried to get it from the args object return by the Tap Event like that :
openSelectionModal($event: any): void {
const obj = $event.object as View;
obj.showBottomSheet({
view: '...',
context : {},
closeCallback: res => {
alert(`bottomsheet closed ${JSON.stringify(res)}`);
}
});
}
Unfortunetly, the TS says showBottomSheet does not exist on type View.
The only difference is I am trying to get the showBottomSheet from a simple tap event from a StackLayout. In your example, you are shown how to do this from a Button, but this is not my case and it should work anyway.
Any help please ?
Runs great on Android but when tested on iOS i have three problems:
Trying to hide bottom-sheet view but no parent with viewController specified. and the app closescloseCallback the same error appears but the app doesn't crash, instead, the bottomsheet is not closed and the user haves to close doing a tap outside."dependencies": {
"@angular/animations": "~8.2.0",
"@angular/common": "~8.2.0",
"@angular/compiler": "~8.2.0",
"@angular/core": "~8.2.0",
"@angular/forms": "~8.2.0",
"@angular/http": "8.0.0-beta.10",
"@angular/platform-browser": "~8.2.0",
"@angular/platform-browser-dynamic": "~8.2.0",
"@angular/router": "~8.2.0",
"@nstudio/nativescript-checkbox": "^1.0.0",
"class-transformer": "^0.1.9",
"class-validator": "^0.8.5",
"clone": "^2.1.1",
"fast-deep-equal": "^2.0.1",
"filename-regex": "^2.0.1",
"human-format": "^0.10.1",
"libphonenumber-js": "^1.4.6",
"lodash.difference": "^4.5.0",
"lodash.has": "^4.5.2",
"lodash.isnil": "^4.0.0",
"lodash.last": "^3.0.0",
"lodash.merge": "^4.6.1",
"lodash.mergewith": "^4.6.1",
"lodash.padstart": "^4.6.1",
"lodash.random": "^3.2.0",
"lodash.remove": "^4.7.0",
"lodash.values": "^4.3.0",
"moment": "^2.24.0",
"moment-duration-format": "^2.2.2",
"nativescript-advanced-webview": "^3.0.2",
"nativescript-angular": "^8.2.1",
"nativescript-audio": "file:../plugins/nativescript-audio/publish/package/nativescript-audio-5.0.1.tgz",
"nativescript-bottom-navigation": "^1.3.0",
"nativescript-calendar": "^2.0.1",
"nativescript-datetimepicker": "^1.2.1",
"nativescript-downloader": "file:../plugins/nativescript-downloader/publish/package/nativescript-downloader-2.1.4.tgz",
"nativescript-drop-down": "^4.0.1",
"nativescript-email": "^1.5.3",
"nativescript-fancyalert": "^3.0.6",
"nativescript-feedback": "^1.3.5",
"nativescript-http-formdata": "^1.6.0",
"nativescript-image-cache": "^1.1.6",
"nativescript-imagecropper": "^1.0.5",
"nativescript-imagepicker": "^6.1.2",
"nativescript-intl": "^3.0.0",
"nativescript-iqkeyboardmanager": "^1.4.0",
"nativescript-local-notifications": "^3.1.2",
"nativescript-localize": "^4.1.1",
"nativescript-masked-text-field": "^4.0.1",
"nativescript-material-bottomsheet": "^2.3.24",
"nativescript-ng-ripple": "^2.0.1",
"nativescript-orientation": "^2.2.1",
"nativescript-pager": "^11.0.9",
"nativescript-permissions": "^1.2.3",
"nativescript-plugin-firebase": "9.0.2",
"nativescript-purchase": "^2.0.11",
"nativescript-rater": "^2.1.0",
"nativescript-sqlite": "^2.3.3",
"nativescript-sqlite-commercial": "file:nativescript-sqlite-commercial-1.3.2.tgz",
"nativescript-star-ratings": "file:../plugins/nativescript-star-ratings/publish/package/nativescript-star-ratings-1.0.0.tgz",
"nativescript-telephony": "^1.0.4",
"nativescript-theme-core": "~1.0.4",
"nativescript-tslib": "^1.9.1-r1",
"nativescript-ui-autocomplete": "5.0.0",
"nativescript-ui-calendar": "5.0.0",
"nativescript-ui-chart": "5.0.0",
"nativescript-ui-gauge": "5.0.0",
"nativescript-ui-listview": "7.0.0",
"nativescript-ui-sidedrawer": "7.0.0",
"ngx-custom-validators": "^6.1.0",
"ngx-moment": "^3.1.0",
"pauseable": "^0.3.1",
"reflect-metadata": "~0.1.10",
"rx-singleton-lock": "^1.1.1",
"rxjs": "^6.4.0",
"tns-core-modules": "^6.1.1",
"typeorm": "file:../../../../typescript/typeorm/build/package",
"zone.js": "^0.9.1"
},
"devDependencies": {
"@angular/compiler-cli": "~8.2.0",
"@nativescript/schematics": "~0.5.0",
"@ngtools/webpack": "~8.2.0",
"@types/node": "^11.13.0",
"csv": "^5.1.1",
"decompress": "^4.2.0",
"download": "^7.1.0",
"nativescript-dev-webpack": "^1.2.0",
"nativescript-environments": "file:../plugins/nativescript-environments/publish/package/nativescript-environments-1.0.0.tgz",
"node-sass": "4.12.0",
"promisepipe": "^3.0.0",
"sqlite": "^3.0.0",
"sqlite3": "^4.0.6",
"tns-platform-declarations": "6.0.1",
"ts-loader": "^5.3.3",
"typescript": "~3.5.3",
"unzipper": "^0.9.8"
}
Using the same code as the demo-ng folder.
I attempted to use the MDTextField control in a reactive form tying the control to formControlName and received the following error:
"Error: No value accessor for form control with name: [control name]"
Since the documentation states that the control inherits from the TextField not sure why this would happen.
I've created a nativescript modal page in the path, modal/modal-page
when I do
viewModel.buttonTap = function(args) {
const mainView = args.object;
const context = { username: "test_username", password: "test" };
const fullscreen = true;
mainView.showBottomSheet("modal/modal-page", context, (username, password) => {
// Receive data from the bottomsheet view. e.g. username & password
alert(`Username: ${username} : Password: ${password}`);
}, fullscreen);
}
I get the following error
System.err: com.tns.NativeScriptException:
System.err: Calling js method onClick failed
System.err:
System.err: Error: Failed to load page XML file for module: undefined
System.err: File: "file:///data/data/org.nativescript.materialtest/files/app/vendor.js, line: 13616, column: 4
System.err:
System.err: StackTrace:
System.err: Frame: function:'', file:'file:///data/data/org.nativescript.materialtest/files/app/vendor.js', line: 13616, column: 11
System.err: Frame: function:'push.../node_modules/nativescript-material-bottomsheet/bottomsheet-common.js.ViewWithBottomSheetBase.showBottomSheet', file:'file:///data/data/org.nativescript.materialtest/files/app/vendor.js', line: 387, column: 99
System.err: Frame: function:'viewModel.buttonTap', file:'file:///data/data/org.nativescript.materialtest/files/app/bundle.js', line: 1087, column: 18
System.err: Frame: function:'push.../node_modules/tns-core-modules/data/observable/observable.js.Observable.notify', file:'file:///data/data/org.nativescript.materialtest/files/app/vendor.js', line: 4670, column: 32
System.err: Frame: function:'push.../node_modules/tns-core-modules/data/observable/observable.js.Observable._emit', file:'file:///data/data/org.nativescript.materialtest/files/app/vendor.js', line: 4690, column: 18
System.err: Frame: function:'ClickListenerImpl.onClick', file:'file:///data/data/org.nativescript.materialtest/files/app/vendor.js', line: 14408, column: 23
System.err:
System.err: at com.tns.Runtime.callJSMethodNative(Native Method)
System.err: at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1120)
System.err: at com.tns.Runtime.callJSMethodImpl(Runtime.java:1000)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:987)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:967)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:959)
System.err: at java.lang.Object_vendor_14401_32_ClickListenerImpl.onClick(Unknown Source:10)
System.err: at android.view.View.performClick(View.java:6669)
System.err: at android.view.View.performClickInternal(View.java:6638)
System.err: at android.view.View.access$3100(View.java:789)
System.err: at android.view.View$PerformClick.run(View.java:26145)
System.err: at android.os.Handler.handleCallback(Handler.java:873)
System.err: at android.os.Handler.dispatchMessage(Handler.java:99)
System.err: at android.os.Looper.loop(Looper.java:193)
System.err: at android.app.ActivityThread.main(ActivityThread.java:6863)
System.err: at java.lang.reflect.Method.invoke(Native Method)
System.err: at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:537)
System.err: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
I have initialized it in app.js, the overriding part is working fine
JS: overrinding constructor
JS: overrinding _raiseShownBottomSheetEvent
JS: overrinding _bottomSheetClosed
JS: overrinding _showNativeBottomSheet
JS: overrinding _raiseShowingBottomSheetEvent
JS: overrinding closeBottomSheet
JS: overrinding showBottomSheet
JS: overrinding constructor
JS: overrinding _hideNativeBottomSheet
JS: overrinding _showNativeBottomSheet```
When compiling the demo app, running npm run tsc in the root dir, I've got a Property 'getRippleColor' does not exist on type 'Ripple' error.
I guess this error disallows me to add a rippleColor attribute in the MDCardView component:
file:///app/bundle.js:293:66: JS ERROR TypeError: material_1.getRippleColor is not a function. (In 'material_1.getRippleColor(color)', 'material_1.getRippleColor' is undefined)
$ npm run tsc
> [email protected] tsc /Users/manuelsaelices/src/nativescript-repos/nativescript-material-components
> lerna run tsc
lerna notice cli v3.8.0
lerna info Executing command in 12 packages: "npm run tsc"
lerna info run Ran npm script 'tsc' in 'nativescript-material-core' in 10.5s:
> [email protected] tsc /Users/manuelsaelices/src/nativescript-repos/nativescript-material-components/packages/nativescript-material-core
> tsc && cp ../../src/core/material.d.ts ./
lerna info run Ran npm script 'tsc' in 'nativescript-material-activityindicator' in 18.3s:
> [email protected] tsc /Users/manuelsaelices/src/nativescript-repos/nativescript-material-components/packages/nativescript-material-activityindicator
> tsc && cp ../../src/activityindicator/activityindicator.d.ts ./
lerna info run Ran npm script 'tsc' in 'nativescript-material-cardview' in 18.5s:
> [email protected] tsc /Users/manuelsaelices/src/nativescript-repos/nativescript-material-components/packages/nativescript-material-cardview
> tsc && cp ../../src/cardview/cardview.d.ts ./
lerna info run Ran npm script 'tsc' in 'nativescript-material-button' in 18.5s:
> [email protected] tsc /Users/manuelsaelices/src/nativescript-repos/nativescript-material-components/packages/nativescript-material-button
> tsc && cp ../../src/button/button.d.ts ./
lerna info run Ran npm script 'tsc' in 'nativescript-material-bottomsheet' in 18.6s:
> [email protected] tsc /Users/manuelsaelices/src/nativescript-repos/nativescript-material-components/packages/nativescript-material-bottomsheet
> tsc && cp ../../src/bottomsheet/bottomsheet.d.ts ./
lerna info run Ran npm script 'tsc' in 'nativescript-material-progress' in 20.1s:
> [email protected] tsc /Users/manuelsaelices/src/nativescript-repos/nativescript-material-components/packages/nativescript-material-progress
> tsc && cp ../../src/progress/progress.d.ts ./
lerna ERR! npm run tsc exited 2 in 'nativescript-material-ripple'
lerna ERR! npm run tsc stdout:
> [email protected] tsc /Users/manuelsaelices/src/nativescript-repos/nativescript-material-components/packages/nativescript-material-ripple
> tsc && cp ../../src/ripple/ripple.d.ts ./
../../src/ripple/ripple.ios.ts:29:64 - error TS2339: Property 'getRippleColor' does not exist on type 'Ripple'.
29 this.inkTouchController.defaultInkView.inkColor = this.getRippleColor(color);
~~~~~~~~~~~~~~
Found 1 error.
Hi, I would like to contribute to the repo, and I wanna know if there is someone who I can talk to figure out the best way to do it.
I would like to use this repo more, but I notice that in some cases the documentation isn't enough and some examples with Angular are missing.
Yesterday, I finished some implementation for BottomSheets and Angular that can be used for custom Dialogs too, also I notice some errors with the .d.ts files that don't export correctly some functions.
Anyway I have a plugin too and I know how difficult can be to maintain, and I wanna help you guys because I think this is a great repo and you have done a lot so far.
An uncaught Exception occurred on "main" thread.
Calling js method onCreateView failed
Error: java.lang.IllegalArgumentException: The style on this component requires your app theme to be Theme.MaterialComponents (or a descendant).
com.google.android.material.internal.ThemeEnforcement.checkTheme(ThemeEnforcement.java:240)
com.google.android.material.internal.ThemeEnforcement.checkMaterialTheme(ThemeEnforcement.java:215)
com.google.android.material.internal.ThemeEnforcement.checkCompatibleTheme(ThemeEnforcement.java:143)
com.google.android.material.internal.ThemeEnforcement.obtainStyledAttributes(ThemeEnforcement.java:78)
com.google.android.material.card.MaterialCardView.(MaterialCardView.java:121)
com.google.android.material.card.MaterialCardView.(MaterialCardView.java:111)
com.google.android.material.card.MaterialCardView.(MaterialCardView.java:107)
com.tns.Runtime.callJSMethodNative(Native Method)
com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1242)
com.tns.Runtime.callJSMethodImpl(Runtime.java:1122)
com.tns.Runtime.callJSMethod(Runtime.java:1109)
com.tns.Runtime.callJSMethod(Runtime.java:1089)
com.tns.Runtime.callJSMethod(Runtime.java:1081)
com.tns.FragmentClass.onCreateView(FragmentClass.java:53)
androidx.fragment.app.Fragment.performCreateView(Fragment.java:2612)
androidx.fragment.app.FragmentManagerImpl.moveToState(FragmentManagerImpl.java:874)
androidx.fragment.app.FragmentManagerImpl.moveFragmentToExpectedState(FragmentManagerImpl.java:1228)
androidx.fragment.app.FragmentManagerImpl.moveToState(FragmentManagerImpl.java:1293)
androidx.fragment.app.BackStackRecord.executeOps(BackStackRecord.java:439)
androidx.fragment.app.FragmentManagerImpl.executeOps(FragmentManagerImpl.java:2066)
androidx.fragment.app.FragmentManagerImpl.executeOpsTogether(FragmentManagerImpl.java:1856)
androidx.fragment.app.FragmentManagerImpl.removeRedundantOperationsAndExecute(FragmentManagerImpl.java:1811)
androidx.fragment.app.FragmentManagerImpl.execPendingActions(FragmentManagerImpl.java:1717)
androidx.fragment.app.FragmentManagerImpl$2.run(FragmentManagerImpl.java:150)
android.os.Handler.handleCallback(Handler.java:873)
android.os.Handler.dispatchMessage(Handler.java:99)
android.os.Looper.loop(Looper.java:193)
android.app.ActivityThread.main(ActivityThread.java:6669)
java.lang.reflect.Method.invoke(Native Method)
com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
StackTrace:
Frame: function:'push.../node_modules/nativescript-material-cardview/cardview.js.CardView.createNativeView', file:'file:///data/data/one.servolab.google.doc.beta/files/app/vendor.js', line: 92540, column: 20
Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase._setupUI', file:'file:///data/data/one.servolab.google.doc.beta/files/app/vendor.js', line: 138663, column: 31
Frame: function:'', file:'file:///data/data/one.servolab.google.doc.beta/files/app/vendor.js', line: 138705, column: 19
Frame: function:'push.../node_modules/tns-core-modules/ui/layouts/layout-base-common.js.LayoutBaseCommon.eachChildView', file:'file:///data/data/one.servolab.google.doc.beta/files/app/vendor.js', line: 147404, column: 26
Frame: function:'push.../node_modules/tns-core-modules/ui/core/view/view-common.js.ViewCommon.eachChild', file:'file:///data/data/one.servolab.google.doc.beta/files/app/vendor.js', line: 139950, column: 14
Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase._setupUI', file:'file:///data/data/one.servolab.google.doc.beta/files/app/vendor.js', line: 138704, column: 14
Frame: function:'', file:'file:///data/data/one.servolab.google.doc.beta/files/app/vendor.js', line: 138705, column: 19
Frame: function:'push.../node_modules/tns-core-modules/ui/layouts/layout-base-common.js.LayoutBaseCommon.eachChildView', file:'file:///data/data/one.servolab.google.doc.beta/files/app/vendor.js', line: 147404, column: 26
Frame: function:'push.../node_modules/tns-core-modules/ui/core/view/view-common.js.ViewCommon.eachChild', file:'file:///data/data/one.servolab.google.doc.beta/files/app/vendor.js', line: 139950, column: 14
Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase._setupUI', file:'file:///data/data/one.servolab.google.doc.beta/files/app/vendor.js', line: 138704, column: 14
Frame: function:'', file:'file:///data/data/one.servolab.google.doc.beta/files/app/vendor.js', line: 138705, column: 19
Frame: function:'push.../node_modules/tns-core-modules/ui/layouts/layout-base-common.js.LayoutBaseCommon.eachChildView', file:'file:///data/data/one.servolab.google.doc.beta/files/app/vendor.js', line: 147404, column: 26
Frame: function:'push.../node_modules/tns-core-modules/ui/core/view/view-common.js.ViewCommon.eachChild', file:'file:///data/data/one.servolab.google.doc.beta/files/app/vendor.js', line: 139950, column: 14
Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase._setupUI', file:'file:///data/data/one.servolab.google.doc.beta/files/app/vendor.js', line: 138704, column: 14
Frame: function:'', file:'file:///data/data/one.servolab.google.doc.beta/files/app/vendor.js', line: 138705, column: 19
Frame: function:'push.../node_modules/tns-core-modules/ui/content-view/content-view.js.ContentView.eachChildView', file:'file:///data/data/one.servolab.google.doc.beta/files/app/vendor.js', line: 136470, column: 13
Frame: function:'push.../node_modules/tns-core-modules/ui/page/page-common.js.PageBase.eachChildView', file:'file:///data/data/one.servolab.google.doc.beta/files/app/vendor.js', line: 148497, column: 40
Frame: function:'push.../node_modules/tns-core-modules/ui/core/view/view-common.js.ViewCommon.eachChild', file:'file:///data/data/one.servolab.google.doc.beta/files/app/vendor.js', line: 139950, column: 14
Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase._setupUI', file:'file:///data/data/one.servolab.google.doc.beta/files/app/vendor.js', line: 138704, column: 14
Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase._addViewCore', file:'file:///data/data/one.servolab.google.doc.beta/files/app/vendor.js', line: 138603, column: 18
Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase._addView', file:'file:///data/data/one.servolab.google.doc.beta/files/app/vendor.js', line: 138592, column: 14
Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame.js.FragmentCallbacksImplementation.onCreateView', file:'file:///data/data/one.servolab.google.doc.beta/files/app/vendor.js', line: 144507, column: 19
Frame: function:'push.../node_modules/tns-core-modules/ui/frame/fragment.js.FragmentClass.onCreateView', file:'file:///data/data/one.servolab.google.doc.beta/files/app/vendor.js', line: 142510, column: 38
at com.tns.Runtime.callJSMethodNative(Native Method)
at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1242)
at com.tns.Runtime.callJSMethodImpl(Runtime.java:1122)
at com.tns.Runtime.callJSMethod(Runtime.java:1109)
at com.tns.Runtime.callJSMethod(Runtime.java:1089)
at com.tns.Runtime.callJSMethod(Runtime.java:1081)
at com.tns.FragmentClass.onCreateView(FragmentClass.java:53)
at androidx.fragment.app.Fragment.performCreateView(Fragment.java:2612)
at androidx.fragment.app.FragmentManagerImpl.moveToState(FragmentManagerImpl.java:874)
at androidx.fragment.app.FragmentManagerImpl.moveFragmentToExpectedState(FragmentManagerImpl.java:1228)
at androidx.fragment.app.FragmentManagerImpl.moveToState(FragmentManagerImpl.java:1293)
at androidx.fragment.app.BackStackRecord.executeOps(BackStackRecord.java:439)
at androidx.fragment.app.FragmentManagerImpl.executeOps(FragmentManagerImpl.java:2066)
at androidx.fragment.app.FragmentManagerImpl.executeOpsTogether(FragmentManagerImpl.java:1856)
at androidx.fragment.app.FragmentManagerImpl.removeRedundantOperationsAndExecute(FragmentManagerImpl.java:1811)
at androidx.fragment.app.FragmentManagerImpl.execPendingActions(FragmentManagerImpl.java:1717)
at androidx.fragment.app.FragmentManagerImpl$2.run(FragmentManagerImpl.java:150)
at android.os.Handler.handleCallback(Handler.java:873)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loop(Looper.java:193)
at android.app.ActivityThread.main(ActivityThread.java:6669)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
Caused by: java.lang.IllegalArgumentException: The style on this component requires your app theme to be Theme.MaterialComponents (or a descendant).
at com.google.android.material.internal.ThemeEnforcement.checkTheme(ThemeEnforcement.java:240)
at com.google.android.material.internal.ThemeEnforcement.checkMaterialTheme(ThemeEnforcement.java:215)
at com.google.android.material.internal.ThemeEnforcement.checkCompatibleTheme(ThemeEnforcement.java:143)
at com.google.android.material.internal.ThemeEnforcement.obtainStyledAttributes(ThemeEnforcement.java:78)
at com.google.android.material.card.MaterialCardView.(MaterialCardView.java:121)
at com.google.android.material.card.MaterialCardView.(MaterialCardView.java:111)
at com.google.android.material.card.MaterialCardView.(MaterialCardView.java:107)
... 24 more
Just wondering if it would be possible to use things like android:drawableEnd / android:drawableStart on the TextField and/or Button component.
Also, is it possible to use the default password visiblity toggle for the TextField?
If I use only nativescript-material-ripple I got this warning.
WARNING in ../node_modules/nativescript-material-core/core.js
Module not found: Error: Can't resolve 'nativescript-material-bottomsheet' in '/Users/.../myApp/node_modules/nativescript-material-core'
@ ../node_modules/nativescript-material-core/core.js
@ ../node_modules/nativescript-material-ripple/ripple.js
@ ./main.ts
It would be nice if we could add material icons to the textfield
As the title, I working Nativescript-Vue 5.2.2
If I wrap MDRipple inside GridLayout tag, it won't work, but in IOS it works fine
The material spec for slider also discusses a value label (a label with current value that floats alongside the slider).
I think this is often valuable and should be added.
On android, would have to switch to a slider which supports it; perhaps this slider.
[Android] Issue 1: SnackBarOptions doesn’t seem to work for android (backgroundColor, textColor) since in demo/snackbar colorful snackbar is not ‘colorful’
[Android] Issue 2: Demo application crashes on the 2nd ‘Simple Snackbar” dismiss with:
System.err: Calling js method onDismissed failed
System.err: TypeError: this.resolve is not a function
Steps to reproduce:
Note1:I believe the problem is in src/snackbar/snackbar.android.ts -> onDismissed method implementation -> this.resolve = null;
Note2: I believe there is something wrong with this example page demo/snackbar. If I select ‘Action Snackbar’ then ‘Simple Snackbar’ and then ‘Action Snackbar’ again -> simple snackbar is shown instead of actionable one.
[iOS] Issue 3: Unable to show any snackbar after showing Action Snackbar. It looks like it's already dismissed but actually it’s not. If Dismiss Snackbar is used then the invisible snackbar can be shown again.
Hello everyone, I have a problem, when running v-model in the MDTextField since when I try to write it indicates an error [object object] and is not capturing the data.
Can somebody help me?
`<MDTextField width="100%" v-model="id_passport" variant="outline" helper="" placeholderColor="white" keyboardType="number" hint="Ingrese su ID" returnKeyType="next" @Focus="onFocus" @blur="onBlur" @textchange="onTextChange"/>
data(){
return {
id_passport: '',
};
},
`
Please, ensure your title is less than 63 characters long and starts with a capital
letter.
tns --version to fetch it)node_modules/tns-core-modules/package.json file in your project)"tns-android" and "tns-ios" properties in the package.json file of your project)package.json file of yourDescribe the steps to reproduce it.
In the Angular Slider component, gesture events (pan, touch) breaks the component's operation. I tested Touch and Pan events. The bug occurs even if we place the Slider in StackLayout and listen to the gesture events on it.
natviescript 5.3.0
tns-core-modules has 5.3.1
tns-ios has 5.3.1
plugin version:
"nativescript-material-slider": "2.2.3",
Add listener (touch) or (pan) to MDSlider in angular
<MDSlider maxValue="100" value="50" minValue="0" (pan)="onPan($event)">
onPan($event) {
}
Similar to @shiv19 issue: #5 but this is within angular context.
Please, ensure your title is less than 63 characters long and starts with a capital
letter.
Describe the steps to reproduce it.
install from the plugin import { install } from 'nativescript-material-bottomsheet'; this._bottomSheet.show(ActivityComponent, options).subscribe(result => {
console.log('Option selected:', result);
});
Error when show is called.
JS: ERROR Error: Uncaught (in promise): Error: Failed to load page XML file for module: null
JS: Error: Failed to load page XML file for module: null
JS: at Object.createViewFromEntry (file:///node_modules/tns-core-modules/ui/builder/builder.js:67:0) [angular]
JS: at ProxyViewContainer.push.../node_modules/nativescript-material-bottomsheet/bottomsheet-common.js.ViewWithBottomSheetBase.showBottomSheet (file:///node_modules/nativescript-material-bottomsheet/bottomsheet-common.js:88:0) [angular]
JS: at ProxyViewContainer.derivedCtor.<computed> [as showBottomSheet] (file:///node_modules/nativescript-material-core/core.common.js:41:0) [angular]
JS: at file:///node_modules/nativescript-material-bottomsheet/angular/bottomsheet.service.js:34:0 [angular]
JS: at Object.onInvoke (file:///node_modules/@angular/core/fesm5/core.js:26255:0) [angular]
JS: at file:///node_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:883:0 [angular]
JS: at Object.onInvokeTask (file:///data/data/com.permobil.pushtracker/files/app/vendor.js:35593:...
tns --version to fetch it) latest all everythingDescribe the steps to reproduce it.
xml
<StackLayout class="bottom-sheet-layout" [backgroundColor]="CURRENT_THEME === APP_THEMES.DEFAULT ? '#ffffff' : '#202125'">
this will run and produce undefined in the bottomsheet.ios file when it's checking for value of backgroundColor. Removing the [] binding of the value works as expected.
Wrapping the bottomsheet.ios code checking backgroundColor value in a timeout fixes the problem but don't like it 😄. I'm going with a local fork for now with this for angular because I need to support theming at runtime for various modes. I'll poke around on it a few more and see if something comes up as potential solution for angular apps.
CLI: (run tns --version to fetch it)
6.1.0
Cross-platform modules: (check the 'version' attribute in the
node_modules/tns-core-modules/package.json file in your project)
"version": "6.1.1"
Runtime(s): (look for the "tns-android" and "tns-ios" properties in the package.json file of your project)
"tns-android": {
"version": "6.0.0"
}
Plugin(s): (look for the version numbers in the package.json file of your
project and paste your dependencies and devDependencies here)
"dependencies": {
"@vue/devtools": "^5.0.6",
"nativescript-material-core": "^2.4.1",
"nativescript-material-textfield": "^2.4.1",
"nativescript-socketio": "^3.2.1",
"nativescript-toasty": "^1.3.0",
"nativescript-vue": "^2.4.0",
"nativescript-vue-devtools": "^1.2.0",
"tns-core-modules": "^6.0.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"babel-loader": "^8.0.2",
"nativescript-dev-webpack": "^1.0.0",
"nativescript-vue-template-compiler": "^2.0.0",
"nativescript-worker-loader": "~0.9.0",
"node-sass": "^4.9.2",
"vue-loader": "^15.4.0"
}
Describe the steps to reproduce it.
Tried to create a textfield on a brand new app but there is an error inflating
System.err: Error: android.view.InflateException: Binary XML file line #18: Binary XML file line #18: Error inflating class com.google.android.material.textfield.TextInputLayout
<template> <Page xmlns:mdt="nativescript-material-textfield"> <StackLayout horizontalAlignment="center"> <MDTextField helper="example helper" placeholderColor="green" keyboardType="datetime" hint="i am an hint"/> </StackLayout> </Page> </template>Main.js
import TextFieldPlugin from 'nativescript-material-textfield/vue';
Vue.use(TextFieldPlugin);
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.