Stylish
Stylish components are nothing but enhanced React Native components. Stylo adds a property styleNames(ref: StyleName) to the React Native components, on top of core properties provided by React Native. Stylo does not make any behavioral changes to these enhanced stylish components and keeps them as pure as they are defined by React Native. Stylish component reads the styles defined for the styleNames from the theme, combines these styles into one to create a standard React Native style object & applies this style to the React Native component.
Stylo's objective is to provide an enhanced Stylish component against for React Native component. This way it plans to cover all the React Native 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 stylish component is tightly coupled with a React Native component which applies the style object specific to that component.
All stylish components use a matching Styler hook internally to create the style object from styleNames supplied to them as prop.Stylish props
All stylish components have an extra prop called styleNames other than the default props provided by React Native. The styleNames prop is purposefully made optional, so that these Stylish components can still be used as plain React Native components.
styleNames (Optional)
The StyleNames which define the styles.
All the code samples below use Stylo theme. The code samples below do not display the pictorial outcomes. Please refer to Stylo theme for detailed code samples & their pictorial appearances. 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.
<Icon />
Props type definition
type TIconProps<TStyleName extends string> = TStylesProps<TStyleName> & {
name: string;
size?: number | undefined;
color?: string | undefined;
style?: Omit<StyleProp<TextStyle>, 'color'>;
};
Stylo uses Vector Icons, so it has a peer dependency of react-native-vector-icons@^9.1.0. Vector Icon's all components are available as static members of the Icon component. Like, Icon.AntDesign, Icon.FontAwesome etc.
Icon.AntDesign
Icon.Entypo
Icon.EvilIcons
Icon.FontAwesome
Icon.FontAwesome5
Icon.FontAwesome5Pro
Icon.Fontisto
Icon.Foundation
Icon.Ionicons
Icon.MaterialCommunityIcons
Icon.MaterialIcons
Icon.Octicons
Icon.SimpleLineIcons
Icon.Zocial
StyleNamespace: IconStyles
Usage
import React from 'react';
import { Icon } from 'react-native-stylo';
import { TIconStyle } from '../themes/types';
const ComponentA = () => {
return (
<Icon.AntDesign<TIconStyle> styleNames={['Color.Grey2', 'Large]} name="home" {...otherProps} />
);
}
<ImageBackground />
Props type definition
type TImageBackgroundProps<TStyleName extends string>
= ReactNative.ImageBackgroundProps & { styleNames?: TStyleName[]; }
StyleNamespace: ImageBackgroundStyles
Usage
import React from 'react';
import { ImageBackground } from 'react-native-stylo';
import { TImageBackgroundStyle } from '../themes/types';
const ComponentA = () => {
return (
<ImageBackground<TImageBackgroundStyle> styleNames={['BackgroundColor.Grey2']} {...otherProps} />
);
}
<Image />
Props type definition
type TImageProps<TStyleName extends string>
= ReactNative.ImageProps & { styleNames?: TStyleName[]; }
StyleNamespace: ImageStyles
Usage
import React from 'react';
import { Image } from 'react-native-stylo';
import { TImageStyle } from '../themes/types';
const ComponentA = () => {
return (
<Image<TImageStyle> styleNames={['Avatar', 'Avatar.Square', 'Avatar.Large']} {...otherProps} />
);
}
<SafeAreaView />
Props type definition
type TSafeAreaViewProps<TStyleName extends string>
= ReactNative.ViewProps & { styleNames?: TStyleName[]; }
StyleNamespace: SafeAreaViewStyles
Usage
import React from 'react';
import { SafeAreaView } from 'react-native-stylo';
import { TSafeAreaViewStyle } from '../themes/types';
const ComponentA = () => {
return (
<SafeAreaView<TSafeAreaViewStyle> styleNames={['BackgroundColor.Body']} {...otherProps} />
);
}
<ScrollView />
Props type definition
type TScrollViewProps<
TScrollViewStyleName extends string,
TScrollViewContentContainerStyleName extends string,
> = ReactNative.ViewProps & {
styleNames?: TScrollViewStyleName[];
contentContainerStyleNames?: TScrollViewStyleName[];
}
StyleNamespaces: ScrollViewStyles & ScrollViewContentContainerStyles
Usage
import React from 'react';
import { ScrollView } from 'react-native-stylo';
import { TScrollViewStyle } from '../themes/types';
const ComponentA = () => {
return (
<ScrollView<TScrollViewStyle, TScrollViewContentContainerStyle>
styleNames={['BackgroundColor.Grey1']}
contentContainerStyleNames={['Padding']}
{...otherProps}
/>
);
}
<Pressable />
Props type definition
type TPressableProps<TStyleName extends string>
= ReactNative.PressableProps & { styleNames?: TStyleName[]; }
StyleNamespace: TouchableStyles
Usage
import React from 'react';
import { Pressable } from 'react-native-stylo';
import { TTouchableStyle } from '../themes/types';
const ComponentA = () => {
return (
<Pressable<TTouchableStyle> styleNames={['Button', 'Button.Large', 'BackgroundColor.Primary']} {...otherProps} />
);
}
<Text />
Props type definition
type TTextProps<TStyleName extends string>
= ReactNative.TextProps & { styleNames?: TStyleName[]; }
StyleNamespace: TextStyles
Usage
import React from 'react';
import { Text } from 'react-native-stylo';
import { TTextStyle } from '../themes/types';
const ComponentA = () => {
return (
<Text<TTextStyle> styleNames={['Border', 'Border.Color.Primary']} {...otherProps} />
);
}
<TextInput />
Props type definition
type TTextInputProps<TStyleName extends string>
= ReactNative.TextInputProps & { styleNames?: TStyleName[]; }
StyleNamespace: TextInputStyles
Usage
import React from 'react';
import { TextInput } from 'react-native-stylo';
import { TTextInputStyle } from '../themes/types';
const ComponentA = () => {
return (
<TextInput<TTextInputStyle> styleNames={['Border', 'Border.Color.Primary']} {...otherProps} />
);
}
<TouchableHighlight />
Props type definition
type TTouchableHighlightProps<TStyleName extends string>
= ReactNative.TouchableHighlightProps & { styleNames?: TStyleName[]; }
StyleNamespace: TouchableStyles
Usage
import React from 'react';
import { TouchableHighlight } from 'react-native-stylo';
import { TTouchableStyle } from '../themes/types';
const ComponentA = () => {
return (
<TouchableHighlight<TTouchableStyle> styleNames={['Button', 'Button.Large', 'BackgroundColor.Primary']} {...otherProps} />
);
}
<TouchableOpacity />
Props type definition
type TTouchableOpacityProps<TStyleName extends string>
= ReactNative.TouchableOpacityProps & { styleNames?: TStyleName[]; }
StyleNamespace: TouchableStyles
Usage
import React from 'react';
import { TouchableOpacity } from 'react-native-stylo';
import { TTouchableStyle } from '../themes/types';
const ComponentA = () => {
return (
<TouchableOpacity<TTouchableStyle> styleNames={['Button', 'Button.Large', 'BackgroundColor.Primary']} {...otherProps} />
);
}
<View />
Props type definition
type TViewProps<TStyleName extends string>
= ReactNative.ViewProps & { styleNames?: TStyleName[]; }
StyleNamespace: ViewStyles
Usage
import React from 'react';
import { View } from 'react-native-stylo';
import { TViewStyle } from '../themes/types';
const ComponentA = () => {
return (
<View<TViewStyle> styleNames={['Padding', 'Border', 'Border.Radius.Large', 'Border.Color.Primary2', 'BackgroundColor.Primary1']} {...otherProps} />
);
}
Note: New Stylish components for remaining React Native components will be added soon.