Forem: gluestackio

Troubleshooting Common Issues with NativeWind (and Why You Should Try gluestack-ui)

gluestackio — Wed, 08 Jan 2025 09:59:58 +0000

NativeWind has revolutionized how developers style React Native apps by bringing the power of Tailwind CSS to the ecosystem. However, as powerful as it is, setting up and troubleshooting NativeWind can sometimes be challenging.

What if there was a way to skip the hassle and dive straight into building your app? That’s where gluestack-ui comes in!

gluestack-ui is a ready-to-use component library built on top of NativeWind. It’s not just a library—it’s a productivity booster. With an integrated CLI tool, gluestack-ui handles all the tedious setup for you, so you can focus on what truly matters: building your app.

But if you're currently using NativeWind, here are solutions to common issues you might encounter—and why gluestack-ui could save you time and effort.

NativeWind Styling is Not Working?

1. Check Versions

NativeWind depends on react-native-css-interop. Version mismatches between these packages often cause styling issues. Run the following command to check the installed version:

bash npm list react-native-css-interop

When you use gluestack-ui, version conflicts are automatically resolved by its CLI during setup.

2. Check `tailwind.config.`

The content property in your tailwind.config.js must correctly include all paths for components and screens to ensure Tailwind classes are applied. Misconfigurations here often lead to styling issues.

Refer to the Tailwind CSS Content Configuration for more details.

3. React Native Web Styles Overriding Tailwind Classes?

If you’re using React Native Web and find its styles overriding your Tailwind classes, add the important: 'html' setting to your tailwind.config.js.

module.exports = {
  important: 'html',
  // other configurations
};

gluestack-ui CLI ensures that this configuration is pre-applied, eliminating this step for you.

Issues with Expo

1. Add Babel Preset

NativeWind requires specific Babel presets to work seamlessly. Add the following to your Babel configuration (babel.config.js):

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
  };
};

No need to worry about these configurations if you’re using gluestack-ui —it’s all handled for you by the CLI tool.

2. Update `metro.config.js`

Your metro.config.js should be wrapped with the withNativeWind function, and it must point to the correct CSS file for Tailwind directives (global.css):

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require("nativewind/metro");

const config = getDefaultConfig(__dirname);

module.exports = withNativeWind(config, { input: "./global.css" });

With gluestack-ui, this configuration is automatically generated.

3. Import Correct CSS File

Make sure the file containing Tailwind directives (e.g., global.css) is imported in your _layout or root file (App.*):

// app/_layout.tsx or App.tsx

import "../global.css";

NativeWind + Next.js

1. Ensure `jsxImportSource`

NativeWind requires the jsxImportSource to be set to nativewind.

For Babel, update babel.config.js:

plugins: [
  [
    "@babel/plugin-transform-react-jsx",
    {
      runtime: "automatic",
      importSource: "nativewind",
    },
  ],
];

For SWC, update tsconfig.json:

{
  "compilerOptions": {
    "jsxImportSource": "nativewind"
  }
}

When using gluestack-ui, this configuration is automatically added for you.

2. Add Transpiled Packages

To work with react-native-web, add nativewind and react-native-css-interop to the transpilePackages array in next.config.js:

const nextConfig = {
  reactStrictMode: true,
  transpilePackages: ["nativewind", "react-native-css-interop"],
};

The gluestack-ui CLI ensures these settings are correctly applied.

3. Next.js 15 Compatibility

Next.js 15 uses React 19, which react-native-web currently doesn’t support. To resolve this, follow the steps outlined in the gluestack-ui installation guide. The guide provides a patch to make react-native-web compatible with React 19.

Why gluestack-ui?

While NativeWind is excellent, setting it up can take time—especially if you’re new to Tailwind or React Native. gluestack-ui simplifies this process by:

Preconfigured Setup: Its CLI tool configures NativeWind and related settings automatically.
Prebuilt Components: Get access to a library of pre-styled, customizable components.
Cross-Platform Support: Build universal apps faster without worrying about setup complexities.

Save time, reduce friction, and get started on your next project with gluestack-ui. Learn More.

gluestack-ui v2: Stable Release with NativeWind v4.1 Support 🚀

gluestackio — Tue, 07 Jan 2025 12:10:03 +0000

After months of hard work, countless iterations, and testing across platforms, we are thrilled to announce the stable release of gluestack-ui v2! This marks a significant milestone in our journey to empower developers with a seamless and efficient UI development experience.With gluestack-ui v2, we’ve made some groundbreaking changes, eliminated unnecessary complexity, and aligned closely with the latest in React Native and Tailwind ecosystems.Here’s what you can look forward to in this release:

✨ What’s New in gluestack-ui v2

90% Reduction in CSS File Size

We’ve optimized the library to dramatically reduce the CSS footprint, ensuring faster load times and smoother performance, especially for large-scale projects.

600+ Lines of Code and Wrappers Removed

We’ve significantly reduced boilerplate code, making gluestack-ui leaner and cleaner. This also means easier debugging and better maintainability for your projects.

