We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
containerStyle
<TinderCard/>
I can't be bothered raising a PR, but here's the patch I used:
diff --git a/node_modules/react-tinder-card/index.d.ts b/node_modules/react-tinder-card/index.d.ts index dee80d9..0f252e9 100644 --- a/node_modules/react-tinder-card/index.d.ts +++ b/node_modules/react-tinder-card/index.d.ts @@ -80,6 +80,11 @@ declare interface Props { */ className?: string + /** + * Style to add to the container. + */ + containerStyle?: React.CSSProperties + /** * The children passed in is what will be rendered as the actual Tinder-style card. */ diff --git a/node_modules/react-tinder-card/index.js b/node_modules/react-tinder-card/index.js index 7746348..3daed73 100644 --- a/node_modules/react-tinder-card/index.js +++ b/node_modules/react-tinder-card/index.js @@ -85,7 +85,7 @@ const AnimatedDiv = animated.div const TinderCard = React.forwardRef( ( - { flickOnSwipe = true, children, onSwipe, onCardLeftScreen, className, preventSwipe = [], swipeRequirementType = 'velocity', swipeThreshold = settings.swipeThreshold, onSwipeRequirementFulfilled, onSwipeRequirementUnfulfilled }, + { flickOnSwipe = true, children, onSwipe, onCardLeftScreen, className, preventSwipe = [], swipeRequirementType = 'velocity', swipeThreshold = settings.swipeThreshold, onSwipeRequirementFulfilled, onSwipeRequirementUnfulfilled, containerStyle }, ref ) => { const [{ xyrot }, setSpringTarget] = useSpring(() => ({ @@ -247,7 +247,8 @@ const TinderCard = React.forwardRef( ref: element, className, style: { - transform: xyrot.to((x, y, rot) => `translate3d(${x}px, ${y}px, ${0}px) rotate(${rot}deg)`) + transform: xyrot.to((x, y, rot) => `translate3d(${x}px, ${y}px, ${0}px) rotate(${rot}deg)`), + ...containerStyle }, children }) diff --git a/node_modules/react-tinder-card/index.native.js b/node_modules/react-tinder-card/index.native.js index f443f57..4cd45c5 100644 --- a/node_modules/react-tinder-card/index.native.js +++ b/node_modules/react-tinder-card/index.native.js @@ -86,7 +86,7 @@ const AnimatedView = animated(View) const TinderCard = React.forwardRef( ( - { flickOnSwipe = true, children, onSwipe, onCardLeftScreen, className, preventSwipe = [], swipeRequirementType = 'velocity', swipeThreshold = settings.swipeThreshold, onSwipeRequirementFulfilled, onSwipeRequirementUnfulfilled }, + { flickOnSwipe = true, children, onSwipe, onCardLeftScreen, className, preventSwipe = [], swipeRequirementType = 'velocity', swipeThreshold = settings.swipeThreshold, onSwipeRequirementFulfilled, onSwipeRequirementUnfulfilled, containerStyle }, ref ) => { const [{ x, y, rot }, setSpringTarget] = useSpring(() => ({ @@ -208,7 +208,8 @@ const TinderCard = React.forwardRef( { translateX: x }, { translateY: y }, { rotate: rot.to((rot) => `${rot}deg`) } - ] + ], + ...containerStyle }} className={className} >
The text was updated successfully, but these errors were encountered:
No branches or pull requests
I can't be bothered raising a PR, but here's the patch I used:
The text was updated successfully, but these errors were encountered: