<Styles />
Styles is a wrapper component which does the same work as that of useStyles() hook. It internally uses useStyles() hook.
Stylo recommends to use the Stylish components & Styler hooks instead of the<Styles />component. In practice, one may not need to use the<Styles />component directly.
Type definition
type TProps<
TStyleProp,
TStyleName extends string,
TStyleNamespace extends string
> = {
styleNamespace: TStyleNamespace;
styleNames: TStyleName[];
children: (style: StyleProp<TStyleProp>) => React.ReactNode;
};
TStyleProp
Standard React Native stye prop like TextStyle, ViewStyle etc.
TStyleName
StyleName type defined in the theme.
TStyleNamespace
StyleNamespace type defined in the theme.
Props
styleNamespace (Required)
The StyleNamespace to be used which holds the style definitions for the StyleNames supplied to the hook.
styleNames (Required)
The StyleNames which define the styles.
children (Required)
A render function, which passes Standard React Native style object (e.g. StyleProp<ViewStyle>) as an argument.
Usage
import React from 'react';
import { SafeAreaView, Text, TextStyle, View, ViewStyle } from 'react-native';
import { Styles } from 'react-native-stylo';
import { TTextStyle, TViewStyle } from './stylo/themes/types';
const StylesShowCase: React.FC = () => (
<Styles<ViewStyle, TViewStyle>
styleNamespace="ViewStyles"
styleNames={['Screen']}>
{screenStyle => (
<View style={screenStyle}>
<SafeAreaView />
<Styles<ViewStyle, TViewStyle>
styleNamespace="ViewStyles"
styleNames={['Screen.Header', 'Padding']}>
{screenHeaderStyle => (
<React.Fragment>
<View style={screenHeaderStyle}>
<Styles<TextStyle, TTextStyle>
styleNamespace="TextStyles"
styleNames={['H1', 'Margin.Top.Small', 'Margin.Bottom.Small']}>
{screenTitleStyle => (
<Text style={screenTitleStyle}>{'<Styles />'}</Text>
)}
</Styles>
</View>
<Styles<ViewStyle, TViewStyle>
styleNamespace="ViewStyles"
styleNames={['Screen.Body', 'Padding']}>
{screenBodyStyle => (
<View style={screenBodyStyle}>
<Styles<ViewStyle, TViewStyle>
styleNamespace="ViewStyles"
styleNames={['Border', 'Border.Radius', 'BackgroundColor.Alpha10', 'Margin.Bottom.Large']}>
{cardStyle => (
<View style={cardStyle}>
<Styles<ViewStyle, TViewStyle>
styleNamespace="ViewStyles"
styleNames={['Padding.Top', 'Padding.Left', 'Padding.Right']}>
{cardHeaderStyle => (
<View style={cardHeaderStyle}>
<Styles<TextStyle, TTextStyle>
styleNamespace="TextStyles"
styleNames={['Large', 'Bold']}>
{cardTitleStyle => (
<Text style={cardTitleStyle}>
Type definition
</Text>
)}
</Styles>
</View>
)}
</Styles>
<Styles<ViewStyle, TViewStyle>
styleNamespace="ViewStyles"
styleNames={['Padding']}>
{cardBodyStyle => (
<View style={cardBodyStyle}>
<Styles<TextStyle, TTextStyle>
styleNamespace="TextStyles"
styleNames={['Color.Grey8', 'Bold.Semi']}>
{codeStyle => (
<Text style={codeStyle}>
{
'type TProps<TStyleProp, TStyleName extends string, TStyleNamespace extends string> = { styleNamespace: TStyleNamespace; styleNames: TStyleName[]; children: (style: StyleProp<TStyleProp>) => React.ReactNode; };'
}
</Text>
)}
</Styles>
</View>
)}
</Styles>
</View>
)}
</Styles>
</View>
)}
</Styles>
</React.Fragment>
)}
</Styles>
</View>
)}
</Styles>
);
export default StylesShowCase;