Support for Data Attributes Without HOCs

Previously, using data attributes required wrapping components with higher-order components (HOCs). Now, data attributes are supported natively, simplifying how you work with state-driven styles and interactions.

Compatible with NativeWind v4.1

gluestack-ui is now fully aligned with the latest NativeWind v4.1 release, bringing the best of Tailwind CSS to React Native. Expect enhanced features, better performance, and seamless integration.

Expo RSC (React Server Components) Compatibility

gluestack-ui components are now compatible with Expo React Server Components (RSC). This ensures optimal server-side rendering performance and smoother hydration on the client side, making your applications even more responsive.

Improved TypeScript Support

We’ve significantly improved TypeScript support, ensuring better type definitions, autocomplete, and developer experience. Type errors are easier to spot, making your workflows smoother and more efficient.

🎉 Why This Matters

gluestack-ui v2 is built to make your life easier as a developer. Whether you’re building universal apps or optimizing for performance, this release addresses critical pain points and sets a new standard for React Native UI libraries.

By aligning with the latest standards and reducing complexity, we aim to provide a fast, flexible, and future-proof foundation.

📦 Getting Started with gluestack-ui v2

Simple Setup with Our Powerful CLI

Getting started has never been easier. Set up your project in seconds with our intuitive CLI:

To initialize the project:

bash npx gluestack-ui init

To add all the components:

bash npx gluestack-ui add --all

If you’re using an alpha version, follow this detailed guide 👉🏻 Change Log of Components

🚀 The Journey Ahead

"This is just the beginning of gluestack-ui v2. As always, we will keep evolving with the ever-changing landscape of JavaScript! Expect frequent updates, enhancements, and exciting features shortly!" - Sanket Sahu, Creator of gluestack-ui

We’d Love to Hear from You!

Have questions, or feedback, or want to showcase what you’re building with gluestack-ui v2? Join the conversation on GitHub, Twitter, or our Discord community.

Let’s continue building amazing things together!

Happy coding,
The gluestack-ui Team

Known Issue

Grid is not working with react native 0.76 (Expo SDK 52). This issue is from the react-native side, we have raised an issue on the react-native repo.

Issues with the latest version of react-native-svg. Currently working with specific version 15.2.0.

Mastering gluestack-ui v2 Animations with NativeWind: A Step-by-Step Guide

gluestackio — Fri, 20 Dec 2024 06:50:50 +0000

Animations play a crucial role in enhancing the user experience, and with gluestack-ui you have several flexible options to bring your UI to life. We’ll walk through the basic structure of animations, look into the four available methods for animating with gluestack-ui, and guide you step-by-step to create dynamic and smooth animations using one of the four available options for animating with gluestack ui ie.., gluestack-ui v2 animation with NativeWind/ TailwindCSS only.

Animation Structure

Every animation we make behind the scenes performs the entire animation process in three consecutive key states.
The animation process is divided into three key states:

Initial State: The starting point of the element before animation.
Transition State: The actual animation, where the element changes.
Final State: The ending state, where the animation completes.
Let’s consider an example of how we see all three states as a process ;

<Animated.View
  initial={{ scale: 0.5 }}
  animate={{ scale: 1 }}
  transition={{ type: 'timing', duration: 500 }}
/>

This example shows how an element's size increases from 50% to 100% over 500 milliseconds.
Using gluestack-ui we have multiple animating options based on the use case and the level of complexity, customization, and control. We need different animating aspects while making our animation. We pick the right animation option for us.

Animation options in gluestack ui v2:

Legend Motion (Default with gluestack-ui)
Moti (Can be added to the gluestack-ui animation plugin)
React Native Reanimated (Can be integrated for smoother animations)
TailwindCSS/NativeWind (Use basic animations without extra plugins)

Let’s say,

You want to make a very basic animation and you don’t want to write separate animation code syntax and maintain it (ie., You want your codebase to be similar for animation as well using the classNames syntax like gluestack-ui v2). Then you should go with the 4th option (animating with NativeWind).
You need to add moderately basic animation for my website and you don’t want to install any new package that will decrease your website performance then you would animate using the default gluestack-ui plugin only. (ie., choosing options 1 & 2). But the animation syntax will vary with your whole codebase (ie., syntax that supports Moti or Legend Motion).
You need to make an animation that is much complex and you need to have control over every aspect of the animation & more functional tweaking, then you should go with the 3rd option (ie., using react native reanimated).

Let’s get our hands dirty by building this animation,

For making this guide more clear, We can divide entire animation into three segments. We write animation code for each segment separately and run all these segments at a time to make the animation look more natural and desired.

Animation steps in gluestack ui v2:

Step 1: Left Bar Animation
Step 2: Icon Rotation
Step 3: Right Icon & Bottom Animation

Animation Setup

We'll use the isAnimated state to toggle animations. Define the properties you want to animate in the tailwind.config.ts file:

transitionProperty: {
  width: "width",
  height: "height",
  radius: "borderRadius",
},

We can add a custom animation property here, that will add this fade effect as the opacity of the item goes fro 0% to 100% in only 1 second with a ease in behaviour.

For custom animations, add keyframes (In tailwind):

keyframes: {
    appear: {
      '0%': { opacity:'0%' },
      '100%': { opacity: '100%' },
    }
},
animation: {
    appear: 'appear 1s ease-in-out',
}

Step 1: Animating Width (Left Bar Animation)

Change the width dynamically based on isAnimated:

<Box
  className={
    'flex flex-row' + isAnimated
      ? 'w-[200px]'
      : 'w-[450px]' + 'transition-width duration-300 ease-in-out'
  }
>
  {isAnimated ? <Text>Create</Text> : <Text>Guilds</Text>}
</Box>

By toggling the width property, you control the animation.

Step 2: Animating Rotation (Icon Rotation)

Handle the rotation of an icon with a simple press:

<Pressable onPress={() => setIsAnimated(!isAnimated)}>
    <Box className={isAnimated ? 'rotate-45' : 'rotate-0'}>
      <Icon as={PlusIcon} />
    </Box>
</Pressable>

Step 3: Animating Opacity and Width (Right Icon & Bottom Animation)

Control both width and opacity during the animation:

<Box
  className={
    isAnimated
      ? 'w-[180px] opacity-100'
      : 'w-[0px] opacity-0' + 'transition-opacity duration-300'
  }
>
  <Text>Guilds</Text>
</Box>

This gives a smooth fade and size change effect when triggered.
With these steps, you can create smooth, dynamic animations using gluestack-ui v2.

We will have more guides for you in the future to help you create beautiful applications using the component library that gluestack-ui v2 has to offer.

Do tell us about your experiments on our Discord channel.

Happy Building!

Designing with gluestack-ui: Essential Practices for Consistent Results

gluestackio — Thu, 12 Dec 2024 07:52:47 +0000

In our experience as design professionals, we've found that a well-structured design system can significantly elevate the quality and efficiency of projects. The gluestack-ui Design Kit is more than just a collection of components—it's a tool that ensures cohesion, scalability, and smooth collaboration across teams. In this blog, we'll share some best practices for users of the gluestack-ui Design Kit to follow, helping you get the most out of this powerful resource.

Getting Started with gluestack-ui Design Kit

Getting started with gluestack-ui Design Kit involves a few essential steps to ensure that your design workflow is set up correctly and efficiently. Here’s how to begin:

Accessing the gluestack-ui Design Kit:

Start by accessing the gluestack-ui Design Kit from the Figma Community. Once you’ve located the file, make a copy and move it into your project workspace. This ensures you have your own version that can be customized according to your project needs.

Setting Up Your Project:

Create a Master File: After copying the design kit, establish a master file that will serve as your design system’s foundation. This file should include all the core components, styles, and tokens that you plan to use across your projects.
Publish Internally: Once you’ve set up and customized your master file, publish it internally within your organization. This makes the library accessible to your entire team, ensuring everyone is working with the same components and design tokens.

Maintaining File Architecture:

Master File (Design System): The master file acts as the central hub for your design system. It contains all the essential components and styles that your team will use. Any updates or changes to the design system should be made here and then re-published to ensure consistency across all projects.
Project Design Files: Each of your project design files should link to the master file. This architecture ensures that all design files are always using the latest components and styles from the master design system, promoting consistency and reducing the risk of errors.

Collaborating with Your Team:

Sharing and Permissions: Ensure the master file is shared with the appropriate team members, and set the necessary permissions to control who can edit the design system. This helps maintain the integrity of your design system while allowing for collaborative input where needed.

Regular Syncs:

Periodically sync with your development team to ensure that the components and tokens defined in the master file align with the codebase. This alignment is crucial for maintaining consistency between design and development.

Understanding the Component Library

At the core of gluestack-ui is its robust component library, designed with reusability and flexibility in mind. Each component is crafted to meet both aesthetic and functional needs. Here’s how to make the most out of it:

Embrace a Component-First Approach:

Consistency is Key: Begin by identifying the core components you’ll need for your project. Adopting a component-first approach ensures that your designs remain consistent across all platforms and touchpoints.
Use Pre-Built Components: Whenever possible, stick to the pre-built components provided in the gluestack-ui library. These components have been rigorously tested for both functionality and aesthetics, which minimizes the risk of errors and inconsistencies.

Navigating and Utilizing the Library Effectively:

Leverage Figma’s Search and Filters: Use Figma’s powerful search and filtering options to quickly locate the components you need. Familiarize yourself with the naming conventions and variant structures to make navigation smoother.
Understand Component Variants: gluestack-ui components come with multiple variants, such as different states, sizes, and themes. Make sure to understand how these variants work so you can apply them effectively in your designs.

Customize with Caution:

