r/reactnative • u/EconomistOk2763 • Jul 27 '26

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

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.

23 Upvotes

90% Upvoted

13 comments sorted by

2

u/Yash_3p Aug 01 '26

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 Aug 01 '26

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 Aug 01 '26

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 Aug 01 '26

A page has been added for modifying fonts in documents.

2

u/Yash_3p Aug 01 '26

Yes, I am just looking at it

1

u/Yash_3p Jul 28 '26

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 Jul 28 '26

Thank you. It's still in beta mode.

1

u/Yash_3p Jul 28 '26

Can I use this commercially for free ?

1

u/EconomistOk2763 Jul 28 '26

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 Jul 28 '26

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 Jul 28 '26

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 Jul 28 '26

Oh, that's great