Nativescript Material Components

Build beautiful, usable products using Material Components for NativeScript.

Installation

Android

Ensure your Android Theme is inheriting from MaterialComponents.Inside App_resources/android/res/values/styles.xml replace all occurences of Theme.AppCompat with Theme.MaterialComponentsYou can see an example in the demo-vue app.

Theming

Defining the theme and the default colors must be done a bit differently on iOS and Android

• Android: You must set the colors through android Style
• iOS: You must set the colors programmatically at your app startup

import { themer } from '@nativescript-community/ui-material-core';
if (global.isIOS) {
    themer.setPrimaryColor('#bff937');
    themer.setAccentColor('#ff8a39');
    themer.setSecondaryColor('#a830d7');
}

Mixins

Through this component you can apply elevation or rippleColor to any View. To enable that feature your must "install" the mixins. Make sure you do it before creating any view.

import { installMixins } from '@nativescript-community/ui-material-core';
installMixins();

Components

FAQ

Question: How to use the latest version of this plugin for iOS?

Answer: To get latest versions of Material Components for iOS (> 112.1) you will need to change Pod min version to 10.0To do that modify or create App_Resources/iOS/Podfile to add platform :ios, '10.0'.You can see an example in the demo-vue app.

Q: How to migrate to AndroidX with this plugin installed (Android only)?

A: For Material Components to work correctly with {N} 6 and AndroidX you need to update your android app theme.Inside App_resources/android/res/values/styles.xml replace all occurences of Theme.AppCompat with Theme.MaterialComponentsYou can see an example in the demo-vue app.

Q: What is the difference between Bottom Navigation and Bottom Navigation Bar component?

A: The Bottom Navigation Bar is a new component to draw a bottom navigation bar in material design.The Bottom Navigation component is a simple extract of the eponymous component from NativeScript, which probably will be removed in the future so this one can be used for easy transition.

Q: How can I contribute?

A:

npm i
npm run setup # this should happen for every typescript update
npm run build.all
npm run demo.ios
npm run demo.android