diff --git a/README.md b/README.md index 8467feec..38fb607b 100644 --- a/README.md +++ b/README.md @@ -323,12 +323,13 @@ import { SpacingProps, BorderProps, BackgroundColorProps, + composeRestyleFunctions, } from '@shopify/restyle'; import Text from './Text'; import {Theme} from './theme'; -const restyleFunctions = [spacing, border, backgroundColor]; +const restyleFunctions = composeRestyleFunctions([spacing, border, backgroundColor]); type Props = SpacingProps & BorderProps & BackgroundColorProps & { diff --git a/docs/MIGRATING_TO_V2.md b/docs/MIGRATING_TO_V2.md new file mode 100644 index 00000000..5a2ab88a --- /dev/null +++ b/docs/MIGRATING_TO_V2.md @@ -0,0 +1,89 @@ +## Migrating to restyle v2 + +v2 of this library introduces breaking changes in the usage of the `useRestyle` hook. +If you are not using `useRestyle` in your project, then you don't need to address any breaking change and can upgrade the library right away. + +## Addressing breaking changes in `useRestyle` + +1. Import `composeRestyleFunctions` from `@shopify/restyle` +2. Wrap the array you were using as param of `useRestyle` with `composeRestyleFunctions` +3. Done + +### Before + +```tsx +import {TouchableOpacity, View} from 'react-native'; +import { + useRestyle, + spacing, + border, + backgroundColor, + SpacingProps, + BorderProps, + BackgroundColorProps, +} from '@shopify/restyle'; + +import Text from './Text'; +import {Theme} from './theme'; + +const restyleFunctions = [spacing, border, backgroundColor]; +type Props = SpacingProps & + BorderProps & + BackgroundColorProps & { + onPress: () => void; + }; + +const Button = ({onPress, label, ...rest}: Props) => { + const props = useRestyle(restyleFunctions, rest); + + return ( + + + {label} + + + ); +}; +``` + +### After + +```tsx +import {TouchableOpacity, View} from 'react-native'; +import { + useRestyle, + spacing, + border, + backgroundColor, + SpacingProps, + BorderProps, + BackgroundColorProps, + composeRestyleFunctions, +} from '@shopify/restyle'; + +import Text from './Text'; +import {Theme} from './theme'; + +const restyleFunctions = composeRestyleFunctions([ + spacing, + border, + backgroundColor, +]); +type Props = SpacingProps & + BorderProps & + BackgroundColorProps & { + onPress: () => void; + }; + +const Button = ({onPress, label, ...rest}: Props) => { + const props = useRestyle(restyleFunctions, rest); + + return ( + + + {label} + + + ); +}; +``` diff --git a/src/index.ts b/src/index.ts index 10329e02..333a0903 100644 --- a/src/index.ts +++ b/src/index.ts @@ -14,3 +14,4 @@ export {default as useResponsiveProp} from './hooks/useResponsiveProp'; export {default as createTheme} from './createTheme'; export {default as createRestyleFunction} from './createRestyleFunction'; export {default as createRestyleComponent} from './createRestyleComponent'; +export {default as composeRestyleFunctions} from './composeRestyleFunctions';