Stick to Token-Based Customization: When you need to customize a component, use the design tokens provided in the kit rather than making direct style changes. This ensures that any updates to the tokens will automatically propagate throughout your designs, maintaining consistency.
Document Customizations: If you must create custom components or make significant alterations, document these changes thoroughly. This documentation will be invaluable for future updates and for ensuring that your custom components align with the overall design system.

Regularly Update Your Library:

Sync with Updates: gluestack-ui is continuously evolving, with new components and updates being released regularly. Make it a practice to sync your master file with the latest version of the gluestack-ui library to take advantage of these improvements.
Version Control: Use Figma’s version history feature to track changes to your component library. This allows you to revert to previous versions if needed and ensures that you can monitor the evolution of your design system.

Ensure Accessibility Compliance:

Design with Inclusivity in Mind: gluestack-ui components are designed to be accessible, but it’s important to test your designs for accessibility standards like color contrast, keyboard navigation, and screen reader compatibility. This ensures your designs are inclusive and usable by a wider audience.

Use Pre-Defined Accessible Variants:

gluestack-ui offers accessible variants for components. Prioritize using these variants in your designs to ensure compliance with accessibility guidelines from the outset.

Leveraging Theme Tokens for Customization

Theme tokens are a powerful feature of the gluestack-ui Design Kit, providing a standardized way to manage and apply styles across your projects. Here’s how to effectively leverage theme tokens for customization:

Define Your Theme Early:

Establish a Comprehensive Theme: Start by defining your color palettes, typography, spacing, and other foundational tokens at the beginning of your project. A well-defined theme ensures consistency and helps in creating a cohesive look and feel throughout your design.
Align with Branding Guidelines: Make sure your theme tokens align with your brand’s visual identity. This includes using the correct brand colors, typography, and spacing to maintain brand consistency across all platforms.

Use Tokens for Consistent Customization:

Apply Tokens for Styles: Use theme tokens to apply consistent styling across all components. This includes colors, fonts, and spacing. By relying on tokens, you ensure that any updates to the design system are reflected throughout your project without manual adjustments.
Avoid Hard-Coding Values: Refrain from hard-coding style values directly into components. Instead, use theme tokens to manage styles. This practice makes it easier to update and maintain your design system as changes to tokens will propagate across all instances where they are used.

Utilize Tokens for Responsive Design:

Adapt Tokens for Different Breakpoints: Define different sets of tokens for various screen sizes and device types. This approach helps ensure that your design remains consistent and functional across different devices and orientations.
Implement Fluid Design: Use tokens to create fluid layouts that adapt to different screen sizes. Tokens for spacing, font sizes, and container widths should be adjusted to ensure your design looks great on both large and small screens.

Document and Organize Tokens:

Create a Token Inventory: Maintain a well-documented inventory of all theme tokens used in your project. This includes details about each token’s purpose and how it should be used. Documentation helps in maintaining consistency and simplifies the onboarding process for new team members.
Organize Tokens by Category: Group tokens into categories such as colors, typography, spacing, and effects. This organization makes it easier to find and manage tokens, especially when making global changes or updates.

Collaborate on Token Usage:

Standardize Token Usage Across Teams: Ensure that both design and development teams use the same set of tokens. This alignment minimizes discrepancies between design and implementation, resulting in a more cohesive final product.
Regular Reviews and Feedback: Periodically review token usage and gather feedback from both designers and developers. This feedback loop helps identify any issues or areas for improvement, leading to a more refined and effective design system.

Update Tokens Efficiently:

Implement a Token Update Process: Establish a clear process for updating theme tokens. This process should include steps for reviewing, testing, and deploying token updates to ensure they are applied consistently across the project.
Automate Token Syncing: Use tools and plugins that automate the syncing of tokens between design files and codebases. This automation reduces manual work and ensures that any changes to tokens are automatically reflected in both design and development environments.

Test for Visual Consistency:

Conduct Regular Design Reviews: Regularly review designs to ensure that the application of theme tokens is consistent and aligns with the overall design system. Look for any discrepancies or inconsistencies that may arise from token usage.
Perform Cross-Device Testing: Test your designs across different devices and screen sizes to verify that tokens are applied correctly and that the design remains visually consistent and functional.

Educate and Train Your Team:

Provide Training on Tokens: Ensure that your team members understand how to use theme tokens effectively. Provide training or resources on how tokens work and their role in maintaining design consistency.

Create Reference Materials:
Develop reference materials or guides that outline how to use and apply theme tokens. These resources can serve as a quick reference for team members and help reinforce best practices.

Common Pitfalls to Avoid

When working with the gluestack-ui Design Kit, it's essential to be aware of potential pitfalls that can undermine the effectiveness of your design system. Here are some common pitfalls to avoid, along with best practices to ensure smooth and successful project outcomes:

Over-Customization of Components:

Stick to Core Components: Avoid the temptation to over-customize pre-built components. Over-customization can lead to inconsistencies and make it difficult to align with updates to the design system. Use core components as a base and make only necessary adjustments.
Maintain Compatibility: Ensure that any customizations you make are compatible with the overall design system. Custom components should integrate seamlessly with existing components to preserve design consistency.

