styling using custom css

How to / Third Party Tooling
1

I have been trying to import custom CSS in my app.js file but I keep getting an error message.

for example: constants/theme.js

const COLORS = {
    background: "#f9f9f8",
    textDark: "#313234",
    primary: "#f5ca48",
    secondary: "#f26c68",
    textLight: "#cdcdcd",
    price: "#e4723c"
}

export default COLORS

in app.js

import {COLORS} from './constants/theme'

return (
    <View style={styles.container}>
      <Text style={styles.title}>Open up App.js!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontFamily: 'montserrat-regular',
    fontSize: 30,
    color:  COLORS.secondary
  }
});
2

Hi @teegreat

When you import the default export you must not use {}.

i.e. your import should look like this:

import COLORS from './constants/theme'
3

Thank you so much. Iā€™m grateful for your help.

1 Like