morphlet README

The project's README from github.com/rit3zh/morphlet. As one markdown file: README.md.

Morphlet

https://github.com/user-attachments/assets/9c98763d-f6f1-4dfb-9a7b-90ca5087efc5

A native, morphing floating tray for React Native.

<Tray.Root>
  <Tray.Trigger morph>…</Tray.Trigger>
  <Tray.Content>…</Tray.Content>
</Tray.Root>

Installation

npm install morphlet
cd ios && pod install

Requires the New Architecture. Android API 24+. On Expo, use a development build.

Usage

import { Text } from 'react-native';
import { Tray } from 'morphlet';

export function Example() {
  return (
    <Tray.Root>
      <Tray.Trigger>
        <Text>Open</Text>
      </Tray.Trigger>

      <Tray.Content>
        <Tray.Header>
          <Tray.Title>Hello</Tray.Title>
        </Tray.Header>
        <Tray.Body>
          <Tray.Description>A tray that springs to fit.</Tray.Description>
        </Tray.Body>
        <Tray.Footer>
          <Tray.Close>
            <Text>Done</Text>
          </Tray.Close>
        </Tray.Footer>
      </Tray.Content>
    </Tray.Root>
  );
}

Views

<Tray.Root defaultView="options">
  <Tray.Trigger>…</Tray.Trigger>
  <Tray.Content>
    <Tray.Body>
      <Tray.View name="options">
        <Options />
      </Tray.View>
      <Tray.View name="details" fullScreen>
        <Details />
      </Tray.View>
    </Tray.Body>
  </Tray.Content>
</Tray.Root>;

function Options() {
  const { setView } = useTray();
  return <Row title="Details" onPress={() => setView('details')} />;
}

Wrap anything in <Tray.Morph value={...}> to transition it when value changes. Add stack to Tray.Content to push the tray below back like an iOS sheet.

API

Component Purpose
Tray.Root Open state and active view. open, view, transition, animation.
Tray.Trigger / Tray.Close Open or close. asChild, and morph to grow the tray from the trigger.
Tray.Content The card. backgroundColor, cornerRadius, dismissible, fullScreen, stack.
Tray.Header / Tray.Footer Fixed sections around the body.
Tray.Body / Tray.View Morphs between named views.
Tray.Morph Transitions children when value changes.
Tray.Title / Tray.Description Accessible text. 
const { open, close, view, setView, goBack, canGoBack, setFullScreen } =
  useTray();

Transitions: morph · slide · fade · scale Animation presets: default · smooth · snappy · bouncy — or pass custom springs:

<Tray.Root animation={{ preset: 'smooth', morph: { response: 0.6, dampingFraction: 0.8 } }}>

Example

yarn
yarn example ios   # or android

Contributing

See CONTRIBUTING.md.

License

MIT

morphlet (rit3zh/morphlet)

Searching Database…

244 ·GitHub
Morphlet
Что это такое?Morphlet — это нативный морфирующийся плавающий компонент tray для React Native, позволяющий собрать анимированную панель, которая переключается между видами наподобие шторки iOS.
Это отдельное приложение или библиотека компонентов, которую я добавляю в свой React Native-проект?Это библиотека компонентов: вы собираете такие части, как Tray.Root, Tray.Trigger и Tray.Content, прямо в собственном React Native-приложении, отдельного приложения нет.
Как добавить его в React Native-проект?Вы оборачиваете части, которые хотите анимировать, в компоненты Tray.Root/Tray.Content/Tray.Trigger; в README нет явной команды npm install, только требования к архитектуре.
Нужно ли включать New Architecture в React Native, чтобы это работало?Да, Morphlet требует New Architecture и Android API 24+; на Expo нужен собственный development build, так как Expo Go не поддерживается.
Будет ли это работать в обычном приложении Expo Go?Нет, поскольку компонент зависит от New Architecture, пользователям Expo придётся собрать собственный development build вместо Expo Go.
Работает и на iOS, и на Android?Да, это кроссплатформенный React Native-компонент, но на Android нужен API уровня 24 или выше.
Какие стили переходов можно использовать при переключении видов внутри tray?Morphlet поддерживает переходы morph, slide, fade и scale между именованными видами.
Какие пресеты анимации доступны?Есть встроенные пресеты default, smooth, snappy и bouncy, либо можно передать собственную конфигурацию пружины (spring).
Может ли tray вести себя как action sheet в iOS со стопкой контента?Да, добавление пропа stack к Tray.Content отодвигает нижний трей назад, похоже на шторку iOS.
Из каких частей состоит структура tray?Tray.Root управляет состоянием открытия, Tray.Trigger/Close переключают его, Tray.Content — тело карточки, а Tray.Header/Footer/Body/View/Title/Description отвечают за разметку и доступный текст.
What are similar projects?ng-native, react-native-elements, expo-backdrop, react-native-calendars, react-native-ui-kitten, react-native-swiper, victory, Libraries.dev
Which topics is it in?expo, react-components, ui-library, react-native, component-library, mobile-app, ui-components, animation, mobile, ui, ios, android
Creator
rit3zh
Size
6.8 MB
Stars
244
Updated
CommitOct 06Releasev0.1.3Oct 06
Age
12d
Commits · 90 Days