3

React Native Segmented control

 2 years ago
source link: https://reactnativeexample.com/react-native-segmented-control/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Segmented

React Native Segmented control

Dec 18, 2021

1 min read

segmented-control-rn

React Native Segmented control

Installation

npm install segmented-control-rn

Usage

import React, { useState } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import SegmentedControl from "segmented-control-rn";

const INACTIVE_COLOR = 'rgba(0, 0, 0, 0.5)';
const ACTIVE_COLOR = 'rgb(0, 0, 0)';

const segments = [
  {
    active: <Text style={{ color: ACTIVE_COLOR }}>First</Text>,
    inactive: <Text style={{ color: INACTIVE_COLOR }}>First</Text>,
  },
  {
    active: <Text style={{ color: ACTIVE_COLOR }}>Second</Text>,
    inactive: <Text style={{ color: INACTIVE_COLOR }}>Second</Text>,
  },
  {
    active: <Text style={{ color: ACTIVE_COLOR }}>Third</Text>,
    inactive: <Text style={{ color: INACTIVE_COLOR }}>Third</Text>,
  },
];

// ...

const [activeIndex, setActiveIndex] = useState(0);

return (
  <SegmentedControl
    onChange={(index) => setActiveIndex(index)}
    segments={segments}
    selectedIndex={activeIndex}
  />
);

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

GitHub

View Github

Previous Post

Styled Components for React Native the way they should have been

You might also like...

A Segmented Control with React Native for both iOS and Android.
17 July 2020

Subscribe to React Native Example for Android and iOS

Get the latest posts delivered right to your inbox


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK