Add video support

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

LICENSE

@@ -1,674 +0,0 @@
-                    GNU GENERAL PUBLIC LICENSE
-                       Version 3, 29 June 2007
-
- Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
- Everyone is permitted to copy and distribute verbatim copies
- of this license document, but changing it is not allowed.
-
-                            Preamble
-
-  The GNU General Public License is a free, copyleft license for
-software and other kinds of works.
-
-  The licenses for most software and other practical works are designed
-to take away your freedom to share and change the works.  By contrast,
-the GNU General Public License is intended to guarantee your freedom to
-share and change all versions of a program--to make sure it remains free
-software for all its users.  We, the Free Software Foundation, use the
-GNU General Public License for most of our software; it applies also to
-any other work released this way by its authors.  You can apply it to
-your programs, too.
-
-  When we speak of free software, we are referring to freedom, not
-price.  Our General Public Licenses are designed to make sure that you
-have the freedom to distribute copies of free software (and charge for
-them if you wish), that you receive source code or can get it if you
-want it, that you can change the software or use pieces of it in new
-free programs, and that you know you can do these things.
-
-  To protect your rights, we need to prevent others from denying you
-these rights or asking you to surrender the rights.  Therefore, you have
-certain responsibilities if you distribute copies of the software, or if
-you modify it: responsibilities to respect the freedom of others.
-
-  For example, if you distribute copies of such a program, whether
-gratis or for a fee, you must pass on to the recipients the same
-freedoms that you received.  You must make sure that they, too, receive
-or can get the source code.  And you must show them these terms so they
-know their rights.
-
-  Developers that use the GNU GPL protect your rights with two steps:
-(1) assert copyright on the software, and (2) offer you this License
-giving you legal permission to copy, distribute and/or modify it.
-
-  For the developers' and authors' protection, the GPL clearly explains
-that there is no warranty for this free software.  For both users' and
-authors' sake, the GPL requires that modified versions be marked as
-changed, so that their problems will not be attributed erroneously to
-authors of previous versions.
-
-  Some devices are designed to deny users access to install or run
-modified versions of the software inside them, although the manufacturer
-can do so.  This is fundamentally incompatible with the aim of
-protecting users' freedom to change the software.  The systematic
-pattern of such abuse occurs in the area of products for individuals to
-use, which is precisely where it is most unacceptable.  Therefore, we
-have designed this version of the GPL to prohibit the practice for those
-products.  If such problems arise substantially in other domains, we
-stand ready to extend this provision to those domains in future versions
-of the GPL, as needed to protect the freedom of users.
-
-  Finally, every program is threatened constantly by software patents.
-States should not allow patents to restrict development and use of
-software on general-purpose computers, but in those that do, we wish to
-avoid the special danger that patents applied to a free program could
-make it effectively proprietary.  To prevent this, the GPL assures that
-patents cannot be used to render the program non-free.
-
-  The precise terms and conditions for copying, distribution and
-modification follow.
-
-                       TERMS AND CONDITIONS
-
-  0. Definitions.
-
-  "This License" refers to version 3 of the GNU General Public License.
-
-  "Copyright" also means copyright-like laws that apply to other kinds of
-works, such as semiconductor masks.
-
-  "The Program" refers to any copyrightable work licensed under this
-License.  Each licensee is addressed as "you".  "Licensees" and
-"recipients" may be individuals or organizations.
-
-  To "modify" a work means to copy from or adapt all or part of the work
-in a fashion requiring copyright permission, other than the making of an
-exact copy.  The resulting work is called a "modified version" of the
-earlier work or a work "based on" the earlier work.
-
-  A "covered work" means either the unmodified Program or a work based
-on the Program.
-
-  To "propagate" a work means to do anything with it that, without
-permission, would make you directly or secondarily liable for
-infringement under applicable copyright law, except executing it on a
-computer or modifying a private copy.  Propagation includes copying,
-distribution (with or without modification), making available to the
-public, and in some countries other activities as well.
-
-  To "convey" a work means any kind of propagation that enables other
-parties to make or receive copies.  Mere interaction with a user through
-a computer network, with no transfer of a copy, is not conveying.
-
-  An interactive user interface displays "Appropriate Legal Notices"
-to the extent that it includes a convenient and prominently visible
-feature that (1) displays an appropriate copyright notice, and (2)
-tells the user that there is no warranty for the work (except to the
-extent that warranties are provided), that licensees may convey the
-work under this License, and how to view a copy of this License.  If
-the interface presents a list of user commands or options, such as a
-menu, a prominent item in the list meets this criterion.
-
-  1. Source Code.
-
-  The "source code" for a work means the preferred form of the work
-for making modifications to it.  "Object code" means any non-source
-form of a work.
-
-  A "Standard Interface" means an interface that either is an official
-standard defined by a recognized standards body, or, in the case of
-interfaces specified for a particular programming language, one that
-is widely used among developers working in that language.
-
-  The "System Libraries" of an executable work include anything, other
-than the work as a whole, that (a) is included in the normal form of
-packaging a Major Component, but which is not part of that Major
-Component, and (b) serves only to enable use of the work with that
-Major Component, or to implement a Standard Interface for which an
-implementation is available to the public in source code form.  A
-"Major Component", in this context, means a major essential component
-(kernel, window system, and so on) of the specific operating system
-(if any) on which the executable work runs, or a compiler used to
-produce the work, or an object code interpreter used to run it.
-
-  The "Corresponding Source" for a work in object code form means all
-the source code needed to generate, install, and (for an executable
-work) run the object code and to modify the work, including scripts to
-control those activities.  However, it does not include the work's
-System Libraries, or general-purpose tools or generally available free
-programs which are used unmodified in performing those activities but
-which are not part of the work.  For example, Corresponding Source
-includes interface definition files associated with source files for
-the work, and the source code for shared libraries and dynamically
-linked subprograms that the work is specifically designed to require,
-such as by intimate data communication or control flow between those
-subprograms and other parts of the work.
-
-  The Corresponding Source need not include anything that users
-can regenerate automatically from other parts of the Corresponding
-Source.
-
-  The Corresponding Source for a work in source code form is that
-same work.
-
-  2. Basic Permissions.
-
-  All rights granted under this License are granted for the term of
-copyright on the Program, and are irrevocable provided the stated
-conditions are met.  This License explicitly affirms your unlimited
-permission to run the unmodified Program.  The output from running a
-covered work is covered by this License only if the output, given its
-content, constitutes a covered work.  This License acknowledges your
-rights of fair use or other equivalent, as provided by copyright law.
-
-  You may make, run and propagate covered works that you do not
-convey, without conditions so long as your license otherwise remains
-in force.  You may convey covered works to others for the sole purpose
-of having them make modifications exclusively for you, or provide you
-with facilities for running those works, provided that you comply with
-the terms of this License in conveying all material for which you do
-not control copyright.  Those thus making or running the covered works
-for you must do so exclusively on your behalf, under your direction
-and control, on terms that prohibit them from making any copies of
-your copyrighted material outside their relationship with you.
-
-  Conveying under any other circumstances is permitted solely under
-the conditions stated below.  Sublicensing is not allowed; section 10
-makes it unnecessary.
-
-  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
-
-  No covered work shall be deemed part of an effective technological
-measure under any applicable law fulfilling obligations under article
-11 of the WIPO copyright treaty adopted on 20 December 1996, or
-similar laws prohibiting or restricting circumvention of such
-measures.
-
-  When you convey a covered work, you waive any legal power to forbid
-circumvention of technological measures to the extent such circumvention
-is effected by exercising rights under this License with respect to
-the covered work, and you disclaim any intention to limit operation or
-modification of the work as a means of enforcing, against the work's
-users, your or third parties' legal rights to forbid circumvention of
-technological measures.
-
-  4. Conveying Verbatim Copies.
-
-  You may convey verbatim copies of the Program's source code as you
-receive it, in any medium, provided that you conspicuously and
-appropriately publish on each copy an appropriate copyright notice;
-keep intact all notices stating that this License and any
-non-permissive terms added in accord with section 7 apply to the code;
-keep intact all notices of the absence of any warranty; and give all
-recipients a copy of this License along with the Program.
-
-  You may charge any price or no price for each copy that you convey,
-and you may offer support or warranty protection for a fee.
-
-  5. Conveying Modified Source Versions.
-
-  You may convey a work based on the Program, or the modifications to
-produce it from the Program, in the form of source code under the
-terms of section 4, provided that you also meet all of these conditions:
-
-    a) The work must carry prominent notices stating that you modified
-    it, and giving a relevant date.
-
-    b) The work must carry prominent notices stating that it is
-    released under this License and any conditions added under section
-    7.  This requirement modifies the requirement in section 4 to
-    "keep intact all notices".
-
-    c) You must license the entire work, as a whole, under this
-    License to anyone who comes into possession of a copy.  This
-    License will therefore apply, along with any applicable section 7
-    additional terms, to the whole of the work, and all its parts,
-    regardless of how they are packaged.  This License gives no
-    permission to license the work in any other way, but it does not
-    invalidate such permission if you have separately received it.
-
-    d) If the work has interactive user interfaces, each must display
-    Appropriate Legal Notices; however, if the Program has interactive
-    interfaces that do not display Appropriate Legal Notices, your
-    work need not make them do so.
-
-  A compilation of a covered work with other separate and independent
-works, which are not by their nature extensions of the covered work,
-and which are not combined with it such as to form a larger program,
-in or on a volume of a storage or distribution medium, is called an
-"aggregate" if the compilation and its resulting copyright are not
-used to limit the access or legal rights of the compilation's users
-beyond what the individual works permit.  Inclusion of a covered work
-in an aggregate does not cause this License to apply to the other
-parts of the aggregate.
-
-  6. Conveying Non-Source Forms.
-
-  You may convey a covered work in object code form under the terms
-of sections 4 and 5, provided that you also convey the
-machine-readable Corresponding Source under the terms of this License,
-in one of these ways:
-
-    a) Convey the object code in, or embodied in, a physical product
-    (including a physical distribution medium), accompanied by the
-    Corresponding Source fixed on a durable physical medium
-    customarily used for software interchange.
-
-    b) Convey the object code in, or embodied in, a physical product
-    (including a physical distribution medium), accompanied by a
-    written offer, valid for at least three years and valid for as
-    long as you offer spare parts or customer support for that product
-    model, to give anyone who possesses the object code either (1) a
-    copy of the Corresponding Source for all the software in the
-    product that is covered by this License, on a durable physical
-    medium customarily used for software interchange, for a price no
-    more than your reasonable cost of physically performing this
-    conveying of source, or (2) access to copy the
-    Corresponding Source from a network server at no charge.
-
-    c) Convey individual copies of the object code with a copy of the
-    written offer to provide the Corresponding Source.  This
-    alternative is allowed only occasionally and noncommercially, and
-    only if you received the object code with such an offer, in accord
-    with subsection 6b.
-
-    d) Convey the object code by offering access from a designated
-    place (gratis or for a charge), and offer equivalent access to the
-    Corresponding Source in the same way through the same place at no
-    further charge.  You need not require recipients to copy the
-    Corresponding Source along with the object code.  If the place to
-    copy the object code is a network server, the Corresponding Source
-    may be on a different server (operated by you or a third party)
-    that supports equivalent copying facilities, provided you maintain
-    clear directions next to the object code saying where to find the
-    Corresponding Source.  Regardless of what server hosts the
-    Corresponding Source, you remain obligated to ensure that it is
-    available for as long as needed to satisfy these requirements.
-
-    e) Convey the object code using peer-to-peer transmission, provided
-    you inform other peers where the object code and Corresponding
-    Source of the work are being offered to the general public at no
-    charge under subsection 6d.
-
-  A separable portion of the object code, whose source code is excluded
-from the Corresponding Source as a System Library, need not be
-included in conveying the object code work.
-
-  A "User Product" is either (1) a "consumer product", which means any
-tangible personal property which is normally used for personal, family,
-or household purposes, or (2) anything designed or sold for incorporation
-into a dwelling.  In determining whether a product is a consumer product,
-doubtful cases shall be resolved in favor of coverage.  For a particular
-product received by a particular user, "normally used" refers to a
-typical or common use of that class of product, regardless of the status
-of the particular user or of the way in which the particular user
-actually uses, or expects or is expected to use, the product.  A product
-is a consumer product regardless of whether the product has substantial
-commercial, industrial or non-consumer uses, unless such uses represent
-the only significant mode of use of the product.
-
-  "Installation Information" for a User Product means any methods,
-procedures, authorization keys, or other information required to install
-and execute modified versions of a covered work in that User Product from
-a modified version of its Corresponding Source.  The information must
-suffice to ensure that the continued functioning of the modified object
-code is in no case prevented or interfered with solely because
-modification has been made.
-
-  If you convey an object code work under this section in, or with, or
-specifically for use in, a User Product, and the conveying occurs as
-part of a transaction in which the right of possession and use of the
-User Product is transferred to the recipient in perpetuity or for a
-fixed term (regardless of how the transaction is characterized), the
-Corresponding Source conveyed under this section must be accompanied
-by the Installation Information.  But this requirement does not apply
-if neither you nor any third party retains the ability to install
-modified object code on the User Product (for example, the work has
-been installed in ROM).
-
-  The requirement to provide Installation Information does not include a
-requirement to continue to provide support service, warranty, or updates
-for a work that has been modified or installed by the recipient, or for
-the User Product in which it has been modified or installed.  Access to a
-network may be denied when the modification itself materially and
-adversely affects the operation of the network or violates the rules and
-protocols for communication across the network.
-
-  Corresponding Source conveyed, and Installation Information provided,
-in accord with this section must be in a format that is publicly
-documented (and with an implementation available to the public in
-source code form), and must require no special password or key for
-unpacking, reading or copying.
-
-  7. Additional Terms.
-
-  "Additional permissions" are terms that supplement the terms of this
-License by making exceptions from one or more of its conditions.
-Additional permissions that are applicable to the entire Program shall
-be treated as though they were included in this License, to the extent
-that they are valid under applicable law.  If additional permissions
-apply only to part of the Program, that part may be used separately
-under those permissions, but the entire Program remains governed by
-this License without regard to the additional permissions.
-
-  When you convey a copy of a covered work, you may at your option
-remove any additional permissions from that copy, or from any part of
-it.  (Additional permissions may be written to require their own
-removal in certain cases when you modify the work.)  You may place
-additional permissions on material, added by you to a covered work,
-for which you have or can give appropriate copyright permission.
-
-  Notwithstanding any other provision of this License, for material you
-add to a covered work, you may (if authorized by the copyright holders of
-that material) supplement the terms of this License with terms:
-
-    a) Disclaiming warranty or limiting liability differently from the
-    terms of sections 15 and 16 of this License; or
-
-    b) Requiring preservation of specified reasonable legal notices or
-    author attributions in that material or in the Appropriate Legal
-    Notices displayed by works containing it; or
-
-    c) Prohibiting misrepresentation of the origin of that material, or
-    requiring that modified versions of such material be marked in
-    reasonable ways as different from the original version; or
-
-    d) Limiting the use for publicity purposes of names of licensors or
-    authors of the material; or
-
-    e) Declining to grant rights under trademark law for use of some
-    trade names, trademarks, or service marks; or
-
-    f) Requiring indemnification of licensors and authors of that
-    material by anyone who conveys the material (or modified versions of
-    it) with contractual assumptions of liability to the recipient, for
-    any liability that these contractual assumptions directly impose on
-    those licensors and authors.
-
-  All other non-permissive additional terms are considered "further
-restrictions" within the meaning of section 10.  If the Program as you
-received it, or any part of it, contains a notice stating that it is
-governed by this License along with a term that is a further
-restriction, you may remove that term.  If a license document contains
-a further restriction but permits relicensing or conveying under this
-License, you may add to a covered work material governed by the terms
-of that license document, provided that the further restriction does
-not survive such relicensing or conveying.
-
-  If you add terms to a covered work in accord with this section, you
-must place, in the relevant source files, a statement of the
-additional terms that apply to those files, or a notice indicating
-where to find the applicable terms.
-
-  Additional terms, permissive or non-permissive, may be stated in the
-form of a separately written license, or stated as exceptions;
-the above requirements apply either way.
-
-  8. Termination.
-
-  You may not propagate or modify a covered work except as expressly
-provided under this License.  Any attempt otherwise to propagate or
-modify it is void, and will automatically terminate your rights under
-this License (including any patent licenses granted under the third
-paragraph of section 11).
-
-  However, if you cease all violation of this License, then your
-license from a particular copyright holder is reinstated (a)
-provisionally, unless and until the copyright holder explicitly and
-finally terminates your license, and (b) permanently, if the copyright
-holder fails to notify you of the violation by some reasonable means
-prior to 60 days after the cessation.
-
-  Moreover, your license from a particular copyright holder is
-reinstated permanently if the copyright holder notifies you of the
-violation by some reasonable means, this is the first time you have
-received notice of violation of this License (for any work) from that
-copyright holder, and you cure the violation prior to 30 days after
-your receipt of the notice.
-
-  Termination of your rights under this section does not terminate the
-licenses of parties who have received copies or rights from you under
-this License.  If your rights have been terminated and not permanently
-reinstated, you do not qualify to receive new licenses for the same
-material under section 10.
-
-  9. Acceptance Not Required for Having Copies.
-
-  You are not required to accept this License in order to receive or
-run a copy of the Program.  Ancillary propagation of a covered work
-occurring solely as a consequence of using peer-to-peer transmission
-to receive a copy likewise does not require acceptance.  However,
-nothing other than this License grants you permission to propagate or
-modify any covered work.  These actions infringe copyright if you do
-not accept this License.  Therefore, by modifying or propagating a
-covered work, you indicate your acceptance of this License to do so.
-
-  10. Automatic Licensing of Downstream Recipients.
-
-  Each time you convey a covered work, the recipient automatically
-receives a license from the original licensors, to run, modify and
-propagate that work, subject to this License.  You are not responsible
-for enforcing compliance by third parties with this License.
-
-  An "entity transaction" is a transaction transferring control of an
-organization, or substantially all assets of one, or subdividing an
-organization, or merging organizations.  If propagation of a covered
-work results from an entity transaction, each party to that
-transaction who receives a copy of the work also receives whatever
-licenses to the work the party's predecessor in interest had or could
-give under the previous paragraph, plus a right to possession of the
-Corresponding Source of the work from the predecessor in interest, if
-the predecessor has it or can get it with reasonable efforts.
-
-  You may not impose any further restrictions on the exercise of the
-rights granted or affirmed under this License.  For example, you may
-not impose a license fee, royalty, or other charge for exercise of
-rights granted under this License, and you may not initiate litigation
-(including a cross-claim or counterclaim in a lawsuit) alleging that
-any patent claim is infringed by making, using, selling, offering for
-sale, or importing the Program or any portion of it.
-
-  11. Patents.
-
-  A "contributor" is a copyright holder who authorizes use under this
-License of the Program or a work on which the Program is based.  The
-work thus licensed is called the contributor's "contributor version".
-
-  A contributor's "essential patent claims" are all patent claims
-owned or controlled by the contributor, whether already acquired or
-hereafter acquired, that would be infringed by some manner, permitted
-by this License, of making, using, or selling its contributor version,
-but do not include claims that would be infringed only as a
-consequence of further modification of the contributor version.  For
-purposes of this definition, "control" includes the right to grant
-patent sublicenses in a manner consistent with the requirements of
-this License.
-
-  Each contributor grants you a non-exclusive, worldwide, royalty-free
-patent license under the contributor's essential patent claims, to
-make, use, sell, offer for sale, import and otherwise run, modify and
-propagate the contents of its contributor version.
-
-  In the following three paragraphs, a "patent license" is any express
-agreement or commitment, however denominated, not to enforce a patent
-(such as an express permission to practice a patent or covenant not to
-sue for patent infringement).  To "grant" such a patent license to a
-party means to make such an agreement or commitment not to enforce a
-patent against the party.
-
-  If you convey a covered work, knowingly relying on a patent license,
-and the Corresponding Source of the work is not available for anyone
-to copy, free of charge and under the terms of this License, through a
-publicly available network server or other readily accessible means,
-then you must either (1) cause the Corresponding Source to be so
-available, or (2) arrange to deprive yourself of the benefit of the
-patent license for this particular work, or (3) arrange, in a manner
-consistent with the requirements of this License, to extend the patent
-license to downstream recipients.  "Knowingly relying" means you have
-actual knowledge that, but for the patent license, your conveying the
-covered work in a country, or your recipient's use of the covered work
-in a country, would infringe one or more identifiable patents in that
-country that you have reason to believe are valid.
-
-  If, pursuant to or in connection with a single transaction or
-arrangement, you convey, or propagate by procuring conveyance of, a
-covered work, and grant a patent license to some of the parties
-receiving the covered work authorizing them to use, propagate, modify
-or convey a specific copy of the covered work, then the patent license
-you grant is automatically extended to all recipients of the covered
-work and works based on it.
-
-  A patent license is "discriminatory" if it does not include within
-the scope of its coverage, prohibits the exercise of, or is
-conditioned on the non-exercise of one or more of the rights that are
-specifically granted under this License.  You may not convey a covered
-work if you are a party to an arrangement with a third party that is
-in the business of distributing software, under which you make payment
-to the third party based on the extent of your activity of conveying
-the work, and under which the third party grants, to any of the
-parties who would receive the covered work from you, a discriminatory
-patent license (a) in connection with copies of the covered work
-conveyed by you (or copies made from those copies), or (b) primarily
-for and in connection with specific products or compilations that
-contain the covered work, unless you entered into that arrangement,
-or that patent license was granted, prior to 28 March 2007.
-
-  Nothing in this License shall be construed as excluding or limiting
-any implied license or other defenses to infringement that may
-otherwise be available to you under applicable patent law.
-
-  12. No Surrender of Others' Freedom.
-
-  If conditions are imposed on you (whether by court order, agreement or
-otherwise) that contradict the conditions of this License, they do not
-excuse you from the conditions of this License.  If you cannot convey a
-covered work so as to satisfy simultaneously your obligations under this
-License and any other pertinent obligations, then as a consequence you may
-not convey it at all.  For example, if you agree to terms that obligate you
-to collect a royalty for further conveying from those to whom you convey
-the Program, the only way you could satisfy both those terms and this
-License would be to refrain entirely from conveying the Program.
-
-  13. Use with the GNU Affero General Public License.
-
-  Notwithstanding any other provision of this License, you have
-permission to link or combine any covered work with a work licensed
-under version 3 of the GNU Affero General Public License into a single
-combined work, and to convey the resulting work.  The terms of this
-License will continue to apply to the part which is the covered work,
-but the special requirements of the GNU Affero General Public License,
-section 13, concerning interaction through a network will apply to the
-combination as such.
-
-  14. Revised Versions of this License.
-
-  The Free Software Foundation may publish revised and/or new versions of
-the GNU General Public License from time to time.  Such new versions will
-be similar in spirit to the present version, but may differ in detail to
-address new problems or concerns.
-
-  Each version is given a distinguishing version number.  If the
-Program specifies that a certain numbered version of the GNU General
-Public License "or any later version" applies to it, you have the
-option of following the terms and conditions either of that numbered
-version or of any later version published by the Free Software
-Foundation.  If the Program does not specify a version number of the
-GNU General Public License, you may choose any version ever published
-by the Free Software Foundation.
-
-  If the Program specifies that a proxy can decide which future
-versions of the GNU General Public License can be used, that proxy's
-public statement of acceptance of a version permanently authorizes you
-to choose that version for the Program.
-
-  Later license versions may give you additional or different
-permissions.  However, no additional obligations are imposed on any
-author or copyright holder as a result of your choosing to follow a
-later version.
-
-  15. Disclaimer of Warranty.
-
-  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
-APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
-HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
-OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
-THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
-PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
-IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
-ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
-
-  16. Limitation of Liability.
-
-  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
-WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
-THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
-GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
-USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
-DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
-PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
-EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
-SUCH DAMAGES.
-
-  17. Interpretation of Sections 15 and 16.
-
-  If the disclaimer of warranty and limitation of liability provided
-above cannot be given local legal effect according to their terms,
-reviewing courts shall apply local law that most closely approximates
-an absolute waiver of all civil liability in connection with the
-Program, unless a warranty or assumption of liability accompanies a
-copy of the Program in return for a fee.
-
-                     END OF TERMS AND CONDITIONS
-
-            How to Apply These Terms to Your New Programs
-
-  If you develop a new program, and you want it to be of the greatest
-possible use to the public, the best way to achieve this is to make it
-free software which everyone can redistribute and change under these terms.
-
-  To do so, attach the following notices to the program.  It is safest
-to attach them to the start of each source file to most effectively
-state the exclusion of warranty; and each file should have at least
-the "copyright" line and a pointer to where the full notice is found.
-
-    <one line to give the program's name and a brief idea of what it does.>
-    Copyright (C) <year>  <name of author>
-
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
-
-    You should have received a copy of the GNU General Public License
-    along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-Also add information on how to contact you by electronic and paper mail.
-
-  If the program does terminal interaction, make it output a short
-notice like this when it starts in an interactive mode:
-
-    <program>  Copyright (C) <year>  <name of author>
-    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
-    This is free software, and you are welcome to redistribute it
-    under certain conditions; type `show c' for details.
-
-The hypothetical commands `show w' and `show c' should show the appropriate
-parts of the General Public License.  Of course, your program's commands
-might be different; for a GUI interface, you would use an "about box".
-
-  You should also get your employer (if you work as a programmer) or school,
-if any, to sign a "copyright disclaimer" for the program, if necessary.
-For more information on this, and how to apply and follow the GNU GPL, see
-<https://www.gnu.org/licenses/>.
-
-  The GNU General Public License does not permit incorporating your program
-into proprietary programs.  If your program is a subroutine library, you
-may consider it more useful to permit linking proprietary applications with
-the library.  If this is what you want to do, use the GNU Lesser General
-Public License instead of this License.  But first, please read
-<https://www.gnu.org/licenses/why-not-lgpl.html>.

android/app/build.gradle

