Explain ReactNative SwitchSelector Component

SwitchSelector is a React Native component that functions like a radio toggle button, allowing users to select from multiple options (more than 2). It's particularly useful for creating segmented controls and option selectors in mobile applications.

Installation

To work with SwitchSelector, you need to install the package:

npm i react-native-switch-selector --save-dev

Basic Syntax

The basic SwitchSelector structure looks as follows:

<SwitchSelector
    options={yourOptions}
    initial={0}
    onPress={value => console.log(`value selected is : ${value}`)}
/>

Properties

Here are the important properties of SwitchSelector:

Example: SwitchSelector with Images

To work with SwitchSelector, first import the component:

import SwitchSelector from "react-native-switch-selector";

In this example, we'll create a gender selector with Female/Male options using images:

import React, { Component } from 'react';
import { StyleSheet, SafeAreaView } from 'react-native';
import SwitchSelector from "react-native-switch-selector";

let male = require('./assets/male.png');
let female = require('./assets/female.png');

const images = {
    "female": female,
    "male": male,
};

const options = [
    { label: "Female", value: "f", imageIcon: images.female },
    { label: "Male", value: "m", imageIcon: images.male }
];

export default class MySwitchSelectorComponent extends Component {
    render() {
        return (
            <SafeAreaView style={styles.container}>
                <SwitchSelector
                    initial={0}
                    onPress={value => this.setState({ gender: value })}
                    textColor='#ccceeaa'
                    selectedColor='#7a44cf'
                    buttonColor='#ccc'
                    borderColor='#ccc'
                    hasPadding
                    options={options}
                />
            </SafeAreaView>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center"
    },
});

Example: SwitchSelector with Three Options

Here's an example with three text-based options:

import React, { Component } from 'react';
import { StyleSheet, SafeAreaView } from 'react-native';
import SwitchSelector from "react-native-switch-selector";

const options = [
    { label: "First", value: "a"},
    { label: "Second", value: "b" },
    { label: "Third", value: "c" }
];

export default class MySwitchSelectorComponent extends Component {
    render() {
        return (
            <SafeAreaView style={styles.container}>
                <SwitchSelector
                    initial={0}
                    onPress={value => this.setState({ selection: value })}
                    textColor='#ccceeaa'
                    selectedColor='#7a44cf'
                    buttonColor='#ccc'
                    borderColor='#ccc'
                    fontSize='30'
                    hasPadding
                    options={options}
                />
            </SafeAreaView>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    }
});

Key Points

• SwitchSelector requires an options array with at least label and value properties
• Use imageIcon property to add icons to options
• The initial prop sets which option is selected by default
• Customize appearance using color and styling props

Conclusion

SwitchSelector provides an elegant way to create segmented controls in React Native apps. It's highly customizable and supports both text and image-based options for better user experience.