Ignoring Design Tokens:

Use Tokens for Styling: Failing to use design tokens for styling can lead to inconsistencies across your designs. Always rely on tokens for defining colors, typography, and spacing to ensure uniformity.
Update Tokens Regularly: Ensure that token updates are applied consistently across all components and design files. Ignoring token updates can result in outdated styles and visual discrepancies.

Neglecting Accessibility Considerations:

Design for All Users: Overlooking accessibility can make your designs unusable for individuals with disabilities. Ensure that components and styles adhere to accessibility standards, including color contrast, keyboard navigation, and screen reader support.
Test for Compliance: Regularly test your designs for accessibility compliance and address any issues that arise. Use tools and guidelines to verify that your designs meet accessibility requirements.

Lack of Documentation:

Document Design Choices: Failing to document design decisions, customizations, and component usage can lead to confusion and misalignment within the team. Keep thorough documentation to ensure everyone understands the design system and its components.
Update Documentation Regularly: Ensure that documentation is kept up-to-date with any changes or updates to the design system. Regularly review and revise documentation to reflect the current state of the design system.

Inconsistent Component Usage:

Adhere to Design System Guidelines: Inconsistent use of components can lead to a fragmented user experience. Follow the design system’s guidelines for component usage and ensure that components are applied consistently across all screens and interactions.

Review Component Variants:

Make sure to use the correct component variants for different use cases. Avoid mixing variants or using incorrect versions, as this can create a disjointed experience.

Poor Collaboration and Communication:

Establish Clear Communication Channels: Miscommunication between designers and developers can lead to discrepancies and errors. Establish clear communication channels and regular syncs to ensure that both teams are aligned on design and development goals.
Share Updates Promptly: Share any updates to the design system or component library with your team in a timely manner. This helps keep everyone informed and ensures that changes are implemented consistently.

Ignoring Version Control:

Use Version Control Tools: Failing to use version control can lead to difficulties in tracking changes and reverting to previous versions if needed. Implement version control for your design files and component library to manage updates effectively.
Track Changes and Revisions: Regularly track changes and revisions to your design system. This practice helps you monitor the evolution of the design system and ensures that any issues can be traced back to their source.

Inadequate Testing and Validation:

Test Designs Across Platforms: Inadequate testing can result in design inconsistencies and functionality issues. Test your designs across different platforms and devices to ensure that they perform as expected and provide a consistent user experience.
Conduct User Testing: Engage in user testing to gather feedback on the usability and effectiveness of your designs. Address any issues identified during testing to improve the overall quality of your design system.

Failure to Update and Maintain the Design System:

Regularly Update Components: Neglecting to update components and tokens can result in outdated designs and features. Regularly review and update the design system to incorporate new features, improvements, and bug fixes.

Maintain System Integrity:

Ensure that the design system remains coherent and functional as it evolves. Address any issues promptly and make necessary adjustments to maintain the integrity of the system.

Additional Resources

gluestack-ui Design Kit: Access the latest versions and updates of the Gluestack-UI Design Kit in the Figma Community.
gluestack-ui Documentation: Comprehensive guide on the features and usage of the Gluestack-UI Design Kit.
Accessibility Guidelines: Essential guidelines for ensuring your designs meet accessibility standards.
Publish internal library: How to effectively publish an internal figma library for your team.
Guide to components in Figma: Understand every minute detail about creating, using and maintaining components in Figma.

These resources provide additional information and tools to support your design process, enhance your use of the gluestack-ui Design Kit, and ensure that your projects are successful and well-executed.

Conclusion

Utilizing the gluestack-ui Design Kit effectively can significantly enhance your design workflow, ensuring consistency, efficiency, and collaboration across your projects. By understanding the component library, leveraging theme tokens, and avoiding common pitfalls, you can create cohesive and scalable designs that meet both aesthetic and functional needs. Remember to maintain clear documentation, collaborate closely with your team, and keep your design system updated to achieve the best results.

Implementing these best practices will help you maximize the potential of gluestack-ui, streamline your design process, and produce high-quality, consistent results that align with your project goals. Embrace the power of the gluestack-ui Design Kit and transform your design approach for greater efficiency and effectiveness.

gluestack-ui v2.0 Design Kit

gluestackio — Thu, 12 Dec 2024 07:19:27 +0000

Introduction

Step into design efficiency and collaboration with the gluestack-ui v2.0 Design Kit! We're genuinely thrilled to introduce you to our latest innovation.

In today's fast-paced digital landscape, design teams face constant challenges in maintaining consistency, responsiveness, and collaboration across diverse projects. We've experienced these challenges firsthand, so we embarked on a journey to create a solution that not only streamlines our workflows but empowers designers everywhere to achieve their full potential.

