<Script runBeforeMount={true} :as="animation">
    const duration = 5000;
    const queries = ["smart phones", "gaming laptops", "water proof watches"];
    const progress = new Animated.Value(0);

    const searchbarBackgroundColor = "primary-50";
    const searchbarTintColor = "gray-700";

    const translateX = progress.interpolate({
        inputRange: [0, 1],
        outputRange: [0, 300],
    });

    const style = {
        width: '100%',
        transform: [{ translateX }],
        position: "absolute",
        zIndex: 100,
        left: 45,
        top: 0,
        bottom: 0,
    }

    setState('activeIndex', 0);
    const interval = setInterval(()=>{
        setState('activeIndex', i => (i + 1) % queries.length);
    }, 5000)

    onCleanup(()=>clearInterval(interval));
</Script>
<Script :dependencies={[animation.queries, state.activeIndex]}>
    Animated.timing(animation.progress, {
        toValue: 0,
        duration: 350,
        useNativeDriver: true,
    }).start(() => {
        setState('displayIndex', state.activeIndex);
        Animated.timing(animation.progress, {
            toValue: 1,
            duration: 2000,
            useNativeDriver: true,
        }).start();
    });
</Script>
<Actionable action={data.action}>
    <Box>
        <Box
            px="md"
            py="xs"
            borderRadius={40}
            borderWidth={1}
            borderColor={animation.searchbarTintColor}
            mx="md"
            my="xs"
            position="relative"
            overflow="hidden"
            bg={animation.searchbarBackgroundColor}
        >
            <Flexbox flexDirection="row" alignItems="center">
                <View mr="3xs">
                    <Icon color={animation.searchbarTintColor} icon="feather:search" size={16} />
                </View>
                <Text color={animation.searchbarTintColor}>
                    {animation.queries[state.displayIndex]}
                </Text>
            </Flexbox>
            <AnimatedView bg={animation.searchbarBackgroundColor} style={animation.style}/>
        </Box>
    </Box>
</Actionable>

{}