npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@argo22/mobile-ui-kit

v1.2.0

Published

UI Kit for expo based mobile apps.

Downloads

102

Readme

@argo22/mobile-ui-kit

UI Kit for expo based mobile apps. Based on react-native-unistyles and React Native Primitives .

This library follows expo ecosystem requirements. Make sure you have expo ready for development before installing this package.

If you don't have expo development ready - follow installation steps

Installation

  1. Install the library with you favourite package manager
# with expo install
npx expo install @argo22/mobile-ui-kit
# with yarn
yarn add @argo22/mobile-ui-kit
# with npm
npm install @argo22/mobile-ui-kit
  1. Install peer dependencies
yarn add react-native-reanimated react-native-safe-area-context react-native-svg react-native-unistyles

Setup

  1. Create or extend theme - see Theming
  2. In root of your project define your themes types for Typescript to work correctly
// if you defined themes
type AppThemes = {
  light: typeof lightTheme,
  dark: typeof darkTheme
}

// override library types
declare module 'react-native-unistyles' {
  export interface UnistylesThemes extends AppThemes {}
}
  1. In root register your themes - details in official Unistyles setup
import { UnistylesRegistry } from 'react-native-unistyles'

UnistylesRegistry
  .addThemes({
    light: lightTheme,
    dark: darkTheme,
    // register other themes with unique names
  })
  .addConfig({
    // you can pass here optional config described below
    adaptiveThemes: true
  })
  1. Add <PortalHost /> to the root of component tree. It will be used for all overlay components
export default function App() {
  return (
    <SafeAreaProvider>
      <Root />

      <PortalHost /> {/* <-- Add this */}
    </SafeAreaProvider>
  );
}

All done. You can now use @argo22/mobile-ui-kit. For API Overview see API documentation

Usage

import components from @argo22/mobile-ui-kit

import { Button } from "@argo22/mobile-ui-kit";
export default () => <Button>Button</Button>

import icons from @argo22/mobile-ui-kit/build/icons. For more information see Icons section

import { SearchIcon } from "@argo22/mobile-ui-kit/build/icons";
export default () => <SearchIcon />

API documentation

Atoms

Atoms are the fundamental building blocks of the UI, providing simple and reusable components like typography and component for custom icons.

Molecules

Molecules combine two or more atoms to form more complex UI components, such as buttons and input fields, which offer richer functionality and interaction.

Toast

The Toast category includes components related to displaying transient notifications to inform users of important information or status changes.

Theming

UI kit offers a way to customize components and UI tokens through themes. There is defaultTheme you can use as a starting point to customize the UI kit. Use createTheme(tokensConfig, componentsCongif) to customize the default theme. If you leave createTheme() without params, the defaultTheme will be used. In other case the config will be merged with the defaultTheme values.

import { createTheme } from "@argo22/mobile-ui-kit";

const fonts = {
  paragraph: {
    light: "Nunito-Regular",
    strong: "Nunito-Bold",
  },
  heading: {
    light: "Nunito-Regular",
    strong: "Nunito-Bold",
  },
};

export const lightTheme = createTheme({
  fontFamily: fonts,
  color: {
    primary: {
      100: "#f6c7b4",
      400: "#f19068",
      500: "#f17643",
      600: "#ef6228",
      800: "#bb3d0a",
    },
  }
});

You can customize the theme as long as the structure stays the same. Make sure to use Theme type for custom themes to ensure structure integrity.

For official docs follow Unistyles theming guide

Loading Themes

Load themes in setup phase of react-native-unistyles.

import { UnistylesRegistry } from 'react-native-unistyles'
import { defaultTheme } from "./theme";

UnistylesRegistry
  .addThemes({
    light: defaultTheme,
    pumpkin: pumkinTheme,
  })

Changing Theme

Use UnistylesRuntime.setTheme() function to change a theme programmatically

import { UnistylesRuntime } from 'react-native-unistyles'

// change the theme in any component
export const ChangeTheme = () => (
    <Button
        title="Change theme"
        onPress={() => UnistylesRuntime.setTheme('pumpkin')}
    />
)

Icons

The package uses Lucide Icons as the icon set of choice and follows its design rules. Icons can be searched at Lucide Icons and imported from @argo22/mobile-ui-kit/build/icons.

Usage

To use Lucide Icons, import them from the library as shown below:

import { SearchIcon } from "@argo22/mobile-ui-kit/build/icons";
export default () => <SearchIcon />

Custom Icons

To add a custom icon, use the Icon component.

Design Guidelines for Custom Icons

Designers should adhere to the following guidelines to ensure custom icons are compatible with Lucide's style:

  1. Use Lucide Icons: Always use Lucide Icons as the primary icon set. Avoid using other icon sets to maintain visual consistency.
  2. Icon Dimensions: Custom icons should be designed at 24x24 pixels.
  3. ViewBox: Set the viewBox attribute to 0 0 24 24.
  4. StrokeWidth: Set the stroke-width to 2 to match the Lucide style guide.

By following these guidelines, you ensure that custom icons integrate seamlessly with the existing icon set and maintain a consistent design throughout the application.

Contributing

Contributions are very welcome! Please refer to guidelines described in the contributing guide.