The gluestack Figma Kit isn't just another set of design assets—it's a comprehensive toolkit meticulously crafted to enhance every aspect of the design process. From concept to execution, our kit is designed to elevate your projects with efficiency, flexibility, and style.
Join us as we delve into the features, insights, and unique perspectives behind the gluestack Figma Kit.

Challenges Faced

In our pursuit of creating the gluestack Figma Kit, we encountered significant challenges in building a robust component library that serves as the foundation for different design systems. Here are two key hurdles we faced:

Ensuring Compatibility Across Design Systems:

One of our primary challenges was ensuring the seamless integration of our component library with various design systems. Adapting our components to fit diverse branding without compromising functionality or aesthetics proved to be a daunting task for our users. Users had to ensure that it aligned with the platform's existing color palette, typography, and branding guidelines. This required extensive customization and fine-tuning to ensure consistency with the overall design language while still maintaining the core functionality of the button component.
Hence, the gluestack plugin was created. This plugin empowers users to make foundational changes to the gluestack Kit effortlessly. Updating color tokens, linking text styles, or changing font families is now a breeze, thanks to the plugin's intuitive interface and seamless integration with Figma.

Maintaining Cohesion Amidst Design Variations and Components:

Another challenge we faced was maintaining cohesion across our component library while accommodating design system-specific variations. Ensuring that these variations remained consistent with the overall design language and didn't diverge too far from the standard posed a significant challenge.
This challenge led to an internal experiment of Dynamic height vs. Fixed height for form control components. Through extensive research and testing, we explored the pros and cons of each approach and documented our findings.

Ultimately, we decided to implement the fixed height approach by default in the gluestack Figma Kit to ensure that all form control components maintain consistency in appearance and layout. However, we understand that every design system has unique requirements and preferences. That's why the gluestack Kit is designed to be 100% customizable. If you prefer a dynamic height approach or any other customization, you can tailor the kit to your specific needs effortlessly.

What is included?

We recognized that gluestack serves as the foundation for many design systems. We prioritized ease of customization to ensure users can fully leverage the Figma file. Many design decisions in gluestack are intentionally kept generic to accommodate various use cases.

This is also why we chose a black-and-white palette—to ensure the default designs do not influence your branding decisions. Customization with the gluestack Figma kit is easy for the following reasons:

Color Tokens: Color tokens in Figma provide a systematic way to manage and use colors in your design projects. They ensure consistency and simplify updates by defining a centralized set of color values reusable throughout the project. Our kit includes an extended color palette added as styles, semantic colors as variable collections, and a set of fixed colors that remain unchanged across modes.
Text Tokens: Text tokens in Figma enable you to define and manage consistent text properties like font, size, line spacing, and color. Our Figma UI Kit features two main foundation components, Text and Heading, with various sizes and font weights. You can easily customize these styles and typography properties to align with your brand.
Shadow Tokens: Shadow tokens, also known as effect styles, allow you to define and manage effects such as drop shadows, strokes, blurs, and images. Our kit includes two primary shadows, Hard and Soft, covering different light source directions and intensities.
Components: Components in Figma are reusable design elements that ensure consistent and efficient designs. They can represent UI elements, icons, buttons, or any visual elements you want to reuse. Our Figma UI Kit includes around 23 components with instances mapped in compound components, enabling you to design screens effortlessly with common primitive components.
Additional Examples: We’ve added more components and their use cases in the latest version. These examples demonstrate how components can be customized to meet user needs.

Future Roadmap

With the release of v2, the gluestack design team is actively expanding the collection of components and introducing new features based on community feedback. Expect incremental additions of patterns and screens to the file. We believe this Figma kit will empower you to make quick design decisions, thanks to the solid foundational work already in place.

Download your kit now!

For any queries, join our Discord channel.

Why we built gluestack-ui v2?

gluestackio — Thu, 12 Dec 2024 06:53:55 +0000

We are thrilled to introduce gluestack-ui v2. It is a significant upgrade of our UI component library and will empower developers by streamlineing the creation of beautiful, responsive user interfaces across web and mobile.

But why did we build gluestack-ui v2?
We were motivated by the pulse of the community and a drive to solve real-developer problems.

Addressing Developer Needs and Feedback

Listening to Our Community

We heard your challenges with existing UI libraries – from bloated dependencies to limited customization options.
With gluestack-ui v2, we aimed to address these pain points head-on.
We did this by offering a modular architecture and seamless integration with Tailwind CSS through NativeWind, empowering developers to tailor their UI components precisely to project requirements.

Modular Approach with Copy-Pastable Components

Simplifying Integration

In gluestack-ui v2 we are shifting from a bundled library to a modular architecture.
What does that mean? Unlike v1, where components came as part of a large package, v2 allows developers to copy and paste only the components they need.
This approach minimizes unnecessary dependencies, reduces bundle sizes, and simplifies the integration process. Now, you can include only the required components in your project, ensuring optimal performance and code efficiency.

Enhancing Performance and Efficiency

Optimized for Speed and Scalability

