CODEWITHSUNDEEP
react-native
Nyi Nyi Hmue Aung
Nyi Nyi Hmue Aung

Reputation: 726

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",
  },
});

Upvotes: 0

Views: 113

Answers (1)

hong developer
hong developer

Reputation: 13906

There is an invalid import statement.

import { StyleSheet } from "react-native-web"; // Bad!
import { StyleSheet } from "react-native"; // Good!

Upvotes: 1

Related Questions