Skip to main content

50 docs tagged with "Framework"

FlexNative is a component library that enables developers to build universal design systems. It is built on top of React Native, allowing you to develop apps for Android, iOS, and the Web.

View all tags

Authentication

A package to implement almost full authentication and protect routes with Expo Router.

Avatar

Avatars can be used to represent people or objects. It supports images, Icons, or letters.

Badges

Small numerical value or status descriptor for UI elements.

Basic Usage

To use a icon font, you have to make sure you import them into your project. Only after the font is loaded, you can use Icon set.

Bottom Sheet

Bottom sheets are surfaces containing supplementary content, anchored to the bottom of the screen.

Buttons

FlexNative Buttons package is part of FlexNative for React Native, it provides a clickable UI library and functionality.

Check Box

The CheckBox is typically used to represent boolean values via a binary checked state.

Check List

React component that allows users to select items from a list.

Components

FlexNative provides a number of built-in Core Components ready for you to use in your app.

Consuming Themes

This section show how to consume (use) theme colors for your components.

Custom Icons

@flexnative/icons package uses custom icon fonts created based on a IcoMoon.

Default

The following examples demonstrates the FlexNative Check List in action.

Default

The following examples demonstrates the Numeric Text Boxes in action.

Default

The following examples demonstrates the Text Boxes in action.

Default Theme

The theme object is where you define your application's color palette, type scale, borders, border radius values, and more.

Example

This guide provides an example that demonstrates how to implement authentication and protect routes with Expo Router using @flexnative/authentication.

Example

Below example shows a full example how to extend ThemeProvider and implement setColorScheme method to support to dark mode

getStorageItemAsync

This function abstracts away the complexities of fetching stored items differently based on the execution context, providing a simple and unified API for retrieving data across different environments.

Getting Started

FlexNative is a component library that enables developers to build universal design systems.

Grid

Block component it is a wrapper over the React-Native View component,

Group Avatar

AvatarGroup is part of the @flexnative/avatar package.

Icons

FlexNative suite delivers more than integrated font icons for its components.

Inputs

FlexNative Inputs package is part of FlexNative for React Native,

Installation

FlexNative is a component library that enables developers to build universal design systems.

Layout

Useful components for creating responsive and consistent layouts, the FlexNative Layout component provides a powerful

Local Storage

The Local Storage Packages is part of FlexNative, that provides an asynchronous, unencrypted, persistent, key-value storage API.

Material

The following examples demonstrates the FlexNative Check List in action.

Material

The following examples demonstrates the Numeric Text Boxes in action.

Material

The following examples demonstrates the Text Boxes in action.

Messages

Component to display messages that require attention with colored message blocks,

Navigation

Useful components related with Navigation.

setStorageItemAsync

This function is designed to abstract away the complexities of environment-specific storage management, allowing for consistent storage operations across various platforms.

Setup Theme Provider

FlexNative ThemeProvider is part of FlexNative and is a component that makes the theme available throughout your app.

Skeleton Loading

The FlexNative Skeleton Loading is part of the FlexNative and is available under the @flexnative/skeleton-loading NPM package.

Spinner

Spinner is part of the @flexnative/icons package.

Tags

The FlexNative Tags is part of the FlexNative and is available under the @flexnative/tags NPM package.

Theme

The FlexNative Theme Context is part of the FlexNative and is available under the @flexnative/theme-context NPM package.

useAuthState

useAuthState is a basic hook that persists tokens securely on native with expo-secure-store and in local storage on web.

Utilities

Some utilities methods related with Authentication.

Utilities

FlexNative Utilities are part of FlexNatives framework witch provides some utilities methods.