if, else if, else statement in react native to change text

React native newbie here.

I'm trying to change the text output so that if the time of day is the morning, the screen will say 'Morning', if the time of day is before 5pm and after 12, the screen will say 'Afternoon' and if the time is after 5pm the screen will say 'Evening'.

I am using var now = new Date().getHours(); to get the time.

How do I use this in react native with if, else if, else in order to change the text on the screen please.

    import { StatusBar } from 'expo-status-bar';
    import React from 'react';
    import { StyleSheet, Text, View, Image, Date } from 'react-native';
    
    const Greeting = (props) => {
    var now = new Date().getHours();

    if(now<12){
        return <Text style={styles.h1}>Morning</Text> 
    };
    
    if (now >= 12 && now <= 17) {
       return <Text style={styles.h1}>Afternoon</Text>  
    }; 
      return (
        <Text style={styles.h1}>Evening</Text>
  );
}

const styles = StyleSheet.create({
    h1: {
    color:'black',
    backgroundColor:'#f9f9f9',
  },
});

export default Greeting;

Above is the code I have come to after experimenting with a variety of other syntax.

Thank you in advance.