You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
1.3 KiB
71 lines
1.3 KiB
import { View, ViewStyle, StyleProp } from 'react-native';
|
|
|
|
type Align = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
|
|
type Justify =
|
|
| 'flex-start'
|
|
| 'center'
|
|
| 'flex-end'
|
|
| 'space-between'
|
|
| 'space-around'
|
|
| 'space-evenly';
|
|
|
|
type StackProps = {
|
|
gap?: number;
|
|
align?: Align;
|
|
justify?: Justify;
|
|
wrap?: boolean;
|
|
style?: StyleProp<ViewStyle>;
|
|
children?: React.ReactNode;
|
|
};
|
|
|
|
export function HStack({
|
|
gap = 0,
|
|
align = 'center',
|
|
justify = 'flex-start',
|
|
wrap = false,
|
|
style,
|
|
children,
|
|
}: StackProps) {
|
|
return (
|
|
<View
|
|
style={[
|
|
{
|
|
flexDirection: 'row',
|
|
alignItems: align,
|
|
justifyContent: justify,
|
|
gap,
|
|
flexWrap: wrap ? 'wrap' : 'nowrap',
|
|
},
|
|
style,
|
|
]}>
|
|
{children}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export function VStack({
|
|
gap = 0,
|
|
align = 'stretch',
|
|
justify = 'flex-start',
|
|
wrap = false,
|
|
style,
|
|
children,
|
|
}: StackProps) {
|
|
return (
|
|
<View
|
|
style={[
|
|
{
|
|
flexDirection: 'column',
|
|
alignItems: align,
|
|
justifyContent: justify,
|
|
gap,
|
|
flexWrap: wrap ? 'wrap' : 'nowrap',
|
|
},
|
|
style,
|
|
]}>
|
|
{children}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export const Spacer = ({ flex = 1 }: { flex?: number }) => <View style={{ flex }} />;
|
|
|