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…

245 ·GitHub
Morphlet
What is this?Morphlet is a native, morphing floating tray component for React Native, letting you build an animated tray that transitions between views like an iOS sheet.
Is this a standalone app or a component library I drop into my React Native project?It is a component library: you compose pieces like Tray.Root, Tray.Trigger, and Tray.Content directly in your own React Native app, there is no standalone app.
How do I add it to a React Native project?You wrap the parts you want to animate in Tray.Root/Tray.Content/Tray.Trigger components; the README does not give an explicit npm install command, only the architecture requirements.
Do I need React Native's New Architecture enabled for this to work?Yes, Morphlet requires the New Architecture and Android API 24+; on Expo you need a custom development build since Expo Go is not supported.
Will this work in a plain Expo Go app?No, since it depends on the New Architecture, Expo users must build a custom development build instead of using Expo Go.
Does it work on both iOS and Android?Yes, it is built as a cross-platform React Native component, though on Android it needs API level 24 or higher.
What transition styles can I use when switching views inside the tray?Morphlet supports morph, slide, fade, and scale transitions between named views.
What animation presets are available?It ships with default, smooth, snappy, and bouncy presets, or you can pass your own custom spring configuration.
Can the tray behave like an iOS action sheet that stacks content?Yes, adding the stack prop to Tray.Content pushes the tray below back, similar to an iOS sheet.
What parts make up the tray's structure?Tray.Root controls open state, Tray.Trigger/Close toggle it, Tray.Content is the card body, and Tray.Header/Footer/Body/View/Title/Description handle layout and accessible text.
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
245
Updated
CommitOct 06Releasev0.1.3Oct 06
Age
13d
Commits · 90 Days