React Native Wave Animation: Convert CSS style to JS style

Question

I am trying to achieve something like this for my React Native project.

I have tried using css-to-react-native-transform library to convert CSS to JS but it's been unsuccessful so far.

So any help regarding this issue would be greatly appreciated as I am fairly new with this.

Here is the CSS code:

<style>
    .waves {
      position: absolute;
      bottom: 4.5vh;
      width: 100%;
      height:15vh;
      margin-bottom:-7px; Fix for safari gap
      min-height:130px;
      max-height:180px;
    }
    
    /* Animation */
    
    .parallax > use {
      animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
    }
    .parallax > use:nth-child(1) {
      animation-delay: -2s;
      animation-duration: 7s;
    }
    .parallax > use:nth-child(2) {
      animation-delay: -3s;
      animation-duration: 10s;
    }
    .parallax > use:nth-child(3) {
      animation-delay: -4s;
      animation-duration: 13s;
    }
    .parallax > use:nth-child(4) {
      animation-delay: -5s;
      animation-duration: 20s;
    }
    @keyframes move-forever {
      0% {
       transform: translate3d(-90px,0,0);
      }
      100% { 
        transform: translate3d(85px,0,0);
      }
    }
    /Shrinking for mobile/
    @media (max-width: 768px) {
      .waves {
        height:70px;
        min-height:70px;
      }
    }
    </style>
    
    <!--Waves Container-->
    <div>
    <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
    <defs>
    <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
    </defs>
    <g class="parallax">
    <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
    <use xlink:href="#gentle-wave" x="48" y="3" fill="#89c2ee" />
    <use xlink:href="#gentle-wave" x="48" y="5" fill="#0379ff" />
    <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
    </g>
    </svg>
    </div>
    <!--Waves end-->

Here is what I have tried so far on my React Native:

 import React from 'react';
import { View, Image, StyleSheet, ImageBackground, Text } from 'react-native';
import { useTheme } from 'react-native-paper';
import { SCREEN_INFO } from './constants';
import transform from "css-to-react-native-transform";

const color = transform(`
.waves {
    position: absolute;
    bottom: 4.5vh;
    width: 100%;
    height:15vh;
    margin-bottom:-7px;
    min-height:130px;
    max-height:180px;
  }
  
  .parallax > use {
    animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
  }
  .parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
  }
  .parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
  }
  .parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
  }
  .parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
  }
  @keyframes move-forever {
    0% {
     transform: translate3d(-90px,0,0);
    }
    100% { 
      transform: translate3d(85px,0,0);
    }
  }

  @media (max-width: 768px) {
    .waves {
      height:70px;
      min-height:70px;
    }
  }
`);

export default function Welcome({ navigation, route }) {
    const { colors } = useTheme();
    return (
        <View
            style={styles.flex}
        >
                <View style={{borderWidth: 2, borderColor: 'red'}}>
                    <View style={[styles.waves]}/>
                    <View style={styles.parallax}/>
                    <Text style={{fontSize: 20, color:'black'}}>Hello</Text>
                </View>
        </View>
    );
}

const styles = StyleSheet.create({
    flex: {
        flex: 1,
    },
    center: {
        justifyContent: 'center',
        alignItems: 'center',
        flex: 1,
    }
});