How to restyle non style props such as contentContainerStyle in ScrollView?

[realprabs]

Looks like I can only use restyle on components which have style prop. What about contentContainerStyle of ScrollView?

[a-eid]

useTheme hook

[flexbox]

Hey @jaysson
Can you provide a real-life example? (it will benefit everyone to have a larger context)

And if useTheme<Theme>(); hook solved your problem feel free to close the issue 😉

[realprabs]

Here's an example. Many screens have a ScrollView, with many items inside it. The scrollview needs a padding on the contentContainer, not the scrollview itself.

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 style, but I don't know how to use it if the prop name is something different like contentContainerStyle.

[aminerol]

Hey @jaysson , this is the hook I use that get me to inject the Theme object from useTheme hook with additional props

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 ResponsiveValue

[valinaga]

this might not be a complete answer but perhaps a starting point. At least it avoid the ScrollView exception when passing alignItems and justifyContent. Here's the code:

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,
      }}
    />
  )
}

[gyllenfrans]

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 useTheme 😆