Stylers
Stylers are the styling hooks. Stylers accept StyleNames as its argument & return the style object. They read the styles defined for the StyleNames in the theme, combines these styles into one & returns the final style, a standard React Native style object.
Stylo's objective is to provide a styling hook for each React Native component. This way it plans to cover the styling requirements of all the components.
Each React Native component has its own style type. E.g. Text component needs style object of type StyleProp<TextStyle>, View component needs style object of type StyleProp<ViewStyle> etc. So each styler is tightly coupled with a React Native component which returns a style object specific to that component.
All styler hooks use the useStyles() hook internally to create & return the style object from styleNames supplied to them as an argument. A rule of thumb, prefer Stylish components over Stylers, use Styler hooks in cases where the use of Stylish components is not possible.Styler arguments
All stylers accept one argument.
styleNames (Required)
The StyleNames which define the styles.
All the code samples below use Stylo theme. The code samples below do not display the pictorial outcomes. Also, the code samples below are not tightly coupled to the StyleName types. If you have not yet gone through the tight coupling of style types then you can read the document Tight coupling.
useIconStyles()
Type definition
function useIconStyles<TStyleName extends string>(styleNames: TStyleName[]): StyleProp<TextStyle>
StyleNamespace: IconStyles
Usage
import React, { useRef } from 'react';
import { StyleSheet } from 'react-native';
import AntDesign from 'react-native-vector-icons/AntDesign';
import { useIconStyles } from 'react-native-stylo';
import { TIconStyle } from '../themes/types';
const ComponentA = () => {
const styles = useRef(
StyleSheet.create({
iconStyle: useIconStyles<TIconStyle>(['Color.Primary', 'Large']),
})
).current;
return (
<AntDesign style={styles.iconStyle} name="home" {...otherProps} />
);
}
useImageBackgroundStyles()
Type definition
function useImageBackgroundStyles<TStyleName extends string>(styleNames: TStyleName[]): StyleProp<ViewStyle>
StyleNamespace: ImageBackgroundStyles
Usage
import React, { useRef } from 'react';
import { ImageBackground, StyleSheet } from 'react-native';
import { useImageBackgroundStyles } from 'react-native-stylo';
import { TImageBackgroundStyle } from '../themes/types';
const ComponentA = () => {
const styles = useRef(
StyleSheet.create({
imageBackgroundStyle: useImageBackgroundStyles<TImageBackgroundStyle>(['BackgroundColor.Grey2']),
})
).current;
return (
<ImageBackground style={styles.imageBackgroundStyle} {...otherProps} />
);
}
useImageStyles()
Type definition
function useImageStyles<TStyleName extends string>(styleNames: TStyleName[]): StyleProp<ImageStyle>
StyleNamespace: ImageStyles
Usage
import React, { useRef } from 'react';
import { Image, StyleSheet } from 'react-native';
import { useImageStyles } from 'react-native-stylo';
import { TImageStyle } from '../themes/types';
const ComponentA = () => {
const styles = useRef(
StyleSheet.create({
imageStyle: useImageStyles<TImageStyle>(['Avatar', 'Avatar.Square', 'Avatar.Large']),
})
).current;
return (
<Image style={styles.imageStyle} {...otherProps} />
);
}
useSafeAreaViewStyles()
Type definition
function useSafeAreaViewStyles<TStyleName extends string>(styleNames: TStyleName[]): StyleProp<ViewStyle>
StyleNamespace: SafeAreaViewStyles
Usage
import React, { useRef } from 'react';
import { SafeAreaView } from 'react-native';
import { useSafeAreaViewStyles } from 'react-native-stylo';
import { TViewStyle } from '../themes/types';
const ComponentA = () => {
const styles = useRef(
StyleSheet.create({
safeAreaViewStyle: useSafeAreaViewStyles<TViewStyle>(['BackgroundColor.Body']),
})
).current;
return (
<SafeAreaView style={styles.safeAreaViewStyle} {...otherProps} />
);
}
useScrollViewStyles()
Type definition
export function useScrollViewStyles<TStyleName extends string>(styleNames: TStyleName[]): StyleProp<ViewStyle>
StyleNamespace: ScrollViewStyles
Usage
import React, { useRef } from 'react';
import { ScrollView, StyleSheet } from 'react-native';
import { useScrollViewStyles } from 'react-native-stylo';
import { TViewStyle } from '../themes/types';
const ComponentA = () => {
const styles = useRef(
StyleSheet.create({
scrollViewStyle: useScrollViewStyles<TViewStyle>(['Padding', 'BackgroundColor.Grey1']),
})
).current;
return (
<ScrollView style={styles.scrollViewStyle} {...otherProps} />
);
}
useScrollViewContentContainerStyles()
Type definition
export function useScrollViewContentContainerStyles<TStyleName extends string>(styleNames: TStyleName[]): StyleProp<ViewStyle>
StyleNamespace: ScrollViewContentContainerStyles
Usage
import React, { useRef } from 'react';
import { ScrollView, StyleSheet } from 'react-native';
import { useScrollViewStyles, useScrollViewContentContainerStyles } from 'react-native-stylo';
import { TViewStyle } from '../themes/types';
const ComponentA = () => {
const styles = useRef(
StyleSheet.create({
scrollViewStyle: useScrollViewStyles<TViewStyle>(['BackgroundColor.Grey1']),
scrollViewContentContainerStyle: useScrollViewContentContainerStyles<TViewStyle>(['Padding']),
})
).current;
return (
<ScrollView style={styles.scrollViewStyle} contentContainerStyle={styles.scrollViewContentContainerStyle} {...otherProps} />
);
}
useTextInputStyles()
Type definition
function useImageStyles<TStyleName extends string>(styleNames: TStyleName[]): StyleProp<TextStyle>
StyleNamespace: TextInputStyles
Usage
import React, { useRef } from 'react';
import { TextInput, StyleSheet } from 'react-native';
import { useTextInputStyles } from 'react-native-stylo';
import { TTextInputStyle } from '../themes/types';
const ComponentA = () => {
const styles = useRef(
StyleSheet.create({
textInputStyle: useTextInputStyles<TTextInputStyle>(['Border', 'Border.Color.Primary']),
})
).current;
return (
<TextInput style={styles.textInputStyle} {...otherProps} />
);
}
useTextStyles()
Type definition
function useTextStyles<TStyleName extends string>(styleNames: TStyleName[]): StyleProp<TextStyle>
StyleNamespace: TextStyles
Usage
import React, { useRef } from 'react';
import { Text, StyleSheet } from 'react-native';
import { useTextStyles } from 'react-native-stylo';
import { TTextStyle } from '../themes/types';
const ComponentA = () => {
const styles = useRef(
StyleSheet.create({
textStyle: useTextStyles<TTextStyle>(['H1', 'Bold', 'Color.Primary']),
})
).current;
return (
<Text style={styles.textStyle} {...otherProps} />
);
}
useTouchableStyles()
Type definition
function useTouchableStyles<TStyleName extends string>(styleNames: TStyleName[]): StyleProp<ViewStyle>
StyleNamespace: TouchableStyles
The useTouchableStyles() hook can be used for TouchableOpacity, TouchableHighlight & Pressable component.
import React, { useRef } from 'react';
import { TouchableOpacity, StyleSheet } from 'react-native';
import { useTouchableStyles } from 'react-native-stylo';
import { TTouchableStyle } from '../themes/types';
const ComponentA = () => {
const styles = useRef(
StyleSheet.create({
buttonStyle: useTouchableStyles<TTouchableStyle>(['Button', 'Button.Large', 'BackgroundColor.Primary']),
})
).current;
return (
<TouchableOpacity style={styles.buttonStyle} {...otherProps} />
);
}
useViewStyles()
Type definition
function useViewStyles<TStyleName extends string>(styleNames: TStyleName[]): StyleProp<ViewStyle>
StyleNamespace: ViewStyles
Usage
import React, { useRef } from 'react';
import { View, StyleSheet } from 'react-native';
import { useViewStyles } from 'react-native-stylo';
import { TViewStyle } from '../themes/types';
const ComponentA = () => {
const styles = useRef(
StyleSheet.create({
cardStyle: useViewStyles<TViewStyle>(['Padding', 'Border', 'Border.Radius.Large', 'Border.Color.Primary2', 'BackgroundColor.Primary1']),
})
).current;
return (
<View style={styles.cardStyle} {...otherProps} />
);
}
Note: New Stylers for remaining React Native components will be added soon.