A base class that can be used to create mixin aliases for styles that have 'sides', such as borderWidth,
padding and margin. To use the base class five ViewStyle interfaces need to be created; one for each side and
one that represents all sides:
example
Style Interfaces
```ts
import { ViewStyle } from 'react-native';
export interface ITop extends ViewStyle {
borderTopWidth: number;
}
export interface ILeft extends ViewStyle {
borderLeftWidth: number;
}
export interface IRight extends ViewStyle {
borderRightWidth: number;
}
export interface IBottom extends ViewStyle {
borderBottomWidth: number;
}
export interface IAll extends ViewStyle {
borderWidth: number;
}
```
A function must then be created that can convert the side and value into a style mixin:
example
Example Conversion function
```ts
import { LengthSidesSide } from '@ef-carbon/react-native-style';
function convert(side: LengthSidesSide, value: number): IAll | ITop | ILeft | IRight | IBottom {
switch (side) {
case 'all': return { borderWidth: Math.max(StyleSheet.hairlineWidth, value) };
case 'top': return { borderTopWidth: Math.max(StyleSheet.hairlineWidth, value) };
case 'left': return { borderLeftWidth: Math.max(StyleSheet.hairlineWidth, value) };
case 'right': return { borderRightWidth: Math.max(StyleSheet.hairlineWidth, value) };
case 'bottom': return { borderBottomWidth: Math.max(StyleSheet.hairlineWidth, value) };
default: return assertNever(side);
}
}
```
Then the base class can be extended:
A base class that can be used to create mixin aliases for styles that have 'sides', such as
borderWidth,paddingandmargin. To use the base class fiveViewStyleinterfaces need to be created; one for each side and one that represents all sides: