The purpose of useStyles
hook is to merge the default StockUI styles with custom styles provided by the integrator.
export function LLChatHeader({ title, styles: stylesProp }: LLChatHeaderProps) {
const headerStyles = useStyles({
componentStylesFn: getChatHeaderStyles,
stylesProp,
});
return (
<View style={headerStyles.headerContainer}>
<Text style={headerStyles.headerTitle}>{title}</Text>
</View>
);
}
const getChatHeaderStyles: LLComponentStyleFn<LLChatHeaderStyles> = ({
theme,
}) =>
StyleSheet.create({
headerContainer: {
display: 'flex',
flexDirection: 'row',
padding: 12,
},
headerTitle: {
alignSelf: 'center',
fontSize: 16,
textAlign: 'center',
flex: 1,
color: theme.text,
},
});
Type | Default |
---|
Partial stylesheet object of type returned by LLComponentStyleFn | No Default |
Type | Default |
---|
Stylesheet object of type returned by LLComponentStyleFn | No Default |