Overview

A tool designed for React Native developers to quickly get high-quality UI components with customizable props, static styles customization, eliminating the need to manually code styles while avoiding unnecessary library dependencies in their projects. Some of the key features include:

  • Customizable props - you can include only the props you need
  • Static style customization - customize the styles which are not controlled by props
  • Elimination of unnecessary library dependencies - it's not a library
  • Copy/paste code integration into your project - no need to manually code styles
  • User-friendly GUI for easy customization - a graphical interface for seamless customization
  • High-quality UI components - we cover every edge case

Installation

If your project is already up and running, no further action is needed. It seamlessly accommodates nearly every installation (refer to the requirements section). Otherwise, we highly recommend utilizing EXPO . Installation details can be found in their documentation .

Requirements

  • react-native 0.72.6 (or higher)

Why is it different from other design tools?

Unlike traditional design tools which lack the ability to export code while considering developer-centric features, our tool revolutionizes the process. We prioritize developer needs by seamlessly generating code alongside components with customizable props. With us, you have the ability to toggle properties on and off as needed, ensuring both flexibility and optimized code for tailored designs.

Design Principles

We adhere to several key concepts:

  • Cross-platform design - ensuring a consistent look-and-feel across all platforms, rather than platform-specific. This is typically the top requirement in 99% of projects, unless there's an explicit need for platform-specific designs.
  • Composability - our components are designed to be composable, maximizing reusability while maintaining simplicity.

Underlying/core implementation

  • Styles
    • We avoid using Stylesheet.Create() as it doesn't significantly impact performance, contrary to previous claims in some documentation. According to current documentation, its primary purpose is code cleanliness. Previously, there was a Performance section in the documentation, but it has since been removed.
    • While we could utilize useMemo for slight optimization, it's worth noting that the React team is actively developing its own compiler. This compiler will intelligently handle optimizations, ultimately streamlining performance enhancements for developers.
  • Icons - you can use an icon library of your choice. Just for simplicity, we've utilized @expo/vector-icons for "Usage example" section.
  • Fonts - we utilizes the default font available on the device, but you can change it to any font you like.
  • Buttons - for clickable elements, we utilize Pressable, which offers enhanced accessibility and touch feedback.

Tips

Font scaling

If you notice inconsistencies in font sizes across devices, it may be due to varying font configurations set in the device settings. To ensure consistency, consider disabling font scaling globally in a root file such as App.js.

import {Text, TextInput} from 'react-native';

const disableFontScaling = () => {
  Text.defaultProps = {
    allowFontScaling: false,
  };
  TextInput.defaultProps = {
    allowFontScaling: false,
  };
}

useEffect(() => {
  disableFontScaling();
}, [])