dominicstop / react-native-ios-adaptive-modal

TBA
MIT License
14 stars 1 forks source link

react-native-ios-adaptive-modal

TBA


šŸš§āš ļø Re-Write WIP šŸš§āš ļø

This library is being re-written to support the new architecture. Please see this is issue for progress šŸ˜”


Acknowledgements

The initial version of this library (0.x) was made possible through a generous sponsorship by beatgig from 11/15/2023 to 04/30/2024 at $1,535/month (totaling ā‰ˆ $9,100 over the course of 6 months)


very special thanks to: junzhengca, brentvatne, expo, EvanBacon, corasan, lauridskern, and ronintechnologies for becoming a monthly sponsor and fobos531 for being a one time sponsor šŸ„ŗ (if you have the means to do so, please considering sponsoring here)



A. Introduction

TBA



B. Installation

For bare React Native projects, you must ensure that you have installed and configured the expo package before continuing.

# 1. install library + dependencies
npm install react-native-ios-utilities
npm install react-native-ios-adaptive-modal

# 2. then run pod install (uses auto-linking)
cd ios && pod install



C. Basic Usage

TBA



D. Documentaation

TBA



E. Articles and Discussions

How The Library Works

Dependecy: AdaptiveModal

All of the modal presentation and animation is handled by a small library written in swift called: adaptive-modal. This library uses it under the hood for natively presenting a view controller with custom modal presentation.

adaptive-modal-demo-01

adaptive-modal-demo-02

adaptive-modal accepts a config that describes the state, behavior and layout of the modal:


the modal config is then evaluated, and gets "transformed" into something UIKit can understand via:


Dependency: ComputableLayout

To define the various snapping points for the modal, a small helper library written in swift called ComputableLayout is used to configure the size and position of the modal. This library is a very naive layout system/calculator custom built for adaptive-modal.

This helper library is essentially just a function that turns a config (e.g. the desired horizontal/vertical position) into a CGRect value (i.e. raw x, y, width and height values); in other words, this library is used to cheaply calculate layout for a given configuration without having to instantiate a view.

The layout config allows us to add placeholder "layout values" that are then substituted to the real values during calculation; some of these values are:


The layout config also allows for the composition of multiple "layout values" together, or have conditions that get evaluated during calculation.

The layout config is calculated based on a provided target view/rect, i.e. in the case for adaptive-modal, the target view would be the UITransitionView where the modal UIViewController gets attached to.

In summary: ComputableLayout allows us to compute all the snapping points for a target view's size, this allows for the quick recalculation of all the snapping points whenever there's a layout change for the target view (e.g. when the screen rotates, the window resizes, the appearance of a keyboard, etc).

ComputableLayout-Demo-01


Dependency: Helpers and Misc

DGSwiftUtilities and react-native-ios-utilities are just helper libraries.



Layout and Snapping Points

The layout config you provide defines the snapping point.


Due to the quirks described in the previous bullet points, it is recommended that each snapping point be unique (no repeats or duplicates), and their corresponding computed percentage must changeā€”either increasing or decreasing consistently in one direction.



F. Usage and Examples

TBA



E. Showcase, Test and Demos

TBA



F. Licence

TBA



G. Misc and Contact