LLThemeSwitch

Using LLThemeSwitch component, you can switch between light and dark theme StockUI. The component renders a switch icon to toggle light/dark theme.
This component is not rendered in Stock UI by default. You can include LLThemeSwitch by customising chat header of LLChat using HeaderComponent prop

1794
Example usage:
import React from 'react';
import { Text, View } from 'react-native';
import {
  LLChat,
  LLChatHeaderProps,
  LLThemeSwitch,
} from '@livelike/react-native';

function CustomHeader({ title }: LLChatHeaderProps) {
  return (
    <View>
      <Text>{title}</Text>
      <LLThemeSwitch />
    </View>
  );
}

export function MyApp() {
  return <LLChat roomId="<Your chat room id>" HeaderComponent={CustomHeader} />;
}

Hooks used by LLThemeSwitch

LLThemeSwitch Props

switchIcon

Type

Default

Image source

themeAssets.themeSwitch icon (exposed by useTheme hook)

styles

Type

Default

StyleSheet of type LLThemeSwitchStyles

No Default, if present styles props would be applied on top of internal LLThemeSwitch styles.

Styles Props

CSS Class

Type

Description

imageContainer

ViewStyle

Icon image container

image

ImageStyle

Icon image styles


What’s Next