NativeScript React — Segmented Bar and Inputs

React is an easy to use framework for building front end apps.

NativeScript is a mobile app framework that lets us build native mobile apps with popular front end frameworks.

In this article, we’ll look at how to build an app with NativeScript React.

SegmentedBar

The segmentBar component lets us add a UI bar that displays a set of buttons for discrete selection.

We can show text or images on the buttons.

For example, we can use it by writing:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <frame>
      <page>
        <actionBar title="My App">
        </actionBar>
        <flexboxLayout justifyContent='center' >
          <segmentedBar>
            <segmentedBarItem title="First" />
            <segmentedBarItem title="Second" />
            <segmentedBarItem title="Third" />
          </segmentedBar>
        </flexboxLayout>
      </page>
    </frame>
  );
}

We add the segmentedBar into our app.

Then we add the segmentedBarItem into our bar to show some items.

We can also get and set the index of the item selected with:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <frame>
      <page>
        <actionBar title="My App">
        </actionBar>
        <flexboxLayout justifyContent='center' >
          <segmentedBar
            selectedIndex={0}
            onSelectedIndexChange={({ value }) => {
              console.log(value)
            }}
          >
            <segmentedBarItem title="First" />
            <segmentedBarItem title="Second" />
            <segmentedBarItem title="Third" />
          </segmentedBar>
        </flexboxLayout>
      </page>
    </frame>
  );
}

selectedIndex has the index of the item we want to select by default.

And onSelectedIndexChange has a function that gets the value of the index of the latest selected item.

value has the index.

Slider

A slider is a UI component that gives us a slider control for picking values in a specified numeric range.

For example, we can write:

import * as React from "react";

export default function Greeting({ }) {
  const [val, setVal] = React.useState(0)
  return (
    <frame>
      <page>
        <actionBar title="My App">
        </actionBar>
        <flexboxLayout justifyContent='center' >
          <slider value={val} onValueChange={({ value }) => setVal(value)} />
        </flexboxLayout>
      </page>
    </frame>
  );
}

to add the slider component into our app.

We set the value to the val state.

And we get the value and set the value of val in the onValueChange callback.

Switch

A switch lets us toggle between 2 states.

For example, we can write:

import * as React from "react";

export default function Greeting({ }) {
  const [val, setVal] = React.useState(true)
  return (
    <frame>
      <page>
        <actionBar title="My App">
        </actionBar>
        <stackLayout horizontalAlignment='center'>
          <switch
            checked={val}
            onCheckedChange={({ value }) => setVal(value)}
          />
          <label text={val.toString()} style={{ textAlignment: 'center' }} />
        </stackLayout>
      </page>
    </frame>
  );
}

We add the switch component with the checked prop to set the checked value.

onCheckChange has a function to get the checked value of the and we set that as the value of the val state.

TextField

The textField component is an input component for letting users enter a line of text.

For instance, we can write:

import * as React from "react";

export default function Greeting({ }) {
  const [textFieldValue, setTextFieldValue] = React.useState()
  return (
    <frame>
      <page>
        <actionBar title="My App">
        </actionBar>
        <stackLayout horizontalAlignment='center'>
          <textField
            text={textFieldValue}
            hint="Enter text..."
            onTextChange={({ value }) => setTextFieldValue(value)}
          />
          <label text={textFieldValue} style={{ textAlignment: 'center' }} />
        </stackLayout>
      </page>
    </frame>
  );
}

We add the textField and listen to the onTextChange event to get the latest entered value.

text has the entered text.

hint is the placeholder for the text field.

Conclusion

We can add a segmented bar, text input, slider, and switch into our mobile app with React NativeScript.