How to rotate Fontisto icon in react native - 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>