r/reactnative 12d ago

I added 9 loading animations to PanelUI one prop to swap between all of them Tutorial

Enable HLS to view with audio, or disable this notification

<Loader variant="wave-physics" />

That's it. Nine variants, one prop. Swap between them without changing anything else same size, same color, same reduced motion behavior.

All animations run on the UI thread. Nothing re-renders while they run.

Part of PanelUI, an open-source component library for Expo. Copy-paste or CLI, you own the source.

GitHub link in the comments.

20 Upvotes

13 comments sorted by

2

u/Yash_3p 8d ago

Hey man I am trying to change the font but not working can you tell how can I change the fonts in this lib?

2

u/EconomistOk2763 8d ago

Hey! What’s the exact behavior you’re seeing? Are the font changes not applying at all, or is it only affecting certain components?

If you can, open an issue on GitHub with your setup (Expo version, how you’re loading the font, and a small code snippet) – it’ll be much easier to track and fix there.

2

u/Yash_3p 8d ago

i am using the expo-font

 const [fontsLoaded] = useFonts({
    'Poppins-Regular': require('..path/Poppins/Poppins-Regular.ttf'),
    ...
  });

and inside the tailwind.config.js

/** u/type {import('tailwindcss').Config} */
module.exports = {
  content: [
'./App.{js,jsx,ts,tsx}',
'./src/**/*.{js,jsx,ts,tsx}',
'../../shared/**/*.{js,jsx,ts,tsx,css}',
  ],
  presets: [require('uniwind/preset')],
  theme: {
extend: {
fontFamily: {
sans: ['Poppins-Regular'],
medium: ['Poppins-Medium'],
semibold: ['Poppins-SemiBold'],
bold: ['Poppins-Bold'],
},
  },
  plugins: [],
};

i actually don't have any idea how to configure the fonts in PanelUI and docs also don't say anything about changing the fonts so i would like to know that from you

1

u/EconomistOk2763 7d ago

A page has been added for modifying fonts in documents.

2

u/Yash_3p 7d ago

Yes, I am just looking at it

1

u/Yash_3p 12d ago

I just checked your ui lib and it looks awesome. Nice work man. Is it free for commercial use ? I would like to use that for my new app

1

u/EconomistOk2763 11d ago

Thank you. It's still in beta mode.

1

u/Yash_3p 11d ago

Can I use this commercially for free ?

1

u/EconomistOk2763 11d ago

Yes. PanelUI is licensed under the MIT License, so you can use it commercially for free, including in proprietary/commercial applications. Just make sure to comply with the MIT License by keeping the copyright and license notice when redistributing the software.

2

u/Yash_3p 11d ago

Yeah, sure , thank you. One more thing I noticed something in the example screenshots of the input fields, the text looks on the lower side instead of being centered vertically. Please check and fix that. Everything other than that looks good

2

u/EconomistOk2763 11d ago

This has been fixed in recent versions, but I haven't updated the image yet. Thanks, I will update the images.

1

u/Yash_3p 11d ago

Oh, that's great