Fluid Segmented Bar
npm i --save @nstudio/nativescript-fluid-segmented-bar


Fluid Segmented Bar to liven up any standard SegmentedBar control.

  • iOS: Uses SJFluidSegmentedControl
  • Android: Uses standard SegementedBar - Jetpack Compose will be added in future to replicate


npm install @nstudio/nativescript-fluid-segmented-bar

Use within any view layout:

<FluidSegmentedBar items="{{items}}" gradientColorSides="{{gradientColorSides}}" selectedIndexChanged="{{selectedIndexChanged}}" didScrollOffset="{{didScrollOffset}}"/>

Provide bindings for properties and events:

const items: Array<FluidSegmentedBarItem> = [
title: 'Enjoy',
colors: [new Color('#485ae6'), new Color('#87aeed')],
title: 'Your',
colors: [new Color('#87aeed'), new Color('#e53ca9')],
title: 'Life',
colors: [new Color('#c2c96a'), new Color('#678d50')],
const gradientColorSides: FluidSegmentedBarGradientColorSides = {
left: [new Color('#87aeed')],
right: [new Color('#c2c96a')],

function selectedIndexChanged(args: FluidSegmentedBarIndexChangedEvent) {
console.log('selectedIndexChanged:', args.newIndex);
function didScrollOffset(args: FluidSegmentedBarDidScrollEvent) {
console.log('didScrollOffset:', args.offset);

When using flavors, you can just register the element for usage in your markup:

import { FluidSegmentedBar } from '@nstudio/nativescript-fluid-segmented-bar'

// Angular
import { registerElement } from '@nativescript/angular'
registerElement('FluidSegmentedBar', () => FluidSegmentedBar)

// Solid
import { registerElement } from 'dominative';
registerElement('fluidSegmentedBar', FluidSegmentedBar);

// Svelte
import { registerNativeViewElement } from 'svelte-native/dom'
registerNativeViewElement('fluidSegmentedBar', () => FluidSegmentedBar);

// React
import { registerElement } from 'react-nativescript';
registerElement('fluidSegmentedBar', () => FluidSegmentedBar);

// Vue
import Vue from 'nativescript-vue'
Vue.registerElement('FluidSegmentedBar', () => FluidSegmentedBar)



  • items: Array<FluidSegmentedBarItem>: Collection of bar items with title and colors.
  • gradientColorSides: FluidSegmentedBarGradientColorSides: The gradiated side colors.


  • selectedIndexChanged: When the selectedIndex changes.
  • didScrollOffset: Whenever the control animates it's selected position, the offset and maxOffset will be emitted to provide ability to animate other visuals based on it's movement.


Apache License Version 2.0