In today's fast-paced digital landscape, performance is non-negotiable. gluestack-ui v2 shines in this aspect.
By leveraging React Server Components (RSC) to enable server-side rendering, we have, significantly improved initial load times and SEO while reducing client-side JavaScript execution
This enhancement boosts application performance and enhances the overall user experience, ensuring that applications built with gluestack-ui are responsive and performant across devices.

Promoting Accessibility and Inclusivity

Designing for Everyone

Accessibility is at the core of gluestack-ui v2. We understand the importance of creating applications that are usable by all individuals, regardless of their abilities or assistive technologies.
Each component in gluestack-ui v2 is meticulously designed and tested to ensure full operability, keyboard navigation, screen-reader compatibility, and optimal color contrast.

Empowering Customization and Design Consistency

Tailored to Your Creative Vision

We wanted to empower developers and designers alike to create cohesive design systems that reflect their brand identity and creative vision.
gluestack-ui does this by integrating with Tailwind CSS and the availability of a comprehensive Figma UI Kit. The result is unparalleled flexibility and consistency in UI design.
Whether you' are building a sleek web application or a robust mobile interface, gluestack-ui v2 equips you with the tools to achieve stunning visual results while maintaining usability and accessibility standards.

Streamlined Development Workflow

Tools for Efficiency

Developers need tools that streamline their workflow and enhance productivity. That's why gluestack-ui v2 includes a CLI tool for quick project setup and configuration, alongside a VSCode extension for seamless integration within your preferred IDE.
These tools not only simplify development tasks but also foster collaboration and consistency across teams, enabling faster iteration and delivery of high-quality applications.

Enhanced Developer Experience with Classnames

Simplified Styling with NativeWind

gluestack-ui v2 introduces a user-friendly approach to styling with NativeWind, leveraging classnames that align with Tailwind CSS conventions.
This approach reduces the learning curve for developers familiar with Tailwind, allowing them to apply styles effortlessly and maintain design consistency throughout their applications. By embracing classnames, gluestack-ui v2 enhances developer productivity and empowers teams to focus on building innovative features without the complexity of traditional CSS methodologies.

Future-Proofing and Innovation

Continuously Evolving

The journey to gluestack-ui v2 is just the beginning. We're committed to continuous improvement and innovation, driven by our passion for empowering developers with cutting-edge tools and technologies.

Join Us on this Exciting Journey

Community-Centric Development

gluestack-ui v2 is not just a product – it's a collaborative effort with our community of developers, designers, and innovators.
We invite you to explore gluestack-ui v2, provide feedback, and join us in shaping the future of UI development. Together, let's build intuitive, accessible, and visually compelling applications that make a positive impact in the digital world.
Visit gluestack.io to learn more about gluestack-ui v2, try out the latest version, and join our community.

gluestack-ui v2 is here!

gluestackio — Tue, 10 Dec 2024 12:04:26 +0000

Copy-paste components & patterns crafted with Tailwind CSS (NativeWind)
gluestack-ui v2 is here and it's better than ever!

We've made gluestack-ui v2 as flexible and customizable as possible. But what truly sets gluestack-ui v2 apart is its universal compatibility. You just write once and run anywhere.

Plus, it's built with NativeWind, providing a powerful styling solution with Tailwind CSS classes support, and all you have to do is copy-paste. And let's not forget one of the most beloved features—dark mode all the way through!

What’s Freshly Brewed?

Modular Architecture: Selective component usage

gluestack-ui v2 introduces a modular architecture, allowing developers to choose and integrate only the necessary components into their projects. This approach reduces bundle sizes, improves performance, and simplifies maintenance by eliminating unused code.

NativeWind Integration: Tailwind CSS support

Leveraging NativeWind as its styling engine, gluestack-ui v2 provides seamless integration with Tailwind CSS classes. Developers can customize UI components effortlessly, ensuring consistent design across different platforms like Expo and Next.js.

Learn More

Component Redesign: Enhanced visual design

gluestack-ui v2 includes redesigned components with improved visual aesthetics and usability. From buttons and forms to navigation elements and data displays, each component has been refined to enhance user experience and align with modern design trends.

Learn More

Enhanced Performance: React Server Components (RSC) compatibility

gluestack-ui v2 supports React Server Components (RSC), enabling server-side rendering of UI elements. This optimizes initial load times, and improves the overall user experience by reducing client-side JavaScript execution.

Learn more

Easy Onboarding: Installs in a flash

gluestack-ui v2 offers a CLI tool for seamless onboarding. Quickly initialize projects, install dependencies, and configure settings with intuitive commands, streamlining the setup process and enabling developers to get started faster.

Learn More

Are you migrating from v1?
Check out our Migration guide

Non-Bundled Library Approach: Reduced dependency footprint

gluestack-ui v2 is designed as a non-bundled library, allowing developers to directly copy-paste required components into their projects. This approach minimizes unnecessary dependencies and ensures optimal performance and code efficiency.

Learn More

No Default Primary Color: Design customization

