Skip to content
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

FontResolver plugin resets all fonts styling #1983

Open
4 of 6 tasks
mnecchi opened this issue Mar 20, 2024 · 6 comments
Open
4 of 6 tasks

FontResolver plugin resets all fonts styling #1983

mnecchi opened this issue Mar 20, 2024 · 6 comments
Labels
bug Something isn't working

Comments

@mnecchi
Copy link

mnecchi commented Mar 20, 2024

Description

When adding a FontResolver plugin all the fonts stylings seem to be reset

CodeSandbox/Snack link

No response

Steps to reproduce

  1. Create a new Expo app with npm create gluestack
  2. Change the App.tsx code with the following:
import { config as gluestackUIConfig } from '@gluestack-ui/config';
import { Box, Button, ButtonText, FontResolver, GluestackUIProvider, VStack, createConfig } from '@gluestack-ui/themed';

const config = createConfig(gluestackUIConfig)

export default function App() {
  return (
    <GluestackUIProvider config={config}>
      <Home />
    </GluestackUIProvider>
  );
}

const Home = () => {
  return (
  <Box flex={1} justifyContent="center" alignItems="center">
    <VStack space="lg">
      <Button>
        <ButtonText fontWeight="$black">Button 1</ButtonText>
      </Button>
      <Button>
        <ButtonText fontWeight="$hairline">Button 2</ButtonText>
      </Button>
    </VStack>
  </Box>)
};
  1. Run the app. The two buttons have the correct styles.
  2. Change line 3 in App.tsx with the following:
const config = createConfig({ ...gluestackUIConfig, plugins: [new FontResolver()] })
  1. Re-run the app. The two buttons' styles are not applied correctly anymore.

gluestack-ui Version

@gluestack-ui/config 1.1.8 @gluestack-ui/themed 1.1.17 @gluestack-style/react: 1.0.52

Platform

  • Expo
  • React Native CLI
  • Next
  • Web
  • Android
  • iOS

Other Platform

No response

Additional Information

No response

@mnecchi mnecchi added the bug Something isn't working label Mar 20, 2024
@surajahmed
Copy link
Contributor

@mnecchi Thanks for reporting this. We'll look into this.

@pepes-hub
Copy link

Hey @surajahmed any news here? I also stuck here.

@surajahmed
Copy link
Contributor

@mnecchi @pepes-hub We're working on it. Hope to release this fix in the coming release. Thanks for your patience.

@twankruiswijk
Copy link

twankruiswijk commented May 14, 2024

@surajahmed we're also experiencing this bug on version "@gluestack-style/react": "1.0.56"..

It works fine when you use:

const StyledText = styled(
  Text,
  {
    props: {
      bold: true,
    },
);

But not when you set the fontWeight as:

const StyledText = styled(
  Text,
  {
      fontWeight: '$bold',
);

@ankit-tailor
Copy link
Collaborator

Hey @twankruiswijk, Can you try out the latest version?

@neverson-silva
Copy link

I'm having this error too, even latest version, there are some updates on this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

6 participants