NativeScript empowers you to access native APIs from JavaScript directly. Currently iOS, Android, and visionOS runtimes are provided for rich mobile development across a variety of diverse use cases.

• Cross-Platform Development: Build truly native mobile apps for iOS, Android, and visionOS using JavaScript/TypeScript
• Native API Access: Directly access all native platform APIs from JavaScript
• Framework Agnostic: Works with Angular, React, Vue, Svelte, or plain JavaScript/TypeScript
• Native UI Components: Use native UI components for maximum performance
• Hot Module Replacement: See changes instantly with HMR during development
• Rich Plugin Ecosystem: Extend functionality with community plugins
• TypeScript Support: First-class TypeScript support out of the box
• CSS Styling: Style your apps with CSS or SASS/SCSS
• CLI Tools: Powerful command-line interface for development workflow

• Node.js (LTS version recommended)
• npm (comes with Node.js) or yarn
• For iOS development: Xcode and CocoaPods (macOS only)
• For Android development: Android Studio and Android SDK

You can customize the clear button ("X") color in a SearchBar using platform-specific CSS:

<SearchBar hint="Search..." class="my-search-bar" />

/* For iOS */
SearchBar.ios .search-bar-clear-icon {
    color: #FF0000; /* Red color for the clear button */
}

/* For Android */
SearchBar.android .search-bar-clear-icon {
    tint-color: #FF0000; /* Red color for the clear button */
}

Alternatively, you can set it programmatically:

// For iOS
if (isIOS) {
    const searchBar = page.getViewById('mySearchBar');
    const clearButton = searchBar.ios.searchBar.searchField.clearButton;
    clearButton.tintColor = new Color('red').ios;
}

// For Android
if (isAndroid) {
    const searchBar = page.getViewById('mySearchBar');
    const searchCloseIcon = searchBar.android.findViewById(androidx.appcompat.R.id.search_close_btn);
    if (searchCloseIcon) {
        searchCloseIcon.setColorFilter(
            new Color('red').android,
            android.graphics.PorterDuff.Mode.SRC_IN
        );
    }
}

NativeScript supports additional CSS properties for fine-grained control over view transformations:

.my-view {
  /* Control the x and y origin for transformations */
  origin-x: 50%;  /* Can be percentage, px, or other length units */
  origin-y: 50%;  /* Can be percentage, px, or other length units */
  
  /* Example with transform */
  transform: rotate(45deg);  /* Rotation will be around the specified origin */
}

1. Install the NativeScript CLI globally:

   npm install -g nativescript

2. Verify installation:

   ns --version

3. Create a new project:

   ns create my-app
   # Follow the prompts to choose your preferred template (Angular, React, Vue, etc.)

4. Navigate into your project directory:

   cd my-app

5. Run your app on an emulator or device:

   # For Android
   ns run android
   
   # For iOS (macOS only)
   ns run ios

A typical NativeScript project structure looks like this:

my-app/
├── app/                     # Your application code
│   ├── app.(css|scss)       # Global styles
│   ├── app.(js|ts)          # Application entry point
│   ├── main-page.(xml|html) # Main page
│   └── ...
├── App_Resources/          # Platform-specific resources
│   ├── Android/            # Android resources
│   └── iOS/                # iOS resources
├── node_modules/           # Dependencies
├── platforms/              # Platform-specific builds
├── package.json            # Project configuration
└── webpack.config.js       # Webpack configuration

NativeScript provides a robust testing environment. To run tests:

# Install testing dependencies
npm install --save-dev @nativescript/core @nativescript/angular @nativescript/webpack

# Run tests
npm test

For more advanced testing scenarios, check out the testing documentation.

1. Setup your local development environment

2. Clone to contribute:

$ git clone https://github.com/NativeScript/NativeScript.git
$ cd NativeScript

# setup workspace for development
$ npm run setup

# list all available commands to run
$ npm start

We love you and your pull requests 🤗. Please follow our contributing guide and see our code of governance to become as involved as you want to be.

• @nativescript/core Singular primitives offering an easy-to-use API surface for diverse iOS/visionOS/Android APIs implemented with NativeScript.
• @nativescript/types Types for both iOS/Android below wrapped up as a convenience. Most commonly used.
• @nativescript/types-ios Types for iOS.
• @nativescript/types-android Types for Android.
• @nativescript/types-minimal A very minimal set of types for only the latest Android and iOS sdks. Most commonly used to optimize Web-based IDE's which auto load all type declarations from node_modules.
• @nativescript/ui-mobile-base UI mobile base native classes used by core.
• @nativescript/webpack Webpack build utilities and configs used by NativeScript apps.

• Join our Discord community for real-time discussions
• Follow @NativeScript on Twitter for updates
• Check out Stack Overflow for community Q&A
• Report issues on GitHub Issues
• Contribute to the documentation

• NativeScript Home
• NativeScript Tutorials
• NativeScript documentation
• JavaScript starter: https://nativescript.new/javascript
• TypeScript starter: https://nativescript.new/typescript
• Angular starter: https://nativescript.new/angular
• React starter: https://nativescript.new/react
• Solid starter: https://nativescript.new/solid
• Svelte starter: https://nativescript.new/svelte
• Vue starter: https://nativescript.new/vue
• Vue 3 starter: https://nativescript.new/vue3
• NativeScript on Twitter
• NativeScript on Discord
• NativeScript on Stack Overflow

Outside the source centralized in this repo, NativeScript consists of a few other source repos. Here are the major ones:

• iOS and visionOS Runtime Empowers JavaScript code to be executed on iOS and visionOS devices written in a mix of C++, Objective-C, and Swift.
• Android Runtime Empowers JavaScript code to be executed on Android devices written in a mix of C++, Java and Kotlin.
• CLI Command-line interface empowering you to create, build, and run apps using NativeScript.
• Docs Documentation available at http://docs.nativescript.org/ written in Markdown.
• Plugins Various TSC managed plugins. Also a good reference is the plugin marketplace with several additional plugins.
• Firebase Modular Firebase 🔥 implementation for supported platforms.
• ML Kit Google's ML Kit SDKs for supported platforms.
• Payments In-App Purchase, Subscriptions, Google Pay and Apple Pay.
• Artwork Want to use our logo or colors? Feel free to use any of our ready-to-use media material.

Copyright OpenJS Foundation and NativeScript contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy