How to rotate Fontisto icon in react native

Question

I Import Fontisto import { Fontisto } from "@expo/vector-icons";

Add an Icon <Fontisto style={styles.windDirectionArrow} name='arrow-up' />

and the styling to rotate it

const styles = StyleSheet.create({
    windDirectionArrow: {
        fontSize: 40,
        transform: [{ rotate: "90deg" }],
    },
});

But the transform is not working, does anyone know any other solutions for this?

The view I am rendering looks like this

return (
        <View style={styles.container}>
            {error ? (
                <View style={styles.centeredContainer}>
                    <Text style={styles.text}>Unable to load weather data</Text>
                    <Text style={styles.text}>{error}</Text>
                </View>
            ) : isLoading ? (
                <View style={styles.centeredContainer}>
                    <Text style={styles.text}>Loading Weather Data</Text>
                    <ActivityIndicator
                        style={styles.activityIndicator}
                        size='large'
                        color='rgb(255,179,25)'
                    />
                </View>
            ) : (
                <View style={[styles.centeredContainer]}>
                    <Fontisto style={styles.text} name={icon} />
                    <Text style={styles.text}>{temperature}˚C</Text>
                    <Text style={styles.text}>
                        <Fontisto name='arrow-up' style={styles.windDirectionArrow} />
                        {windSpeed}mph
                    </Text>
                    <Text style={styles.text}>{weatherCondition}</Text>
                </View>
            )}
        </View>
    );

It works if I have the Icon element wrapped in its own but I think that is not a clean solution

<Text style={styles.text}>
    <View>
        <Fontisto name='arrow-up' style={styles.windDirectionArrow} />
    </View>
    {windSpeed}mph
</Text>

Answer 1

It works perfectly for me

// With Rotation
<Fontisto name="arrow-up" style={styles.windDirectionArrow} />

// Without Rotation
<Fontisto name="arrow-up" style={styles.withoutRottion} />

// When icon is wrapped inside a View and that View is rotated
<View style={styles.windDirectionArrow}>
   <Fontisto name="arrow-up" style={{ fontSize: 40 }} />
</View>

My Styles :

 windDirectionArrow: {
    fontSize: 40,
    transform: [{ rotate: '90deg' }],
  },
  withoutRottion: {
    fontSize: 40,
  },

Working Example

And also why don't you use arrow-right from Fontisto

And for Text Side by side

<View style={{ justifyContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
  <View style={styles.windDirectionArrow}>
    <Fontisto name="arrow-up" style={{ fontSize: 40 }} />
  </View>
  <Text style={styles.text}>{windSpeed}mph</Text>
</View>