EmojiIreland: Native app for adding emoji to photos with gesture control for iOS and Andriod

App tool choice

For Building this App which can be used cross platform iOS, Android and Web, I used React native and Expo framework + SDK which allows the native to develop and reuse functionality while developing apps with image display or touch interactions or gesture animation.

Used index.tsx as entrypoint of the app in and it executes when the development server starts. Uses core <View> and <Text> components to show the display background and text and uses Stylesheet implementation to customize styles objects.

As react native uses file based routing like react we can manage navigation between screen with about and home page to show the user what the app is about and put a stack on the bottom to be easily accessible and not the main attention point.

Using Expo Libraries

We want to have a reusable image component to be used universally in the app so it can be customized based on the needs.

Expo image library provides various functionality like supporting many image formats, using disk and memory canching, adding transitions between images to avoid flickering.

For the Touch actions on the screen the user might scroll and press a button or slide fingers so this kind of interaction is very complex to design manually and best to use a library which takes usual bugs into account.

<Pressable> component allows just this for handling touch events as it calls onPressIn and onPressOut when user moves in and out of the target area where press gesture is activate.

Now if to handle the button area touch sensitivity for outside borders HitRect is used for adding some buffer around the touch area.

Image Picker functionality which clicking the button triggers a UI prompt to choose Image form user galary to be displayed as a media on the app UI.

Modal component from native is uses to present a content over images or rest of the app

To add intreativity on the on emoji we use gesture handler from native to add interativity of scaling and moving the icon which uses Gesture Responder System that manages the lifecycle of the gestures in the app.

Full code and demo: https://github.com/rkarmaka98/EmojiIreland