@@ -79,7 +79,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
-        versionName "1.0"
+        versionName "0.0.4"
     }
     signingConfigs {
         debug {

android/app/src/main/AndroidManifest.xml

@@ -7,7 +7,7 @@
       android:label="@string/app_name"
       android:icon="@mipmap/ic_launcher"
       android:roundIcon="@mipmap/ic_launcher_round"
-      android:allowBackup="false"
+      android:allowBackup="true"
       android:theme="@style/AppTheme">
       <activity
         android:name=".MainActivity"
@@ -20,6 +20,54 @@
             <action android:name="android.intent.action.MAIN" />
             <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
+        <intent-filter>
+          <action android:name="android.intent.action.SEND" />
+          <category android:name="android.intent.category.DEFAULT" />
+          <data android:mimeType="image/bmp" />
+          <data android:mimeType="image/jpeg" />
+          <data android:mimeType="image/png" />
+          <data android:mimeType="image/webp" />
+          <data android:mimeType="image/gif" />
+          <data android:mimeType="video/av01" />
+          <data android:mimeType="video/3gpp" />
+          <data android:mimeType="video/avc" />
+          <data android:mimeType="video/hevc" />
+          <data android:mimeType="video/x-matroska" />
+          <data android:mimeType="video/mp2t" />
+          <data android:mimeType="video/mp4" />
+          <data android:mimeType="video/mp42" />
+          <data android:mimeType="video/mp43" />
+          <data android:mimeType="video/mp4v-es" />
+          <data android:mimeType="video/mpeg" />
+          <data android:mimeType="video/mpeg2" />
+          <data android:mimeType="video/x-vnd.on2.vp8" />
+          <data android:mimeType="video/x-vnd.on2.vp9" />
+          <data android:mimeType="video/webm" />
+        </intent-filter>
+        <intent-filter>
+          <action android:name="android.intent.action.SEND_MULTIPLE" />
+          <category android:name="android.intent.category.DEFAULT" />
+          <data android:mimeType="image/bmp" />
+          <data android:mimeType="image/jpeg" />
+          <data android:mimeType="image/png" />
+          <data android:mimeType="image/webp" />
+          <data android:mimeType="image/gif" />
+          <data android:mimeType="video/av01" />
+          <data android:mimeType="video/3gpp" />
+          <data android:mimeType="video/avc" />
+          <data android:mimeType="video/hevc" />
+          <data android:mimeType="video/x-matroska" />
+          <data android:mimeType="video/mp2t" />
+          <data android:mimeType="video/mp4" />
+          <data android:mimeType="video/mp42" />
+          <data android:mimeType="video/mp43" />
+          <data android:mimeType="video/mp4v-es" />
+          <data android:mimeType="video/mpeg" />
+          <data android:mimeType="video/mpeg2" />
+          <data android:mimeType="video/x-vnd.on2.vp8" />
+          <data android:mimeType="video/x-vnd.on2.vp9" />
+          <data android:mimeType="video/webm" />
+        </intent-filter>
       </activity>
     </application>
 </manifest>

package-lock.json

@@ -1,23 +1,24 @@
 {
   "name": "@karaolidis/terminally-online",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@karaolidis/terminally-online",
-      "version": "0.0.1",
+      "version": "0.0.4",
       "hasInstallScript": true,
       "dependencies": {
         "@bankify/redux-persist-realm": "^0.1.3",
-        "@likashefqet/react-native-image-zoom": "^1.3.0",
         "@react-native-clipboard/clipboard": "^1.11.2",
+        "@react-native-community/hooks": "^3.0.0",
         "@react-navigation/bottom-tabs": "^6.5.8",
         "@react-navigation/native": "^6.1.7",
         "@react-navigation/native-stack": "^6.9.13",
         "@realm/react": "^0.5.1",
         "@reduxjs/toolkit": "^1.9.5",
         "@shopify/flash-list": "^1.4.3",
+        "magic-bytes.js": "^1.0.15",
         "react": "18.2.0",
         "react-native": "0.72.2",
         "react-native-document-picker": "^9.0.1",
@@ -31,6 +32,7 @@
         "react-native-scoped-storage": "^1.9.3",
         "react-native-screens": "^3.22.1",
         "react-native-share": "^9.2.3",
+        "react-native-share-menu": "^6.0.0",
         "react-native-vector-icons": "^9.2.0",
         "react-native-video": "^6.0.0-alpha.6",
         "react-redux": "^8.1.1",
@@ -48,6 +50,7 @@
         "@types/jest": "^29.5.2",
         "@types/metro-config": "^0.76.3",
         "@types/react": "^18.2.14",
+        "@types/react-native-share-menu": "^5.0.2",
         "@types/react-native-vector-icons": "^6.4.13",
         "@types/react-native-video": "^5.0.15",
         "@types/react-test-renderer": "^18.0.0",
@@ -2988,17 +2991,6 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
     },
-    "node_modules/@likashefqet/react-native-image-zoom": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@likashefqet/react-native-image-zoom/-/react-native-image-zoom-1.3.0.tgz",
-      "integrity": "sha512-PLRd1hNMHe9LUn8b4rmLt86282geuaqP4Qd2rFWIloxMS2ePNTIaNlEUu3T3LaO8Pg9vhVV97TxfFeU8F+tcYQ==",
-      "peerDependencies": {
-        "react": ">=16.x.x",
-        "react-native": ">=0.62.x",
-        "react-native-gesture-handler": ">=2.x.x",
-        "react-native-reanimated": ">=2.x.x"
-      }
-    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -4112,6 +4104,15 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/@react-native-community/hooks": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/hooks/-/hooks-3.0.0.tgz",
+      "integrity": "sha512-g2OyxXHfwIytXUJitBR6Z/ISoOfp0WKx5FOv+NqJ/CrWjRDcTw6zXE5I1C9axfuh30kJqzWchVfCDrkzZYTxqg==",
+      "peerDependencies": {
+        "react": ">=17.0.2",
+        "react-native": ">=0.65"
+      }
+    },
     "node_modules/@react-native/assets-registry": {
       "version": "0.72.0",
       "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.72.0.tgz",
@@ -4605,6 +4606,12 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-native-share-menu": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@types/react-native-share-menu/-/react-native-share-menu-5.0.2.tgz",
+      "integrity": "sha512-Qa9DGfL6Bvng2DXgCK0fFzdi9SJMGfs06MLSkCfSXBCGKlFLzSHCsXztvXlCCChn3dQArFHyz/uRUN3Sbt6LtQ==",
+      "dev": true
+    },
     "node_modules/@types/react-native-vector-icons": {
       "version": "6.4.13",
       "resolved": "https://registry.npmjs.org/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.13.tgz",
@@ -5611,6 +5618,29 @@
         "readable-stream": "^3.4.0"
       }
     },
+    "node_modules/bl/node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -5681,7 +5711,7 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/buffer": {
+    "node_modules/bson/node_modules/buffer": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
       "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
@@ -11089,6 +11119,11 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/magic-bytes.js": {
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/magic-bytes.js/-/magic-bytes.js-1.0.15.tgz",
+      "integrity": "sha512-bpRmwbRHqongRhA+mXzbLWjVy7ylqmfMBYaQkSs6pac0z6hBTvsgrH0r4FBYd/UYVJBmS6Rp/O+oCCQVLzKV1g=="
+    },
     "node_modules/magic-string": {
       "version": "0.30.1",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.1.tgz",
@@ -13532,6 +13567,11 @@
       "resolved": "https://registry.npmjs.org/react-native-share/-/react-native-share-9.2.3.tgz",
       "integrity": "sha512-y6ju4HS6ydJoPVoacZ/Hp3i47AfI9W4e76Jv00r01dVbr6SCCcuqk37kIbn+kYivdTxOW77UGEbhtBHHtXnhzg=="
     },
+    "node_modules/react-native-share-menu": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/react-native-share-menu/-/react-native-share-menu-6.0.0.tgz",
+      "integrity": "sha512-KdmRnqjI/B2MigSxGmhbYJ3WMJxKXj+0c47ANcVZ/PTzc2vtz6d1r4KQJgkBImXgNC+vowpuD2UGdPllxadr2A=="
+    },
     "node_modules/react-native-vector-icons": {
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-9.2.0.tgz",
@@ -17917,12 +17957,6 @@
         }
       }
     },
-    "@likashefqet/react-native-image-zoom": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@likashefqet/react-native-image-zoom/-/react-native-image-zoom-1.3.0.tgz",
-      "integrity": "sha512-PLRd1hNMHe9LUn8b4rmLt86282geuaqP4Qd2rFWIloxMS2ePNTIaNlEUu3T3LaO8Pg9vhVV97TxfFeU8F+tcYQ==",
-      "requires": {}
-    },
     "@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -18759,6 +18793,12 @@
         "joi": "^17.2.1"
       }
     },
+    "@react-native-community/hooks": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/hooks/-/hooks-3.0.0.tgz",
+      "integrity": "sha512-g2OyxXHfwIytXUJitBR6Z/ISoOfp0WKx5FOv+NqJ/CrWjRDcTw6zXE5I1C9axfuh30kJqzWchVfCDrkzZYTxqg==",
+      "requires": {}
+    },
     "@react-native/assets-registry": {
       "version": "0.72.0",
       "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.72.0.tgz",
@@ -19181,6 +19221,12 @@
         "@types/react": "*"
       }
     },
+    "@types/react-native-share-menu": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@types/react-native-share-menu/-/react-native-share-menu-5.0.2.tgz",
+      "integrity": "sha512-Qa9DGfL6Bvng2DXgCK0fFzdi9SJMGfs06MLSkCfSXBCGKlFLzSHCsXztvXlCCChn3dQArFHyz/uRUN3Sbt6LtQ==",
+      "dev": true
+    },
     "@types/react-native-vector-icons": {
       "version": "6.4.13",
       "resolved": "https://registry.npmjs.org/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.13.tgz",
@@ -19930,6 +19976,17 @@
         "buffer": "^5.5.0",
         "inherits": "^2.0.4",
         "readable-stream": "^3.4.0"
+      },
+      "dependencies": {
+        "buffer": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+          "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+          "requires": {
+            "base64-js": "^1.3.1",
+            "ieee754": "^1.1.13"
+          }
+        }
       }
     },
     "brace-expansion": {
@@ -19974,15 +20031,17 @@
       "integrity": "sha512-Uu4OCZa0jouQJCKOk1EmmyqtdWAP5HVLru4lQxTwzJzxT+sJ13lVpEZU/MATDxtHiekWMAL84oQY3Xn1LpJVSg==",
       "requires": {
         "buffer": "^5.6.0"
-      }
+      },
-    },
+      "dependencies": {
-    "buffer": {
+        "buffer": {
-      "version": "5.7.1",
+          "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+          "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
-      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+          "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
-      "requires": {
+          "requires": {
-        "base64-js": "^1.3.1",
+            "base64-js": "^1.3.1",
-        "ieee754": "^1.1.13"
+            "ieee754": "^1.1.13"
+          }
+        }
       }
     },
     "buffer-from": {
@@ -23962,6 +24021,11 @@
         "yallist": "^3.0.2"
       }
     },
+    "magic-bytes.js": {
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/magic-bytes.js/-/magic-bytes.js-1.0.15.tgz",
+      "integrity": "sha512-bpRmwbRHqongRhA+mXzbLWjVy7ylqmfMBYaQkSs6pac0z6hBTvsgrH0r4FBYd/UYVJBmS6Rp/O+oCCQVLzKV1g=="
+    },
     "magic-string": {
       "version": "0.30.1",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.1.tgz",
@@ -25888,6 +25952,11 @@
       "resolved": "https://registry.npmjs.org/react-native-share/-/react-native-share-9.2.3.tgz",
       "integrity": "sha512-y6ju4HS6ydJoPVoacZ/Hp3i47AfI9W4e76Jv00r01dVbr6SCCcuqk37kIbn+kYivdTxOW77UGEbhtBHHtXnhzg=="
     },
