Replies: 7 comments 1 reply
-
|
Beta Was this translation helpful? Give feedback.
-
Hey @jaysson And if |
Beta Was this translation helpful? Give feedback.
-
Here's an example. Many screens have a How I want the component to be used: <MyScrollView contentContainerPadding="r">
...
</MyScrollView> Which would translate to something like this: const MyScrollView = (props) => {
// Some restyle magic to get the right style props for contentContainerStyle
return <ScrollView contentContainerStyle={props.contentContainerStyle} ...props />
} Basically, restyle seems to work great when the prop name is |
Beta Was this translation helpful? Give feedback.
-
Hey @jaysson , this is the hook I use that get me to inject the type NamedStyles<T> = {[P in keyof T]?: ViewStyle | TextStyle | ImageStyle};
export const makeStyle = <T extends NamedStyles<T>, P>(
styles: (theme: Theme, props: P) => T,
) => (props: P) => {
const currentTheme = useTheme();
return styles(currentTheme, props);
}; Example: interface StyleProps {
isAdmin?: boolean;
}
const useStyle = makeStyle((theme: Theme, {isAdmin}: StyleProps) => ({
contentContainerStyle: {
marginHorizontal: theme.spacing.m,
backgroundColor: isAdmin ? theme.colors.adminColor : theme.colors.userColor
},
}));
const styles = useStyle({isAdmin: true});
return <ScrollView contentContainerStyle={styles.contentContainerStyle} ...props /> Note: This hook does not support |
Beta Was this translation helpful? Give feedback.
-
this might not be a complete answer but perhaps a starting point. At least it avoid the ScrollView exception when passing import { FlexAlignType, ScrollViewProps as RNScrollViewProps } from 'react-native'
import {
backgroundColor,
backgroundColorShorthand,
opacity,
visible,
layout,
spacing,
spacingShorthand,
shadow,
BoxProps,
createRestyleComponent,
} from '@shopify/restyle'
import {
NativeViewGestureHandlerProps,
ScrollView as UIScrollView,
} from 'react-native-gesture-handler'
import { Theme } from 'assets/.'
const viewRestyleFunctions = [
backgroundColor,
backgroundColorShorthand,
opacity,
visible,
layout,
spacing,
spacingShorthand,
shadow,
]
type UIScrollViewProps = RNScrollViewProps & {
children?: React.ReactNode
justifyContent?:
| 'flex-start'
| 'flex-end'
| 'center'
| 'space-between'
| 'space-around'
| 'space-evenly'
alignItems?: FlexAlignType
} & NativeViewGestureHandlerProps
export const ScrollView = ({
justifyContent,
alignItems,
...rest
}: BoxProps<Theme> & UIScrollViewProps): JSX.Element => {
const Component = createRestyleComponent<BoxProps<Theme> & UIScrollViewProps, Theme>(
viewRestyleFunctions,
UIScrollView,
)
return (
<Component
{...{ ...rest, justifyContent: undefined, alignItems: undefined }}
contentContainerStyle={{
justifyContent,
alignItems,
}}
/>
)
} |
Beta Was this translation helpful? Give feedback.
-
I was experimenting with this, here's what I got import {
BoxProps,
boxRestyleFunctions,
composeRestyleFunctions,
useRestyle,
} from "@shopify/restyle";
import { ElementRef, forwardRef } from "react";
import { ScrollView, ScrollViewProps, ViewStyle } from "react-native";
import { Theme } from "../../theme.config";
import { StyleProp } from "react-native";
import { TextProps } from "./Text";
export const ScrollBox = createBox<Theme, ScrollViewProps>(ScrollView);
type RestyleProps = BoxProps<Theme> &
Omit<ScrollViewProps, "contentContainerStyle">;
type InferType<T extends StyleProp<unknown>> = T extends StyleProp<infer P>
? P extends object
? P
: never
: never;
type LoosePick<T, K extends keyof any> = Pick<T, Extract<keyof T, K>>;
type AllRestyleProps = BoxProps<Theme> & TextProps;
type AsRestyle<P> = LoosePick<AllRestyleProps, keyof InferType<P>>;
const restyleFns = composeRestyleFunctions<Theme, RestyleProps>(
boxRestyleFunctions
);
export interface ScrollBoxProps extends RestyleProps {
contentContainerStyle: AsRestyle<ScrollViewProps["contentContainerStyle"]>;
}
export const ScrollBox = forwardRef<
ElementRef<typeof ScrollView>,
ScrollBoxProps
>(({ contentContainerStyle, ...props }, ref) => {
const restyleProps = useRestyle(restyleFns, props);
const __contentContainerStyle = useRestyle(
restyleFns as any,
contentContainerStyle
).style as ScrollViewProps["contentContainerStyle"];
return (
<ScrollView
{...restyleProps}
ref={ref}
contentContainerStyle={__contentContainerStyle}
/>
);
}); Ultimately I decided not to use it, and instead consume the tokens directly with |
Beta Was this translation helpful? Give feedback.
-
I've managed to do it like this: type BaseScrollViewProps = LayoutProps<Theme> & SpacingProps<Theme> & BackgroundColorProps<Theme>;
export interface ScrollViewProps extends BaseScrollViewProps, ScrollViewPropsRN {
children: ReactNode;
}
const restyleFunctions = composeRestyleFunctions<Theme, BaseScrollViewProps>([
layout,
spacing,
backgroundColor,
]);
export const ScrollView = ({ children, ...props }: ScrollViewProps) => {
const cleanProps = useRestyle(restyleFunctions, props);
return (
<ScrollViewRN {...cleanProps} style={props.style} contentContainerStyle={cleanProps.style}>
{children}
</ScrollViewRN>
);
}; |
Beta Was this translation helpful? Give feedback.
-
Looks like I can only use restyle on components which have
style
prop. What aboutcontentContainerStyle
ofScrollView
?Beta Was this translation helpful? Give feedback.
All reactions