React Native Reanimate~2.14.4 not working on new screen

Question

I want the view to move to the left when the screen is loaded off the stack, however it does not do the animation; although it does do the translation. I have used almost identical code to the ones in the docs so I am lost for ideas. When I add a button that changes offset it does the animation, but just not on the screen's mount.

import React, { useState, useEffect } from 'react'
import { StyleSheet, Text, View, TextInput, TouchableOpacity, StatusBar } from 'react-native'
import Animated, { useAnimatedStyle, withTiming, useSharedValue, withRepeat } from 'react-native-reanimated';

function PaymentScreen () {

    const offset = useSharedValue(100);

    const animatedStyles = useAnimatedStyle(() => {
        return {
            transform: [{ translateX: withTiming(offset.value, {duration:500})}],
          };
    });

    return (
        <View
        style={styles.container}
        >

            <Animated.View style={[styles.shake, animatedStyles]}>
                <Text style={[styles.shakeonit, {marginLeft:"17%"}]}>Let's</Text>
                <Text style={[styles.shakeonit, {color: "grey"}]}> Pay</Text>
            </Animated.View>
        </View>
    )
}

export default PaymentScreen 

const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        flex: 1,
    },
    shake: {
        width: "80%", 
        height: "10%",
        marginTop: "20%",
        alignItems: "center",
        padding: 15,
        flexDirection: "row",
        backgroundColor:"green",
    },
    shakeonit: {
        color: 'black',
        fontWeight: '700',
        fontSize: 30,
    },
})