The default primary color in gluestack-ui v2 has been updated to gray, promoting a neutral design aesthetic by default. Existing users can easily configure and adapt this change to align with their specific design preferences and branding.

Learn More

VS Code Extension: IDE integration

Enhance your development workflow with the gluestack-ui v2 VSCode extension. Access component snippets, quick documentation references, and styling suggestions directly within your coding environment for seamless integration.

Learn More

Figma UI Kit: Design System integration

Simplify UI design and collaboration with the gluestack-ui v2 Figma UI Kit. Explore pre-designed components, layouts, and styles that perfectly align with gluestack-ui v2’s focus on universal design, accessibility, and customization.

Learn More

Starter Kits: Accelerated development

Jumpstart your projects with gluestack-ui v2 Starter Kits. Choose from a variety of pre-configured templates for web and mobile applications, complete with optimized configurations and sample code to accelerate development.

Learn More

Universal to the Core: Universal UI design

gluestack-ui v2 adheres to universal design principles, ensuring accessibility across different devices and platforms. Develop applications that everyone uses, regardless of their abilities or experience with assistive technologies.

Learn More

Accessibility Baked In: Inclusive UI design

gluestack-ui v2 components are designed to be fully operable and navigable, ensuring a smooth and intuitive user experience. Experience better keyboard interaction, gestures, screen readers, and the right color contrast!

Learn More

Create Design Systems/Component Library: Make it your own

Craft a unique design ecosystem with a collection of components that align perfectly with your creative vision.

Our Journey: We are getting better every day

The road to v2 has been exciting; we have much more coming up! Stay tuned for a sneak peek into the future of gluestack-ui.

Join Our Community: Be a part of this journey

We are constantly pushing new upgrades for gluestack-ui and welcome any query from our community. Join our socials to stay updated and receive support related to gluestack-ui.

Links:

Forem: gluestackio

Troubleshooting Common Issues with NativeWind (and Why You Should Try gluestack-ui)

NativeWind Styling is Not Working?

1. Check Versions

2. Check tailwind.config.

3. React Native Web Styles Overriding Tailwind Classes?

Issues with Expo

1. Add Babel Preset

2. Update metro.config.js

3. Import Correct CSS File

NativeWind + Next.js

1. Ensure jsxImportSource

2. Add Transpiled Packages

3. Next.js 15 Compatibility

Why gluestack-ui?

gluestack-ui v2: Stable Release with NativeWind v4.1 Support 🚀

✨ What’s New in gluestack-ui v2

90% Reduction in CSS File Size

600+ Lines of Code and Wrappers Removed

Support for Data Attributes Without HOCs

Compatible with NativeWind v4.1

Expo RSC (React Server Components) Compatibility

Improved TypeScript Support

🎉 Why This Matters

📦 Getting Started with gluestack-ui v2

Simple Setup with Our Powerful CLI

🚀 The Journey Ahead

We’d Love to Hear from You!

Known Issue

Mastering gluestack-ui v2 Animations with NativeWind: A Step-by-Step Guide

Animation Structure

Animation options in gluestack ui v2:

Animation steps in gluestack ui v2:

Animation Setup

Step 1: Animating Width (Left Bar Animation)

Step 2: Animating Rotation (Icon Rotation)

Step 3: Animating Opacity and Width (Right Icon & Bottom Animation)

Designing with gluestack-ui: Essential Practices for Consistent Results

Getting Started with gluestack-ui Design Kit

Understanding the Component Library

Leveraging Theme Tokens for Customization

Common Pitfalls to Avoid

Additional Resources

Conclusion

gluestack-ui v2.0 Design Kit

Introduction

Challenges Faced

Ensuring Compatibility Across Design Systems:

Maintaining Cohesion Amidst Design Variations and Components:

What is included?

Future Roadmap

Why we built gluestack-ui v2?

Addressing Developer Needs and Feedback

Listening to Our Community

Modular Approach with Copy-Pastable Components

Simplifying Integration

Enhancing Performance and Efficiency

Optimized for Speed and Scalability

Promoting Accessibility and Inclusivity

Designing for Everyone

Empowering Customization and Design Consistency

Tailored to Your Creative Vision

Streamlined Development Workflow

Tools for Efficiency

Enhanced Developer Experience with Classnames

Simplified Styling with NativeWind

Future-Proofing and Innovation

Continuously Evolving

Join Us on this Exciting Journey

Community-Centric Development

gluestack-ui v2 is here!

What’s Freshly Brewed?

Modular Architecture: Selective component usage

NativeWind Integration: Tailwind CSS support

Component Redesign: Enhanced visual design

Enhanced Performance: React Server Components (RSC) compatibility

Easy Onboarding: Installs in a flash

Non-Bundled Library Approach: Reduced dependency footprint

No Default Primary Color: Design customization

VS Code Extension: IDE integration

2. Check `tailwind.config.`

2. Update `metro.config.js`

1. Ensure `jsxImportSource`