+    "react-native-share-menu": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/react-native-share-menu/-/react-native-share-menu-6.0.0.tgz",
+      "integrity": "sha512-KdmRnqjI/B2MigSxGmhbYJ3WMJxKXj+0c47ANcVZ/PTzc2vtz6d1r4KQJgkBImXgNC+vowpuD2UGdPllxadr2A=="
+    },
     "react-native-vector-icons": {
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-9.2.0.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@karaolidis/terminally-online",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "private": true,
   "scripts": {
     "postinstall": "patch-package",
@@ -15,14 +15,15 @@
   },
   "dependencies": {
     "@bankify/redux-persist-realm": "^0.1.3",
-    "@likashefqet/react-native-image-zoom": "^1.3.0",
     "@react-native-clipboard/clipboard": "^1.11.2",
+    "@react-native-community/hooks": "^3.0.0",
     "@react-navigation/bottom-tabs": "^6.5.8",
     "@react-navigation/native": "^6.1.7",
     "@react-navigation/native-stack": "^6.9.13",
     "@realm/react": "^0.5.1",
     "@reduxjs/toolkit": "^1.9.5",
     "@shopify/flash-list": "^1.4.3",
+    "magic-bytes.js": "^1.0.15",
     "react": "18.2.0",
     "react-native": "0.72.2",
     "react-native-document-picker": "^9.0.1",
@@ -36,6 +37,7 @@
     "react-native-scoped-storage": "^1.9.3",
     "react-native-screens": "^3.22.1",
     "react-native-share": "^9.2.3",
+    "react-native-share-menu": "^6.0.0",
     "react-native-vector-icons": "^9.2.0",
     "react-native-video": "^6.0.0-alpha.6",
     "react-redux": "^8.1.1",
@@ -53,6 +55,7 @@
     "@types/jest": "^29.5.2",
     "@types/metro-config": "^0.76.3",
     "@types/react": "^18.2.14",
+    "@types/react-native-share-menu": "^5.0.2",
     "@types/react-native-vector-icons": "^6.4.13",
     "@types/react-native-video": "^5.0.15",
     "@types/react-test-renderer": "^18.0.0",

patches/@react-native-clipboard+clipboard+1.11.2.patch

@@ -1,11 +1,134 @@
 diff --git a/node_modules/@react-native-clipboard/clipboard/android/src/main/java/com/reactnativecommunity/clipboard/ClipboardModule.java b/node_modules/@react-native-clipboard/clipboard/android/src/main/java/com/reactnativecommunity/clipboard/ClipboardModule.java
-index 048ebe5..8afa5b2 100644
+index 048ebe5..01fa3ad 100644
 --- a/node_modules/@react-native-clipboard/clipboard/android/src/main/java/com/reactnativecommunity/clipboard/ClipboardModule.java
 +++ b/node_modules/@react-native-clipboard/clipboard/android/src/main/java/com/reactnativecommunity/clipboard/ClipboardModule.java
-@@ -156,6 +156,17 @@ public class ClipboardModule extends ReactContextBaseJavaModule {
+@@ -24,6 +24,7 @@ import com.facebook.react.bridge.ReactApplicationContext;
+ import com.facebook.react.bridge.ReactContextBaseJavaModule;
+ import com.facebook.react.bridge.ReactMethod;
+ import com.facebook.react.bridge.Promise;
++import com.facebook.react.bridge.WritableNativeMap;
+ import com.facebook.react.module.annotations.ReactModule;
+ import com.facebook.react.modules.core.DeviceEventManagerModule;
+
+@@ -70,9 +71,9 @@ public class ClipboardModule extends ReactContextBaseJavaModule {
+       ClipData clipData = clipboard.getPrimaryClip();
+       if (clipData != null && clipData.getItemCount() >= 1) {
+         ClipData.Item firstItem = clipboard.getPrimaryClip().getItemAt(0);
+-        promise.resolve("" + firstItem.getText());
++        promise.resolve(firstItem.getText());
+       } else {
+-        promise.resolve("");
++        promise.resolve(null);
+       }
+     } catch (Exception e) {
+       promise.reject(e);
+@@ -95,34 +96,37 @@ public class ClipboardModule extends ReactContextBaseJavaModule {
+     try {
+       ClipboardManager clipboard = getClipboardService();
+       ClipData clipData = clipboard.getPrimaryClip();
+-      promise.resolve(clipData != null && clipData.getItemCount() >= 1);
++      if (clipData != null && clipData.getItemCount() >= 1) {
++        ClipData.Item firstItem = clipboard.getPrimaryClip().getItemAt(0);
++        promise.resolve(firstItem.getText() != null);
++      } else {
++        promise.resolve(false);
++      }
+     } catch (Exception e) {
+       promise.reject(e);
      }
    }
 
+   @ReactMethod
+-  public void getImage(Promise promise){
++  public void getImage(Promise promise) {
+     ClipboardManager clipboardManager = getClipboardService();
+-    if (!(clipboardManager.hasPrimaryClip())){
+-      promise.resolve("");
+-    }
+-    else if (clipboardManager.getPrimaryClipDescription().hasMimeType(ClipDescription.MIMETYPE_TEXT_PLAIN)){
+-      promise.resolve("");
+-    }
+-    else {
++    if (!(clipboardManager.hasPrimaryClip())) {
++      promise.resolve(null);
++    } else if (clipboardManager.getPrimaryClipDescription().hasMimeType(ClipDescription.MIMETYPE_TEXT_PLAIN)) {
++      promise.resolve(null);
++    } else {
+       ClipData clipData = clipboardManager.getPrimaryClip();
+-      if(clipData != null){
++      if (clipData != null) {
+         ClipData.Item item = clipData.getItemAt(0);
+         Uri pasteUri = item.getUri();
+-        if (pasteUri != null){
++        if (pasteUri != null) {
+           ContentResolver cr = reactContext.getContentResolver();
+           String mimeType = cr.getType(pasteUri);
+-          if (mimeType != null){
++          if (mimeType != null) {
+             try {
+               Bitmap bitmap = MediaStore.Images.Media.getBitmap(cr, pasteUri);
+               ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
+-              switch(mimeType){
++              switch (mimeType) {
+                 case MIMETYPE_JPEG:
+                 case MIMETYPE_JPG:
+                   bitmap.compress(Bitmap.CompressFormat.JPEG, 100, outputStream);
+@@ -133,7 +137,7 @@ public class ClipboardModule extends ReactContextBaseJavaModule {
+                   bitmap.compress(Bitmap.CompressFormat.PNG, 100, outputStream);
+                   break;
+                 case MIMETYPE_WEBP:
+-                  if (Build.VERSION.SDK_INT > Build.VERSION_CODES.Q){
++                  if (Build.VERSION.SDK_INT > Build.VERSION_CODES.Q) {
+                     bitmap.compress(Bitmap.CompressFormat.WEBP_LOSSLESS, 100, outputStream);
+                     break;
+                   }
+@@ -156,6 +160,77 @@ public class ClipboardModule extends ReactContextBaseJavaModule {
+     }
+   }
+
++  @ReactMethod
++  public void hasImage(Promise promise) {
++    try {
++      ClipboardManager clipboard = getClipboardService();
++      ClipData clipData = clipboard.getPrimaryClip();
++      if (clipData != null && clipData.getItemCount() >= 1) {
++        ClipData.Item firstItem = clipboard.getPrimaryClip().getItemAt(0);
++        Uri pasteUri = firstItem.getUri();
++        if (pasteUri != null) {
++          ContentResolver cr = reactContext.getContentResolver();
++          String mimeType = cr.getType(pasteUri);
++          if (mimeType != null) {
++            promise.resolve(mimeType.startsWith("image/"));
++            return;
++          }
++        }
++      }
++      promise.resolve(false);
++    } catch (Exception e) {
++      promise.reject(e);
++    }
++  }
++
++  @ReactMethod
++  public void getURI(Promise promise) {
++    try {
++      ClipboardManager clipboard = getClipboardService();
++      ClipData clipData = clipboard.getPrimaryClip();
++      if (clipData != null && clipData.getItemCount() >= 1) {
++        ClipData.Item firstItem = clipboard.getPrimaryClip().getItemAt(0);
++        Uri uri = firstItem.getUri();
++        if (uri != null) {
++          promise.resolve(uri.toString());
++        } else {
++          promise.resolve(null);
++        }
++      }
++      promise.resolve(null);
++    } catch (Exception e) {
++      promise.reject(e);
++    }
++  }
++
 +  @ReactMethod
 +  public void setURI(String uri) {
 +    try {
@@ -16,20 +139,69 @@ index 048ebe5..8afa5b2 100644
 +      e.printStackTrace();
 +    }
 +  }
++
++  @ReactMethod
++  public void hasURI(Promise promise) {
++    try {
++      ClipboardManager clipboard = getClipboardService();
++      ClipData clipData = clipboard.getPrimaryClip();
++      if (clipData != null && clipData.getItemCount() >= 1) {
++        ClipData.Item firstItem = clipboard.getPrimaryClip().getItemAt(0);
++        Uri pasteUri = firstItem.getUri();
++        promise.resolve(pasteUri != null);
++      } else {
++        promise.resolve(false);
++      }
++    } catch (Exception e) {
++      promise.reject(e);
++    }
++  }
 +
    @ReactMethod
    public void setListener() {
      try {
+@@ -164,8 +239,8 @@ public class ClipboardModule extends ReactContextBaseJavaModule {
+         @Override
+         public void onPrimaryClipChanged() {
+           reactContext
+-            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
+-            .emit(CLIPBOARD_TEXT_CHANGED, null);
++              .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
++              .emit(CLIPBOARD_TEXT_CHANGED, null);
+         }
+       };
+       clipboard.addPrimaryClipChangedListener(listener);
+@@ -176,8 +251,8 @@ public class ClipboardModule extends ReactContextBaseJavaModule {
+
+   @ReactMethod
+   public void removeListener() {
+-    if(listener != null){
+-      try{
++    if (listener != null) {
++      try {
+         ClipboardManager clipboard = getClipboardService();
+         clipboard.removePrimaryClipChangedListener(listener);
+       } catch (Exception e) {
 diff --git a/node_modules/@react-native-clipboard/clipboard/dist/Clipboard.d.ts b/node_modules/@react-native-clipboard/clipboard/dist/Clipboard.d.ts
-index a3e4abd..904a199 100644
+index a3e4abd..9fc11e6 100644
 --- a/node_modules/@react-native-clipboard/clipboard/dist/Clipboard.d.ts
 +++ b/node_modules/@react-native-clipboard/clipboard/dist/Clipboard.d.ts
-@@ -81,6 +81,17 @@ export declare const Clipboard: {
+@@ -81,6 +81,38 @@ export declare const Clipboard: {
       * @param the content to be stored in the clipboard.
       */
      setStrings(content: string[]): void;
 +    /**
 +     * (Android Only)
++     * Get content of URI type. You can use following code to get clipboard content
++     * ```javascript
++     * async _getContent() {
++     *   var content = await Clipboard.getURI();
++     * }
++     * ```
++     */
++    getURI(): Promise<string>;
++    /**
++     * (Android Only)
 +     * Set content of URI type. You can use following code to set clipboard content
 +     * ```javascript
 +     * _setContent() {
@@ -39,19 +211,90 @@ index a3e4abd..904a199 100644
 +     * @param the content to be stored in the clipboard.
 +     */
 +    setURI(content: string): void;
++    /**
++     * (Android Only)
++     * Returns whether the clipboard has a URI or is empty.
++     * This method returns a `Promise`, so you can use following code to check clipboard content
++     * ```javascript
++     * async _hasContent() {
++     *  var hasContent = await Clipboard.hasURI();
++     * }
++     * ```
++     */
++    hasURI(): Promise<boolean>;
      /**
       * Returns whether the clipboard has content or is empty.
       * This method returns a `Promise`, so you can use following code to get clipboard content
+@@ -90,7 +122,7 @@ export declare const Clipboard: {
+      * }
+      * ```
+      */
+-    hasString(): any;
++    hasString(): Promise<boolean>;
+     /**
+      * Returns whether the clipboard has an image or is empty.
+      * This method returns a `Promise`, so you can use following code to check clipboard content
+@@ -100,7 +132,7 @@ export declare const Clipboard: {
+      * }
+      * ```
+      */
+-    hasImage(): any;
++    hasImage(): Promise<boolean>;
+     /**
+      * (iOS Only)
+      * Returns whether the clipboard has a URL content. Can check
+@@ -112,7 +144,7 @@ export declare const Clipboard: {
+      * }
+      * ```
+      */
+-    hasURL(): any;
++    hasURL(): Promise<boolean>;
+     /**
+      * (iOS 14+ Only)
+      * Returns whether the clipboard has a Number(UIPasteboardDetectionPatternNumber) content. Can check
+@@ -124,7 +156,7 @@ export declare const Clipboard: {
+      * }
+      * ```
+      */
+-    hasNumber(): any;
++    hasNumber(): Promise<boolean>;
+     /**
+      * (iOS 14+ Only)
+      * Returns whether the clipboard has a WebURL(UIPasteboardDetectionPatternProbableWebURL) content. Can check
+@@ -136,7 +168,7 @@ export declare const Clipboard: {
+      * }
+      * ```
+      */
+-    hasWebURL(): any;
++    hasWebURL(): Promise<boolean>;
+     /**
+      * (iOS and Android Only)
+      * Adds a listener to get notifications when the clipboard has changed.
 diff --git a/node_modules/@react-native-clipboard/clipboard/dist/Clipboard.js b/node_modules/@react-native-clipboard/clipboard/dist/Clipboard.js
-index 67b7237..0a74329 100644
+index 67b7237..df3bff6 100644
 --- a/node_modules/@react-native-clipboard/clipboard/dist/Clipboard.js
 +++ b/node_modules/@react-native-clipboard/clipboard/dist/Clipboard.js
-@@ -123,6 +123,22 @@ exports.Clipboard = {
+@@ -123,6 +123,53 @@ exports.Clipboard = {
      setStrings: function (content) {
          NativeClipboard_1.default.setStrings(content);
      },
 +    /**
 +     * (Android Only)
++     * Get content of URI type. You can use following code to get clipboard content
++     * ```javascript
++     * async _getContent() {
++     *   var content = await Clipboard.getURI();
++     * }
++     * ```
++     */
++    getURI: function () {
++        if (react_native_1.Platform.OS !== 'android') {
++            return;
++        }
++        return NativeClipboard_1.default.getURI();
++    },
++    /**
++     * (Android Only)
 +     * Set content of URI type. You can use following code to set clipboard content
 +     * ```javascript
 +     * _setContent() {
@@ -65,6 +308,22 @@ index 67b7237..0a74329 100644
 +            return;
 +        }
 +        return NativeClipboard_1.default.setURI(content);
++    },
++    /**
++     * (Android Only)
++     * Returns whether the clipboard has a URI or is empty.
++     * This method returns a `Promise`, so you can use following code to check clipboard content
++     * ```javascript
++     * async _hasContent() {
++     *  var hasContent = await Clipboard.hasURI();
++     * }
++     * ```
++     */
++    hasURI: function () {
++        if (react_native_1.Platform.OS !== 'android') {
++            return;
++        }
++        return NativeClipboard_1.default.hasURI();
 +    },
      /**
       * Returns whether the clipboard has content or is empty.

patches/react-native-file-access+3.0.4.patch

@@ -0,0 +1,169 @@
+diff --git a/node_modules/react-native-file-access/README.md b/node_modules/react-native-file-access/README.md
+index e0540e0..9eb3295 100644
+--- a/node_modules/react-native-file-access/README.md
++++ b/node_modules/react-native-file-access/README.md
+@@ -155,6 +155,12 @@ type ManagedFetchResult = {
+ - Read the content of a file.
+   - Default encoding of returned string is utf8.
+ 
++`FileSystem.read(path: string, length?: number, position?: number): Promise<number[]>`
++
++- Read a file as a byte array.
++  - `length` - Optional number of bytes to read.
++  - `position` - Optional position to start reading from.
++
+ ```
+ FileSystem.stat(path: string): Promise<FileStat>
+ 
+diff --git a/node_modules/react-native-file-access/android/src/main/java/com/alpha0010/fs/FileAccessModule.kt b/node_modules/react-native-file-access/android/src/main/java/com/alpha0010/fs/FileAccessModule.kt
+index 248a938..cbd4fe7 100644
+--- a/node_modules/react-native-file-access/android/src/main/java/com/alpha0010/fs/FileAccessModule.kt
++++ b/node_modules/react-native-file-access/android/src/main/java/com/alpha0010/fs/FileAccessModule.kt
+@@ -13,6 +13,8 @@ import com.facebook.react.bridge.Promise
+ import com.facebook.react.bridge.ReactApplicationContext
+ import com.facebook.react.bridge.ReactMethod
+ import com.facebook.react.bridge.ReadableMap
++import com.facebook.react.bridge.WritableArray
++import com.facebook.react.bridge.WritableNativeArray
+ import kotlinx.coroutines.CoroutineScope
+ import kotlinx.coroutines.Dispatchers
+ import kotlinx.coroutines.launch
+@@ -400,6 +402,27 @@ class FileAccessModule internal constructor(context: ReactApplicationContext) :
+     }
+   }
+ 
++  @ReactMethod
++  override fun read(path: String, length: Double, position: Double, promise: Promise) {
++    ioScope.launch {
++      try {
++        val data = openForReading(path).use {
++          it.skip(position.toLong())
++          val byteArray = ByteArray(length.toInt())
++          it.read(byteArray)
++          byteArray
++        }
++        val writableArray: WritableArray = WritableNativeArray()
++        for (byte in data) {
++          writableArray.pushInt(byte.toInt() and 0xFF)
++        }
++        promise.resolve(writableArray)
++      } catch (e: Throwable) {
++        promise.reject(e)
++      }
++    }
++  }
++
+   @ReactMethod
+   override fun stat(path: String, promise: Promise) {
+     ioScope.launch {
+diff --git a/node_modules/react-native-file-access/android/src/oldarch/FileAccessSpec.kt b/node_modules/react-native-file-access/android/src/oldarch/FileAccessSpec.kt
+index 736324b..c223276 100644
+--- a/node_modules/react-native-file-access/android/src/oldarch/FileAccessSpec.kt
++++ b/node_modules/react-native-file-access/android/src/oldarch/FileAccessSpec.kt
+@@ -30,6 +30,7 @@ abstract class FileAccessSpec internal constructor(context: ReactApplicationCont
+   abstract fun mkdir(path: String, promise: Promise)
+   abstract fun mv(source: String, target: String, promise: Promise)
+   abstract fun readFile(path: String, encoding: String, promise: Promise)
++  abstract fun read(path: String, length: Double, position: Double, promise: Promise)
+   abstract fun stat(path: String, promise: Promise)
+   abstract fun statDir(path: String, promise: Promise)
+   abstract fun unlink(path: String, promise: Promise)
+diff --git a/node_modules/react-native-file-access/lib/commonjs/index.js b/node_modules/react-native-file-access/lib/commonjs/index.js
+index 88f1c2c..20eb70b 100644
+--- a/node_modules/react-native-file-access/lib/commonjs/index.js
++++ b/node_modules/react-native-file-access/lib/commonjs/index.js
+@@ -209,6 +209,12 @@ const FileSystem = {
+     let encoding = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'utf8';
+     return FileAccessNative.readFile(path, encoding);
+   },
++  /**
++   * Read the content of a file as a byte array.
++   */
++  read(path, length, position) {
++    return FileAccessNative.read(path, length, position);
++  },
+   /**
+    * Read file metadata.
+    */
+diff --git a/node_modules/react-native-file-access/lib/module/index.js b/node_modules/react-native-file-access/lib/module/index.js
+index 0581920..22c37d3 100644
+--- a/node_modules/react-native-file-access/lib/module/index.js
++++ b/node_modules/react-native-file-access/lib/module/index.js
+@@ -198,6 +198,12 @@ export const FileSystem = {
+     let encoding = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'utf8';
+     return FileAccessNative.readFile(path, encoding);
+   },
++  /**
++   * Read the content of a file as a byte array.
++   */
++  read(path, length, position) {
++    return FileAccessNative.read(path, length, position);
++  },
+   /**
+    * Read file metadata.
+    */
+diff --git a/node_modules/react-native-file-access/lib/typescript/NativeFileAccess.d.ts b/node_modules/react-native-file-access/lib/typescript/NativeFileAccess.d.ts
+index 0c58874..ed84081 100644
+--- a/node_modules/react-native-file-access/lib/typescript/NativeFileAccess.d.ts
++++ b/node_modules/react-native-file-access/lib/typescript/NativeFileAccess.d.ts
+@@ -63,6 +63,7 @@ export interface Spec extends TurboModule {
+     mkdir(path: string): Promise<string>;
+     mv(source: string, target: string): Promise<void>;
+     readFile(path: string, encoding: string): Promise<string>;
++    read(path: string, length: number, position: number): Promise<number[]>;
+     stat(path: string): Promise<FileStat>;
+     statDir(path: string): Promise<FileStat[]>;
+     unlink(path: string): Promise<void>;
+diff --git a/node_modules/react-native-file-access/lib/typescript/index.d.ts b/node_modules/react-native-file-access/lib/typescript/index.d.ts
+index 5433d53..12854ca 100644
+--- a/node_modules/react-native-file-access/lib/typescript/index.d.ts
++++ b/node_modules/react-native-file-access/lib/typescript/index.d.ts
+@@ -84,6 +84,10 @@ export declare const FileSystem: {
+      * Read the content of a file.
+      */
+     readFile(path: string, encoding?: Encoding): Promise<string>;
++    /**
++     * Read the content of a file as a byte array.
++     */
++    read(path: string, length?: number, position?: number): Promise<number[]>;
+     /**
+      * Read file metadata.
+      */
+diff --git a/node_modules/react-native-file-access/src/NativeFileAccess.ts b/node_modules/react-native-file-access/src/NativeFileAccess.ts
+index b3a7baa..affd76c 100644
+--- a/node_modules/react-native-file-access/src/NativeFileAccess.ts
++++ b/node_modules/react-native-file-access/src/NativeFileAccess.ts
+@@ -71,6 +71,7 @@ export interface Spec extends TurboModule {
+   mkdir(path: string): Promise<string>;
+   mv(source: string, target: string): Promise<void>;
+   readFile(path: string, encoding: string): Promise<string>;
++  read(path: string, length: number, position: number): Promise<number[]>;
+   stat(path: string): Promise<FileStat>;
+   statDir(path: string): Promise<FileStat[]>;
+   unlink(path: string): Promise<void>;
+diff --git a/node_modules/react-native-file-access/src/index.ts b/node_modules/react-native-file-access/src/index.ts
+index 1b38d45..5c9fd5e 100644
+--- a/node_modules/react-native-file-access/src/index.ts
++++ b/node_modules/react-native-file-access/src/index.ts
+@@ -31,7 +31,6 @@ const LINKING_ERROR =
+   '- You rebuilt the app after installing the package\n' +
+   '- You are not using Expo Go\n';
+ 
+-// @ts-expect-error
+ const isTurboModuleEnabled = global.__turboModuleProxy != null;
+ 
+ const FileAccessModule = isTurboModuleEnabled
+@@ -275,6 +274,13 @@ export const FileSystem = {
+     return FileAccessNative.readFile(path, encoding);
+   },
+ 
++  /**
++   * Read the content of a file as a byte array.
++   */
++  read(path: string, length: number = 1000, position: number = 0) {
++    return FileAccessNative.read(path, length, position);
++  },
++
+   /**
+    * Read file metadata.
+    */

patches/react-native-share-menu+6.0.0.patch

@@ -0,0 +1,38 @@
+diff --git a/node_modules/react-native-share-menu/android/build.gradle b/node_modules/react-native-share-menu/android/build.gradle
+index 9557fdb..b0503cb 100644
+--- a/node_modules/react-native-share-menu/android/build.gradle
++++ b/node_modules/react-native-share-menu/android/build.gradle
+@@ -1,12 +1,12 @@
+ apply plugin: 'com.android.library'
+ 
+ android {
+-    compileSdkVersion 29
+-    buildToolsVersion "29.0.2"
++    compileSdkVersion 33
++    buildToolsVersion "33.0.0"
+ 
+     defaultConfig {
+-        minSdkVersion 16
+-        targetSdkVersion 29
++        minSdkVersion 21
++        targetSdkVersion 33
+         versionCode 1
+         versionName "1.0"
+         ndk {
+diff --git a/node_modules/react-native-share-menu/android/src/main/java/com/meedan/ShareMenuModule.java b/node_modules/react-native-share-menu/android/src/main/java/com/meedan/ShareMenuModule.java
+index 09abd7b..af552b1 100644
+--- a/node_modules/react-native-share-menu/android/src/main/java/com/meedan/ShareMenuModule.java
++++ b/node_modules/react-native-share-menu/android/src/main/java/com/meedan/ShareMenuModule.java
+@@ -163,4 +163,12 @@ public class ShareMenuModule extends ReactContextBaseJavaModule implements Activ
+     // Update intent in case the user calls `getSharedText` again
+     currentActivity.setIntent(intent);
+   }
++
++  @ReactMethod
++  public void addListener(String eventName) {
++  }
++
++  @ReactMethod
++  public void removeListeners(Integer count) {
++  }
+ }

src/app.tsx

@@ -1,5 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { AppState, StatusBar, useColorScheme } from 'react-native';
+import {
+  AppState,
+  StatusBar,
+  useColorScheme,
+  StyleSheet,
+  UIManager,
+} from 'react-native';
 import { PaperProvider } from 'react-native-paper';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { RealmProvider } from '@realm/react';
@@ -13,8 +19,12 @@ import NavigationContainer from './navigation';
 import { store, persistor, validateSettings } from './state';
 import { LoadingView } from './components';
 import { Welcome } from './screens';
-import styles from './styles';
+
-import { DimensionsProvider } from './contexts';
+const appStyles = StyleSheet.create({
+  gestureHandler: {
+    flex: 1,
+  },
+});
 
 const App = () => {
   const [showWelcome, setShowWelcome] = useState(false);
@@ -23,6 +33,7 @@ const App = () => {
   const theme = isDarkMode ? darkTheme : lightTheme;
 
   const onBeforeLift = async () => {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
     await store.dispatch(validateSettings());
     const { settings } = store.getState();
     if (!settings.storageUri) {
@@ -43,32 +54,30 @@ const App = () => {
   }, []);
 
   return (
-    <PaperProvider theme={theme}>
+    <ReduxProvider store={store}>
-      <DimensionsProvider>
+      <RealmProvider schema={[Meme, Tag]}>
-        <ReduxProvider store={store}>
+        <PaperProvider theme={theme}>
           <PersistGate
             loading={<LoadingView />}
             persistor={persistor}
             onBeforeLift={onBeforeLift}>
-            <RealmProvider schema={[Meme, Tag]}>
+            <GestureHandlerRootView style={appStyles.gestureHandler}>
-              <GestureHandlerRootView style={styles.flex}>
+              <SafeAreaProvider>
-                <SafeAreaProvider>
+                <StatusBar
-                  <StatusBar
+                  barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-                    barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+                  backgroundColor={theme.colors.background}
-                    backgroundColor={theme.colors.background}
+                />
-                  />
+                {showWelcome ? (
-                  {showWelcome ? (
+                  <Welcome onWelcomeComplete={() => setShowWelcome(false)} />
-                    <Welcome onWelcomeComplete={() => setShowWelcome(false)} />
+                ) : (
-                  ) : (
+                  <NavigationContainer />
-                    <NavigationContainer />
+                )}
-                  )}
+              </SafeAreaProvider>
-                </SafeAreaProvider>
+            </GestureHandlerRootView>
-              </GestureHandlerRootView>
-            </RealmProvider>
           </PersistGate>
-        </ReduxProvider>
+        </PaperProvider>
-      </DimensionsProvider>
+      </RealmProvider>
-    </PaperProvider>
+    </ReduxProvider>
   );
 };
 

src/components/animatedImage.tsx

@@ -0,0 +1,56 @@
+import React, { ComponentProps, useMemo } from 'react';
+import { Image } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+
+const AnimatedImage = ({ ...props }: ComponentProps<typeof Image>) => {
+  const scale = useSharedValue(1);
+  const translateX = useSharedValue(0);
+  const translateY = useSharedValue(0);
+
+  const animatedStyles = useAnimatedStyle(() => {
+    return {
+      transform: [
+        { translateX: translateX.value },
+        { translateY: translateY.value },
+        { scale: scale.value },
+      ],
+    };
+  });
+
+  const gesture = useMemo(
+    () =>
+      Gesture.Simultaneous(
+        Gesture.Pinch()
+          .onUpdate(event => {
+            scale.value = event.scale;
+          })
+          .onFinalize(() => {
+            scale.value = withSpring(1);
+          }),
+        Gesture.Pan()
+          .minPointers(2)
+          .onUpdate(event => {
+            translateX.value = event.translationX;
+            translateY.value = event.translationY;
+          })
+          .onFinalize(() => {
+            translateX.value = withSpring(0);
+            translateY.value = withSpring(0);
+          }),
+      ),
+    [scale, translateX, translateY],
+  );
+
+  return (
+    <GestureDetector gesture={gesture}>
+      <Animated.Image {...props} style={[props.style, animatedStyles]} />
+    </GestureDetector>
+  );
+};
+
+export default AnimatedImage;

src/components/floatingActionButton.tsx

@@ -1,12 +1,18 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
-import { Keyboard, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { FAB } from 'react-native-paper';
 import { ParamListBase, useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { pickSingle } from 'react-native-document-picker';
+import { pick } from 'react-native-document-picker';
-import { ORIENTATION, useDimensions } from '../contexts';
+import {
-import { ROUTE } from '../types';
+  useDeviceOrientation,
-import { allowedMimeTypes, noOp } from '../utilities';
+  useKeyboard,
+} from '@react-native-community/hooks';
+import Clipboard from '@react-native-clipboard/clipboard';
+import { useDispatch } from 'react-redux';
+import { documentPickerResponseToAddMemeFile, ROUTE } from '../types';
+import { allowedMimeTypes, getFilenameFromUri, noOp } from '../utilities';
+import { setSnackbarMessage } from '../state';
 
 const floatingActionButtonStyles = StyleSheet.create({
   fab: {
@@ -22,59 +28,73 @@ const floatingActionButtonStyles = StyleSheet.create({
 const FloatingActionButton = ({ visible = true }: { visible?: boolean }) => {
   const { navigate } =
     useNavigation<NativeStackNavigationProp<ParamListBase>>();
-  const { orientation } = useDimensions();
+  const orientation = useDeviceOrientation();
+  const keyboardOpen = useKeyboard().keyboardShown;
+  const dispatch = useDispatch();
 
   const [state, setState] = useState(false);
-  const [keyboardOpen, setKeyboardOpen] = useState(false);
 
-  useEffect(() => {
+  const handleAddMeme = useCallback(async () => {
-    const keyboardDidShowListener = Keyboard.addListener(
+    const response = await pick({
-      'keyboardDidShow',
+      type: allowedMimeTypes,
-      () => setKeyboardOpen(true),
+      allowMultiSelection: true,
-    );
+    }).catch(noOp);
-    const keyboardDidHideListener = Keyboard.addListener(
+    if (!response) return;
-      'keyboardDidHide',
+    const files = documentPickerResponseToAddMemeFile(response);
-      () => setKeyboardOpen(false),
+    navigate(ROUTE.ADD_MEME, { files });
-    );
+  }, [navigate]);
 
-    return () => {
+  const handleAddTag = useCallback(() => {
-      keyboardDidShowListener.remove();
+    navigate(ROUTE.ADD_TAG);
-      keyboardDidHideListener.remove();
+  }, [navigate]);
-    };
+
-  }, []);
+  const handlePaste = useCallback(async () => {
+    const uri = await Clipboard.getURI();
+    if (!uri) {
+      dispatch(setSnackbarMessage('Clipboard does not contain a URI.'));
+      return;
+    }
+    navigate(ROUTE.ADD_MEME, {
+      files: [
+        {
+          uri: uri,
+          filename: getFilenameFromUri(uri),
+        },
+      ],
+    });
+  }, [dispatch, navigate]);
 
   return (
-    <FAB.Group
+    <>
-      open={state}
+      <FAB.Group
-      visible={visible && !keyboardOpen}
+        open={state}
-      icon={state ? 'image' : 'plus'}
+        visible={visible && !keyboardOpen}
-      actions={[
+        icon={state ? 'close' : 'plus'}
-        {
+        actions={[
-          icon: 'tag',
+          {
-          label: 'Tag',
+            icon: 'content-paste',
-          onPress: () => navigate(ROUTE.ADD_TAG),
+            label: 'Paste',
-        },
+            onPress: handlePaste,
-        {
-          icon: 'note-text',
-          label: 'Text',
-          onPress: () => {
-            throw new Error('Not yet implemented');
           },
-        },
+          {
-      ]}
+            icon: 'tag',
-      onStateChange={({ open }) => setState(open)}
+            label: 'Tag',
-      onPress={async () => {
+            onPress: handleAddTag,
-        if (!state) return;
+          },
-        const file = await pickSingle({ type: allowedMimeTypes }).catch(noOp);
+          {
-        if (!file) return;
+            icon: 'image',
-        navigate(ROUTE.ADD_MEME, { file });
+            label: 'Meme',
-      }}
+            onPress: handleAddMeme,
-      style={
+          },
-        orientation === ORIENTATION.PORTRAIT
+        ]}
-          ? floatingActionButtonStyles.fab
+        onStateChange={({ open }) => setState(open)}
-          : floatingActionButtonStyles.fabLandscape
+        style={
-      }
+          orientation === 'portrait'
-    />
+            ? floatingActionButtonStyles.fab
+            : floatingActionButtonStyles.fabLandscape
+        }
+      />
+    </>
   );
 };
 

src/components/hideableHeader.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { Animated, StyleSheet } from 'react-native';
-import { ORIENTATION, useDimensions } from '../contexts';
-import styles from '../styles';
 import { useTheme } from 'react-native-paper';
+import { useDeviceOrientation } from '@react-native-community/hooks';
 
 const hideableHeaderStyles = StyleSheet.create({
   headerView: {
@@ -11,6 +10,13 @@ const hideableHeaderStyles = StyleSheet.create({
     left: 0,
     right: 0,
     zIndex: 1,
+    paddingHorizontal: '4%',
+  },
+  headerViewPortrait: {
+    paddingTop: '4%',
+  },
+  headerViewLandscape: {
+    paddingTop: '2%',
   },
 });
 
@@ -22,7 +28,7 @@ const HideableHeader = ({
   children: React.ReactNode;
 }) => {
   const { colors } = useTheme();
-  const { orientation } = useDimensions();
+  const orientation = useDeviceOrientation();
 
   const headerAnim = useRef(new Animated.Value(visible ? 1 : 0)).current;
 
@@ -38,10 +44,9 @@ const HideableHeader = ({
     <Animated.View
       style={[
         hideableHeaderStyles.headerView,
-        orientation === ORIENTATION.PORTRAIT
+        orientation === 'portrait'
-          ? styles.paddingTop
+          ? hideableHeaderStyles.headerViewPortrait
-          : styles.smallPaddingTop,
+          : hideableHeaderStyles.headerViewLandscape,
-        styles.paddingHorizontal,
         {
           transform: [
             {

src/components/index.ts

@@ -1,13 +1,15 @@
 export {
   MemesList,
   MemeEditor,
+  MemeFail,
   MemesHeader,
-  MemeTagSearchModal,
   MemeTagSelector,
   MemeViewItem,
 } from './memes';
 export { TagChip, TagEditor, TagPreview, TagRow, TagsHeader } from './tags';
+export { default as AnimatedImage } from './animatedImage';
 export { default as FloatingActionButton } from './floatingActionButton';
 export { default as HideableBottomNavigationBar } from './hideableBottomNavigationBar';
 export { default as HideableHeader } from './hideableHeader';
 export { default as LoadingView } from './loadingView';
+export { default as storageLocationChangeDialog } from './storageLocationChangeDialog';

src/components/loadingView.tsx

@@ -1,17 +1,24 @@
-import React from 'react';
+import React, { ComponentProps } from 'react';
-import { ActivityIndicator, View } from 'react-native';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
 import { useTheme } from 'react-native-paper';
-import styles from '../styles';
 
-const LoadingView = () => {
+const loadingViewStyles = StyleSheet.create({
+  view: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 1,
+  },
+});
+
+const LoadingView = ({ ...props }: ComponentProps<typeof View>) => {
   const { colors } = useTheme();
 
   return (
     <View
+      {...props}
       style={[
-        styles.centered,
+        props.style,
-        styles.flex,
+        loadingViewStyles.view,
-        styles.fullSize,
         { backgroundColor: colors.background },
       ]}>
       <ActivityIndicator size="large" color={colors.primary} />

src/components/memes/index.ts

@@ -1,6 +1,6 @@
 export { default as MemesList } from './memesList/memesList';
 export { default as MemeEditor } from './memeEditor';
+export { default as MemeFail } from './memeFail';
 export { default as MemesHeader } from './memesHeader';
-export { default as MemeTagSearchModal } from './memeTagSearchModal';
+export { default as MemeTagSelector } from './memeTagSelector/memeTagSelector';
-export { default as MemeTagSelector } from './memeTagSelector';
 export { default as MemeViewItem } from './memeViewItem';

src/components/memes/memeEditor.tsx

@@ -1,17 +1,27 @@
-import React, { useEffect, useState } from 'react';
+import React, { useMemo } from 'react';
-import { HelperText, TextInput } from 'react-native-paper';
+import { HelperText, Text, TextInput, useTheme } from 'react-native-paper';
-import { Image } from 'react-native';
+import { Image, LayoutAnimation } from 'react-native';
-import { useDimensions } from '../../contexts';
+import { useSafeAreaFrame } from 'react-native-safe-area-context';
-import LoadingView from '../loadingView';
+import { LoadingView, MemeFail, MemeTagSelector } from '..';
-import { MemeTagSelector } from '.';
+import {
-import { Tag } from '../../database';
+  getFilenameFromUri,
-import { StringValidationResult, validateMemeTitle } from '../../utilities';
+  getMemeTypeFromMimeType,
+  validateMemeTitle,
+} from '../../utilities';
+import { StagingMeme } from '../../types';
+import { useMemeDimensions } from '../../hooks';
+import { MEME_TYPE } from '../../database';
+import Video from 'react-native-video';
 
 const memeEditorStyles = {
-  image: {
+  media: {
     marginBottom: 15,
     borderRadius: 5,
   },
+  uri: {
+    marginBottom: 15,
+    marginHorizontal: 5,
+  },
   memeTagSelector: {
     marginBottom: 10,
   },
@@ -21,70 +31,124 @@ const memeEditorStyles = {
 };
 
 const MemeEditor = ({
-  memeUri,
+  uri,
-  memeTitle,
+  mimeType,
-  setMemeTitle,
+  loading,
-  memeTags,
+  setLoading,
-  setMemeTags,
+  error,
+  setError,
+  staging,
+  setStaging,
 }: {
-  memeUri: string;
+  uri?: string;
-  memeTitle: StringValidationResult;
+  mimeType?: string;
-  setMemeTitle: (name: StringValidationResult) => void;
+  loading: boolean;
-  memeTags: Map<string, Tag>;
+  setLoading: (loading: boolean) => void;
-  setMemeTags: (tags: Map<string, Tag>) => void;
+  error: Error | undefined;
+  setError: (error: Error | undefined) => void;
+  staging?: StagingMeme;
+  setStaging: (staging: StagingMeme) => void;
 }) => {
-  const { dimensions } = useDimensions();
+  const { width } = useSafeAreaFrame();
+  const { colors } = useTheme();
 
-  const [imageWidth, setImageWidth] = useState<number>();
+  const { dimensions } = useMemeDimensions(
-  const [imageHeight, setImageHeight] = useState<number>();
+    uri,
+    mimeType,
+    useMemo(
+      () => () => {
+        setLoading(false);
+        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+      },
+      [setLoading],
+    ),
+    useMemo(() => (errorIn: Error) => setError(errorIn), [setError]),
+  );
 
-  useEffect(() => {
+  const mediaComponent = useMemo(() => {
-    // eslint-disable-next-line unicorn/no-useless-undefined
+    if (!mimeType || !dimensions) return <></>;
-    setImageWidth(undefined);
-    // eslint-disable-next-line unicorn/no-useless-undefined
-    setImageHeight(undefined);
 
-    Image.getSize(memeUri, (width, height) => {
+    const dimensionStyles = {
-      const paddedWidth = dimensions.width * 0.92;
+      width: width * 0.92,
-      const paddedHeight = Math.max(
+      height: Math.max(
-        Math.min((paddedWidth / width) * height, 500),
+        Math.min((width * 0.92) / dimensions.aspectRatio, 500),
         100,
-      );
+      ),
+    };
 
-      setImageWidth(paddedWidth);
+    const memeType = getMemeTypeFromMimeType(mimeType);
-      setImageHeight(paddedHeight);
+    if (!memeType) return <></>;
-    });
-  }, [memeUri, dimensions.width]);
 
-  if (!imageWidth || !imageHeight) return <LoadingView />;
+    switch (memeType) {
+      case MEME_TYPE.IMAGE:
+      case MEME_TYPE.GIF: {
+        return (
+          <Image
+            source={{ uri }}
+            style={[memeEditorStyles.media, dimensionStyles]}
+            resizeMode="contain"
+          />
+        );
+      }
+      case MEME_TYPE.VIDEO: {
+        return (
+          <Video
+            source={{ uri }}
+            style={[memeEditorStyles.media, dimensionStyles]}
+            resizeMode="contain"
+            controls
+          />
+        );
+      }
+      default: {
+        return <></>;
+      }
+    }
+  }, [dimensions, mimeType, uri, width]);
+
+  if (!uri || !mimeType || !staging) return <LoadingView />;
 
   return (
     <>
       <TextInput
         mode="outlined"
         label="Title"
-        value={memeTitle.raw}
+        value={staging.title.raw}
-        onChangeText={title => setMemeTitle(validateMemeTitle(title))}
+        onChangeText={title =>
-        error={!memeTitle.valid}
+          setStaging({ ...staging, title: validateMemeTitle(title) })
+        }
+        error={!staging.title.valid}
         selectTextOnFocus
       />
-      <HelperText type="error" visible={!memeTitle.valid}>
+      <HelperText type="error" visible={!staging.title.valid}>
-        {memeTitle.error}
+        {staging.title.error}
       </HelperText>
-      <Image
+      {error ? (
-        source={{ uri: memeUri }}
+        <MemeFail
-        style={[
+          style={[
-          {
+            {
-            width: imageWidth,
+              width: width * 0.92,
-            height: imageHeight,
+              height: width * 0.92,
-          },
+            },
-          memeEditorStyles.image,
+            memeEditorStyles.media,
-        ]}
+          ]}
-        resizeMode="contain"
+          iconSize={50}
-      />
+        />
+      ) : // eslint-disable-next-line unicorn/no-nested-ternary
+      loading || !dimensions ? (
+        <></>
+      ) : (
+        mediaComponent
+      )}
+      <Text
+        variant="bodySmall"
+        style={[memeEditorStyles.uri, { color: colors.onSurfaceDisabled }]}
+        numberOfLines={1}>
+        {getFilenameFromUri(uri)}
+      </Text>
       <MemeTagSelector
-        memeTags={memeTags}
+        memeTags={staging.tags}
-        setMemeTags={setMemeTags}
+        setMemeTags={tags => setStaging({ ...staging, tags })}
         style={memeEditorStyles.memeTagSelector}
       />
     </>

src/components/memes/memeFail.tsx

@@ -0,0 +1,41 @@
+import React, { ComponentProps } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useTheme } from 'react-native-paper';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import { rgbToRgba } from '../../utilities';
+
+const memeFailStyles = StyleSheet.create({
+  view: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+const MemeFail = ({
+  iconSize,
+  ...props
+}: {
+  iconSize?: number;
+} & ComponentProps<typeof View>) => {
+  const { colors } = useTheme();
+
+  return (
+    <View
+      {...props}
+      style={[
+        props.style,
+        memeFailStyles.view,
+        {
+          backgroundColor: rgbToRgba(colors.error, 0.2),
+        },
+      ]}>
+      <FontAwesome5
+        name="exclamation-triangle"
+        size={iconSize}
+        color={colors.error}
+      />
+    </View>
+  );
+};
+
+export default MemeFail;

src/components/memes/memeTagSelector/memeTagSearchModal.tsx

@@ -1,13 +1,13 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
-import { TagChip } from '../tags';
-import { Tag } from '../../database';
 import { useQuery, useRealm } from '@realm/react';
-import { TAG_SORT, tagSortQuery } from '../../types';
 import { Chip, Modal, Portal, Searchbar, useTheme } from 'react-native-paper';
-import { StyleSheet } from 'react-native';
+import { LayoutAnimation, StyleSheet } from 'react-native';
-import styles from '../../styles';
 import { FlashList } from '@shopify/flash-list';
-import { validateTagName } from '../../utilities';
+import { useSafeAreaFrame } from 'react-native-safe-area-context';
+import { TAG_SORT, tagSortQuery } from '../../../types';
+import { TagChip } from '../../tags';
+import { Tag } from '../../../database';
+import { validateTagName } from '../../../utilities';
 
 const memeTagSearchModalStyles = StyleSheet.create({
   modal: {
@@ -16,6 +16,7 @@ const memeTagSearchModalStyles = StyleSheet.create({
     padding: 10,
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
+    width: '100%',
   },
   searchbar: {
     marginBottom: 12,
@@ -25,6 +26,22 @@ const memeTagSearchModalStyles = StyleSheet.create({
   },
 });
 
+const tagLayoutAnimation = {
+  duration: 150,
+  create: {
+    type: LayoutAnimation.Types.easeInEaseOut,
+    property: LayoutAnimation.Properties.opacity,
+  },
+  update: {
+    type: LayoutAnimation.Types.easeInEaseOut,
+    property: LayoutAnimation.Properties.opacity,
+  },
+  delete: {
+    type: LayoutAnimation.Types.easeInEaseOut,
+    property: LayoutAnimation.Properties.opacity,
+  },
+};
+
 const MemeTagSearchModal = ({
   visible,
   setVisible,
@@ -36,6 +53,7 @@ const MemeTagSearchModal = ({
   memeTags: Map<string, Tag>;
   setMemeTags: (tags: Map<string, Tag>) => void;
 }) => {
+  const { width } = useSafeAreaFrame();
   const { colors } = useTheme();
   const realm = useRealm();
 
@@ -44,13 +62,10 @@ const MemeTagSearchModal = ({
   const [search, setSearch] = useState('');
   const [tagName, setTagName] = useState(validateTagName(search));
 
-  useEffect(() => {
-    setTagName(validateTagName(search));
-  }, [search]);
-
   const handleSearch = (newSearch: string) => {
     flashListRef.current?.scrollToOffset({ offset: 0 });
     setSearch(newSearch);
+    setTagName(validateTagName(newSearch));
   };
 
   const tags = useQuery<Tag>(
@@ -76,6 +91,8 @@ const MemeTagSearchModal = ({
     const id = tag.id.toHexString();
     memeTags.delete(id) || memeTags.set(id, tag);
     setMemeTags(new Map(memeTags));
+    flashListRef.current?.prepareForLayoutAnimationRender();
+    LayoutAnimation.configureNext(tagLayoutAnimation);
   };
 
   const handleCreateTag = (name: string) => {
@@ -88,6 +105,8 @@ const MemeTagSearchModal = ({
     if (!tag) return;
     memeTags.set(tag.id.toHexString(), tag);
     setMemeTags(new Map(memeTags));
+    flashListRef.current?.prepareForLayoutAnimationRender();
+    LayoutAnimation.configureNext(tagLayoutAnimation);
   };
 
   return (
@@ -95,11 +114,10 @@ const MemeTagSearchModal = ({
       <Modal
         visible={visible}
         contentContainerStyle={[
+          memeTagSearchModalStyles.modal,
           {
             backgroundColor: colors.surface,
           },
-          styles.fullWidth,
-          memeTagSearchModalStyles.modal,
         ]}
         onDismiss={() => setVisible(false)}>
         <Searchbar
@@ -113,8 +131,13 @@ const MemeTagSearchModal = ({
           ref={flashListRef}
           data={tags}
           extraData={memeTags}
+          keyExtractor={tag => tag.id.toHexString()}
           horizontal
           estimatedItemSize={120}
+          estimatedListSize={{
+            width: width - 10,
+            height: 34.5,
+          }}
           showsHorizontalScrollIndicator={false}
           keyboardShouldPersistTaps={'always'}
           renderItem={({ item: tag }) => (
@@ -135,6 +158,7 @@ const MemeTagSearchModal = ({
               Create Tag #{tagName.valid ? tagName.parsed : 'newTag'}
             </Chip>
           )}
+          fadingEdgeLength={50}
         />
       </Modal>
     </Portal>

src/components/memes/memeTagSelector/memeTagSelector.tsx

@@ -1,11 +1,11 @@
-import React, { ComponentProps, useState } from 'react';
+import React, { ComponentProps, useRef, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { LayoutAnimation, StyleSheet, View } from 'react-native';
 import { Chip } from 'react-native-paper';
-import { TagChip } from '../tags';
-import { Tag } from '../../database';
-import { useDimensions } from '../../contexts';
-import { MemeTagSearchModal } from '.';
 import { FlashList } from '@shopify/flash-list';
+import { useSafeAreaFrame } from 'react-native-safe-area-context';
+import { TagChip } from '../../tags';
+import { Tag } from '../../../database';
+import MemeTagSearchModal from './memeTagSearchModal';
 
 const memeTagSelectorStyles = StyleSheet.create({
   tagChip: {
@@ -13,6 +13,22 @@ const memeTagSelectorStyles = StyleSheet.create({
   },
 });
 
+const tagLayoutAnimation = {
+  duration: 150,
+  create: {
+    type: LayoutAnimation.Types.easeInEaseOut,
+    property: LayoutAnimation.Properties.opacity,
+  },
+  update: {
+    type: LayoutAnimation.Types.easeInEaseOut,
+    property: LayoutAnimation.Properties.opacity,
+  },
+  delete: {
+    type: LayoutAnimation.Types.easeInEaseOut,
+    property: LayoutAnimation.Properties.opacity,
+  },
+};
+
 const MemeTagSelector = ({
   memeTags,
   setMemeTags,
@@ -21,23 +37,28 @@ const MemeTagSelector = ({
   memeTags: Map<string, Tag>;
   setMemeTags: (tags: Map<string, Tag>) => void;
 } & ComponentProps<typeof View>) => {
-  const { dimensions } = useDimensions();
+  const { width } = useSafeAreaFrame();
+
+  const flashListRef = useRef<FlashList<Tag>>(null);
 
   const [flashListMargin, setFlashListMargin] = useState(0);
   const [tagSearchModalVisible, setTagSearchModalVisible] = useState(false);
 
   const handleTagPress = (tag: Tag) => {
     const id = tag.id.toHexString();
-    memeTags.delete(id) || memeTags.set(id, tag);
+    memeTags.delete(id);
     setMemeTags(new Map(memeTags));
+    flashListRef.current?.prepareForLayoutAnimationRender();
+    LayoutAnimation.configureNext(tagLayoutAnimation);
   };
 
   return (
     <>
       <View {...props}>
         <FlashList
+          ref={flashListRef}
           data={[...memeTags.values()]}
-          extraData={memeTags}
+          keyExtractor={tag => tag.id.toHexString()}
           horizontal
           estimatedItemSize={120}
           showsHorizontalScrollIndicator={false}
@@ -55,7 +76,7 @@ const MemeTagSelector = ({
               onPress={() => setTagSearchModalVisible(true)}
               onLayout={event =>
                 setFlashListMargin(
-                  dimensions.width * 0.92 - event.nativeEvent.layout.width,
+                  width * 0.92 - event.nativeEvent.layout.width,
                 )
               }
               style={{
@@ -64,6 +85,7 @@ const MemeTagSelector = ({
               Add Tag
             </Chip>
           )}
+          fadingEdgeLength={50}
         />
       </View>
       <MemeTagSearchModal

src/components/memes/memeViewItem.tsx

@@ -1,50 +1,75 @@
-import React, { useEffect, useState } from 'react';
+import React, { useMemo } from 'react';
-import { ActivityIndicator, useTheme } from 'react-native-paper';
+import { StyleSheet, View } from 'react-native';
-import { ImageZoom } from '@likashefqet/react-native-image-zoom';
+import { useSafeAreaFrame } from 'react-native-safe-area-context';
-import { Meme } from '../../database';
+import { AndroidScoped } from 'react-native-file-access';
-import { useDimensions } from '../../contexts';
+import { useSelector } from 'react-redux';
-import { Image, View } from 'react-native';
+import { MEME_TYPE, Meme } from '../../database';
-import styles from '../../styles';
+import { RootState } from '../../state';
+import { AnimatedImage, LoadingView, MemeFail } from '..';
+import { useMemeDimensions } from '../../hooks';
+import Video from 'react-native-video';
+
+const memeViewItemStyles = StyleSheet.create({
+  view: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
 
 const MemeViewItem = ({ meme }: { meme: Meme }) => {
-  const { dimensions } = useDimensions();
+  const { height, width } = useSafeAreaFrame();
-  const { colors } = useTheme();
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const storageUri = useSelector(
+    (state: RootState) => state.settings.storageUri,
+  )!;
 
-  const [imageWidth, setImageWidth] = useState<number>();
+  const uri = AndroidScoped.appendPath(storageUri, meme.filename);
-  const [imageHeight, setImageHeight] = useState<number>();
 
-  useEffect(() => {
+  const { dimensions, loading, error } = useMemeDimensions(uri, meme.mimeType);
-    Image.getSize(meme.uri, (width, height) => {
-      const ratio = width / height;
-      const screenRatio = dimensions.width / dimensions.height - 160;
 
-      if (ratio > screenRatio) {
+  const mediaComponent = useMemo(() => {
-        setImageWidth(dimensions.width);
+    if (!dimensions) return <></>;
-        setImageHeight(dimensions.width / ratio);
+
-      } else {
+    const dimensionStyles =
-        setImageWidth(dimensions.height * ratio);
+      dimensions.aspectRatio > width / (height - 128)
-        setImageHeight(dimensions.height);
+        ? {
+            width,
+            height: width / (dimensions.width / dimensions.height),
+          }
+        : {
+            width: (height - 128) * (dimensions.width / dimensions.height),
+            height: height - 128,
+          };
+
+    switch (meme.memeType) {
+      case MEME_TYPE.IMAGE:
+      case MEME_TYPE.GIF: {
+        return <AnimatedImage source={{ uri }} style={dimensionStyles} />;
       }
-    });
+      default: {
-  }, [meme.uri, dimensions.width, dimensions.height]);
+        return (
+          <Video source={{ uri }} style={dimensionStyles} paused controls />
+        );
+      }
+    }
+  }, [dimensions, height, meme.memeType, uri, width]);
+
+  if (!error && (loading || !dimensions)) {
+    return <LoadingView style={{ width, height }} />;
+  }
 
   return (
-    <View
+    <View style={[{ width, height }, memeViewItemStyles.view]}>
-      style={[
+      {error || !dimensions ? (
-        {
+        <MemeFail
-          width: dimensions.width,
+          style={{
-          height: dimensions.height - 160,
+            width: Math.min(width, height - 128),
-          backgroundColor: colors.background,
+            height: Math.min(width, height - 128),
-        },
+          }}
-        styles.centered,
+          iconSize={50}
-      ]}>
-      {imageWidth && imageHeight ? (
-        <ImageZoom
-          source={{ uri: meme.uri }}
-          style={{ width: imageWidth, height: imageHeight }}
         />
       ) : (
-        <ActivityIndicator size="large" color={colors.primary} />
+        mediaComponent
       )}
     </View>
   );

src/components/memes/memesHeader.tsx

@@ -19,23 +19,34 @@ import {
   toggleMemesFavoritesOnly,
   toggleMemesSortDirection,
 } from '../../state';
-import styles from '../../styles';
 import { MEME_SORT, SORT_DIRECTION } from '../../types';
 import { getSortIcon, getViewIcon } from '../../utilities';
 
 const memesHeaderStyles = StyleSheet.create({
   buttonView: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
     height: 50,
   },
+  buttonSection: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  sortButton: {
+    flexDirection: 'row-reverse',
+  },
 });
 
 const MemesHeader = ({
   search,
   setSearch,
+  autoFocus,
   ...props
 }: {
   search: string;
   setSearch: (search: string) => void;
+  autoFocus: boolean;
 } & ComponentProps<typeof View>) => {
   const { colors } = useTheme();
   const sort = useSelector((state: RootState) => state.memes.sort);
@@ -77,14 +88,10 @@ const MemesHeader = ({
         placeholder="Search Memes"
         value={search}
         onChangeText={setSearch}
+        autoFocus={autoFocus}
       />
-      <View
+      <View style={memesHeaderStyles.buttonView}>
-        style={[
+        <View style={memesHeaderStyles.buttonSection}>
-          styles.flexRowSpaceBetween,
-          styles.alignCenter,
-          memesHeaderStyles.buttonView,
-        ]}>
-        <View style={[styles.flexRow, styles.alignCenter]}>
           <Menu
             visible={sortMenuVisible}
             onDismiss={() => setSortMenuVisible(false)}
@@ -92,7 +99,7 @@ const MemesHeader = ({
               <Button
                 onPress={() => setSortMenuVisible(true)}
                 icon={getSortIcon(sort, sortDirection)}
-                contentStyle={styles.flexRowReverse}
+                contentStyle={memesHeaderStyles.sortButton}
                 compact>
                 Sort By: {sort}
               </Button>
@@ -112,7 +119,7 @@ const MemesHeader = ({
             })}
           </Menu>
         </View>
-        <View style={[styles.flexRow, styles.alignCenter]}>
+        <View style={memesHeaderStyles.buttonSection}>
           <IconButton
             icon={getViewIcon(view)}
             iconColor={colors.primary}

src/components/memes/memesList/memesGridItem.tsx

@@ -1,9 +1,13 @@
-import React, { useState } from 'react';
+import React, { useMemo } from 'react';
-import { Image, TouchableHighlight, View } from 'react-native';
+import { Image, TouchableHighlight } from 'react-native';
 import { useSelector } from 'react-redux';
-import { Meme } from '../../../database';
+import { useSafeAreaFrame } from 'react-native-safe-area-context';
-import { useDimensions } from '../../../contexts';
+import { AndroidScoped } from 'react-native-file-access';
+import { MEME_TYPE, Meme } from '../../../database';
 import { RootState } from '../../../state';
+import { MemeFail } from '..';
+import { getFontAwesome5IconSize } from '../../../utilities';
+import { useMemeDimensions } from '../../../hooks';
 
 const MemesGridItem = ({
   meme,
@@ -14,33 +18,60 @@ const MemesGridItem = ({
   index: number;
   focusMeme: (index: number) => void;
 }) => {
-  const { dimensions } = useDimensions();
+  const { width } = useSafeAreaFrame();
   const gridColumns = useSelector(
     (state: RootState) => state.settings.gridColumns,
   );
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const storageUri = useSelector(
+    (state: RootState) => state.settings.storageUri,
+  )!;
 
-  const [imageWidth, setImageWidth] = useState<number>();
+  const uri = AndroidScoped.appendPath(storageUri, meme.filename);
-  const [imageHeight, setImageHeight] = useState<number>();
 
-  Image.getSize(meme.uri, () => {
+  const { dimensions, loading, error } = useMemeDimensions(uri, meme.mimeType);
-    const paddedWidth = (dimensions.width * 0.92 - 5) / gridColumns;
+
-    setImageWidth(paddedWidth);
+  const itemWidth = (width * 0.92 - 5) / gridColumns;
-    setImageHeight(paddedWidth);
+
-  });
+  const mediaComponent = useMemo(() => {
+    switch (meme.memeType) {
+      case MEME_TYPE.IMAGE:
+      case MEME_TYPE.GIF:
+      case MEME_TYPE.VIDEO: {
+        return (
+          <Image
+            source={{ uri }}
+            style={[
+              {
+                width: itemWidth,
+                height: itemWidth,
+              },
+            ]}
+          />
+        );
+      }
+      default: {
+        return <></>;
+      }
+    }
+  }, [itemWidth, meme.memeType, uri]);
+
+  if (!error && (loading || !dimensions)) return <></>;
 
   return (
-    <>
+    <TouchableHighlight onPress={() => focusMeme(index)}>
-      {imageWidth && imageHeight && (
+      {error ? (
-        <View>
+        <MemeFail
-          <TouchableHighlight onPress={() => focusMeme(index)}>
+          style={{
-            <Image
+            width: (width * 0.92 - 5) / gridColumns,
-              source={{ uri: meme.uri }}
+            height: (width * 0.92 - 5) / gridColumns,
-              style={[{ width: imageWidth, height: imageHeight }]}
+          }}
-            />
+          iconSize={getFontAwesome5IconSize(gridColumns)}
-          </TouchableHighlight>
+        />
-        </View>
+      ) : (
+        mediaComponent
       )}
-    </>
+    </TouchableHighlight>
   );
 };
 

src/components/memes/memesList/memesList.tsx

@@ -7,45 +7,42 @@ import {
 } from 'react-native';
 import { useSelector } from 'react-redux';
 import { Divider, HelperText } from 'react-native-paper';
-import { useDimensions, ORIENTATION } from '../../../contexts';
+import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { Meme } from '../../../database';
 import { RootState } from '../../../state';
 import { VIEW } from '../../../types';
 import { getFlashListItemHeight } from '../../../utilities';
-import styles from '../../../styles';
 import MemesMasonryItem from './memesMasonryItem';
 import MemesGridItem from './memesGridItem';
 import MemesListItem from './memesListItem';
 
-const memesMasonryListStyles = StyleSheet.create({
+const sharedMemesListStyles = StyleSheet.create({
   flashList: {
     paddingBottom: 100,
-    // Needed to prevent fucky MasonryFlashList, see https://github.com/Shopify/flash-list/issues/876
-    paddingHorizontal: 0.1,
   },
   helperText: {
+    textAlign: 'center',
     marginVertical: 15,
   },
 });
 
+const memesMasonryListStyles = StyleSheet.create({
+  flashList: {
+    // Needed to prevent fucky MasonryFlashList, see https://github.com/Shopify/flash-list/issues/876
+    paddingHorizontal: 0.1,
+  },
+});
+
 const memesGridListStyles = StyleSheet.create({
   flashList: {
-    paddingBottom: 100,
     paddingHorizontal: 2.5,
   },
-  helperText: {
-    marginVertical: 12.5,
-  },
 });
 
 const memesListListStyles = StyleSheet.create({
   flashList: {
-    paddingBottom: 100,
     paddingHorizontal: 5,
   },
-  helperText: {
-    marginVertical: 15,
-  },
 });
 
 const MemesList = ({
@@ -61,7 +58,7 @@ const MemesList = ({
   handleScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
   focusMeme: (index: number) => void;
 }) => {
-  const { dimensions, orientation } = useDimensions();
+  const { height, width } = useSafeAreaFrame();
   const view = useSelector((state: RootState) => state.memes.view);
   const masonryColumns = useSelector(
     (state: RootState) => state.settings.masonryColumns,
@@ -70,20 +67,17 @@ const MemesList = ({
     (state: RootState) => state.settings.gridColumns,
   );
 
-  const extraFlashListPadding =
-    flashListPadding +
-    dimensions.height * (orientation === ORIENTATION.PORTRAIT ? 0.02 : 0.04);
-
   return (
     <>
       {view === VIEW.MASONRY && (
         <MasonryFlashList
           ref={flashListRef}
           data={memes}
+          key={masonryColumns}
           estimatedItemSize={getFlashListItemHeight(masonryColumns)}
           estimatedListSize={{
-            height: dimensions.height,
+            height,
-            width: dimensions.width * 0.92,
+            width: width * 0.92,
           }}
           numColumns={masonryColumns}
           showsVerticalScrollIndicator={false}
@@ -91,27 +85,28 @@ const MemesList = ({
             <MemesMasonryItem meme={meme} index={index} focusMeme={focusMeme} />
           )}
           contentContainerStyle={{
-            paddingTop: extraFlashListPadding,
+            paddingTop: flashListPadding,
+            ...sharedMemesListStyles.flashList,
             ...memesMasonryListStyles.flashList,
           }}
           ListEmptyComponent={() => (
-            <HelperText
+            <HelperText type={'info'} style={sharedMemesListStyles.helperText}>
-              type={'info'}
-              style={[memesMasonryListStyles.helperText, styles.centerText]}>
               No memes found
             </HelperText>
           )}
           onScroll={handleScroll}
+          fadingEdgeLength={100}
         />
       )}
       {view === VIEW.GRID && (
         <FlashList
           ref={flashListRef}
           data={memes}
+          key={gridColumns}
           estimatedItemSize={getFlashListItemHeight(gridColumns)}
           estimatedListSize={{
-            height: dimensions.height,
+            height: height,
-            width: dimensions.width * 0.92,
+            width: width * 0.92,
           }}
           numColumns={gridColumns}
           showsVerticalScrollIndicator={false}
@@ -119,17 +114,17 @@ const MemesList = ({
             <MemesGridItem meme={meme} index={index} focusMeme={focusMeme} />
           )}
           contentContainerStyle={{
-            paddingTop: extraFlashListPadding + 2.5,
+            paddingTop: flashListPadding,
+            ...sharedMemesListStyles.flashList,
             ...memesGridListStyles.flashList,
           }}
           ListEmptyComponent={() => (
-            <HelperText
+            <HelperText type={'info'} style={sharedMemesListStyles.helperText}>
-              type={'info'}
-              style={[memesGridListStyles.helperText, styles.centerText]}>
               No memes found
             </HelperText>
           )}
           onScroll={handleScroll}
+          fadingEdgeLength={100}
         />
       )}
       {view === VIEW.LIST && (
@@ -138,8 +133,8 @@ const MemesList = ({
           data={memes}
           estimatedItemSize={50}
           estimatedListSize={{
-            height: dimensions.height,
+            height: height,
-            width: dimensions.width * 0.92,
+            width: width * 0.92,
           }}
           showsVerticalScrollIndicator={false}
           renderItem={({ item: meme, index }) => (
@@ -147,17 +142,17 @@ const MemesList = ({
           )}
           ItemSeparatorComponent={() => <Divider />}
           contentContainerStyle={{
-            paddingTop: extraFlashListPadding,
+            paddingTop: flashListPadding,
+            ...sharedMemesListStyles.flashList,
             ...memesListListStyles.flashList,
           }}
           ListEmptyComponent={() => (
-            <HelperText
+            <HelperText type={'info'} style={sharedMemesListStyles.helperText}>
-              type={'info'}
-              style={[memesListListStyles.helperText, styles.centerText]}>
               No memes found
             </HelperText>
           )}
           onScroll={handleScroll}
+          fadingEdgeLength={100}
         />
       )}
     </>

src/components/memes/memesList/memesListItem.tsx

@@ -1,24 +1,36 @@
-import React, { useState } from 'react';
+import React, { useMemo } from 'react';
 import { Image, StyleSheet, View } from 'react-native';
 import { Text, TouchableRipple } from 'react-native-paper';
-import { Meme } from '../../../database';
+import { useSafeAreaFrame } from 'react-native-safe-area-context';
-import styles from '../../../styles';
+import { AndroidScoped } from 'react-native-file-access';
-import { useDimensions } from '../../../contexts';
+import { useSelector } from 'react-redux';
+import { MEME_TYPE, Meme } from '../../../database';
+import { MemeFail } from '..';
+import { RootState } from '../../../state';
+import { useMemeDimensions } from '../../../hooks';
 
 const memesListItemStyles = StyleSheet.create({
   view: {
+    flexDirection: 'row',
     paddingVertical: 10,
   },
   image: {
+    height: 75,
+    width: 75,
     borderRadius: 5,
   },
   detailsView: {
+    flexDirection: 'column',
     marginLeft: 10,
   },
   text: {
     marginRight: 5,
     marginBottom: 5,
   },
+  tagsView: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
 });
 
 const MemesListItem = ({
@@ -30,71 +42,74 @@ const MemesListItem = ({
   index: number;
   focusMeme: (index: number) => void;
 }) => {
-  const { dimensions } = useDimensions();
+  const { width } = useSafeAreaFrame();
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const storageUri = useSelector(
+    (state: RootState) => state.settings.storageUri,
+  )!;
 
-  const [imageWidth, setImageWidth] = useState<number>();
+  const uri = AndroidScoped.appendPath(storageUri, meme.filename);
-  const [imageHeight, setImageHeight] = useState<number>();
 
-  Image.getSize(meme.uri, () => {
+  const { dimensions, loading, error } = useMemeDimensions(uri, meme.mimeType);
-    const paddedWidth = 75;
+
-    setImageWidth(paddedWidth);
+  const mediaComponent = useMemo(() => {
-    setImageHeight(paddedWidth);
+    switch (meme.memeType) {
-  });
+      case MEME_TYPE.IMAGE:
+      case MEME_TYPE.GIF:
+      case MEME_TYPE.VIDEO: {
+        return <Image source={{ uri }} style={[memesListItemStyles.image]} />;
+      }
+      default: {
+        return <></>;
+      }
+    }
+  }, [meme.memeType, uri]);
+
+  if (!error && (loading || !dimensions)) return <></>;
 
   return (
-    <>
+    <TouchableRipple
-      {imageWidth && imageHeight && (
+      onPress={() => focusMeme(index)}
-        <TouchableRipple
+      style={memesListItemStyles.view}>
-          onPress={() => focusMeme(index)}
+      <>
-          style={[memesListItemStyles.view, styles.flexRow]}>
+        {error ? (
-          <>
+          <MemeFail style={memesListItemStyles.image} />
-            <View style={{ width: imageWidth, height: imageHeight }}>
+        ) : (
-              <Image
+          mediaComponent
-                source={{ uri: meme.uri }}
+        )}
+        <View
+          style={[
+            memesListItemStyles.detailsView,
+            {
+              width: width * 0.92 - 75 - 10,
+            },
+          ]}>
+          <Text variant="titleMedium" style={memesListItemStyles.text}>
+            {meme.title}
+          </Text>
+          <Text variant="labelSmall" style={memesListItemStyles.text}>
+            {meme.dateModified.toLocaleDateString()} • {meme.size / 1000}
+            KB
+          </Text>
+          <View style={memesListItemStyles.tagsView}>
+            {meme.tags.map(tag => (
+              <Text
+                variant="labelMedium"
+                key={tag.id.toHexString()}
                 style={[
-                  { width: imageWidth, height: imageHeight },
+                  {
-                  memesListItemStyles.image,
+                    color: tag.color,
+                  },
+                  memesListItemStyles.text,
                 ]}
-              />
+                numberOfLines={1}>
-            </View>
+                #{tag.name}
-            <View
-              style={[
-                memesListItemStyles.detailsView,
-                styles.flexColumn,
-                {
-                  width: dimensions.width * 0.92 - imageWidth - 10,
-                },
-              ]}>
-              <Text variant="titleMedium" style={memesListItemStyles.text}>
-                {meme.title}
               </Text>
-              <View style={styles.flexRow}>
+            ))}
-                <Text variant="labelSmall" style={memesListItemStyles.text}>
+          </View>
-                  {meme.dateModified.toLocaleDateString()} • {meme.size / 1000}
+        </View>
-                  KB
+      </>
-                </Text>
+    </TouchableRipple>
-              </View>
-              <View style={[styles.flexRow, styles.flexWrap]}>
-                {meme.tags.map(tag => (
-                  <Text
-                    variant="labelMedium"
-                    key={tag.id.toHexString()}
-                    style={[
-                      {
-                        color: tag.color,
-                      },
-                      memesListItemStyles.text,
-                    ]}
-                    numberOfLines={1}>
-                    #{tag.name}
-                  </Text>
-                ))}
-              </View>
-            </View>
-          </>
-        </TouchableRipple>
-      )}
-    </>
   );
 };
 

src/components/memes/memesList/memesMasonryItem.tsx

@@ -1,9 +1,13 @@
-import React, { useState } from 'react';
+import React, { useMemo } from 'react';
 import { Image, StyleSheet, TouchableHighlight } from 'react-native';
 import { useSelector } from 'react-redux';
-import { Meme } from '../../../database';
+import { useSafeAreaFrame } from 'react-native-safe-area-context';
-import { useDimensions } from '../../../contexts';
+import { AndroidScoped } from 'react-native-file-access';
+import { MEME_TYPE, Meme } from '../../../database';
 import { RootState } from '../../../state';
+import { MemeFail } from '..';
+import { getFontAwesome5IconSize } from '../../../utilities';
+import { useMemeDimensions } from '../../../hooks';
 
 const memeMasonryItemStyles = StyleSheet.create({
   view: {
@@ -24,36 +28,65 @@ const MemesMasonryItem = ({
   index: number;
   focusMeme: (index: number) => void;
 }) => {
-  const { dimensions } = useDimensions();
+  const { width } = useSafeAreaFrame();
   const masonryColumns = useSelector(
     (state: RootState) => state.settings.masonryColumns,
   );
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const storageUri = useSelector(
+    (state: RootState) => state.settings.storageUri,
+  )!;
 
-  const [imageWidth, setImageWidth] = useState<number>();
+  const uri = AndroidScoped.appendPath(storageUri, meme.filename);
-  const [imageHeight, setImageHeight] = useState<number>();
 
-  Image.getSize(meme.uri, (width, height) => {
+  const { dimensions, loading, error } = useMemeDimensions(uri, meme.mimeType);
-    const paddedWidth = (dimensions.width * 0.92) / masonryColumns - 5;
-    setImageWidth(paddedWidth);
-    setImageHeight((paddedWidth / width) * height);
-  });
 
-  return (
+  const itemWidth = (width * 0.92 - 5) / masonryColumns - 5;
-    <>
+  const itemHeight =
-      {imageWidth && imageHeight && (
+    ((width * 0.92) / masonryColumns - 5) / (dimensions?.aspectRatio ?? 1);
-        <TouchableHighlight
+
-          onPress={() => focusMeme(index)}
+  const mediaComponent = useMemo(() => {
-          style={memeMasonryItemStyles.view}>
+    switch (meme.memeType) {
+      case MEME_TYPE.IMAGE:
+      case MEME_TYPE.GIF:
+      case MEME_TYPE.VIDEO: {
+        return (
           <Image
-            source={{ uri: meme.uri }}
+            source={{ uri }}
             style={[
               memeMasonryItemStyles.image,
-              { width: imageWidth, height: imageHeight },
+              {
+                width: itemWidth,
+                height: itemHeight,
+              },
             ]}
           />
-        </TouchableHighlight>
+        );
+      }
+      default: {
+        return <></>;
+      }
+    }
+  }, [itemHeight, itemWidth, meme.memeType, uri]);
+
+  if (!error && (loading || !dimensions)) return <></>;
+
+  return (
+    <TouchableHighlight
+      onPress={() => focusMeme(index)}
+      style={memeMasonryItemStyles.view}>
+      {error || !dimensions ? (
+        <MemeFail
+          style={[
+            memeMasonryItemStyles.image,
+            { width: itemWidth, height: itemHeight },
+          ]}
+          iconSize={getFontAwesome5IconSize(masonryColumns)}
+        />
+      ) : (
+        mediaComponent
       )}
-    </>
+    </TouchableHighlight>
   );
 };
 

src/components/storageLocationChangeDialog.tsx

@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import { Dialog, ProgressBar, Text } from 'react-native-paper';
+import { openDocumentTree } from 'react-native-scoped-storage';
+import { useDispatch, useSelector } from 'react-redux';
+import { AndroidScoped, FileSystem } from 'react-native-file-access';
+import { RootState, setStorageUri } from '../state';
+import { clearPermissions, isPermissionForPath, noOp } from '../utilities';
+
+const storageLocationChangeDialogStyles = StyleSheet.create({
+  progressBar: {
+    marginVertical: 15,
+  },
+});
+
+const StorageLocationChangeDialog = ({
+  visible,
+  setVisible,
+  setSnackbarMessage,
+}: {
+  visible: boolean;
+  setVisible: (visible: boolean) => void;
+  setSnackbarMessage: (message: string) => void;
+}) => {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const storageUri = useSelector(
+    (state: RootState) => state.settings.storageUri,
+  )!;
+  const dispatch = useDispatch();
+
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    const selectNewStorageUri = async () => {
+      const uri = await openDocumentTree(true).catch(noOp);
+
+      if (!uri) {
+        setVisible(false);
+        return;
+      }
+
+      const newStorageUri = uri.uri;
+
+      if (isPermissionForPath(storageUri, newStorageUri)) {
+        setSnackbarMessage('Folder already selected.');
+        setVisible(false);
+        return;
+      }
+
+      const files = await FileSystem.ls(storageUri);
+      let filesCopied = 0;
+
+      await Promise.all(
+        files.map(async file => {
+          const oldUri = AndroidScoped.appendPath(storageUri, file);
+          const newUri = AndroidScoped.appendPath(newStorageUri, file);
+
+          // You may be wondering, why cp and unlink instead of mv?
+          // That's because Android is a fuck and does not allow moving across different scoped storage paths.
+          await FileSystem.cp(oldUri, newUri).catch(noOp);
+          await FileSystem.unlink(oldUri).catch(noOp);
+
+          filesCopied++;
+          setProgress(filesCopied / files.length);
+        }),
+      );
+
+      await dispatch(setStorageUri(newStorageUri));
+      await clearPermissions([newStorageUri]);
+
+      setVisible(false);
+      setProgress(0);
+    };
+
+    if (visible) void selectNewStorageUri();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible]);
+
+  return (
+    <Dialog
+      visible={visible}
+      onDismiss={() => setVisible(false)}
+      dismissable={false}
+      dismissableBackButton={false}>
+      <Dialog.Title>Change Storage Location</Dialog.Title>
+      <Dialog.Content>
+        <Text>Copying files. Do not close the app.</Text>
+        <ProgressBar
+          animatedValue={progress}
+          style={storageLocationChangeDialogStyles.progressBar}
+        />
+      </Dialog.Content>
+    </Dialog>
+  );
+};
+
+export default StorageLocationChangeDialog;

src/components/tags/tagChip.tsx

@@ -14,11 +14,13 @@ const tagChipStyles = StyleSheet.create({
 const TagChip = ({
   tag,
   active = true,
+  elevated = false,
   onPress,
   ...props
 }: {
   tag: Tag;
   active?: boolean;
+  elevated?: boolean;
   onPress?: () => void;
 } & Omit<ComponentProps<typeof Chip>, 'children'>) => {
   const theme = useTheme();
@@ -45,6 +47,7 @@ const TagChip = ({
         );
       }}
       compact
+      elevated={elevated}
       theme={chipTheme}
       mode={active ? 'flat' : 'outlined'}
       style={[tagChipStyles.chip, props.style]}

src/components/tags/tagEditor.tsx

@@ -2,62 +2,69 @@ import React, { useEffect, useRef } from 'react';
 import { HelperText, TextInput } from 'react-native-paper';
 import TagPreview from './tagPreview';
 import {
-  StringValidationResult,
   generateRandomColor,
   validateColor,
   validateTagName,
 } from '../../utilities';
+import { StagingTag } from '../../types';
 
 const TagEditor = ({
-  tagName,
+  staging,
-  setTagName,
+  setStaging,
-  tagColor,
-  setTagColor,
 }: {
-  tagName: StringValidationResult;
+  staging: StagingTag;
-  setTagName: (name: StringValidationResult) => void;
+  setStaging: (staging: StagingTag) => void;
-  tagColor: StringValidationResult;
-  setTagColor: (color: StringValidationResult) => void;
 }) => {
-  const lastValidTagColor = useRef(tagColor.parsed);
+  const lastValidColor = useRef(staging.color.parsed);
 
   useEffect(() => {
-    if (tagColor.valid) lastValidTagColor.current = tagColor.parsed;
+    if (staging.color.valid) lastValidColor.current = staging.color.parsed;
-  }, [tagColor]);
+  }, [staging.color.parsed, staging.color.valid]);
 
   return (
     <>
       <TagPreview
-        name={tagName.parsed}
+        name={staging.name.parsed}
-        color={tagColor.valid ? tagColor.parsed : lastValidTagColor.current}
+        color={
+          staging.color.valid ? staging.color.parsed : lastValidColor.current
+        }
       />
       <TextInput
         mode="outlined"
         label="Name"
-        value={tagName.raw}
+        value={staging.name.raw}
-        onChangeText={name => setTagName(validateTagName(name))}
+        onChangeText={name =>
-        error={!tagName.valid}
+          setStaging({ ...staging, name: validateTagName(name) })
+        }
+        error={!staging.name.valid}
         selectTextOnFocus
       />
-      <HelperText type="error" visible={!tagName.valid}>
+      <HelperText type="error" visible={!staging.name.valid}>
-        {tagName.error}
+        {staging.name.error}
       </HelperText>
       <TextInput
         mode="outlined"
         label="Color"
-        value={tagColor.raw}
+        value={staging.color.raw}
-        onChangeText={color => setTagColor(validateColor(color))}
+        onChangeText={color =>
-        error={!tagColor.valid}
+          setStaging({ ...staging, color: validateColor(color) })
+        }
+        error={!staging.color.valid}
         autoCorrect={false}
         right={
           <TextInput.Icon
             icon="palette"
-            onPress={() => setTagColor(validateColor(generateRandomColor()))}
+            onPress={() =>
+              setStaging({
+                ...staging,
+                color: validateColor(generateRandomColor()),
+              })
+            }
           />
         }
       />
-      <HelperText type="error" visible={!tagColor.valid}>
+      <HelperText type="error" visible={!staging.color.valid}>
-        {tagColor.error}
+        {staging.color.error}
       </HelperText>
     </>
   );

src/components/tags/tagPreview.tsx

@@ -2,11 +2,14 @@ import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
 import { Chip, useTheme } from 'react-native-paper';
-import styles from '../../styles';
-import { useDimensions } from '../../contexts';
 import { getContrastColor } from '../../utilities';
 
 const tagPreviewStyles = StyleSheet.create({
+  view: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    margin: '10%',
+  },
   chip: {
     padding: 5,
   },
@@ -17,7 +20,6 @@ const tagPreviewStyles = StyleSheet.create({
 
 const TagPreview = ({ name, color }: { name: string; color: string }) => {
   const theme = useTheme();
-  const { responsive } = useDimensions();
 
   const chipTheme = useMemo(() => {
     return {
@@ -32,14 +34,7 @@ const TagPreview = ({ name, color }: { name: string; color: string }) => {
   const contrastColor = getContrastColor(color);
 
   return (
-    <View
+    <View style={tagPreviewStyles.view}>
-      style={[
-        styles.justifyCenter,
-        styles.flexRow,
-        {
-          margin: responsive.verticalScale(50),
-        },
-      ]}>
       <Chip
         icon={() => {
           return <FontAwesome5 name="tag" size={14} color={contrastColor} />;

src/components/tags/tagsHeader.tsx

@@ -1,7 +1,6 @@
 import React, { ComponentProps, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Button, Divider, Menu, Searchbar } from 'react-native-paper';
-import styles from '../../styles';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   RootState,
@@ -14,17 +13,24 @@ import { getSortIcon } from '../../utilities';
 
 const tagsHeaderStyles = StyleSheet.create({
   buttonView: {
+    alignItems: 'center',
+    flexDirection: 'row',
     height: 50,
   },
+  sortButton: {
+    flexDirection: 'row-reverse',
+  },
 });
 
 const TagsHeader = ({
   search,
   setSearch,
+  autoFocus,
   ...props
 }: {
   search: string;
   setSearch: (search: string) => void;
+  autoFocus: boolean;
 } & ComponentProps<typeof View>) => {
   const sort = useSelector((state: RootState) => state.tags.sort);
   const sortDirection = useSelector(
@@ -56,13 +62,9 @@ const TagsHeader = ({
         onChangeText={(value: string) => {
           setSearch(value);
         }}
+        autoFocus={autoFocus}
       />
-      <View
+      <View style={tagsHeaderStyles.buttonView}>
-        style={[
-          styles.flexRow,
-          styles.alignCenter,
-          tagsHeaderStyles.buttonView,
-        ]}>
         <Menu
           visible={sortMenuVisible}
           onDismiss={() => setSortMenuVisible(false)}
@@ -70,7 +72,7 @@ const TagsHeader = ({
             <Button
               onPress={() => setSortMenuVisible(true)}
               icon={getSortIcon(sort, sortDirection)}
-              contentStyle={styles.flexRowReverse}
+              contentStyle={tagsHeaderStyles.sortButton}
               compact>
               Sort By: {sort}
             </Button>

src/contexts/dimensions.tsx

@@ -1,97 +0,0 @@
-import React, {
-  ReactNode,
-  createContext,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-import { Dimensions, ScaledSize } from 'react-native';
-
-const guidelineBaseWidth = 350;
-const guidelineBaseHeight = 680;
-
-enum ORIENTATION {
-  PORTRAIT = 'portrait',
-  LANDSCAPE = 'landscape',
-}
-
-interface ScaleFunctions {
-  horizontalScale: (size: number) => number;
-  verticalScale: (size: number) => number;
-  moderateHorizontalScale: (size: number, factor?: number) => number;
-  moderateVerticalScale: (size: number, factor?: number) => number;
-}
-
-interface DimensionsContext {
-  orientation: ORIENTATION;
-  dimensions: ScaledSize;
-  responsive: ScaleFunctions;
-}
-
-const createScaleFunctions = (dimensionsIn: ScaledSize) => {
-  const horizontalScale = (size: number) =>
-    (dimensionsIn.width / guidelineBaseWidth) * size;
-  const verticalScale = (size: number) =>
-    (dimensionsIn.height / guidelineBaseHeight) * size;
-  const moderateHorizontalScale = (size: number, factor = 0.5) =>
-    size + (horizontalScale(size) - size) * factor;
-  const moderateVerticalScale = (size: number, factor = 0.5) =>
-    size + (verticalScale(size) - size) * factor;
-
-  return {
-    horizontalScale,
-    verticalScale,
-    moderateHorizontalScale,
-    moderateVerticalScale,
-  };
-};
-
-const DimensionsContext = createContext<DimensionsContext | undefined>(
-  undefined,
-);
-
-const DimensionsProvider = ({ children }: { children: ReactNode }) => {
-  const [dimensions, setDimensions] = useState(Dimensions.get('window'));
-
-  const orientation = useMemo(() => {
-    return dimensions.width > dimensions.height
-      ? ORIENTATION.LANDSCAPE
-      : ORIENTATION.PORTRAIT;
-  }, [dimensions]);
-
-  const responsiveScale = createScaleFunctions(dimensions);
-
-  useEffect(() => {
-    const onChange = ({ window }: { window: ScaledSize }) => {
-      setDimensions(window);
-    };
-
-    const subscription = Dimensions.addEventListener('change', onChange);
-
-    return () => {
-      subscription.remove();
-    };
-  }, []);
-
-  return (
-    <DimensionsContext.Provider
-      value={{
-        orientation,
-        dimensions,
-        responsive: responsiveScale,
-      }}>
-      {children}
-    </DimensionsContext.Provider>
-  );
-};
-
-const useDimensions = (): DimensionsContext => {
-  const context = useContext(DimensionsContext);
-  if (!context) {
-    throw new Error('useDimensions must be used within a DimensionsProvider');
-  }
-  return context;
-};
-
-export { ORIENTATION, DimensionsProvider, useDimensions };

src/contexts/index.ts

@@ -1 +0,0 @@
-export { ORIENTATION, DimensionsProvider, useDimensions } from './dimensions';

src/database/meme.ts

@@ -17,11 +17,10 @@ const memeTypePlural = {
   [MEME_TYPE.TEXT]: 'Text',
 };
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
 class Meme extends Object<Meme> {
   id!: BSON.UUID;
-  type!: MEME_TYPE;
+  filename!: string;
-  uri!: string;
+  memeType!: MEME_TYPE;
   mimeType!: string;
   size!: number;
   title!: string;
@@ -38,8 +37,8 @@ class Meme extends Object<Meme> {
     primaryKey: 'id',
     properties: {
       id: { type: 'uuid', default: () => new BSON.UUID() },
-      type: { type: 'string', indexed: true },
+      filename: 'string',
-      uri: 'string',
+      memeType: { type: 'string', indexed: true },
       mimeType: 'string',
       size: 'int',
       title: 'string',

src/database/tag.ts

@@ -2,7 +2,6 @@ import { BSON, Object, ObjectSchema } from 'realm';
 import { Meme } from './meme';
 import { generateRandomColor } from '../utilities';
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
 class Tag extends Object<Tag> {
   id!: BSON.UUID;
   name!: string;

src/hooks/index.ts

@@ -0,0 +1 @@
+export { default as useMemeDimensions } from './useMemeDimensions';

src/hooks/useMemeDimensions.ts

@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+import { Image } from 'react-native';
+import { Dimensions } from '../types';
+
+const useMediaDimensions = (
+  uri?: string,
+  mimeType?: string,
+  onLoad?: (width: number, height: number, aspectRatio: number) => void,
+  onError?: (error: Error) => void,
+) => {
+  const [dimensions, setDimensions] = useState<Dimensions | undefined>();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | undefined>();
+
+  useEffect(() => {
+    const getDimensions = () => {
+      if (!uri || !mimeType) return;
+
+      const mimeStart = mimeType.split('/')[0];
+
+      switch (mimeStart) {
+        case 'image':
+        case 'video': {
+          Image.getSize(
+            uri,
+            (width, height) => {
+              const aspectRatio = width / height;
+              setDimensions({ width, height, aspectRatio });
+              setLoading(false);
+              onLoad?.(width, height, aspectRatio);
+            },
+            (errorIn: string) => {
+              const errorOut = new Error(errorIn);
+              setError(errorOut);
+              setLoading(false);
+              onError?.(errorOut);
+            },
+          );
+          break;
+        }
+        default: {
+          const errorOut = new Error(`Unknown mime type: ${mimeType}`);
+          setError(errorOut);
+          setLoading(false);
+          onError?.(errorOut);
+        }
+      }
+    };
+
+    getDimensions();
+  }, [mimeType, onError, onLoad, uri]);
+
+  return { dimensions, loading, error };
+};
+
+export default useMediaDimensions;

src/navigation.tsx

@@ -1,10 +1,14 @@
-import React from 'react';
+import React, { useCallback, useEffect } from 'react';
-import { NavigationContainer as NavigationContainerBase } from '@react-navigation/native';
+import {
+  NavigationContainer as NavigationContainerBase,
+  ParamListBase,
+  createNavigationContainerRef,
+} from '@react-navigation/native';
 import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { useTheme } from 'react-native-paper';
+import { Snackbar, useTheme } from 'react-native-paper';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import {
   Memes,
   Tags,
@@ -20,13 +24,36 @@ import {
   FloatingActionButton,
   HideableBottomNavigationBar,
 } from './components';
-import { ROUTE, RootStackParamList } from './types';
+import {
+  ROUTE,
+  RootStackParamList,
+  SharedItem,
+  sharedItemToAddMemeFile,
+} from './types';
 import { RootState } from './state';
+import ShareMenu from 'react-native-share-menu';
+import { setSnackbarMessage } from './state/navigation';
+import { StyleSheet } from 'react-native';
+import { useKeyboard } from '@react-native-community/hooks';
+
+const tabNavigatorStyles = StyleSheet.create({
+  snackbar: {
+    marginBottom: 90,
+  },
+  snackbarKeyboard: {
+    marginBottom: 10,
+  },
+});
 
 const TabNavigator = () => {
   const navVisible = useSelector(
     (state: RootState) => state.navigation.navVisible,
   );
+  const snackbarMessage = useSelector(
+    (state: RootState) => state.navigation.snackbarMessage,
+  );
+  const dispatch = useDispatch();
+  const keyboardOpen = useKeyboard().keyboardShown;
 
   const [route, setRoute] = React.useState(ROUTE.MEMES);
   const TabNavigatorBase = createBottomTabNavigator();
@@ -77,6 +104,22 @@ const TabNavigator = () => {
         />
       </TabNavigatorBase.Navigator>
       <FloatingActionButton visible={navVisible && route !== ROUTE.SETTINGS} />
+      <Snackbar
+        visible={!!snackbarMessage}
+        // eslint-disable-next-line unicorn/no-useless-undefined
+        onDismiss={() => dispatch(setSnackbarMessage(undefined))}
+        style={
+          keyboardOpen
+            ? tabNavigatorStyles.snackbarKeyboard
+            : tabNavigatorStyles.snackbar
+        }
+        action={{
+          label: 'Dismiss',
+          // eslint-disable-next-line unicorn/no-useless-undefined
+          onPress: () => dispatch(setSnackbarMessage(undefined)),
+        }}>
+        {snackbarMessage}
+      </Snackbar>
     </>
   );
 };
@@ -84,10 +127,28 @@ const TabNavigator = () => {
 const NavigationContainer = () => {
   const theme = useTheme();
 
+  const navigationRef = createNavigationContainerRef<ParamListBase>();
+
+  const handleShare = useCallback(
+    (item: SharedItem | undefined) => {
+      if (!item) return;
+      const files = sharedItemToAddMemeFile(item);
+      navigationRef.current?.navigate(ROUTE.ADD_MEME, { files });
+    },
+    [navigationRef],
+  );
+
+  useEffect(() => {
+    ShareMenu.getInitialShare(handleShare);
+    const listener = ShareMenu.addNewShareListener(handleShare);
+    return () => listener.remove();
+  }, [handleShare]);
+
   const StackNavigatorBase = createNativeStackNavigator<RootStackParamList>();
 
   return (
     <NavigationContainerBase
+      ref={navigationRef}
       theme={theme.dark ? darkNavigationTheme : lightNavigationTheme}>
       <StackNavigatorBase.Navigator
         screenOptions={{

src/screens/addMeme.tsx

@@ -1,165 +0,0 @@
-import React, { useCallback, useRef, useState } from 'react';
-import { Appbar, Button, useTheme } from 'react-native-paper';
-import { useNavigation } from '@react-navigation/native';
-import { ORIENTATION, useDimensions } from '../contexts';
-import { ScrollView, StyleSheet, View } from 'react-native';
-import { NativeStackScreenProps } from '@react-navigation/native-stack';
-import { useRealm } from '@realm/react';
-import { BSON } from 'realm';
-import { AndroidScoped, FileSystem } from 'react-native-file-access';
-import { useSelector } from 'react-redux';
-import { extension } from 'react-native-mime-types';
-import styles from '../styles';
-import { ROUTE, RootStackParamList } from '../types';
-import { Meme, Tag } from '../database';
-import { RootState } from '../state';
-import { allowedMimeTypes, getMemeType, validateMemeTitle } from '../utilities';
-import { MemeEditor } from '../components';
-import {
-  DocumentPickerResponse,
-  pickSingle,
-} from 'react-native-document-picker';
-
-const addMemeStyles = StyleSheet.create({
-  saveAndAddButton: {
-    flex: 1,
-    marginRight: 5,
-  },
-  saveButton: {
-    flex: 1,
-    marginLeft: 5,
-  },
-});
-
-const AddMeme = ({
-  route,
-}: NativeStackScreenProps<RootStackParamList, ROUTE.ADD_MEME>) => {
-  const { goBack } = useNavigation();
-  const { colors } = useTheme();
-  const { orientation } = useDimensions();
-  const realm = useRealm();
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const storageUri = useSelector(
-    (state: RootState) => state.settings.storageUri,
-  )!;
-
-  const file = useRef(route.params.file);
-
-  const [memeUri, setMemeUri] = useState(file.current.uri);
-  const [memeTitle, setMemeTitle] = useState(validateMemeTitle('New Meme'));
-  const [memeIsFavorite, setMemeIsFavorite] = useState(false);
-  const [memeTags, setMemeTags] = useState(new Map<string, Tag>());
-
-  const [isSaving, setIsSaving] = useState(false);
-  const [isSavingAndAddingAnother, setIsSavingAndAddingAnother] =
-    useState(false);
-
-  const handleSave = useCallback(async () => {
-    const uuid = new BSON.UUID();
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const mimeType = file.current.type!;
-    const memeType = getMemeType(mimeType);
-
-    const fileExtension = extension(mimeType) as string;
-    if (!fileExtension) goBack();
-
-    const uri = AndroidScoped.appendPath(
-      storageUri,
-      `${uuid.toHexString()}.${fileExtension}`,
-    );
-
-    await FileSystem.cp(file.current.uri, uri);
-    const { size } = await FileSystem.stat(uri);
-
-    realm.write(() => {
-      const meme: Meme | undefined = realm.create<Meme>(Meme.schema.name, {
-        id: uuid,
-        type: memeType,
-        uri,
-        mimeType,
-        size,
-        title: memeTitle.parsed,
-        isFavorite: memeIsFavorite,
-        tags: [...memeTags.values()],
-        tagsLength: memeTags.size,
-      });
-
-      memeTags.forEach(tag => {
-        tag.dateModified = new Date();
-        tag.memes.push(meme);
-        tag.memesLength = tag.memes.length;
-      });
-    });
-  }, [goBack, memeIsFavorite, memeTags, memeTitle.parsed, realm, storageUri]);
-
-  return (
-    <>
-      <Appbar.Header>
-        <Appbar.BackAction onPress={() => goBack()} />
-        <Appbar.Content title={'Add Meme'} />
-        <Appbar.Action
-          icon={memeIsFavorite ? 'heart' : 'heart-outline'}
-          onPress={() => setMemeIsFavorite(!memeIsFavorite)}
-        />
-      </Appbar.Header>
-      <ScrollView
-        contentContainerStyle={[
-          orientation === ORIENTATION.PORTRAIT
-            ? styles.paddingVertical
-            : styles.smallPaddingVertical,
-          styles.paddingHorizontal,
-          styles.flexGrow,
-          styles.flexColumnSpaceBetween,
-          { backgroundColor: colors.background },
-        ]}>
-        <View style={[styles.flex, styles.justifyStart]}>
-          <MemeEditor
-            memeUri={memeUri}
-            memeTitle={memeTitle}
-            setMemeTitle={setMemeTitle}
-            memeTags={memeTags}
-            setMemeTags={setMemeTags}
-          />
-        </View>
-        <View style={[styles.flexRow, styles.fullWidth]}>
-          <Button
-            mode="contained-tonal"
-            icon="plus"
-            onPress={async () => {
-              setIsSavingAndAddingAnother(true);
-              await handleSave();
-              setIsSavingAndAddingAnother(false);
-              file.current = (await pickSingle({
-                type: allowedMimeTypes,
-              }).catch(goBack)) as DocumentPickerResponse;
-              setMemeUri(file.current.uri);
-              setMemeTitle(validateMemeTitle('New Meme'));
-              setMemeIsFavorite(false);
-              setMemeTags(new Map<string, Tag>());
-            }}
-            disabled={!memeTitle.valid || isSaving || isSavingAndAddingAnother}
-            loading={isSavingAndAddingAnother}
-            style={addMemeStyles.saveAndAddButton}>
-            Save & Add
-          </Button>
-          <Button
-            mode="contained"
-            icon="floppy"
-            onPress={async () => {
-              setIsSaving(true);
-              await handleSave();
-              setIsSaving(false);
-              goBack();
-            }}
-            disabled={!memeTitle.valid || isSaving || isSavingAndAddingAnother}
-            loading={isSaving}
-            style={addMemeStyles.saveButton}>
-            Save
-          </Button>
-        </View>
-      </ScrollView>
-    </>
-  );
-};
-
-export default AddMeme;

src/screens/addTag.tsx

@@ -1,109 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { ScrollView, StyleSheet, View } from 'react-native';
-import { Appbar, Button, useTheme } from 'react-native-paper';
-import { useNavigation } from '@react-navigation/native';
-import { useRealm } from '@realm/react';
-import styles from '../styles';
-import {
-  generateRandomColor,
-  validateColor,
-  validateTagName,
-} from '../utilities';
-import { ORIENTATION, useDimensions } from '../contexts';
-import { Tag } from '../database';
-import { TagEditor } from '../components';
-
-const addTagStyles = StyleSheet.create({
-  saveAndAddButton: {
-    flex: 1,
-    marginRight: 5,
-  },
-  saveButton: {
-    flex: 1,
-    marginLeft: 5,
-  },
-});
-
-const AddTag = () => {
-  const { goBack } = useNavigation();
-  const { colors } = useTheme();
-  const { orientation } = useDimensions();
-  const realm = useRealm();
-
-  const [tagName, setTagName] = useState(validateTagName('newTag'));
-  const [tagColor, setTagColor] = useState(
-    validateColor(generateRandomColor()),
-  );
-
-  // Although saving tags is instantaneous, we still want to show a loading
-  // indicator to prevent the user from spamming the save button.
-  const [isSavingAndAddingAnother, setIsSavingAndAddingAnother] =
-    useState(false);
-
-  const handleSave = useCallback(() => {
-    realm.write(() => {
-      realm.create(Tag.schema.name, {
-        name: tagName.parsed,
-        color: tagColor.parsed,
-      });
-    });
-  }, [realm, tagColor.parsed, tagName.parsed]);
-
-  return (
-    <>
-      <Appbar.Header>
-        <Appbar.BackAction onPress={() => goBack()} />
-        <Appbar.Content title={'Add Tag'} />
-      </Appbar.Header>
-      <ScrollView
-        contentContainerStyle={[
-          orientation === ORIENTATION.PORTRAIT
-            ? styles.paddingVertical
-            : styles.smallPaddingVertical,
-          styles.paddingHorizontal,
-          styles.flexGrow,
-          styles.flexColumnSpaceBetween,
-          { backgroundColor: colors.background },
-        ]}>
-        <View style={[styles.flex, styles.justifyStart]}>
-          <TagEditor
-            tagName={tagName}
-            setTagName={setTagName}
-            tagColor={tagColor}
-            setTagColor={setTagColor}
-          />
-        </View>
-        <View style={[styles.flexRow, styles.fullWidth]}>
-          <Button
-            mode="contained-tonal"
-            icon="plus"
-            onPress={() => {
-              setIsSavingAndAddingAnother(true);
-              handleSave();
-              setTimeout(() => setIsSavingAndAddingAnother(false), 250);
-              setTagName(validateTagName('newTag'));
-              setTagColor(validateColor(generateRandomColor()));
-            }}
-            disabled={!tagName.valid || isSavingAndAddingAnother}
-            loading={isSavingAndAddingAnother}
-            style={addTagStyles.saveAndAddButton}>
-            Save & Add
-          </Button>
-          <Button
-            mode="contained"
-            icon="floppy"
-            onPress={() => {
-              handleSave();
-              goBack();
-            }}
-            disabled={!tagName.valid || isSavingAndAddingAnother}
-            style={addTagStyles.saveButton}>
-            Save
-          </Button>
-        </View>
-      </ScrollView>
-    </>
-  );
-};
-
-export default AddTag;

src/screens/editMeme.tsx

@@ -1,120 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { ScrollView, View } from 'react-native';
-import { Appbar, Button, useTheme } from 'react-native-paper';
-import { useNavigation } from '@react-navigation/native';
-import { NativeStackScreenProps } from '@react-navigation/native-stack';
-import { useObject, useRealm } from '@realm/react';
-import { BSON } from 'realm';
-import { ORIENTATION, useDimensions } from '../contexts';
-import styles from '../styles';
-import { RootStackParamList, ROUTE } from '../types';
-import { Tag, Meme } from '../database';
-import { deleteMeme, favoriteMeme, validateMemeTitle } from '../utilities';
-import { MemeEditor } from '../components';
-
-const EditMeme = ({
-  route,
-}: NativeStackScreenProps<RootStackParamList, ROUTE.EDIT_MEME>) => {
-  const { goBack } = useNavigation();
-  const { colors } = useTheme();
-  const { orientation } = useDimensions();
-  const realm = useRealm();
-
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const meme = useObject<Meme>(
-    Meme.schema.name,
-    BSON.UUID.createFromHexString(route.params.id),
-  )!;
-
-  const [memeTitle, setMemeTitle] = useState(validateMemeTitle(meme.title));
-  const [memeTags, setMemeTags] = useState(
-    new Map<string, Tag>(meme.tags.map(tag => [tag.id.toHexString(), tag])),
-  );
-
-  const [isSaving, setIsSaving] = useState(false);
-
-  const handleSave = useCallback(() => {
-    realm.write(() => {
-      meme.tags.forEach(tag => {
-        if (!memeTags.has(tag.id.toHexString())) {
-          tag.memes.slice(tag.memes.indexOf(meme), 1);
-          tag.memesLength -= 1;
-          tag.dateModified = new Date();
-        }
-      });
-
-      memeTags.forEach(tag => {
-        if (!meme.tags.some(memeTag => memeTag.id.equals(tag.id))) {
-          tag.memes.push(meme);
-          tag.memesLength = tag.memes.length;
-          tag.dateModified = new Date();
-        }
-      });
-
-      meme.title = memeTitle.parsed;
-      // @ts-expect-error - Realm is a fuck
-      meme.tags = [...memeTags.values()];
-      meme.tagsLength = memeTags.size;
-      meme.dateModified = new Date();
-    });
-  }, [meme, memeTags, memeTitle.parsed, realm]);
-
-  return (
-    <>
-      <Appbar.Header>
-        <Appbar.BackAction onPress={() => goBack()} />
-        <Appbar.Content title={'Edit Meme'} />
-        <Appbar.Action
-          icon={meme.isFavorite ? 'heart' : 'heart-outline'}
-          onPress={() => favoriteMeme(realm, meme)}
-        />
-        <Appbar.Action
-          icon="delete"
-          onPress={async () => {
-            setIsSaving(true);
-            await deleteMeme(realm, meme);
-            setIsSaving(false);
-            goBack();
-          }}
-        />
-      </Appbar.Header>
-      <ScrollView
-        contentContainerStyle={[
-          orientation === ORIENTATION.PORTRAIT
-            ? styles.paddingVertical
-            : styles.smallPaddingVertical,
-          styles.paddingHorizontal,
-          styles.flexGrow,
-          styles.flexColumnSpaceBetween,
-          { backgroundColor: colors.background },
-        ]}>
-        <View style={[styles.flex, styles.justifyStart]}>
-          <MemeEditor
-            memeUri={meme.uri}
-            memeTitle={memeTitle}
-            setMemeTitle={setMemeTitle}
-            memeTags={memeTags}
-            setMemeTags={setMemeTags}
-          />
-        </View>
-        <View style={[styles.flex, styles.justifyEnd]}>
-          <Button
-            mode="contained"
-            icon="floppy"
-            onPress={() => {
-              setIsSaving(true);
-              handleSave();
-              setIsSaving(false);
-              goBack();
-            }}
-            disabled={!memeTitle.valid || isSaving}
-            loading={isSaving}>
-            Save
-          </Button>
-        </View>
-      </ScrollView>
-    </>
-  );
-};
-
-export default EditMeme;

src/screens/editors/addMeme.tsx

@@ -0,0 +1,233 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Appbar, Banner, Button, useTheme } from 'react-native-paper';
+import { useNavigation } from '@react-navigation/native';
+import { ScrollView, View } from 'react-native';
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import { useRealm } from '@realm/react';
+import { BSON } from 'realm';
+import { AndroidScoped, FileSystem } from 'react-native-file-access';
+import { useSelector } from 'react-redux';
+import { extension } from 'react-native-mime-types';
+import { useDeviceOrientation } from '@react-native-community/hooks';
+import { pick } from 'react-native-document-picker';
+import {
+  documentPickerResponseToAddMemeFile,
+  ROUTE,
+  RootStackParamList,
+  StagingMeme,
+} from '../../types';
+import { Meme, Tag } from '../../database';
+import { RootState } from '../../state';
+import {
+  allowedMimeTypes,
+  getMemeTypeFromMimeType,
+  guessMimeType,
+  validateMemeTitle,
+} from '../../utilities';
+import { MemeEditor } from '../../components';
+import editorStyles from './editorStyles';
+
+const AddMeme = ({
+  route,
+}: NativeStackScreenProps<RootStackParamList, ROUTE.ADD_MEME>) => {
+  const { goBack } = useNavigation();
+  const { colors } = useTheme();
+  const orientation = useDeviceOrientation();
+  const realm = useRealm();
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const storageUri = useSelector(
+    (state: RootState) => state.settings.storageUri,
+  )!;
+
+  const [index, setIndex] = useState(0);
+  const files = useRef(route.params.files);
+  const file = useRef(files.current[index]);
+  const isLastFile = index === files.current.length - 1;
+
+  const [isSaving, setIsSaving] = useState(false);
+  const [isSavingAndAddingMore, setIsSavingAndAddingMore] = useState(false);
+
+  const [uri, setUri] = useState<string>();
+  const [mimeType, setMimeType] = useState<string>();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error>();
+  const [staging, setStaging] = useState<StagingMeme>();
+
+  const resetState = useCallback(async (newIndex: number) => {
+    setLoading(true);
+    // eslint-disable-next-line unicorn/no-useless-undefined
+    setError(undefined);
+
+    setIndex(newIndex);
+    file.current = files.current[newIndex];
+
+    setUri(file.current.uri);
+
+    const guessedMimeType = await guessMimeType(file.current.uri);
+    if (!guessedMimeType) {
+      setError(
+        new Error('Could not determine MIME type or file is not supported.'),
+      );
+      return;
+    }
+    setMimeType(guessedMimeType);
+
+    setStaging({
+      title: validateMemeTitle('New Meme'),
+      isFavorite: false,
+      tags: new Map<string, Tag>(),
+    });
+
+    setLoading(false);
+  }, []);
+
+  useEffect(() => void resetState(0), [resetState]);
+
+  const saveMeme = useCallback(async () => {
+    if (!mimeType || !staging) return;
+    const uuid = new BSON.UUID();
+
+    const memeType = getMemeTypeFromMimeType(mimeType);
+    if (!memeType) return;
+
+    const fileExtension = extension(mimeType);
+    if (!fileExtension) return;
+
+    const filename = `${uuid.toHexString()}-${Math.round(
+      Date.now() / 1000,
+    )}.${fileExtension}`;
+    const finalUri = AndroidScoped.appendPath(storageUri, filename);
+
+    await FileSystem.cp(file.current.uri, finalUri);
+    const { size } = await FileSystem.stat(finalUri);
+
+    realm.write(() => {
+      const meme: Meme | undefined = realm.create<Meme>(Meme.schema.name, {
+        id: uuid,
+        memeType,
+        filename,
+        mimeType: mimeType,
+        size,
+        title: staging.title.parsed,
+        isFavorite: staging.isFavorite,
+        tags: [...staging.tags.values()],
+        tagsLength: staging.tags.size,
+      });
+
+      staging.tags.forEach(tag => {
+        tag.dateModified = new Date();
+        tag.memes.push(meme);
+        tag.memesLength = tag.memes.length;
+      });
+    });
+  }, [mimeType, realm, staging, storageUri]);
+
+  const handleSave = useCallback(async () => {
+    setIsSaving(true);
+    await saveMeme();
+    goBack();
+  }, [goBack, saveMeme]);
+
+  const handleSaveAndNext = useCallback(async () => {
+    setIsSaving(true);
+    await saveMeme();
+    setIsSaving(false);
+    await resetState(index + 1);
+  }, [index, resetState, saveMeme]);
+
+  const handleSaveAndAddMore = useCallback(async () => {
+    setIsSavingAndAddingMore(true);
+    await saveMeme();
+    setIsSavingAndAddingMore(false);
+    const response = await pick({
+      type: allowedMimeTypes,
+      allowMultiSelection: true,
+    }).catch(goBack);
+    if (!response) return;
+    files.current = documentPickerResponseToAddMemeFile(response);
+    await resetState(0);
+  }, [goBack, resetState, saveMeme]);
+
+  return (
+    <>
+      <Appbar.Header>
+        <Appbar.BackAction onPress={() => goBack()} />
+        <Appbar.Content title={'Add Meme'} />
+        <Appbar.Action
+          icon={staging?.isFavorite ? 'heart' : 'heart-outline'}
+          disabled={!staging}
+          onPress={() =>
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            setStaging({ ...staging!, isFavorite: !staging!.isFavorite })
+          }
+        />
+      </Appbar.Header>
+      <Banner
+        visible={!!error}
+        actions={[
+          {
+            label: 'Cancel',
+            onPress: goBack,
+          },
+        ]}>
+        {error?.message}
+      </Banner>
+      <ScrollView
+        contentContainerStyle={[
+          editorStyles.scrollView,
+          orientation === 'portrait'
+            ? editorStyles.scrollViewPortrait
+            : editorStyles.scrollViewLandscape,
+          { backgroundColor: colors.background },
+        ]}>
+        <View style={editorStyles.editorView}>
+          <MemeEditor
+            uri={uri}
+            mimeType={mimeType}
+            loading={loading}
+            setLoading={setLoading}
+            error={error}
+            setError={setError}
+            staging={staging}
+            setStaging={setStaging}
+          />
+        </View>
+        <View style={editorStyles.saveButtonView}>
+          <Button
+            mode="contained-tonal"
+            icon="plus"
+            onPress={handleSaveAndAddMore}
+            disabled={
+              loading ||
+              !!error ||
+              isSaving ||
+              isSavingAndAddingMore ||
+              !staging?.title.valid ||
+              !isLastFile
+            }
+            loading={isSavingAndAddingMore}
+            style={editorStyles.saveAndAddButton}>
+            Save & Add More
+          </Button>
+          <Button
+            mode="contained"
+            icon="floppy"
+            onPress={isLastFile ? handleSave : handleSaveAndNext}
+            disabled={
+              loading ||
+              !!error ||
+              isSaving ||
+              isSavingAndAddingMore ||
+              !staging?.title.valid
+            }
+            loading={isSaving}
+            style={editorStyles.saveButton}>
+            {isLastFile ? 'Save' : 'Save & Next'}
+          </Button>
+        </View>
+      </ScrollView>
+    </>
+  );
+};
+
+export default AddMeme;

src/screens/editors/addTag.tsx

@@ -0,0 +1,97 @@
+import React, { useCallback, useState } from 'react';
+import { ScrollView, View } from 'react-native';
+import { Appbar, Button, useTheme } from 'react-native-paper';
+import { useNavigation } from '@react-navigation/native';
+import { useRealm } from '@realm/react';
+import { useDeviceOrientation } from '@react-native-community/hooks';
+import {
+  generateRandomColor,
+  validateColor,
+  validateTagName,
+} from '../../utilities';
+import { Tag } from '../../database';
+import { TagEditor } from '../../components';
+import editorStyles from './editorStyles';
+import { StagingTag } from '../../types';
+
+const AddTag = () => {
+  const { goBack } = useNavigation();
+  const { colors } = useTheme();
+  const orientation = useDeviceOrientation();
+  const realm = useRealm();
+
+  const [staging, setStaging] = useState<StagingTag>({
+    name: validateTagName('newTag'),
+    color: validateColor(generateRandomColor()),
+  });
+
+  // Although saving tags is instantaneous, we still want to show a loading
+  // indicator to prevent the user from spamming the save button.
+  const [isSavingAndAddingMore, setIsSavingAndAddingMore] = useState(false);
+
+  const saveTag = useCallback(() => {
+    realm.write(() => {
+      realm.create(Tag.schema.name, {
+        name: staging.name.parsed,
+        color: staging.color.parsed,
+      });
+    });
+  }, [realm, staging.color.parsed, staging.name.parsed]);
+
+  const handleSave = useCallback(() => {
+    saveTag();
+    goBack();
+  }, [goBack, saveTag]);
+
+  const handleSaveAndAddMore = useCallback(() => {
+    setIsSavingAndAddingMore(true);
+    saveTag();
+    setTimeout(() => setIsSavingAndAddingMore(false), 250);
+    setStaging({
+      name: validateTagName('newTag'),
+      color: validateColor(generateRandomColor()),
+    });
+  }, [saveTag]);
+
+  return (
+    <>
+      <Appbar.Header>
+        <Appbar.BackAction onPress={() => goBack()} />
+        <Appbar.Content title={'Add Tag'} />
+      </Appbar.Header>
+      <ScrollView
+        contentContainerStyle={[
+          editorStyles.scrollView,
+          orientation === 'portrait'
+            ? editorStyles.scrollViewPortrait
+            : editorStyles.scrollViewLandscape,
+          { backgroundColor: colors.background },
+        ]}>
+        <View style={editorStyles.editorView}>
+          <TagEditor staging={staging} setStaging={setStaging} />
+        </View>
+        <View style={editorStyles.saveButtonView}>
+          <Button
+            mode="contained-tonal"
+            icon="plus"
+            onPress={handleSaveAndAddMore}
+            disabled={!staging.name.valid || isSavingAndAddingMore}
+            loading={isSavingAndAddingMore}
+            style={editorStyles.saveAndAddButton}>
+            Save & Add
+          </Button>
+          <Button
+            mode="contained"
+            icon="floppy"
+            onPress={handleSave}
+            disabled={!staging.name.valid || isSavingAndAddingMore}
+            style={editorStyles.saveButton}>
+            Save
+          </Button>
+        </View>
+      </ScrollView>
+    </>
+  );
+};
+
+export default AddTag;

src/screens/editors/editMeme.tsx

@@ -0,0 +1,232 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { ScrollView, View } from 'react-native';
+import { Appbar, Banner, Button, useTheme } from 'react-native-paper';
+import { useNavigation } from '@react-navigation/native';
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import { useObject, useRealm } from '@realm/react';
+import { useDeviceOrientation } from '@react-native-community/hooks';
+import { BSON } from 'realm';
+import { RootStackParamList, ROUTE, StagingMeme } from '../../types';
+import { pickSingle } from 'react-native-document-picker';
+import { AndroidScoped, FileSystem } from 'react-native-file-access';
+import { extension } from 'react-native-mime-types';
+import { useSelector } from 'react-redux';
+import { Meme } from '../../database';
+import {
+  allowedMimeTypes,
+  deleteMeme,
+  favoriteMeme,
+  getMemeTypeFromMimeType,
+  guessMimeType,
+  noOp,
+  validateMemeTitle,
+} from '../../utilities';
+import { MemeEditor } from '../../components';
+import editorStyles from './editorStyles';
+import { RootState } from '../../state';
+
+const EditMeme = ({
+  route,
+}: NativeStackScreenProps<RootStackParamList, ROUTE.EDIT_MEME>) => {
+  const { goBack } = useNavigation();
+  const { colors } = useTheme();
+  const orientation = useDeviceOrientation();
+  const realm = useRealm();
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const storageUri = useSelector(
+    (state: RootState) => state.settings.storageUri,
+  )!;
+
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const meme = useObject<Meme>(
+    Meme.schema.name,
+    BSON.UUID.createFromHexString(route.params.id),
+  )!;
+
+  const [isSaving, setIsSaving] = useState(false);
+
+  const [uri, setUri] = useState<string>();
+  const [mimeType, setMimeType] = useState<string>();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error>();
+  const [staging, setStaging] = useState<StagingMeme>();
+  const originalStaging = useRef<StagingMeme>();
+
+  const resetState = useCallback(
+    async (newUri: string) => {
+      setLoading(true);
+      // eslint-disable-next-line unicorn/no-useless-undefined
+      setError(undefined);
+
+      setUri(newUri);
+
+      const guessedMimeType = await guessMimeType(newUri);
+      if (!guessedMimeType) {
+        setError(
+          new Error('Could not determine MIME type or file is not supported.'),
+        );
+        return;
+      }
+      setMimeType(guessedMimeType);
+
+      const stagingMeme = {
+        title: validateMemeTitle(meme.title),
+        isFavorite: meme.isFavorite,
+        tags: new Map(meme.tags.map(tag => [tag.id.toHexString(), tag])),
+      };
+
+      setStaging(stagingMeme);
+      originalStaging.current = stagingMeme;
+
+      setLoading(false);
+    },
+    [meme.isFavorite, meme.tags, meme.title],
+  );
+
+  useEffect(
+    () => void resetState(AndroidScoped.appendPath(storageUri, meme.filename)),
+    [meme.filename, resetState, storageUri],
+  );
+
+  const handleSave = useCallback(() => {
+    if (!mimeType || !staging) return;
+
+    setIsSaving(true);
+
+    realm.write(() => {
+      meme.tags.forEach(tag => {
+        if (!staging.tags.has(tag.id.toHexString())) {
+          tag.memes.slice(tag.memes.indexOf(meme), 1);
+          tag.memesLength -= 1;
+          tag.dateModified = new Date();
+        }
+      });
+
+      staging.tags.forEach(tag => {
+        if (!meme.tags.some(memeTag => memeTag.id.equals(tag.id))) {
+          tag.memes.push(meme);
+          tag.memesLength = tag.memes.length;
+          tag.dateModified = new Date();
+        }
+      });
+
+      meme.title = staging.title.parsed;
+      // @ts-expect-error - Realm is a fuck
+      meme.tags = [...staging.tags.values()];
+      meme.tagsLength = staging.tags.size;
+      meme.dateModified = new Date();
+    });
+
+    goBack();
+  }, [goBack, meme, mimeType, realm, staging]);
+
+  const handleDelete = useCallback(async () => {
+    setIsSaving(true);
+    await deleteMeme(realm, storageUri, meme);
+    goBack();
+  }, [goBack, meme, realm, storageUri]);
+
+  const handleFixUri = useCallback(async () => {
+    const file = await pickSingle({ type: allowedMimeTypes }).catch(noOp);
+    if (!file) return;
+
+    const guessedMimeType = await guessMimeType(file.uri, file.type);
+    if (!guessedMimeType) {
+      setError(
+        new Error('Could not determine MIME type or file is not supported.'),
+      );
+      return;
+    }
+
+    const memeType = getMemeTypeFromMimeType(guessedMimeType);
+    if (!memeType) return;
+
+    const fileExtension = extension(guessedMimeType);
+    if (!fileExtension) return;
+
+    const filename = `${meme.id.toHexString()}-${
+      Date.now() / 1000
+    }.${fileExtension}`;
+    const newUri = AndroidScoped.appendPath(storageUri, filename);
+
+    await FileSystem.cp(file.uri, newUri);
+    const { size } = await FileSystem.stat(newUri);
+
+    realm.write(() => {
+      meme.filename = filename;
+      meme.memeType = memeType;
+      meme.mimeType = guessedMimeType;
+      meme.size = size;
+    });
+
+    void resetState(newUri);
+  }, [meme, realm, resetState, storageUri]);
+
+  return (
+    <>
+      <Appbar.Header>
+        <Appbar.BackAction onPress={() => goBack()} />
+        <Appbar.Content title={'Edit Meme'} />
+        <Appbar.Action
+          icon={meme.isFavorite ? 'heart' : 'heart-outline'}
+          onPress={() => favoriteMeme(realm, meme)}
+        />
+        <Appbar.Action icon="delete" onPress={handleDelete} />
+      </Appbar.Header>
+      <Banner
+        visible={!!error}
+        actions={[
+          {
+            label: 'Fix URI',
+            onPress: handleFixUri,
+          },
+          {
+            label: 'Delete Meme',
+            onPress: handleDelete,
+          },
+        ]}>
+        {error?.message}
+      </Banner>
+      <ScrollView
+        contentContainerStyle={[
+          editorStyles.scrollView,
+          orientation === 'portrait'
+            ? editorStyles.scrollViewPortrait
+            : editorStyles.scrollViewLandscape,
+          { backgroundColor: colors.background },
+        ]}>
+        <View style={editorStyles.editorView}>
+          <MemeEditor
+            uri={uri}
+            mimeType={mimeType}
+            loading={loading}
+            setLoading={setLoading}
+            error={error}
+            setError={setError}
+            staging={staging}
+            setStaging={setStaging}
+          />
+        </View>
+        <View style={editorStyles.saveButtonView}>
+          <Button
+            mode="contained"
+            icon="floppy"
+            onPress={handleSave}
+            disabled={
+              loading ||
+              !!error ||
+              isSaving ||
+              !staging?.title.valid ||
+              originalStaging.current === staging
+            }
+            loading={isSaving}
+            style={editorStyles.soloSaveButton}>
+            Save
+          </Button>
+        </View>
+      </ScrollView>
+    </>
+  );
+};
+
+export default EditMeme;

src/screens/editors/editTag.tsx

@@ -1,23 +1,23 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { ScrollView, View } from 'react-native';
 import { Appbar, Button, useTheme } from 'react-native-paper';
 import { useNavigation } from '@react-navigation/native';
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { BSON } from 'realm';
 import { useObject, useRealm } from '@realm/react';
-import { TagEditor } from '../components';
+import { useDeviceOrientation } from '@react-native-community/hooks';
-import styles from '../styles';
+import { TagEditor } from '../../components';
-import { ORIENTATION, useDimensions } from '../contexts';
+import { ROUTE, RootStackParamList, StagingTag } from '../../types';
-import { ROUTE, RootStackParamList } from '../types';
+import { Tag } from '../../database';
-import { Tag } from '../database';
+import { deleteTag, validateColor, validateTagName } from '../../utilities';
-import { deleteTag, validateColor, validateTagName } from '../utilities';
+import editorStyles from './editorStyles';
 
 const EditTag = ({
   route,
 }: NativeStackScreenProps<RootStackParamList, ROUTE.EDIT_TAG>) => {
   const { goBack } = useNavigation();
   const { colors } = useTheme();
-  const { orientation } = useDimensions();
+  const orientation = useDeviceOrientation();
   const realm = useRealm();
 
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -26,16 +26,21 @@ const EditTag = ({
     BSON.UUID.createFromHexString(route.params.id),
   )!;
 
-  const [tagName, setTagName] = useState(validateTagName(tag.name));
+  const [staging, setStaging] = useState<StagingTag>({
-  const [tagColor, setTagColor] = useState(validateColor(tag.color));
+    name: validateTagName(tag.name),
+    color: validateColor(tag.color),
+  });
+  const originalStaging = useRef<StagingTag>(staging);
 
   const handleSave = useCallback(() => {
     realm.write(() => {
-      tag.name = tagName.parsed;
+      tag.name = staging.name.parsed;
-      tag.color = tagColor.parsed;
+      tag.color = staging.color.parsed;
       tag.dateModified = new Date();
     });
-  }, [realm, tag, tagColor.parsed, tagName.parsed]);
+
+    goBack();
+  }, [goBack, realm, staging.color.parsed, staging.name.parsed, tag]);
 
   return (
     <>
@@ -52,32 +57,27 @@ const EditTag = ({
       </Appbar.Header>
       <ScrollView
         contentContainerStyle={[
-          orientation === ORIENTATION.PORTRAIT
+          editorStyles.scrollView,
-            ? styles.paddingVertical
+          orientation === 'portrait'
-            : styles.smallPaddingVertical,
+            ? editorStyles.scrollViewPortrait
-          styles.paddingHorizontal,
+            : editorStyles.scrollViewLandscape,
-          styles.flexGrow,
-          styles.flexColumnSpaceBetween,
           { backgroundColor: colors.background },
         ]}
         nestedScrollEnabled>
-        <View style={[styles.flex, styles.justifyStart]}>
+        <View style={editorStyles.editorView}>
-          <TagEditor
+          <TagEditor staging={staging} setStaging={setStaging} />
-            tagName={tagName}
-            setTagName={setTagName}
-            tagColor={tagColor}
-            setTagColor={setTagColor}
-          />
         </View>
-        <View style={[styles.flex, styles.justifyEnd]}>
+        <View style={editorStyles.saveButtonView}>
           <Button
             mode="contained"
             icon="floppy"
-            onPress={() => {
+            onPress={handleSave}
-              handleSave();
+            disabled={
-              goBack();
+              !staging.name.valid ||
-            }}
+              !staging.color.valid ||
-            disabled={!tagName.valid || !tagColor.valid}>
+              originalStaging.current === staging
+            }
+            style={editorStyles.soloSaveButton}>
             Save
           </Button>
         </View>

src/screens/editors/editorStyles.ts

@@ -0,0 +1,37 @@
+import { StyleSheet } from 'react-native';
+
+const editorStyles = StyleSheet.create({
+  scrollView: {
+    flexGrow: 1,
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    paddingHorizontal: '4%',
+  },
+  scrollViewPortrait: {
+    paddingVertical: '4%',
+  },
+  scrollViewLandscape: {
+    paddingVertical: '2%',
+  },
+  editorView: {
+    flex: 1,
+    justifyContent: 'flex-start',
+  },
+  saveButtonView: {
+    flexDirection: 'row',
+    width: '100%',
+  },
+  saveAndAddButton: {
+    flex: 1,
+    marginRight: 5,
+  },
+  saveButton: {
+    flex: 1,
+    marginLeft: 5,
+  },
+  soloSaveButton: {
+    flex: 1,
+  },
+});
+
+export default editorStyles;

src/screens/index.ts

@@ -1,7 +1,7 @@
-export { default as AddMeme } from './addMeme';
+export { default as AddMeme } from './editors/addMeme';
-export { default as AddTag } from './addTag';
+export { default as AddTag } from './editors/addTag';
-export { default as EditMeme } from './editMeme';
+export { default as EditMeme } from './editors/editMeme';
-export { default as EditTag } from './editTag';
+export { default as EditTag } from './editors/editTag';
 export { default as Memes } from './memes';
 export { default as MemeView } from './memeView';
 export { default as Settings } from './settings';

src/screens/memeView.tsx

@@ -1,13 +1,20 @@
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { useQuery, useRealm } from '@realm/react';
 import { FlashList } from '@shopify/flash-list';
 import { Appbar, Portal, Snackbar } from 'react-native-paper';
-import { RootStackParamList, ROUTE } from '../types';
+import { useSafeAreaFrame } from 'react-native-safe-area-context';
+import { NavigationProp, useNavigation } from '@react-navigation/native';
+import { useSelector } from 'react-redux';
+import {
+  memesSortQuery,
+  RootStackParamList,
+  ROUTE,
+  SORT_DIRECTION,
+} from '../types';
 import { Meme } from '../database';
-import { useDimensions } from '../contexts';
+import { LoadingView, MemeViewItem } from '../components';
-import { MemeViewItem } from '../components';
 import {
   copyMeme,
   deleteMeme,
@@ -16,115 +23,157 @@ import {
   multipleIdQuery,
   shareMeme,
 } from '../utilities';
-import { NavigationProp, useNavigation } from '@react-navigation/native';
+import { RootState } from '../state';
-import styles from '../styles';
 
 const memeViewStyles = StyleSheet.create({
+  // eslint-disable-next-line react-native/no-color-literals
+  header: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 1,
+    backgroundColor: 'transparent',
+  },
+  // eslint-disable-next-line react-native/no-color-literals
   footer: {
     position: 'absolute',
     bottom: 0,
     left: 0,
     right: 0,
-    height: 80,
+    backgroundColor: 'transparent',
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
   },
   snackbar: {
-    marginBottom: 90,
+    marginBottom: 64,
   },
 });
 
 const MemeView = ({
   route,
 }: NativeStackScreenProps<RootStackParamList, ROUTE.MEME_VIEW>) => {
-  const { orientation, dimensions } = useDimensions();
+  const { height, width } = useSafeAreaFrame();
   const navigation = useNavigation<NavigationProp<RootStackParamList>>();
+  const sort = useSelector((state: RootState) => state.memes.sort);
+  const sortDirection = useSelector(
+    (state: RootState) => state.memes.sortDirection,
+  );
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const storageUri = useSelector(
+    (state: RootState) => state.settings.storageUri,
+  )!;
   const realm = useRealm();
 
-  const { ids } = route.params;
+  const [isBlocked, setIsBlocked] = useState(false);
-  const [index, setIndex] = useState(route.params.index);
+  const [snackbarMessage, setSnackbarMessage] = useState<string>();
-
-  const [snackbarVisible, setSnackbarVisible] = useState(false);
-  const [snackbarMessage, setSnackbarMessage] = useState('');
 
   const flashListRef = useRef<FlashList<Meme>>(null);
 
+  const index = useRef(route.params.index);
   const memes = useQuery<Meme>(Meme.schema.name, collectionIn => {
-    return collectionIn.filtered(multipleIdQuery(ids));
+    return collectionIn
+      .filtered(multipleIdQuery(route.params.ids))
+      .sorted(
+        memesSortQuery(sort),
+        sortDirection === SORT_DIRECTION.DESCENDING,
+      );
   });
 
-  if (memes.length === 0) return <></>;
+  useEffect(() => {
+    if (memes.length === 0) navigation.goBack();
+    if (index.current >= memes.length) {
+      index.current = memes.length - 1;
+      flashListRef.current?.scrollToIndex({ index: memes.length - 1 });
+    }
+  }, [index, memes.length, navigation]);
 
   return (
     <>
-      <Appbar.Header>
+      <Appbar.Header style={memeViewStyles.header}>
         <Appbar.BackAction onPress={() => navigation.goBack()} />
-        <Appbar.Content title={memes[index].title} />
+        {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
+        <Appbar.Content title={memes[index.current]?.title} />
       </Appbar.Header>
-      <View>
+      <FlashList
-        <FlashList
+        ref={flashListRef}
-          ref={flashListRef}
+        key={height}
-          key={orientation}
+        data={memes}
-          data={memes}
+        initialScrollIndex={index.current}
-          initialScrollIndex={index}
+        onScroll={event => {
-          onScroll={event => {
+          const newIndex = Math.round(
-            const newIndex = Math.round(
+            event.nativeEvent.contentOffset.x /
-              event.nativeEvent.contentOffset.x /
+              event.nativeEvent.layoutMeasurement.width,
-                event.nativeEvent.layoutMeasurement.width,
+          );
-            );
+          if (newIndex !== index.current) index.current = newIndex;
-            if (newIndex !== index) setIndex(newIndex);
+        }}
-          }}
+        estimatedItemSize={width}
-          estimatedItemSize={dimensions.width}
+        estimatedListSize={{ height, width }}
-          pagingEnabled
+        pagingEnabled
-          horizontal
+        horizontal
-          showsHorizontalScrollIndicator={false}
+        showsHorizontalScrollIndicator={false}
-          estimatedListSize={{
+        renderItem={({ item }) =>
-            height: dimensions.height - 160,
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            width: dimensions.width,
+          item ? (
-          }}
+            <MemeViewItem meme={item} />
-          renderItem={({ item: meme }) => <MemeViewItem meme={meme} />}
+          ) : (
-        />
+            <LoadingView style={{ width, height }} />
-      </View>
+          )
-      <Appbar style={[memeViewStyles.footer, styles.flexRowSpaceEvenly]}>
+        }
+        scrollEnabled={!isBlocked}
+      />
+      <Appbar style={memeViewStyles.footer}>
         <Appbar.Action
-          icon={memes[index].isFavorite ? 'heart' : 'heart-outline'}
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-          onPress={() => favoriteMeme(realm, memes[index])}
+          icon={memes[index.current]?.isFavorite ? 'heart' : 'heart-outline'}
+          onPress={() => favoriteMeme(realm, memes[index.current])}
+          disabled={isBlocked}
+        />
+        <Appbar.Action
+          icon="share"
+          onPress={() => {
+            shareMeme(realm, storageUri, memes[index.current]).catch(() =>
+              setSnackbarMessage('Failed to share meme!'),
+            );
+          }}
+          disabled={isBlocked}
         />
-        <Appbar.Action icon="share" onPress={() => shareMeme(memes[index])} />
         <Appbar.Action
           icon="content-copy"
-          onPress={() => {
+          onPress={async () => {
-            copyMeme(memes[index]);
+            await copyMeme(realm, storageUri, memes[index.current])
-            setSnackbarMessage('Meme copied!');
+              .then(() => setSnackbarMessage('Meme copied!'))
-            setSnackbarVisible(true);
+              .catch(() => setSnackbarMessage('Failed to copy meme!'));
           }}
+          disabled={isBlocked}
         />
         <Appbar.Action
           icon="pencil"
           onPress={() => {
-            editMeme(navigation, memes[index]);
+            editMeme(navigation, memes[index.current]);
           }}
+          disabled={isBlocked}
         />
         <Appbar.Action
           icon="delete"
-          onPress={() => {
+          onPress={async () => {
-            if (index === memes.length - 1) {
+            setIsBlocked(true);
-              setIndex(index - 1);
+            await deleteMeme(realm, storageUri, memes[index.current]);
-              flashListRef.current?.scrollToIndex({
+            setIsBlocked(false);
-                index: index - 1,
-              });
-            }
-            void deleteMeme(realm, memes[index]);
-            if (memes.length === 1) navigation.goBack();
           }}
+          disabled={isBlocked}
         />
       </Appbar>
       <Portal>
         <Snackbar
-          visible={snackbarVisible}
+          visible={!!snackbarMessage}
-          onDismiss={() => setSnackbarVisible(false)}
+          // eslint-disable-next-line unicorn/no-useless-undefined
+          onDismiss={() => setSnackbarMessage(undefined)}
           style={memeViewStyles.snackbar}
           action={{
             label: 'Dismiss',
-            onPress: () => setSnackbarVisible(false),
+            // eslint-disable-next-line unicorn/no-useless-undefined
+            onPress: () => setSnackbarMessage(undefined),
           }}>
           {snackbarMessage}
         </Snackbar>

src/screens/memes.tsx

@@ -3,7 +3,9 @@ import {
   BackHandler,
   NativeScrollEvent,
   NativeSyntheticEvent,
+  StyleSheet,
   View,
+  useWindowDimensions,
 } from 'react-native';
 import { useQuery } from '@realm/react';
 import { useTheme } from 'react-native-paper';
@@ -15,16 +17,26 @@ import {
   useNavigation,
 } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import styles from '../styles';
 import { ROUTE, SORT_DIRECTION, memesSortQuery } from '../types';
 import { RootState, setNavVisible } from '../state';
 import { Meme } from '../database';
 import { HideableHeader, MemesHeader, MemesList } from '../components';
+import { useDeviceOrientation } from '@react-native-community/hooks';
+
+const memesStyles = StyleSheet.create({
+  listView: {
+    paddingHorizontal: '4%',
+    width: '100%',
+    height: '100%',
+  },
+});
 
 const Memes = () => {
   const { colors } = useTheme();
   const { navigate } =
     useNavigation<NativeStackNavigationProp<ParamListBase>>();
+  const { height } = useWindowDimensions();
+  const orientation = useDeviceOrientation();
   const sort = useSelector((state: RootState) => state.memes.sort);
   const sortDirection = useSelector(
     (state: RootState) => state.memes.sortDirection,
@@ -36,6 +48,9 @@ const Memes = () => {
   const navVisisble = useSelector(
     (state: RootState) => state.navigation.navVisible,
   );
+  const autoFocus = useSelector(
+    (state: RootState) => state.settings.autoFocusMemesSearch,
+  );
   const dispatch = useDispatch();
 
   const [flashListPadding, setFlashListPadding] = useState(0);
@@ -65,7 +80,7 @@ const Memes = () => {
         .join(' OR ');
 
       if (favoritesOnly) collection = collection.filtered('isFavorite == true');
-      if (filter) collection = collection.filtered('type == $0', filter);
+      if (filter) collection = collection.filtered('memeType == $0', filter);
       if (tags && tagsQuery) {
         collection = collection.filtered(tagsQuery, ...tags);
       }
@@ -83,7 +98,7 @@ const Memes = () => {
     [sort, sortDirection, favoritesOnly, filter, search],
   );
 
-  const [scrollOffset, setScrollOffset] = useState(0);
+  const previousOffset = useRef(0);
 
   const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
     const currentOffset = event.nativeEvent.contentOffset.y;
@@ -91,13 +106,13 @@ const Memes = () => {
     if (currentOffset <= 150) {
       dispatch(setNavVisible(true));
     } else {
-      const diff = currentOffset - scrollOffset;
+      const diff = currentOffset - previousOffset.current;
-      if (Math.abs(diff) > 50) {
+      if (Math.abs(diff) > 35) {
         dispatch(setNavVisible(diff < 0));
       }
     }
 
-    setScrollOffset(currentOffset);
+    previousOffset.current = currentOffset;
   };
 
   const flashListRef = useRef<FlashList<Meme>>(null);
@@ -105,7 +120,7 @@ const Memes = () => {
   useFocusEffect(
     useCallback(() => {
       const handleBackPress = () => {
-        if (scrollOffset <= 0) return false;
+        if (previousOffset.current <= 0) return false;
         flashListRef.current?.scrollToOffset({ offset: 0, animated: true });
         return true;
       };
@@ -114,7 +129,7 @@ const Memes = () => {
 
       return () =>
         BackHandler.removeEventListener('hardwareBackPress', handleBackPress);
-    }, [scrollOffset]),
+    }, []),
   );
 
   useFocusEffect(
@@ -124,34 +139,36 @@ const Memes = () => {
   );
 
   return (
-    <View
+    <>
-      style={[
-        styles.paddingHorizontal,
-        styles.fullSize,
-        { backgroundColor: colors.background },
-      ]}>
       <HideableHeader visible={navVisisble}>
         <MemesHeader
           search={search}
           setSearch={setSearch}
+          autoFocus={autoFocus}
           onLayout={event => {
-            setFlashListPadding(event.nativeEvent.layout.height);
+            setFlashListPadding(
+              event.nativeEvent.layout.height +
+                height * (orientation === 'portrait' ? 0.02 : 0.04),
+            );
           }}
         />
       </HideableHeader>
-      <MemesList
+      <View
-        memes={memes}
+        style={[memesStyles.listView, { backgroundColor: colors.background }]}>
-        flashListRef={flashListRef}
+        <MemesList
-        flashListPadding={flashListPadding}
+          memes={memes}
-        handleScroll={handleScroll}
+          flashListRef={flashListRef}
-        focusMeme={(index: number) => {
+          flashListPadding={flashListPadding}
-          navigate(ROUTE.MEME_VIEW, {
+          handleScroll={handleScroll}
-            ids: memes.map(meme => meme.id.toHexString()),
+          focusMeme={(index: number) => {
-            index,
+            navigate(ROUTE.MEME_VIEW, {
-          });
+              ids: memes.map(meme => meme.id.toHexString()),
-        }}
+              index,
-      />
+            });
-    </View>
+          }}
+        />
+      </View>
+    </>
   );
 };
 

src/screens/settings.tsx

@@ -5,161 +5,191 @@ import {
   List,
   Portal,
   SegmentedButtons,
-  Snackbar,
   Switch,
   Text,
   useTheme,
 } from 'react-native-paper';
-import { openDocumentTree } from 'react-native-scoped-storage';
 import { useDispatch, useSelector } from 'react-redux';
 import type {} from 'redux-thunk/extend-redux';
-import styles from '../styles';
 import {
   RootState,
+  setAutofocusMemesSearch,
+  setAutofocusTagsSearch,
   setGridColumns,
   setMasonryColumns,
   setNoMedia,
-  setStorageUri,
+  setSnackbarMessage,
 } from '../state';
-import { ORIENTATION, useDimensions } from '../contexts';
+import StorageLocationChangeDialog from '../components/storageLocationChangeDialog';
+import { useRealm } from '@realm/react';
+import { FileSystem, FileStat } from 'react-native-file-access';
+import { Meme } from '../database';
 
 const settingsStyles = StyleSheet.create({
-  snackbar: {
+  scrollView: {
-    marginBottom: 90,
+    paddingHorizontal: '4%',
   },
   marginBottom: {
     marginBottom: 15,
   },
+  columnSegmentedButtons: {
+    marginBottom: 15,
+    paddingHorizontal: '2%',
+  },
+  autoFocusSwitch: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: '2%',
+    marginBottom: 15,
+  },
+  hideMediaSwitch: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: '2%',
+  },
 });
 
 const Settings = () => {
   const { colors } = useTheme();
-  const { orientation } = useDimensions();
   const noMedia = useSelector((state: RootState) => state.settings.noMedia);
+  const autoFocusMemesSearch = useSelector(
+    (state: RootState) => state.settings.autoFocusMemesSearch,
+  );
+  const autoFocusTagsSearch = useSelector(
+    (state: RootState) => state.settings.autoFocusTagsSearch,
+  );
   const masonryColumns = useSelector(
     (state: RootState) => state.settings.masonryColumns,
   );
   const gridColumns = useSelector(
     (state: RootState) => state.settings.gridColumns,
   );
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const storageUri = useSelector(
+    (state: RootState) => state.settings.storageUri,
+  )!;
   const dispatch = useDispatch();
+  const realm = useRealm();
 
-  const [isOptimizingDatabase, setIsOptimizingDatabase] = useState(false);
+  const [
-  const [snackbarVisible, setSnackbarVisible] = useState(false);
+    storageLocationChangeDialogVisible,
-  const [snackbarMessage, setSnackbarMessage] = useState('');
+    setStorageLocationChangeDialogVisible,
+  ] = useState(false);
 
-  const optimizeDatabase = () => {
+  const refreshMemeMetadata = async () => {
-    setIsOptimizingDatabase(true);
+    const stat = await FileSystem.statDir(storageUri);
-    // TODO: clean up missing / extra files
+
-    setSnackbarMessage('Database optimized!');
+    const statMap = new Map<string, FileStat>();
-    setSnackbarVisible(true);
+    stat.forEach(s => statMap.set(s.filename, s));
-    setIsOptimizingDatabase(false);
+
+    const memes = realm.objects<Meme>(Meme.schema.name);
+
+    realm.write(() => {
+      memes.forEach(meme => {
+        const fileStat = statMap.get(meme.filename);
+        meme.size = fileStat?.size ?? 0;
+      });
+    });
+
+    dispatch(setSnackbarMessage('Meme metadata refreshed.'));
   };
 
   return (
     <>
       <ScrollView
         contentContainerStyle={[
-          orientation === ORIENTATION.PORTRAIT
+          settingsStyles.scrollView,
-            ? styles.paddingTop
-            : styles.smallPaddingTop,
-          styles.paddingHorizontal,
           { backgroundColor: colors.background },
         ]}>
-        <View>
-          <List.Section>
-            <List.Subheader>Views</List.Subheader>
-            <Text
-              style={[
-                settingsStyles.marginBottom,
-                styles.smallPaddingHorizontal,
-              ]}>
-              Masonry Columns
-            </Text>
-            <SegmentedButtons
-              value={masonryColumns.toString()}
-              onValueChange={value => {
-                void dispatch(
-                  setMasonryColumns(Number.parseInt(value) as 1 | 2 | 3 | 4),
-                );
-              }}
-              buttons={[
-                { label: '1', value: '1' },
-                { label: '2', value: '2' },
-                { label: '3', value: '3' },
-                { label: '4', value: '4' },
-              ]}
-              style={settingsStyles.marginBottom}
-            />
-            <Text
-              style={[
-                settingsStyles.marginBottom,
-                styles.smallPaddingHorizontal,
-              ]}>
-              Grid Columns
-            </Text>
-            <SegmentedButtons
-              value={gridColumns.toString()}
-              onValueChange={value => {
-                void dispatch(
-                  setGridColumns(Number.parseInt(value) as 1 | 2 | 3 | 4),
-                );
-              }}
-              buttons={[
-                { label: '1', value: '1' },
-                { label: '2', value: '2' },
-                { label: '3', value: '3' },
-                { label: '4', value: '4' },
-              ]}
-            />
-          </List.Section>
-          <List.Section>
-            <List.Subheader>Media Storage</List.Subheader>
-            <Button
-              mode="elevated"
-              style={settingsStyles.marginBottom}
-              onPress={async () => {
-                const { uri } = await openDocumentTree(true);
-                void dispatch(setStorageUri(uri));
-              }}>
-              Change External Storage Path
-            </Button>
-            <View
-              style={[
-                styles.flexRowSpaceBetween,
-                styles.smallPaddingHorizontal,
-              ]}>
-              <Text>Hide media from gallery</Text>
-              <Switch
-                value={noMedia}
-                onValueChange={value => {
-                  void dispatch(setNoMedia(value));
-                }}
-              />
-            </View>
-          </List.Section>
-        </View>
         <List.Section>
-          <List.Subheader>Database</List.Subheader>
+          <List.Subheader>Views</List.Subheader>
+          <View style={settingsStyles.autoFocusSwitch}>
+            <Text>Autofocus Memes Searchbar</Text>
+            <Switch
+              value={autoFocusMemesSearch}
+              onValueChange={value => {
+                void dispatch(setAutofocusMemesSearch(value));
+              }}
+            />
+          </View>
+          <View style={settingsStyles.autoFocusSwitch}>
+            <Text>Autofocus Tags Searchbar</Text>
+            <Switch
+              value={autoFocusTagsSearch}
+              onValueChange={value => {
+                void dispatch(setAutofocusTagsSearch(value));
+              }}
+            />
+          </View>
+          <Text style={settingsStyles.columnSegmentedButtons}>
+            Masonry Columns
+          </Text>
+          <SegmentedButtons
+            value={masonryColumns.toString()}
+            onValueChange={value => {
+              void dispatch(
+                setMasonryColumns(Number.parseInt(value) as 1 | 2 | 3 | 4),
+              );
+            }}
+            buttons={[
+              { label: '1', value: '1' },
+              { label: '2', value: '2' },
+              { label: '3', value: '3' },
+              { label: '4', value: '4' },
+            ]}
+            style={settingsStyles.marginBottom}
+          />
+          <Text style={settingsStyles.columnSegmentedButtons}>
+            Grid Columns
+          </Text>
+          <SegmentedButtons
+            value={gridColumns.toString()}
+            onValueChange={value => {
+              void dispatch(
+                setGridColumns(Number.parseInt(value) as 1 | 2 | 3 | 4),
+              );
+            }}
+            buttons={[
+              { label: '1', value: '1' },
+              { label: '2', value: '2' },
+              { label: '3', value: '3' },
+              { label: '4', value: '4' },
+            ]}
+          />
+        </List.Section>
+        <List.Section>
+          <List.Subheader>Storage</List.Subheader>
           <Button
             mode="elevated"
-            loading={isOptimizingDatabase}
+            style={settingsStyles.marginBottom}
-            onPress={optimizeDatabase}>
+            onPress={() => setStorageLocationChangeDialogVisible(true)}>
-            Optimize Database Now
+            Change Storage Location
           </Button>
+          <Button
+            mode="elevated"
+            style={settingsStyles.marginBottom}
+            onPress={refreshMemeMetadata}>
+            Refresh Meme Metadata
+          </Button>
+          <View style={settingsStyles.hideMediaSwitch}>
+            <Text>Hide media from gallery</Text>
+            <Switch
+              value={noMedia}
+              onValueChange={value => {
+                void dispatch(setNoMedia(value));
+              }}
+            />
+          </View>
         </List.Section>
       </ScrollView>
       <Portal>
-        <Snackbar
+        <StorageLocationChangeDialog
-          visible={snackbarVisible}
+          visible={storageLocationChangeDialogVisible}
-          onDismiss={() => setSnackbarVisible(false)}
+          setVisible={setStorageLocationChangeDialogVisible}
-          style={settingsStyles.snackbar}
+          setSnackbarMessage={message => {
-          action={{
+            dispatch(setSnackbarMessage(message));
-            label: 'Dismiss',
+          }}
-            onPress: () => setSnackbarVisible(false),
+        />
-          }}>
-          {snackbarMessage}
-        </Snackbar>
       </Portal>
     </>
   );

src/screens/tags.tsx

@@ -11,25 +11,32 @@ import { useQuery } from '@realm/react';
 import { useDispatch, useSelector } from 'react-redux';
 import { FlashList } from '@shopify/flash-list';
 import { useFocusEffect } from '@react-navigation/native';
+import { useDeviceOrientation } from '@react-native-community/hooks';
+import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { HideableHeader, TagRow, TagsHeader } from '../components';
 import { Tag } from '../database';
-import styles from '../styles';
 import { RootState, setNavVisible } from '../state';
 import { SORT_DIRECTION, tagSortQuery } from '../types';
-import { ORIENTATION, useDimensions } from '../contexts';
 
 const tagsStyles = StyleSheet.create({
+  listView: {
+    paddingHorizontal: '4%',
+    width: '100%',
+    height: '100%',
+  },
   flashList: {
     paddingBottom: 100,
   },
   helperText: {
     marginVertical: 15,
+    textAlign: 'center',
   },
 });
 
 const Tags = () => {
   const { colors } = useTheme();
-  const { dimensions, orientation } = useDimensions();
+  const { height, width } = useSafeAreaFrame();
+  const orientation = useDeviceOrientation();
   const sort = useSelector((state: RootState) => state.tags.sort);
   const sortDirection = useSelector(
     (state: RootState) => state.tags.sortDirection,
@@ -37,6 +44,9 @@ const Tags = () => {
   const navVisisble = useSelector(
     (state: RootState) => state.navigation.navVisible,
   );
+  const autoFocus = useSelector(
+    (state: RootState) => state.settings.autoFocusTagsSearch,
+  );
   const dispatch = useDispatch();
 
   const [flashListPadding, setFlashListPadding] = useState(0);
@@ -61,7 +71,7 @@ const Tags = () => {
     [search, sort, sortDirection],
   );
 
-  const [scrollOffset, setScrollOffset] = useState(0);
+  const previousOffset = useRef(0);
 
   const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
     const currentOffset = event.nativeEvent.contentOffset.y;
@@ -69,11 +79,11 @@ const Tags = () => {
     if (currentOffset <= 150) {
       dispatch(setNavVisible(true));
     } else {
-      const diff = currentOffset - scrollOffset;
+      const diff = currentOffset - previousOffset.current;
       if (Math.abs(diff) > 50) dispatch(setNavVisible(diff < 0));
     }
 
-    setScrollOffset(currentOffset);
+    previousOffset.current = currentOffset;
   };
 
   const flashListRef = useRef<FlashList<Tag>>(null);
@@ -81,7 +91,7 @@ const Tags = () => {
   useFocusEffect(
     useCallback(() => {
       const handleBackPress = () => {
-        if (scrollOffset > 0) {
+        if (previousOffset.current > 0) {
           flashListRef.current?.scrollToOffset({ offset: 0, animated: true });
           return true;
         }
@@ -92,7 +102,7 @@ const Tags = () => {
 
       return () =>
         BackHandler.removeEventListener('hardwareBackPress', handleBackPress);
-    }, [scrollOffset]),
+    }, []),
   );
 
   useFocusEffect(
@@ -102,49 +112,46 @@ const Tags = () => {
   );
 
   return (
-    <View
+    <>
-      style={[
-        styles.paddingHorizontal,
-        styles.fullSize,
-        { backgroundColor: colors.background },
-      ]}>
       <HideableHeader visible={navVisisble}>
         <TagsHeader
           search={search}
           setSearch={setSearch}
+          autoFocus={autoFocus}
           onLayout={event => {
             setFlashListPadding(event.nativeEvent.layout.height);
           }}
         />
       </HideableHeader>
-      <FlashList
+      <View
-        ref={flashListRef}
+        style={[tagsStyles.listView, { backgroundColor: colors.background }]}>
-        data={tags}
+        <FlashList
-        estimatedItemSize={50}
+          ref={flashListRef}
-        estimatedListSize={{
+          data={tags}
-          height: dimensions.height,
+          estimatedItemSize={50}
-          width: dimensions.width * 0.92,
+          estimatedListSize={{
-        }}
+            height,
-        showsVerticalScrollIndicator={false}
+            width: width * 0.92,
-        renderItem={({ item: tag }) => <TagRow tag={tag} />}
+          }}
-        contentContainerStyle={{
+          showsVerticalScrollIndicator={false}
-          paddingTop:
+          renderItem={({ item: tag }) => <TagRow tag={tag} />}
-            flashListPadding +
+          contentContainerStyle={{
-            dimensions.height *
+            paddingTop:
-              (orientation === ORIENTATION.PORTRAIT ? 0.02 : 0.04),
+              flashListPadding +
-          ...tagsStyles.flashList,
+              height * (orientation === 'portrait' ? 0.02 : 0.04),
-        }}
+            ...tagsStyles.flashList,
-        ItemSeparatorComponent={() => <Divider />}
+          }}
-        ListEmptyComponent={() => (
+          ItemSeparatorComponent={() => <Divider />}
-          <HelperText
+          ListEmptyComponent={() => (
-            type={'info'}
+            <HelperText type={'info'} style={tagsStyles.helperText}>
-            style={[tagsStyles.helperText, styles.centerText]}>
+              No tags found
-            No tags found
+            </HelperText>
-          </HelperText>
+          )}
-        )}
+          onScroll={handleScroll}
-        onScroll={handleScroll}
+          fadingEdgeLength={100}
-      />
+        />
-    </View>
+      </View>
+    </>
   );
 };
 

src/screens/welcome.tsx

@@ -3,14 +3,19 @@ import { StyleSheet, View } from 'react-native';
 import { Button, Text, useTheme } from 'react-native-paper';
 import { useDispatch } from 'react-redux';
 import { openDocumentTree } from 'react-native-scoped-storage';
-import styles from '../styles';
 import { noOp } from '../utilities';
 import { setStorageUri } from '../state';
-import { ORIENTATION, useDimensions } from '../contexts';
 
 const welcomeStyles = StyleSheet.create({
+  view: {
+    paddingHorizontal: '4%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 1,
+  },
   text: {
     marginBottom: 30,
+    textAlign: 'center',
   },
   button: {
     marginBottom: 100,
@@ -19,7 +24,6 @@ const welcomeStyles = StyleSheet.create({
 
 const Welcome = ({ onWelcomeComplete }: { onWelcomeComplete: () => void }) => {
   const { colors } = useTheme();
-  const { orientation } = useDimensions();
   const dispatch = useDispatch();
 
   const selectStorageLocation = async () => {
@@ -30,20 +34,8 @@ const Welcome = ({ onWelcomeComplete }: { onWelcomeComplete: () => void }) => {
   };
 
   return (
-    <View
+    <View style={[welcomeStyles.view, { backgroundColor: colors.background }]}>
-      style={[
+      <Text variant="displayMedium" style={welcomeStyles.text}>
-        orientation === ORIENTATION.PORTRAIT
-          ? styles.paddingTop
-          : styles.smallPaddingTop,
-        styles.paddingHorizontal,
-        styles.centered,
-        styles.flex,
-        styles.fullSize,
-        { backgroundColor: colors.background },
-      ]}>
-      <Text
-        variant="displayMedium"
-        style={[welcomeStyles.text, styles.centerText]}>
         Welcome to Terminally Online!
       </Text>
       <Button

src/state/index.ts

@@ -54,6 +54,8 @@ export {
   type SettingsState,
   setStorageUri,
   setNoMedia,
+  setAutofocusMemesSearch,
+  setAutofocusTagsSearch,
   setMasonryColumns,
   setGridColumns,
   validateSettings,
@@ -79,4 +81,5 @@ export {
   type NavigationState,
   setNavVisible,
   toggleNavVisible,
+  setSnackbarMessage,
 } from './navigation';

src/state/navigation.ts

@@ -2,10 +2,12 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 
 interface NavigationState {
   navVisible: boolean;
+  snackbarMessage: string | undefined;
 }
 
 const initialState: NavigationState = {
   navVisible: true,
+  snackbarMessage: undefined,
 };
 
 const navigationSlice = createSlice({
@@ -18,14 +20,19 @@ const navigationSlice = createSlice({
     toggleNavVisible: state => {
       state.navVisible = !state.navVisible;
     },
+    setSnackbarMessage: (state, action: PayloadAction<string | undefined>) => {
+      state.snackbarMessage = action.payload;
+    },
   },
 });
 
-const { setNavVisible, toggleNavVisible } = navigationSlice.actions;
+const { setNavVisible, toggleNavVisible, setSnackbarMessage } =
+  navigationSlice.actions;
 
 export {
   type NavigationState,
   setNavVisible,
   toggleNavVisible,
+  setSnackbarMessage,
 };
 export default navigationSlice.reducer;

src/state/settings.ts

@@ -11,6 +11,8 @@ import { RootState } from '.';
 interface SettingsState {
   storageUri: string | undefined;
   noMedia: boolean;
+  autoFocusMemesSearch: boolean;
+  autoFocusTagsSearch: boolean;
   masonryColumns: 1 | 2 | 3 | 4;
   gridColumns: 1 | 2 | 3 | 4;
 }
@@ -18,6 +20,8 @@ interface SettingsState {
 const initialState: SettingsState = {
   storageUri: undefined,
   noMedia: false,
+  autoFocusMemesSearch: false,
+  autoFocusTagsSearch: false,
   masonryColumns: 2,
   gridColumns: 3,
 };
@@ -32,6 +36,12 @@ const settingsSlice = createSlice({
     setNoMedia: (state, action: PayloadAction<boolean>) => {
       state.noMedia = action.payload;
     },
+    setAutofocusMemesSearch: (state, action: PayloadAction<boolean>) => {
+      state.autoFocusMemesSearch = action.payload;
+    },
+    setAutofocusTagsSearch: (state, action: PayloadAction<boolean>) => {
+      state.autoFocusTagsSearch = action.payload;
+    },
     setMasonryColumns: (state, action: PayloadAction<1 | 2 | 3 | 4>) => {
       state.masonryColumns = action.payload;
     },
@@ -41,8 +51,14 @@ const settingsSlice = createSlice({
   },
 });
 
-const { setStorageUri, setNoMedia, setMasonryColumns, setGridColumns } =
+const {
-  settingsSlice.actions;
+  setStorageUri,
+  setNoMedia,
+  setAutofocusMemesSearch,
+  setAutofocusTagsSearch,
+  setMasonryColumns,
+  setGridColumns,
+} = settingsSlice.actions;
 
 const updateStorageUri = createAsyncThunk(
   'settings/updateStorageUri',
@@ -75,8 +91,7 @@ const updateNoMedia = createAsyncThunk(
 
 const validateSettings = createAsyncThunk(
   'settings/validateSettings',
-  // eslint-disable-next-line @typescript-eslint/naming-convention
+  async (ignored, { dispatch, getState }) => {
-  async (_, { dispatch, getState }) => {
     const state = getState() as RootState;
     const { storageUri, noMedia } = state.settings;
 
@@ -122,6 +137,8 @@ export {
   type SettingsState,
   updateStorageUri as setStorageUri,
   updateNoMedia as setNoMedia,
+  setAutofocusMemesSearch,
+  setAutofocusTagsSearch,
   setMasonryColumns,
   setGridColumns,
   validateSettings,

src/styles.tsx

@@ -1,95 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-const styles = StyleSheet.create({
-  smallPadding: {
-    padding: '2%',
-  },
-  smallPaddingHorizontal: {
-    paddingHorizontal: '2%',
-  },
-  smallPaddingVertical: {
-    paddingVertical: '2%',
-  },
-  smallPaddingTop: {
-    paddingTop: '2%',
-  },
-  padding: {
-    padding: '4%',
-  },
-  paddingHorizontal: {
-    paddingHorizontal: '4%',
-  },
-  paddingVertical: {
-    paddingVertical: '4%',
-  },
-  paddingTop: {
-    paddingTop: '4%',
-  },
-  centered: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  alignCenter: {
-    alignItems: 'center',
-  },
-  justifyCenter: {
-    justifyContent: 'center',
-  },
-  centerText: {
-    textAlign: 'center',
-  },
-  centerSelf: {
-    alignSelf: 'center',
-  },
-  flex: {
-    flex: 1,
-  },
-  flexGrow: {
-    flexGrow: 1,
-  },
-  flexShrink: {
-    flexShrink: 1,
-  },
-  flexRow: {
-    flexDirection: 'row',
-  },
-  flexRowSpaceBetween: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  flexRowSpaceEvenly: {
-    flexDirection: 'row',
-    justifyContent: 'space-evenly',
-  },
-  flexColumn: {
-    flexDirection: 'column',
-  },
-  flexColumnSpaceBetween: {
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-  },
-  flexRowReverse: {
-    flexDirection: 'row-reverse',
-  },
-  flexWrap: {
-    flexWrap: 'wrap',
-  },
-  justifyStart: {
-    justifyContent: 'flex-start',
-  },
-  justifyEnd: {
-    justifyContent: 'flex-end',
-  },
-  fullWidth: {
-    width: '100%',
-  },
-  fullHeight: {
-    height: '100%',
-  },
-  fullSize: {
-    width: '100%',
-    height: '100%',
-  },
-});
-
-export default styles;

src/types/dimensions.ts

@@ -1,6 +1,7 @@
 interface Dimensions {
   width: number;
   height: number;
+  aspectRatio: number;
 }
 
 export { type Dimensions };

src/types/index.ts

@@ -1,5 +1,11 @@
 export { type Dimensions } from './dimensions';
-export { ROUTE, type RootStackParamList } from './route';
+export {
+  ROUTE,
+  type RootStackParamList,
+  documentPickerResponseToAddMemeFile,
+  sharedItemToAddMemeFile,
+} from './route';
+export { type SharedItem } from './share';
 export {
   MEME_SORT,
   memesSortQuery,
@@ -7,4 +13,5 @@ export {
   tagSortQuery,
   SORT_DIRECTION,
 } from './sort';
+export { type StagingMeme, type StagingTag } from './staging';
 export { VIEW } from './view';

src/types/route.ts

@@ -1,4 +1,6 @@
 import { DocumentPickerResponse } from 'react-native-document-picker';
+import { getFilenameFromUri } from '../utilities';
+import { SharedItem } from './share';
 
 enum ROUTE {
   MAIN = 'Main',
@@ -17,8 +19,48 @@ interface MemeViewRouteParams {
   index: number;
 }
 
+interface AddMemeFile {
+  uri: string;
+  filename: string;
+  type?: string;
+}
+
+const documentPickerResponseToAddMemeFile = (
+  response: DocumentPickerResponse[],
+): AddMemeFile[] => {
+  return response.map(item => {
+    const { uri, name, type } = item;
+
+    return {
+      uri,
+      filename: name ?? getFilenameFromUri(uri),
+      type: type ?? undefined,
+    };
+  });
+};
+
+const sharedItemToAddMemeFile = (item: SharedItem): AddMemeFile[] => {
+  const { data, mimeType } = item;
+
+  if (typeof data === 'string') {
+    return [
+      {
+        uri: data,
+        filename: getFilenameFromUri(data),
+        type: mimeType,
+      },
+    ];
+  }
+
+  return data.map(uri => ({
+    uri,
+    filename: getFilenameFromUri(uri),
+    type: mimeType,
+  }));
+};
+
 interface AddMemeRouteParams {
-  file: DocumentPickerResponse;
+  files: AddMemeFile[];
 }
 
 interface EditMemeRouteParams {
@@ -44,4 +86,9 @@ interface RootStackParamList {
   [ROUTE.EDIT_TAG]: EditTagRouteParams;
 }
 
-export { ROUTE, type RootStackParamList };
+export {
+  ROUTE,
+  type RootStackParamList,
+  documentPickerResponseToAddMemeFile,
+  sharedItemToAddMemeFile,
+};

src/types/share.ts

@@ -0,0 +1,7 @@
+interface SharedItem {
+  data: string | string[];
+  mimeType: string;
+  extraData?: object;
+}
+
+export { type SharedItem };

src/types/staging.ts

@@ -0,0 +1,15 @@
+import { Tag } from '../database';
+import { StringValidationResult } from '../utilities';
+
+interface StagingMeme {
+  title: StringValidationResult;
+  isFavorite: boolean;
+  tags: Map<string, Tag>;
+}
+
+interface StagingTag {
+  name: StringValidationResult;
+  color: StringValidationResult;
+}
+
+export { type StagingMeme, type StagingTag };

src/utilities/clipboard.ts

@@ -0,0 +1,11 @@
+import Clipboard from '@react-native-clipboard/clipboard';
+
+const clipboardHasContent = () => {
+  return Promise.all([Clipboard.hasString(), Clipboard.hasURI()]).then(
+    ([hasString, hasURI]) => {
+      return hasString || hasURI;
+    },
+  );
+};
+
+export { clipboardHasContent };

src/utilities/constants.ts

@@ -1,8 +1,7 @@
 const packageName = 'com.karaolidis.terminallyonline';
 const appName = 'Terminally Online';
-const fileProvider = 'com.karaolidis.terminallyonline.rnshare.fileprovider';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noOp = () => {};
 
-export { packageName, appName, fileProvider, noOp };
+export { packageName, appName, noOp };

src/utilities/dimensions.ts

@@ -1,9 +1,35 @@
 const getFlashListItemHeight = (numColumns: number) => {
-  const A = 500;
+  switch (numColumns) {
-  const B = 300;
+    case 1: {
-  const C = 1;
+      return 350;
-  const height = A - B * Math.log(numColumns + C);
+    }
-  return Math.max(Math.round(height), 0);
+    case 2: {
+      return 180;
+    }
+    case 3: {
+      return 120;
+    }
+    case 4: {
+      return 90;
+    }
+  }
 };
 
-export { getFlashListItemHeight };
+const getFontAwesome5IconSize = (numColumns: number) => {
+  switch (numColumns) {
+    case 1: {
+      return 40;
+    }
+    case 2: {
+      return 30;
+    }
+    case 3: {
+      return 20;
+    }
+    case 4: {
+      return 14;
+    }
+  }
+};
+
+export { getFlashListItemHeight, getFontAwesome5IconSize };

src/utilities/filesystem.ts

@@ -1,7 +1,11 @@
+import { FileSystem } from 'react-native-file-access';
+import filetypemime from 'magic-bytes.js';
+import { lookup } from 'react-native-mime-types';
 import { MEME_TYPE } from '../database';
 
 const allowedImageMimeTypes = [
   'image/bmp',
+  'image/jpg',
   'image/jpeg',
   'image/png',
   'image/webp',
@@ -9,25 +13,84 @@ const allowedImageMimeTypes = [
 
 const allowedGifMimeTypes = ['image/gif'];
 
-const allowedMimeTypes = [...allowedImageMimeTypes, ...allowedGifMimeTypes];
+const allowedVideoMimeTypes = [
+  'video/av01',
+  'video/3gpp',
+  'video/avc',
+  'video/hevc',
+  'video/x-matroska',
+  'video/mp2t',
+  'video/mp4',
+  'video/mp42',
+  'video/mp43',
+  'video/mp4v-es',
+  'video/mpeg',
+  'video/mpeg2',
+  'video/x-vnd.on2.vp8',
+  'video/x-vnd.on2.vp9',
+  'video/webm',
+];
 
-const getMemeType = (mimeType: string) => {
+const allowedMimeTypes = [
-  switch (mimeType) {
+  ...allowedImageMimeTypes,
-    case 'image/bmp':
+  ...allowedGifMimeTypes,
-    case 'image/jpeg':
+  ...allowedVideoMimeTypes,
-    case 'image/png':
+];
-    case 'image/webp': {
+
+const getMemeTypeFromMimeType = (mimeType: string): MEME_TYPE | undefined => {
+  if (!allowedMimeTypes.includes(mimeType)) return undefined;
+
+  const mimeStart = mimeType.split('/')[0];
+
+  switch (mimeStart) {
+    case 'image': {
+      if (mimeType === 'image/gif') return MEME_TYPE.GIF;
       return MEME_TYPE.IMAGE;
     }
-    case 'image/gif': {
+    case 'video': {
-      return MEME_TYPE.GIF;
+      return MEME_TYPE.VIDEO;
     }
   }
 };
 
+const guessMimeTypeFromExtension = (filename: string): string | undefined => {
+  const extension = filename.split('.').pop()?.toLowerCase();
+  if (!extension) return undefined;
+  const guessedMimeType = lookup(extension);
+  if (!guessedMimeType) return undefined;
+  return guessedMimeType;
+};
+
+const guessMimeTypeFromMagicBytes = async (
+  uri: string,
+): Promise<string | undefined> => {
+  const fileContent = await FileSystem.read(uri, 100);
+  const possibleMimeTypes = filetypemime(fileContent);
+  if (possibleMimeTypes.length === 0) return undefined;
+  return possibleMimeTypes[0].mime;
+};
+
+const guessMimeType = async (
+  uri: string,
+  hint?: string | null,
+): Promise<string | undefined> => {
+  if (hint && allowedMimeTypes.includes(hint)) return hint;
+
+  let guessedMimeType = guessMimeTypeFromExtension(uri);
+  if (guessedMimeType && allowedMimeTypes.includes(guessedMimeType)) {
+    return guessedMimeType;
+  }
+
+  guessedMimeType = await guessMimeTypeFromMagicBytes(uri);
+  if (guessedMimeType && allowedMimeTypes.includes(guessedMimeType)) {
+    return guessedMimeType;
+  }
+};
+
 export {
   allowedImageMimeTypes,
   allowedGifMimeTypes,
   allowedMimeTypes,
-  getMemeType,
+  getMemeTypeFromMimeType,
+  guessMimeType,
 };

src/utilities/index.ts

@@ -1,3 +1,4 @@
+export { clipboardHasContent } from './clipboard';
 export {
   getContrastColor,
   isHexColor,
@@ -6,14 +7,15 @@ export {
   rgbToRgba,
   generateRandomColor,
 } from './color';
-export { packageName, appName, fileProvider, noOp } from './constants';
+export { packageName, appName, noOp } from './constants';
 export { multipleIdQuery } from './database';
-export { getFlashListItemHeight } from './dimensions';
+export { getFlashListItemHeight, getFontAwesome5IconSize } from './dimensions';
 export {
   allowedImageMimeTypes,
   allowedGifMimeTypes,
   allowedMimeTypes,
-  getMemeType,
+  getMemeTypeFromMimeType,
+  guessMimeType,
 } from './filesystem';
 export { getSortIcon, getViewIcon } from './icon';
 export {
@@ -23,7 +25,11 @@ export {
   editMeme,
   deleteMeme,
 } from './meme';
-export { isPermissionForPath, clearPermissions } from './permissions';
+export {
+  isPermissionForPath,
+  clearPermissions,
+  getFilenameFromUri,
+} from './permissions';
 export { deleteTag } from './tag';
 export {
   type StringValidationResult,

src/utilities/meme.ts

@@ -1,10 +1,10 @@
 import { NavigationProp } from '@react-navigation/native';
-import { Dirs, FileSystem } from 'react-native-file-access';
+import { AndroidScoped, Dirs, FileSystem } from 'react-native-file-access';
-import { extension } from 'react-native-mime-types';
 import Share from 'react-native-share';
 import Clipboard from '@react-native-clipboard/clipboard';
 import { Meme } from '../database';
 import { ROUTE, RootStackParamList } from '../types';
+import { noOp } from './constants';
 
 const favoriteMeme = (realm: Realm, meme: Meme) => {
   realm.write(() => {
@@ -12,10 +12,20 @@ const favoriteMeme = (realm: Realm, meme: Meme) => {
   });
 };
 
-const shareMeme = async (meme: Meme) => {
+const shareMeme = async (realm: Realm, storageUri: string, meme: Meme) => {
-  const fileExtension = extension(meme.mimeType) as string;
+  const uri = AndroidScoped.appendPath(storageUri, meme.filename);
-  const cacheUri = `${Dirs.CacheDir}/${meme.id.toHexString()}.${fileExtension}`;
+  const cacheUri = `${Dirs.CacheDir}/${meme.filename}`;
-  await FileSystem.cp(meme.uri, cacheUri);
+
+  realm.write(() => {
+    meme.dateUsed = new Date();
+    meme.timesUsed += 1;
+    meme.tags.forEach(tag => {
+      tag.dateUsed = new Date();
+      tag.timesUsed += 1;
+    });
+  });
+
+  await FileSystem.cp(uri, cacheUri);
   await Share.open({
     url: `file://${cacheUri}`,
     type: meme.mimeType,
@@ -23,8 +33,22 @@ const shareMeme = async (meme: Meme) => {
   });
 };
 
-const copyMeme = (meme: Meme) => {
+const copyMeme = async (realm: Realm, storageUri: string, meme: Meme) => {
-  Clipboard.setURI(meme.uri);
+  const uri = AndroidScoped.appendPath(storageUri, meme.filename);
+
+  const exists = await FileSystem.exists(uri);
+  if (!exists) throw new Error('File does not exist');
+
+  realm.write(() => {
+    meme.dateUsed = new Date();
+    meme.timesUsed += 1;
+    meme.tags.forEach(tag => {
+      tag.dateUsed = new Date();
+      tag.timesUsed += 1;
+    });
+  });
+
+  Clipboard.setURI(uri);
 };
 
 const editMeme = (
@@ -34,8 +58,10 @@ const editMeme = (
   navigation.navigate(ROUTE.EDIT_MEME, { id: meme.id.toHexString() });
 };
 
-const deleteMeme = async (realm: Realm, meme: Meme) => {
+const deleteMeme = async (realm: Realm, storageUri: string, meme: Meme) => {
-  await FileSystem.unlink(meme.uri);
+  const uri = AndroidScoped.appendPath(storageUri, meme.filename);
+
+  await FileSystem.unlink(uri).catch(noOp);
 
   realm.write(() => {
     for (const tag of meme.tags) {

src/utilities/permissions.ts

@@ -1,10 +1,11 @@
+import { Util } from 'react-native-file-access';
 import {
   getPersistedUriPermissions,
   releasePersistableUriPermission,
 } from 'react-native-scoped-storage';
 
 const isPermissionForPath = (permission: string, path: string) => {
-  return path.startsWith(permission + '/');
+  return path.startsWith(permission + '/') || path === permission;
 };
 
 const clearPermissions = async (excepts: string[] = []) => {
@@ -16,4 +17,8 @@ const clearPermissions = async (excepts: string[] = []) => {
   });
 };
 
-export { isPermissionForPath, clearPermissions };
+const getFilenameFromUri = (uri: string) => {
+  return Util.basename(uri.replaceAll('%2F', '/'));
+};
+
+export { isPermissionForPath, clearPermissions, getFilenameFromUri };