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 是一个面向 React Native 的原生变形悬浮托盘组件，让你能构建在多个视图之间过渡的动画托盘，效果类似 iOS 的 sheet。
这是独立应用，还是放进我 React Native 项目里的组件库？它是一个组件库：你直接在自己的 React Native 应用里组合 Tray.Root、Tray.Trigger、Tray.Content 等部件，没有独立应用。
怎么把它加进 React Native 项目？把你想要动画效果的部分包在 Tray.Root/Tray.Content/Tray.Trigger 组件里；README 没有给出明确的 npm install 命令，只说明了架构要求。
需要启用 React Native 的新架构才能用吗？是的，Morphlet 需要新架构（New Architecture）和 Android API 24+；在 Expo 上需要自定义开发构建，因为不支持 Expo Go。
在普通的 Expo Go 应用里能用吗？不能，由于它依赖新架构，Expo 用户必须构建自定义开发构建，而不能使用 Expo Go。
它在 iOS 和 Android 上都能用吗？可以，它是跨平台的 React Native 组件，不过在 Android 上需要 API 级别 24 或更高。
在托盘内切换视图时可以使用哪些过渡样式？Morphlet 支持在命名视图之间进行 morph、slide、fade 和 scale 过渡。
有哪些动画预设可用？它自带 default、smooth、snappy 和 bouncy 预设，你也可以传入自己的自定义弹簧配置。
托盘能像 iOS 动作面板那样堆叠内容吗？可以，给 Tray.Content 添加 stack prop 会把下方的托盘向后推，效果类似 iOS 的 sheet。
托盘的结构由哪些部分组成？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