Search code examples
react-nativestyled-components

Reactive Native - Invalid prop '' supplied to Stylesheet

i am new to react-native and would appreciate any help guidance given

i am using styled-components and i am trying to call the file colours.js in default-styles.js, but this prompts an error and i am unsure why. Any advise would be much appreciated - thank you.

the error i get is:

invalid prop 'backgroundColor' supplied to 'StyleSheet generated':

below are my files:

colours.js

export const Colours = {
  primary: "#fff",
  secondary: "#E5E7EB",
  teritary: "#1F2937",
  darkLight: "#9CA3AF",
  brand: 'red',
  green: '#108981',
  red: '#EF4444',
};

const {
  primary,
  secondary,
  teritary,
  darkLight,
  brand,
  green,
  red
} = Colours;

default-styles.js

import styled from 'styled-components';
import { View, Text, Image } from 'react-native';
import Constants from 'expo-constants';
import {
  primary,
  secondary,
  teritary,
  darkLight,
  brand,
  green,
  red,
} from './colours';

const StatusBarHeight = Constants.statusBarHeight;

export const Container = styled.View`
  flex: 1;
  padding: 25px;
  padding-top: ${StatusBarHeight + 10}px;
  background-color: ${primary};
`

export const InnerContainer = styled.View`
  flex: 1;
  width: 100%;
  align-items: center;
`

export const PageLogo = styled.Image`
  width: 250px;
  height: 200px;
`

export const PageTitle = styled.Text`
  font-size: 30px;
  text-align: center;
  font-weight: bold;
  color: ${brand};
  padding: 10px;
`

Login.js

import React from 'react';
import {
  Container,
  InnerContainer,
  PageLogo,
  PageTitle,
} from './../constants/default-styles';

const Login = () => {
  return(
    <Container>
      <InnerContainer>
        <PageLogo resizeMode="cover" source={require('./../assets/images/logo.png')}/>
        <PageTitle>Sample App</PageTitle>
      </InnerContainer>
    </Container>
  );
}

export default Login;

App.js

import React from 'react';
import { Text, View } from 'react-native';
import Login from './screens/Login';

export default function App() {
  return (
    <Login/>
  );
}

enter image description here

error message: enter image description here

Solution

  • Update your code like this:

    colours.js:

    export const colors = {
  primary: "#fff",
  secondary: "#E5E7EB",
  teritary: "#1F2937",
  darkLight: "#9CA3AF",
  brand: 'red',
  green: '#108981',
  red: '#EF4444',
};

    Export colors like this and import in your style folder and apply call it by colors.COLOR_NAME

    ex:

    styles.js:

    import styled from 'styled-components';
import { View, Text, Image } from 'react-native';
import Constants from 'expo-constants';
import { colors } from './colours';

const StatusBarHeight = Constants.statusBarHeight;

export const Container = styled.View`
  flex: 1;
  padding: 25px;
  padding-top: ${StatusBarHeight + 10}px;
  background-color: ${colors.primary};
`

export const InnerContainer = styled.View`
  flex: 1;
  width: 100%;
  align-items: center;
`

export const PageLogo = styled.Image`
  width: 250px;
  height: 200px;
`

export const PageTitle = styled.Text`
  font-size: 30px;
  text-align: center;
  font-weight: bold;
  color: ${colors.brand};
  padding: 10px;
`