Switch

The Switch component is a fundamental building block for displaying text in your React Native applications. It is designed to render styled text with various customization options, making it versatile for a wide range of use cases.

Expo component example

Airplane mode

Installation

To use the Switch component, make sure first that you have initiated the library.

CLI

This command will add the Switch component file to your project and install any necessary dependencies.

npx mallaui@latest add Switch

Manual

Copy and paste the following code into your project. Make sure to install the necessary dependencies first and update path to match your project setup.

Switch.tsx

import {Switch as DefaultSwitch, SwitchProps, StyleSheet, View} from 'react-native';
import {useStyles} from '../../styles/useStyles';
import {FC} from 'react';
import {Text} from './Text';
import {useTheme} from '../../styles/useTheme';
import {DescriptionText} from './DescriptionText';

const defaultStyles = () => {
  return StyleSheet.create({
    wrapperWithLabel: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between'
    },
    wrapperWithDescription: {
      flexDirection: 'row',
      alignItems: 'flex-start',
      justifyContent: 'space-between'
    },
    textWrapper: {
      flexDirection: 'column'
    }
  });
};

interface ISwitchProps extends SwitchProps {
  /**
   * The text to display under the switch.
   */
  description?: string;

  /**
   * The switch label.
   */
  label?: string;

  /**
   * If the checkbox is disabled, it becomes opaque and uncheckable.
   */
  isDisabled?: boolean;
}

export const Switch: FC<ISwitchProps> = ({
  style,
  value,
  label,
  description,
  isDisabled,
  ...otherProps
}) => {
  const styles = useStyles(defaultStyles);
  const {theme} = useTheme();

  return (
    <View
      style={[
        !!label && styles.wrapperWithLabel,
        !!description && styles.wrapperWithDescription
      ]}
    >
      <View style={styles.textWrapper}>
        {label ? (
          <Text color='primary' size='md' fontWeight='medium'>
            {label}
          </Text>
        ) : null}
        {description ? (
          <DescriptionText type={'info'}>{description}</DescriptionText>
        ) : null}
      </View>
      <DefaultSwitch
        style={[style]}
        trackColor={{false: theme.colors.app.input, true: theme.colors.app.primary}}
        thumbColor={theme.colors.app.background}
        disabled={isDisabled}
        value={value}
        {...otherProps}
      />
    </View>
  );
};

Usage

import { Switch } from './components/ui/Switch'

<Switch label='Airplane mode' onValueChange={toggleSwitch} value={isEnabled} />

Properties

Name
label
Type
string
Description
Label for the switch.
Name
description
Type
string
Description
Description that will be displayed under the label.
Name
isDisabled
Type
boolean
Description
Boolean if the switch is disabled.

Description

Expo component example

Marketing emails

Receive updates about Malla UI product

State

Expo component example

Marketing emails

Receive updates about Malla UI product