cf034dd04d
Switch Activity / Fragment / FragmentManager implementation from native framework to support library APIs BREAKING CHANGE: NativeScript core framework now extends support library APIs versus native framework classes as per Google's latest guidelines: - NativeScript activities now extend `android.support.v7.app.AppCompatActivity` (vs android.app.Activity) - NativeScript fragments now extend `android.support.v4.app.Fragment` (vs android.app.Fragment) - NativeScript now works internally with `android.support.v4.app.FragmentManager` (vs android.app.FragmentManager) The implications of these changes should be mostly transparent to the developer except for the fact that the support library Fragment / FragmentManager work with Animation APIs versus Animator APIs. For Android API Levels lower than 28 the new Fragment API uses a different fragment enter animation by default. You can customise the transition per navigation entry or globally via the [navigation transitions API](https://docs.nativescript.org/core-concepts/navigation#navigation-transitions) Before: Default fragment enter animation was fade animation After: Default fragment enter animation for API levels lower than 28 is now a fast "push fade" animation; default fragment enter animation for API levels equal to or greater than 28 remains fade animation Before: AndroidFragmentCallbacks interface exposed the following `onCreateAnimator(...)` method ``` ts export interface AndroidFragmentCallbacks { onCreateAnimator(fragment: any, transit: number, enter: boolean, nextAnim: number, superFunc: Function): any; // ... } ``` After: AndroidFragmentCallbacks interface now exposes the following `onCreateAnimation(...)` method instead (and `onCreateAnimator(...)` is now removed) ``` ts export interface AndroidFragmentCallbacks { onCreateAnimation(fragment: any, transit: number, enter: boolean, nextAnim: number, superFunc: Function): any; // ... } ``` Before: Transition class exposed the following abstract `createAndroidAnimator(...)` method ``` ts export class Transition { public createAndroidAnimator(transitionType: string): any; // ... } ``` After: Transition class now exposes the following abstract `createAndroidAnimation(...)` method instead (and `createAndroidAnimation(...) is now removed) ``` ts export class Transition { public createAndroidAnimation(transitionType: string): any; // ... } ``` To migrate the code of your custom transitions follow the example below: Before: ``` ts import * as transition from "tns-core-modules/ui/transition"; export class CustomTransition extends transition.Transition { constructor(duration: number, curve: any) { super(duration, curve); } public createAndroidAnimator(transitionType: string): android.animation.Animator { var scaleValues = Array.create("float", 2); switch (transitionType) { case transition.AndroidTransitionType.enter: case transition.AndroidTransitionType.popEnter: scaleValues[0] = 0; scaleValues[1] = 1; break; case transition.AndroidTransitionType.exit: case transition.AndroidTransitionType.popExit: scaleValues[0] = 1; scaleValues[1] = 0; break; } var objectAnimators = Array.create(android.animation.Animator, 2); objectAnimators[0] = android.animation.ObjectAnimator.ofFloat(null, "scaleX", scaleValues); objectAnimators[1] = android.animation.ObjectAnimator.ofFloat(null, "scaleY", scaleValues); var animatorSet = new android.animation.AnimatorSet(); animatorSet.playTogether(objectAnimators); var duration = this.getDuration(); if (duration !== undefined) { animatorSet.setDuration(duration); } animatorSet.setInterpolator(this.getCurve()); return animatorSet; } } ``` After: ``` ts import * as transition from "tns-core-modules/ui/transition"; export class CustomTransition extends transition.Transition { constructor(duration: number, curve: any) { super(duration, curve); } public createAndroidAnimation(transitionType: string): android.view.animation.Animation { const scaleValues = []; switch (transitionType) { case transition.AndroidTransitionType.enter: case transition.AndroidTransitionType.popEnter: scaleValues[0] = 0; scaleValues[1] = 1; break; case transition.AndroidTransitionType.exit: case transition.AndroidTransitionType.popExit: scaleValues[0] = 1; scaleValues[1] = 0; break; } const animationSet = new android.view.animation.AnimationSet(false); const duration = this.getDuration(); if (duration !== undefined) { animationSet.setDuration(duration); } animationSet.setInterpolator(this.getCurve()); animationSet.addAnimation( new android.view.animation.ScaleAnimation( scaleValues[0], scaleValues[1], scaleValues[0], scaleValues[1] )); return animationSet; } } ```
NativeScript 
NativeScript is a framework for building native iOS and Android apps using JavaScript and CSS. NativeScript renders UIs with the native platform’s rendering engine, no WebViews, resulting in native-like performance and UX.
NativeScript provides a best-of-both-worlds development experience. Our cross-platform JavaScript modules give you the convenience of writing iOS and Android apps from a single JavaScript codebase, while our runtimes give you the power of accessing native APIs, SDKs, and frameworks when you need them—all without needing to open Xcode or Android Studio. NativeScript was created and is supported by Telerik.
Check out the links below to get started:
- CTO’s guide to NativeScript
- Getting Started and Installation
- Quick Links
- Repositories
- Contributing
- Angular
Important
: NativeScript is an inclusive community, and we expect all NativeScript community members, users, and contributors to treat each other respectfully. As such, all users of this repository must adhere to the NativeScript community code of conduct.
For CTOs
Making the right technology choices is key to success. Our CTO’s guide to NativeScript helps you understand why NativeScript is the right choice for your next mobile project.
Getting Started and Installation
Our Getting Started Guides are hands-on tutorials that walk you through installing NativeScript and building a real iOS and Android application.
NativeScript architecture diagram
Below is a common NativeScript architecture diagram. In more detail, read the How NativeScript Works article.
Quick Links
- NativeScript home page
- NativeScript code samples
- Install NativeScript demo mobile app
- NativeScript playground
- NativeScript and Angular
- @NativeScript on Twitter
- NativeScript community Slack channel
- NativeScript community forum
- NativeScript on Stack Overflow
- NativeScript documentation
- NativeScript marketplace
- NativeScript roadmap
Repositories
The NativeScript framework consists of a number of components, all of which are open source and on GitHub. Here are the major ones:
- Cross-platform modules
- This repo contains the NativeScript cross-platform modules, which abstract iOS and Android APIs into JavaScript APIs—e.g.
camera.takePicture(). The modules are written in TypeScript.
- This repo contains the NativeScript cross-platform modules, which abstract iOS and Android APIs into JavaScript APIs—e.g.
- iOS runtime
- This repo contains the NativeScript iOS runtime—the code that hosts NativeScript iOS apps, and allows JavaScript code to be executed on iOS devices. The iOS runtime is written in a fun mix of C++, Objective-C, and more.
- Android runtime
- This repo contains the NativeScript Android—the code that hosts NativeScript Android apps, and allows JavaScript code to be executed on Android devices. The Android runtime is written in a fun mix of C++ and Java.
- CLI
- This repo contains the NativeScript command-line interface, which lets you create, build, and run apps using the NativeScript framework. The CLI is written in TypeScript.
- Docs
- This repo contains the NativeScript framework documentation, which is available at http://docs.nativescript.org/. The docs are written in Markdown.
In addition to the code that makes up the NativeScript framework itself, we also provide a number of open-source sample apps that you can reference while building your NativeScript application.
Contributing
We love PRs, and accept them for all of our repositories—even docs! Please follow our contribution guide if you want to become part of the project.
Angular
We worked together with the Google Angular team to make Angular 2+ work on top of NativeScript. To use Angular with NativeScript please follow the getting started article.
Get Help
Please, use github issues strictly for reporting a bugs or requesting features. For general NativeScript questions and support, check out the NativeScript community forum or ask our experts in NativeScript community Slack channel.