react-native style doesn't work if I move the style into it's own separate component

I am new to react-native. I would like to kee the style in a separate component to keep my components clean. But, if I do that, the style not longer gets applied. What is the reason for that. Would you be able to find what I am doing wrong?

Here is my code

 import styles from "./name.style.js"; <View> <Text style={styles.today}>Today</Text> <Text style={styles.date}>21.2.2022</Text> <View style={styles.itemsContainer}> <Text style={styles.total}>Total : {totalPrice}</Text> {renderItemsList} <TouchableOpacity onPress={() => navigation.navigate("New")}> <Text style={styles.addNew}>Add New</Text> </TouchableOpacity> </View> </View> 

name.style.js

import { StyleSheet } from "react-native-web"; export default StyleSheet.create({ today: { fontSize: 46, textAlign: "center", }, date: { textAlign: "center", fontSize: 24, marginTop: 20, }, itemsContainer: { marginLeft: "auto", marginRight: "auto", width: "80%", marginTop: 30, }, total: { fontSize: 30, textAlign: "center", fontFamily: "Montserrat-Bold", marginVertical: 10, }, addNew: { backgroundColor: "green", marginTop: 15, alignItems: "center", justifyContent: "center", height: 50, width: 120, padding: 10, color: "white", textAlign: "center", fontSize: 22, marginLeft: "auto", marginRight: "auto", }, });