CODEWITHSUNDEEP
reactjstypescriptreact-nativereact-hooks
Christian
Christian

Reputation: 169

Styles from stylesheet is not applied

I'm trying to style a component but it doesn't look like the styles that I'm using is getting applied.

toolTipStyle gets prop-drilled down to the component but and I can see that they exist if I console.log them.

export const LinkCopiedToolTip = ({
  disclaimerText,
  isDesktop,
  tooltipStyle,
  setHasCopiedInvitationLink,
}) => {
  const [fadeOutTooltip, setFadeOutTooltip] = useState<boolean>(false)

...
...
...

  return (
    <View style={{ ...tooltipStyle.tooltipContainer, ...(fadeOutTooltip && tooltipStyle.fadeOut) }}>
      <Tooltip hasFluidWidth arrow={isDesktop ? 'left' : 'top'}>
        {disclaimerText}
      </Tooltip>
    </View>
  )
}

The component LinkCopiedToolTip gets rendered depending on the state hasCopiedInvitationLink like this in a parent component:

{hasCopiedInvitationLink && (
          <LinkCopiedToolTip
            disclaimerText={disclaimerText}
            isDesktop={isDesktop}
            tooltipStyle={{ ...tooltipContainer, ...fadeOut }}
            setHasCopiedInvitationLink={setHasCopiedInvitationLink}
          />
        )}

Any takes :)? I'm at my wits end here. Thanks!

Tried a bunch of stuff. If I just hardcode the styles directly it works.

Upvotes: 1

Views: 45

Answers (1)

martinstark
martinstark

Reputation: 197

It looks like you are trying to access properties that do not exist on tooltipStyle:

<View style={{ ...tooltipStyle.tooltipContainer, ...(fadeOutTooltip && tooltipStyle.fadeOut) }}>

To get this to work you need to update the syntax where the styles are fed to LinkCopiedToolTip and remove the spread (...) operator:

tooltipStyle={{ tooltipContainer, fadeOut }}

Upvotes: 1

Related Questions