@siposdani87/sui-rn

This is a basic UI library. It is written in the TypeScript language. The codebase was ready to use with Expo and React Native. In this library there are a lot of predefined form field components.

SDK Compatibility

| Library Version | Expo SDK | React Native | React | | --------------- | -------- | ------------ | ------ | | 1.2.x | 54 | 0.81 | 19.1 | | 1.1.x | 54 | 0.81 | 19.1 | | 1.0.x | 51 | 0.74 | 18.2 |

Supported Platforms

| Component | iOS | Android | Web | | ------------------ | --- | ------- | --- | | TextField | Yes | Yes | Yes | | NumberField | Yes | Yes | Yes | | EmailField | Yes | Yes | Yes | | PasswordField | Yes | Yes | Yes | | PhoneField | Yes | Yes | Yes | | TextAreaField | Yes | Yes | Yes | | RichTextAreaField | Yes | Yes | Yes | | SearchField | Yes | Yes | Yes | | SelectField | Yes | Yes | Yes | | DateTimeField | Yes | Yes | No | | CheckboxField | Yes | Yes | Yes | | RadioButtonField | Yes | Yes | Yes | | SwitchField | Yes | Yes | Yes | | SliderField | Yes | Yes | No | | ColorField | Yes | Yes | No | | FileField | Yes | Yes | No | | LocationField | Yes | Yes | No | | TagField | Yes | Yes | Yes | | Button | Yes | Yes | Yes | | IconButton | Yes | Yes | Yes | | TextButton | Yes | Yes | Yes | | Link | Yes | Yes | Yes | | Label | Yes | Yes | Yes | | Dialog | Yes | Yes | Yes | | ErrorField | Yes | Yes | Yes |

Getting Started

Installing

npm install @siposdani87/sui-rn

Theming

Customize colors and fonts at app startup:

import { Colors, setThemeColors, setThemeStyles } from '@siposdani87/sui-rn';

setThemeColors({
    primaryBright: Colors.deepPurpleBright,
    primary: Colors.deepPurple,
    primaryDark: Colors.deepPurpleDark,
    primaryText: Colors.white,
    accentBright: Colors.cyanBright,
    accent: Colors.cyan,
    accentDark: Colors.cyanDark,
    accentText: Colors.white,
});

setThemeStyles({
    fontFamilyApp: 'Ubuntu_400Regular',
    fontFamilyHeadings: ['Oswald_400Regular', 'Oswald_500Medium', 'Oswald_700Bold'],
    fontFamilyBodies: ['Inter_400Regular', 'Inter_500Medium', 'Inter_700Bold'],
});

Basic Usage

import { TextField, Button, SelectField } from '@siposdani87/sui-rn';

function MyForm() {
    const [name, setName] = useState<string | null>(null);

    return (
        <>
            <TextField
                label="Name"
                value={name}
                onValueChange={setName}
                required
            />
            <Button title="Submit" onPress={() => {}} />
        </>
    );
}

Check the example/ directory for more samples and options.

Preview

Migration Guide

Upgrading from 1.1.x to 1.2.x

Breaking changes:

1. setThemeColors() API changed from positional arguments to an options object:

   // Before (1.1.x)
   setThemeColors(bright, primary, dark, text, accentBright, accent, accentDark, accentText);
   
   // After (1.2.x)
   setThemeColors({
       primaryBright: bright,
       primary: primary,
       primaryDark: dark,
       primaryText: text,
       accentBright: accentBright,
       accent: accent,
       accentDark: accentDark,
       accentText: accentText,
   });

2. setThemeStyles() API changed from positional arguments to an options object:

   // Before (1.1.x)
   setThemeStyles(appFont, [h1, h2, h3], [b1, b2, b3]);
   
   // After (1.2.x)
   setThemeStyles({
       fontFamilyApp: appFont,
       fontFamilyHeadings: [h1, h2, h3],
       fontFamilyBodies: [b1, b2, b3],
   });

3. Value types are stricter — TextFieldValueType changed from any to string | null | undefined, NumberFieldValueType to number | null | undefined, etc. Update your onValueChange handlers accordingly.

4. TouchableOpacity replaced with Pressable — visual press feedback may differ slightly.

5. New BaseFieldProps interface — all form fields now extend this shared type for common props (label, error, required, disabled, desc, onPressDesc, containerStyle, style).

Development

npm install --legacy-peer-deps
npm run watch     # TypeScript watch mode
npm run build     # Full build (format → type-check → lint → tsc)
npm test          # Run tests

See CONTRIBUTING.md for the full contribution guide.

Bugs or Requests

If you encounter any problems feel free to open an issue. If you feel the library is missing a feature, please raise a ticket. Pull request are also welcome.

Developer

Dániel Sipos

Sponsors

This project is generously supported by TrophyMap, I18Nature, and several other amazing organizations.