LLThemeSwitch

Suggest Edits

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

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

Updated 4 months ago

What’s Next

Customisation