diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
index 1671605..f81fbce 100644
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -12,13 +12,13 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
+      - name: checkout
         uses: actions/checkout@v3
 
-      - name: Setup
+      - name: setup
         uses: ./.github/actions/setup
 
-      - name: Lint files
+      - name: lint
         run: yarn lint
 
       - name: Typecheck files
@@ -27,10 +27,10 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
+      - name: checkout
         uses: actions/checkout@v3
 
-      - name: Setup
+      - name: setup
         uses: ./.github/actions/setup
 
       - name: Run unit tests
@@ -39,11 +39,24 @@ jobs:
   build-library:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
+      - name: checkout
         uses: actions/checkout@v3
 
-      - name: Setup
+      - name: setup
         uses: ./.github/actions/setup
 
-      - name: Build package
+      - name: build package
         run: yarn prepare
+
+  build-documentation:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: checkout
+        uses: actions/checkout@v3
+
+      - name: setup
+        uses: ./.github/actions/setup
+
+      - name: build documentation
+        run: yarn docs docs:build
diff --git a/example/src/gallery/GalleryExample.tsx b/example/src/gallery/GalleryExample.tsx
index 273a686..551da7d 100644
--- a/example/src/gallery/GalleryExample.tsx
+++ b/example/src/gallery/GalleryExample.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { View } from 'react-native';
-import { useSharedValue } from 'react-native-reanimated';
+import { useSharedValue, withTiming } from 'react-native-reanimated';
 import {
   stackTransition,
   Gallery,
@@ -8,12 +8,15 @@ import {
 } from 'react-native-zoom-toolkit';
 import {
   getAssetsAsync,
+  MediaType,
   requestPermissionsAsync,
   type Asset,
 } from 'expo-media-library';
 
 import GalleryImage from './GalleryImage';
 import { StyleSheet } from 'react-native';
+import VideoControls from './controls/VideoControls';
+import GalleryVideo from './GalleryVideo';
 
 type SizeVector = { width: number; height: number };
 
@@ -23,28 +26,54 @@ const GalleryExample = () => {
   const [assets, setAssets] = useState<Asset[]>([]);
   const [scales, setScales] = useState<SizeVector[]>([]);
 
+  const progress = useSharedValue<number>(0);
+  const opacityControls = useSharedValue<number>(0);
   const activeIndex = useSharedValue<number>(0);
 
+  // This value is used to prevent the timer to keep updating the current position
+  // when the user is dragging the bar to a position of their desire
+  const isSeeking = useSharedValue<boolean>(false);
+
   const renderItem = useCallback(
     (item: Asset, index: number) => {
+      if (item.mediaType === MediaType.video) {
+        return (
+          <GalleryVideo
+            asset={item}
+            index={index}
+            isLooping={true}
+            progress={progress}
+            isSeeking={isSeeking}
+          />
+        );
+      }
+
       return (
         <GalleryImage asset={item} index={index} activeIndex={activeIndex} />
       );
     },
-    [activeIndex]
+    [activeIndex, progress, isSeeking]
   );
 
   const keyExtractor = useCallback((item, index) => `${item.uri}-${index}`, []);
-
   const customTransition = useCallback(stackTransition, []);
 
+  // Toogle video controls opacity if the current item is a video
+  const onTap = useCallback(() => {
+    const isVideo = assets[activeIndex.value]?.mediaType === MediaType.video;
+    if (!isVideo) return;
+
+    const toValue = opacityControls.value > 0 ? 0 : 1;
+    opacityControls.value = withTiming(toValue);
+  }, [assets, activeIndex, opacityControls]);
+
   useEffect(() => {
     const requestAssets = async () => {
       const { granted } = await requestPermissionsAsync();
       if (granted) {
         const page = await getAssetsAsync({
           first: 100,
-          mediaType: 'photo',
+          mediaType: ['photo', 'video'],
           sortBy: 'creationTime',
         });
 
@@ -76,8 +105,17 @@ const GalleryExample = () => {
         onIndexChange={(idx) => {
           activeIndex.value = idx;
         }}
+        onTap={onTap}
         customTransition={customTransition}
       />
+
+      <VideoControls
+        assets={assets}
+        activeIndex={activeIndex}
+        progress={progress}
+        isSeeking={isSeeking}
+        opacity={opacityControls}
+      />
     </View>
   );
 };
diff --git a/example/src/gallery/GalleryImage.tsx b/example/src/gallery/GalleryImage.tsx
index f1e55bc..724907b 100644
--- a/example/src/gallery/GalleryImage.tsx
+++ b/example/src/gallery/GalleryImage.tsx
@@ -8,7 +8,7 @@ import {
 } from 'react-native-reanimated';
 import { type Asset } from 'expo-media-library';
 
-import { getAspectRatioSize } from 'react-native-zoom-toolkit';
+import { calculateItemSize } from './utils/utils';
 
 type GalleryImageProps = {
   asset: Asset;
@@ -24,21 +24,11 @@ const GalleryImage: React.FC<GalleryImageProps> = ({
   const [downScale, setDownScale] = useState<boolean>(true);
   const { width, height } = useWindowDimensions();
 
-  const phoneRatio = width / height;
-  const pictureRatio = asset.width / asset.height;
-  let size = getAspectRatioSize({
-    aspectRatio: pictureRatio,
-    width: height > width ? width : undefined,
-    height: height > width ? undefined : height,
-  });
-
-  if (pictureRatio > phoneRatio && phoneRatio > 1) {
-    size = getAspectRatioSize({ aspectRatio: pictureRatio, width });
-  }
-
-  if (pictureRatio < phoneRatio && phoneRatio < 1) {
-    size = getAspectRatioSize({ aspectRatio: pictureRatio, height });
-  }
+  const size = calculateItemSize(
+    { width: asset.width, height: asset.height },
+    { width, height },
+    width / height
+  );
 
   const wrapper = (active: number) => {
     if (index === active) setDownScale(false);
diff --git a/example/src/gallery/GalleryVideo.tsx b/example/src/gallery/GalleryVideo.tsx
new file mode 100644
index 0000000..9fe40a6
--- /dev/null
+++ b/example/src/gallery/GalleryVideo.tsx
@@ -0,0 +1,97 @@
+import React, { useEffect, useRef } from 'react';
+import { useWindowDimensions } from 'react-native';
+import { ResizeMode, Video, type AVPlaybackStatus } from 'expo-av';
+import type { Asset } from 'expo-media-library';
+
+import { calculateItemSize } from './utils/utils';
+import {
+  listenToPauseVideoEvent,
+  listenToPlayVideoEvent,
+  listenToSeekVideoEvent,
+  listenToStopVideoEvent,
+} from './utils/emitter';
+import { type SharedValue } from 'react-native-reanimated';
+
+type GalleryVideoProps = {
+  asset: Asset;
+  index: number;
+  isLooping: boolean;
+  isSeeking: SharedValue<boolean>;
+  progress: SharedValue<number>;
+};
+
+const GalleryVideo: React.FC<GalleryVideoProps> = ({
+  asset,
+  index,
+  isLooping,
+  isSeeking,
+  progress,
+}) => {
+  const videoRef = useRef<Video>(null);
+  const { width, height } = useWindowDimensions();
+
+  const phoneAspectRatio = width / height;
+  const size = calculateItemSize(
+    { width: asset.width, height: asset.height },
+    { width, height },
+    phoneAspectRatio
+  );
+
+  const playback = (status: AVPlaybackStatus) => {
+    if (status.isLoaded && !isSeeking.value) {
+      progress.value = status.positionMillis / (asset.duration * 1000);
+    }
+  };
+
+  const play = (activeIndex: number) => {
+    if (activeIndex !== index) return;
+    videoRef.current?.playAsync();
+  };
+
+  const pause = (activeIndex: number) => {
+    if (activeIndex !== index) return;
+    videoRef.current?.pauseAsync();
+  };
+
+  const stop = () => {
+    videoRef.current?.stopAsync().finally(() => (isSeeking.value = false));
+  };
+
+  const seek = async (options: { positionMillis: number; index: number }) => {
+    const { positionMillis, index: activeIndex } = options;
+    if (index !== activeIndex) return;
+
+    await videoRef.current?.setPositionAsync(positionMillis);
+    progress.value = positionMillis / (asset.duration * 1000);
+    isSeeking.value = false;
+  };
+
+  useEffect(() => {
+    const playSub = listenToPlayVideoEvent(play);
+    const pauseSub = listenToPauseVideoEvent(pause);
+    const stopSub = listenToStopVideoEvent(stop);
+    const seekSub = listenToSeekVideoEvent(seek);
+
+    return () => {
+      playSub.remove();
+      pauseSub.remove();
+      stopSub.remove();
+      seekSub.remove();
+    };
+  });
+
+  return (
+    <Video
+      ref={videoRef}
+      source={{ uri: asset.uri }}
+      style={{ ...size }}
+      resizeMode={ResizeMode.COVER}
+      shouldPlay={false}
+      isLooping={isLooping}
+      progressUpdateIntervalMillis={50}
+      onPlaybackStatusUpdate={playback}
+    />
+  );
+};
+
+export default GalleryVideo;
diff --git a/example/src/gallery/controls/ReText.tsx b/example/src/gallery/controls/ReText.tsx
new file mode 100644
index 0000000..f2c4a78
--- /dev/null
+++ b/example/src/gallery/controls/ReText.tsx
@@ -0,0 +1,43 @@
+// Taken from https://github.com/wcandillon/react-native-redash/blob/master/src/ReText.tsx
+import React from 'react';
+import type { TextProps as RNTextProps } from 'react-native';
+import { StyleSheet, TextInput } from 'react-native';
+import Animated, {
+  useAnimatedProps,
+  type SharedValue,
+} from 'react-native-reanimated';
+
+const styles = StyleSheet.create({
+  baseStyle: {
+    color: 'black',
+  },
+});
+
+type ReTextProps = {
+  text: SharedValue<string>;
+  style?: RNTextProps['style'];
+};
+
+const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+Animated.addWhitelistedNativeProps({ text: true });
+
+const ReText: React.FC<ReTextProps> = ({ text, style }) => {
+  const animatedProps = useAnimatedProps(() => {
+    return {
+      text: text.value,
+      // Here we use any because the text prop is not available in the type
+    } as any;
+  }, [text]);
+
+  return (
+    <AnimatedTextInput
+      animatedProps={animatedProps}
+      underlineColorAndroid="transparent"
+      editable={false}
+      value={text.value}
+      style={[styles.baseStyle, style || undefined]}
+    />
+  );
+};
+
+export default ReText;
diff --git a/example/src/gallery/controls/TimeSlider.tsx b/example/src/gallery/controls/TimeSlider.tsx
new file mode 100644
index 0000000..9c8a6bb
--- /dev/null
+++ b/example/src/gallery/controls/TimeSlider.tsx
@@ -0,0 +1,172 @@
+import type { Asset } from 'expo-media-library';
+import React from 'react';
+import { View, Text, StyleSheet, type LayoutChangeEvent } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+  clamp,
+  Extrapolation,
+  interpolate,
+  runOnJS,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  type SharedValue,
+} from 'react-native-reanimated';
+import { convertTimeToText } from '../utils/time';
+import ReText from './ReText';
+import { emitSeekVideoEvent } from '../utils/emitter';
+
+type TimeSliderProps = {
+  asset: Asset;
+  activeIndex: SharedValue<number>;
+  progress: SharedValue<number>;
+  isSeeking: SharedValue<boolean>;
+};
+
+const SLIDER_HEIGHT = 6;
+
+const TimeSlider: React.FC<TimeSliderProps> = ({
+  asset,
+  progress,
+  isSeeking,
+  activeIndex,
+}) => {
+  const timerWidth = useSharedValue<number>(0);
+  const translate = useSharedValue<number>(0);
+  const offset = useSharedValue<number>(0);
+
+  const time = useDerivedValue<string>(() => {
+    return convertTimeToText(asset.duration, progress.value);
+  }, [asset, progress]);
+
+  const measureTimerWidth = (e: LayoutChangeEvent) => {
+    timerWidth.value = e.nativeEvent.layout.width;
+  };
+
+  const seek = (positionMillis: number, index: number) => {
+    emitSeekVideoEvent({ positionMillis, index });
+  };
+
+  const pan = Gesture.Pan()
+    .hitSlop({ vertical: 10, horizontal: 10 })
+    .maxPointers(1)
+    .onStart(() => {
+      offset.value = translate.value;
+
+      // We start seeking so we stop receiving playback event updates from the video component
+      isSeeking.value = true;
+    })
+    .onUpdate((e) => {
+      const boundX = timerWidth.value - SLIDER_HEIGHT * 3;
+
+      translate.value = clamp(offset.value + e.translationX, 0, boundX);
+      progress.value = translate.value / boundX;
+    })
+    .onEnd(() => {
+      const position = asset.duration * 1000 * progress.value;
+      runOnJS(seek)(position, activeIndex.value);
+    });
+
+  const animatedStyles = useAnimatedStyle(() => {
+    if (!isSeeking.value) {
+      translate.value = interpolate(
+        progress.value,
+        [0, 1],
+        [0, timerWidth.value - SLIDER_HEIGHT * 3],
+        Extrapolation.CLAMP
+      );
+    }
+
+    return { transform: [{ translateX: translate.value }] };
+  });
+
+  const progressStyles = useAnimatedStyle(() => {
+    const width = interpolate(
+      progress.value,
+      [0, 1],
+      [0, timerWidth.value],
+      Extrapolation.CLAMP
+    );
+
+    return {
+      width,
+      height: SLIDER_HEIGHT,
+      borderRadius: SLIDER_HEIGHT / 2,
+      backgroundColor: '#fff',
+      alignSelf: 'flex-start',
+    };
+  });
+
+  return (
+    <View style={styles.root}>
+      <Text style={styles.videoTitle}>{asset.filename}</Text>
+
+      <View style={[styles.timerContainer, styles.center]}>
+        <View
+          style={[styles.playbackSliderContainer, styles.center]}
+          onLayout={measureTimerWidth}
+        >
+          <View style={styles.sliderBackground} />
+          <Animated.View style={progressStyles} />
+          <GestureDetector gesture={pan}>
+            <Animated.View style={[styles.indicator, animatedStyles]} />
+          </GestureDetector>
+        </View>
+
+        <View>
+          <ReText text={time} style={styles.duration} />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  center: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  root: {
+    width: '100%',
+    padding: 16,
+    gap: 24,
+    backgroundColor: 'rgba(0, 0, 0, 0.35)',
+    position: 'absolute',
+    bottom: 0,
+  },
+  videoTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#74B6E7',
+  },
+  timerContainer: {
+    flexDirection: 'row',
+    gap: 16,
+  },
+  duration: {
+    color: '#fff',
+    fontSize: 15,
+  },
+  playbackSliderContainer: {
+    flex: 1,
+    height: 44,
+  },
+  indicator: {
+    width: SLIDER_HEIGHT * 3,
+    height: SLIDER_HEIGHT * 3,
+    borderRadius: SLIDER_HEIGHT * 1.5,
+    backgroundColor: '#fff',
+    position: 'absolute',
+    alignSelf: 'flex-start',
+  },
+  sliderBackground: {
+    width: '100%',
+    height: SLIDER_HEIGHT,
+    borderRadius: SLIDER_HEIGHT / 2,
+    backgroundColor: '#fff',
+    opacity: 0.4,
+    position: 'absolute',
+  },
+});
+
+export default TimeSlider;
diff --git a/example/src/gallery/controls/VideoControls.tsx b/example/src/gallery/controls/VideoControls.tsx
new file mode 100644
index 0000000..cc2e4b9
--- /dev/null
+++ b/example/src/gallery/controls/VideoControls.tsx
@@ -0,0 +1,124 @@
+import React, { useState } from 'react';
+import { View, StyleSheet, useWindowDimensions, Pressable } from 'react-native';
+import Animated, {
+  runOnJS,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  withDelay,
+  withTiming,
+  type SharedValue,
+} from 'react-native-reanimated';
+import Icon from '@expo/vector-icons/MaterialCommunityIcons';
+
+import {
+  emitPauseVideoEvent,
+  emitPlayVideoEvent,
+  emitStopVideoEvent,
+} from '../utils/emitter';
+import { MediaType, type Asset } from 'expo-media-library';
+import TimeSlider from './TimeSlider';
+
+type VideoControlsProps = {
+  assets: Asset[];
+  activeIndex: SharedValue<number>;
+  progress: SharedValue<number>;
+  isSeeking: SharedValue<boolean>;
+  opacity: SharedValue<number>;
+};
+
+const INDICATOR_SIZE = 64;
+
+// Transparent absolute positioned views let touches pass through them to comoponents below it
+const VideoControls: React.FC<VideoControlsProps> = ({
+  assets,
+  activeIndex,
+  progress,
+  isSeeking,
+  opacity,
+}) => {
+  const { width, height } = useWindowDimensions();
+  const [isPlaying, setIsPlaying] = useState<boolean>(false);
+  const [videoAsset, setVideoAsset] = useState<Asset | null>(null);
+
+  const onPlayBack = () => {
+    setIsPlaying((prev) => !prev);
+
+    if (isPlaying) {
+      emitPauseVideoEvent(activeIndex.value);
+    } else {
+      emitPlayVideoEvent(activeIndex.value);
+      opacity.value = withDelay(1000, withTiming(0));
+    }
+  };
+
+  const onStop = () => {
+    setIsPlaying(false);
+    emitStopVideoEvent();
+  };
+
+  // First depending on your implementation this could be a simple useEffect
+  // When the active index changes we send an event to stop any video that is playing
+  useAnimatedReaction(
+    () => activeIndex.value,
+    (value) => {
+      // We need to set seeking as true otherwise the playback event of the video component will
+      // keep playing even is the video is meant to be stopped, in the video component we set
+      // seeking to false on the stop event method
+      isSeeking.value = true;
+      progress.value = 0;
+
+      runOnJS(onStop)();
+
+      const currentAsset = assets[value]!;
+      if (currentAsset.mediaType === MediaType.video) {
+        opacity.value = withTiming(1, { duration: 150 });
+        runOnJS(setVideoAsset)(currentAsset);
+      } else {
+        opacity.value = withTiming(0, { duration: 150 });
+        runOnJS(setVideoAsset)(null);
+      }
+    },
+    [activeIndex]
+  );
+
+  const rootStyle = useAnimatedStyle(() => ({
+    width,
+    height,
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute',
+    opacity: opacity.value,
+  }));
+
+  return (
+    <Animated.View style={rootStyle}>
+      <View style={styles.play}>
+        <Pressable onPress={onPlayBack}>
+          <Icon name={isPlaying ? 'pause' : 'play'} size={32} color={'#fff'} />
+        </Pressable>
+      </View>
+
+      {videoAsset !== null ? (
+        <TimeSlider
+          asset={videoAsset}
+          progress={progress}
+          isSeeking={isSeeking}
+          activeIndex={activeIndex}
+        />
+      ) : null}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  play: {
+    width: INDICATOR_SIZE,
+    height: INDICATOR_SIZE,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: INDICATOR_SIZE / 2,
+    backgroundColor: 'rgba(0, 0, 0, 0.35)',
+  },
+});
+
+export default VideoControls;
diff --git a/example/src/gallery/utils/emitter.ts b/example/src/gallery/utils/emitter.ts
new file mode 100644
index 0000000..0033776
--- /dev/null
+++ b/example/src/gallery/utils/emitter.ts
@@ -0,0 +1,55 @@
+import { EventEmitter, EventSubscription } from 'fbemitter';
+
+type PlaybackEventCallback = (index: number) => void;
+type SeekEventOptions = {
+  positionMillis: number;
+  index: number;
+};
+
+const emitter = new EventEmitter();
+
+const PLAY_VIDEO_EVENT = 'play-video';
+export const emitPlayVideoEvent = (index: number) => {
+  emitter.emit(PLAY_VIDEO_EVENT, index);
+};
+
+export const listenToPlayVideoEvent = (
+  cb: PlaybackEventCallback
+): EventSubscription => {
+  const subscription = emitter.addListener(PLAY_VIDEO_EVENT, cb);
+  return subscription;
+};
+
+const PAUSE_VIDEO_EVENT = 'pause-video';
+export const emitPauseVideoEvent = (index: number) => {
+  emitter.emit(PAUSE_VIDEO_EVENT, index);
+};
+
+export const listenToPauseVideoEvent = (
+  cb: PlaybackEventCallback
+): EventSubscription => {
+  const subscription = emitter.addListener(PAUSE_VIDEO_EVENT, cb);
+  return subscription;
+};
+
+const STOP_VIDEO_EVENT = 'stop-video';
+export const emitStopVideoEvent = () => {
+  emitter.emit(STOP_VIDEO_EVENT);
+};
+
+export const listenToStopVideoEvent = (cb: () => void): EventSubscription => {
+  const subscription = emitter.addListener(STOP_VIDEO_EVENT, cb);
+  return subscription;
+};
+
+const SEEK_VIDEO_EVENT = 'seek-video';
+export const emitSeekVideoEvent = (options: SeekEventOptions) => {
+  emitter.emit(SEEK_VIDEO_EVENT, options);
+};
+
+export const listenToSeekVideoEvent = (
+  cb: (options: SeekEventOptions) => void
+): EventSubscription => {
+  const subscription = emitter.addListener(SEEK_VIDEO_EVENT, cb);
+  return subscription;
+};
diff --git a/example/src/gallery/utils/time.ts b/example/src/gallery/utils/time.ts
new file mode 100644
index 0000000..fe16b1c
--- /dev/null
+++ b/example/src/gallery/utils/time.ts
@@ -0,0 +1,36 @@
+const mapSecondsToMinutes = (seconds: number) => {
+  'worklet';
+  const minutes = Math.floor(seconds / 60);
+  const remaningSeconds = seconds % 60;
+
+  let minuteStr = '';
+  let secondStr = '';
+  if (minutes < 10) {
+    minuteStr = `0${minutes}`;
+  } else {
+    minuteStr = minutes.toString();
+  }
+
+  if (remaningSeconds < 10) {
+    secondStr = `0${remaningSeconds}`;
+  } else {
+    secondStr = remaningSeconds.toString();
+  }
+
+  return `${minuteStr}:${secondStr}`;
+};
+
+export const convertTimeToText = (
+  durationInSeconds: number,
+  progess: number
+): string => {
+  'worklet';
+
+  const duration = Math.floor(durationInSeconds);
+  const currentProgress = Math.floor(durationInSeconds * progess);
+
+  const durationStr = mapSecondsToMinutes(duration);
+  const progressStr = mapSecondsToMinutes(currentProgress);
+
+  return `${progressStr} / ${durationStr}`;
+};
diff --git a/example/src/gallery/utils/utils.ts b/example/src/gallery/utils/utils.ts
new file mode 100644
index 0000000..31906b2
--- /dev/null
+++ b/example/src/gallery/utils/utils.ts
@@ -0,0 +1,39 @@
+import { getAspectRatioSize } from 'react-native-zoom-toolkit';
+
+type SizeVector = { width: number; height: number };
+
+/**
+ * @description Determines the size an item must take on the screen
+ * @param itemSize Width and height of the image or video
+ * @param screenSize Width and height of the screen
+ * @param deviceRatio Aspect ratio of the current device, so basically phoneWidth / phoneHeight
+ */
+export const calculateItemSize = (
+  itemSize: SizeVector,
+  screenSize: SizeVector,
+  deviceRatio: number
+): SizeVector => {
+  const pictureRatio = itemSize.width / itemSize.height;
+  let size = getAspectRatioSize({
+    aspectRatio: pictureRatio,
+    width: screenSize.height > screenSize.width ? screenSize.width : undefined,
+    height:
+      screenSize.height > screenSize.width ? undefined : screenSize.height,
+  });
+
+  if (pictureRatio > deviceRatio && deviceRatio > 1) {
+    size = getAspectRatioSize({
+      aspectRatio: pictureRatio,
+      height: screenSize.width,
+    });
+  }
+
+  if (pictureRatio < deviceRatio && deviceRatio < 1) {
+    size = getAspectRatioSize({
+      aspectRatio: pictureRatio,
+      height: screenSize.height,
+    });
+  }
+
+  return size;
+};
diff --git a/example/src/snapback/list/MessageList.tsx b/example/src/snapback/list/MessageList.tsx
index 28fa52b..90cb479 100644
--- a/example/src/snapback/list/MessageList.tsx
+++ b/example/src/snapback/list/MessageList.tsx
@@ -104,6 +104,7 @@ const MessageList: React.FC<MessageListProps> = ({ keyboardTranslateY }) => {
         keyExtractor={keyExtractor}
         stickyHeaderIndices={[0]}
         contentContainerStyle={styles.content}
+        automaticallyAdjustKeyboardInsets={true}
         showsVerticalScrollIndicator={true}
         ItemSeparatorComponent={seperator}
         ListHeaderComponent={renderAppbar}