Tight coupling
To avoid passing the type of the StyleNames each time to the Stylish components & Styler hooks, you can tightly couple the types to the Stylish components & Styler hooks easily. Simply create wrapper components & hooks which will internally pass the desired style type and then use these components & hooks without need to pass the style types.
Text.tsx
import React from 'react';
import { Text as StyloText, TTextProps } from 'react-native-stylo';
import { TTextStyle } from '../themes/types';
const View: React.FC<TTextProps<TTextStyle>> = props => <StyloText {...props} />;
export default Text;
useTextStyles.ts
import { useTextStyles as useStyloTextStyles } from 'react-native-stylo';
import { TTextStyle } from '../themes/types';
const useTextStyles = (styleNames: TTextStyle[] | undefined) => useStyloTextStyles<TTextStyle>(styleNames);
export default useTextStyles;
ComponentA.tsx
import Text from '../stylish/Text';
const ComponentA = () => (
<Text styleNames={['H1', 'Bold', 'Align.Center']}>
{...}
</Text>
);
import useTextStyles from '../stylers/useTextStyles';
const ComponentA = () => {
const styles = useRef(
StyleSheet.create({
text: useTextStyles(['H1', 'Bold', 'Align.Center']),
}),
).current;
return (
<Text style={styles.text}>
{...}
</Text>
);
};
Stylo at your help
To save time & effort, Stylo provides these wrapper hooks & components, which are located at /node_modules/react-native-stylo/lib/stylo. Simply copy these to you app. Please note, these wrapper hooks & components import the types using a relative path import { TTextStyle } from '../themes/types'. If your theme types are defined at some other location then just change these type import paths in these hooks & components.
Wrappers for Styler hooks & Stylish components are located as below.
[root]
|- node_modules
|- react-native-stylo
|- lib
|- stylo
|- stylers
|- stylish
|- themes
|- types
|- default
Copy them to your app like below.
[root]
|- app
|- components
|- screens
|- stylo
|- stylers
|- stylish
|- themes
|- types
|- default
Usage
import React from 'react';
import Stylish from '../stylo/stylish';
const ComponentA = () => {
return (
<Stylish.View styleNames={['Border', 'Border.Radius', 'Border.Color.Primary']}>
<Stylish.View styleNames={['Padding', 'Border.Bottom', 'Border.Color.Primary']}>
<Stylish.Text styleNames={['H2']}>
Stylish component
</Stylish.Text>
</Stylish.View>
<Stylish.View>
<Stylish.Text styleNames={['Bold']}>
Stylish components are nothing but enhanced React Native components.
Stylo adds an extra property styleNamesto the React Native components,
on top of core properties provided by React Native.
</Stylish.Text>
</Stylish.View>
</Stylish.View>
);
};
import React, { useRef } from 'react';
import { Text, StyleSheet } from 'react-native';
import { useTextStyles } from '../stylo/stylers';
const ComponentA = () => {
const styles = useRef(
StyleSheet.create({
textStyle: useTextStyles(['H1', 'Bold', 'Color.Primary']),
})
).current;
return (
<Text style={styles.textStyle} {...otherProps} />
);
}