-
Notifications
You must be signed in to change notification settings - Fork 80
New issue
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
LinearGradient component #73
Comments
This is super cool. It'd be instantly useful for me, I'm currently using a dripsy + expo-linear-gradient combo myself. Mind if I take a crack at this? I can also add in a re-exported Pressable component while I'm at it. |
Definitely, go for it. This is what I'm using in my app now: import React from 'react'
import { LinearGradient } from 'expo-linear-gradient'
import { styled, useDripsyTheme } from 'dripsy'
type Props = React.ComponentProps<typeof LinearGradient>
const Grad = styled(
React.memo(
function Gradient(props: Props) {
const { colors } = useDripsyTheme().theme
return (
<LinearGradient
{...props}
colors={props.colors?.map(
(color) => (colors?.[color] as string) ?? color
)}
/>
)
},
(prev, next) => JSON.stringify(prev) === JSON.stringify(next)
)
)({})
export default function Gradient(props: React.ComponentProps<typeof Grad>) {
return <Grad {...props} />
} The memoizing might not be necessary, but I noticed flickers on web when I didn't do it. Might be better for people to do that in their own apps if they want it and to document it. Since we're adding a dependency, I think it would be good to make this a |
I've had issues with wrapping import React, { ReactNode, ComponentProps } from 'react'
import { styled } from 'dripsy'
import {
Pressable as NativePressable,
PressableStateCallbackType,
ViewStyle,
} from 'react-native'
declare module 'react-native' {
interface PressableStateCallbackType {
hovered?: boolean
focused?: boolean
}
}
type CallbackWithHovered = PressableStateCallbackType
const StyledPressable = styled(NativePressable)({})
// I think we can remove this in favor of type Props = ComponentProps<typeof StyledPressable>
type Props = {
style?: ((prop: CallbackWithHovered) => ViewStyle) | ViewStyle
children?: ReactNode | ((prop: CallbackWithHovered) => ReactNode)
} & Omit<ComponentProps<typeof StyledPressable>, 'children' | 'style'>
const Press = React.forwardRef(function Pressable(
{ sx = {}, disabled, ...props }: Props,
ref: ComponentProps<typeof NativePressable>['ref']
) {
return (
<StyledPressable
{...props}
ref={ref as any}
disabled={disabled}
sx={{
cursor:
props.onPress || props.accessibilityRole === 'link' || !disabled
? 'pointer'
: 'default',
...sx,
}}
/>
)
})
export default Press Should probably add a I think now that I added declaration merging, the custom props can be deleted. We should be able to just forward the exact |
Got it. |
Alright, I'll try to make your code the basis for the pressable component and check out that other issue. We can always tweak as we go. |
One last thing, which is unrelated but I'm seeing on the Pressable code. Our current types for the |
How do you think we should start breaking up the main Do you think we should take the current dripsy package and move all of that into |
Do you think the gradient prop should replace the color prop entirely? I don't know what the best move would be here is, Otherwise, either the gradient or the colors object needs to take precedence, if we choose this way I think the colors prop should probably take precedence. So it could be used like: const theme = {
linearGradients: {
strong: ['primary', 'secondary']
}
}
<LinearGradient gradient="strong" />
// or
<LinearGradient gradient={['primary', 'secondary']} /> Let me know what you think. |
Similar to what you said, here's what I think makes sense: const theme = {
linearGradients: {
strong: ['primary', 'secondary']
}
}
// these are equivalent
<LinearGradient gradient="strong" />
<LinearGradient colors={['primary', 'secondary']} />
// colors prop takes precedence
<LinearGradient gradient="strong" colors={['accent', 'highlight']} /> |
Got it. That's how I'm currently handling it. I have this just about done along with another branch for the pressable component if we can get #74 merged in. |
I recently came across this beautiful landing page from auth0: https://auth0.design/
It included these cool gradients:
Which reminded me of this webflow theme I used for the doorman.cool website:
It would be cool to have a
LinearGradient
component in Dripsy, which re-exports Expo's.Maybe you could even have gradients in your theme.
The
variant
prop might not be the right one to use here, since we're technically not applying a set of styles, but rather we're using an opinionated mapping of colors -> props.This might be more appropriate:
The text was updated successfully, but these errors were encountered: