I've been stuck for a while trying to figure out exactly what I'm doing wrong here and I feel like I've tried every solution that I've found and it doesn't work. To describe what's happening, I made the most simple component I could to show what was happening.
Here's my theme
export default const theme = { colors: { white: '#FFFFFF', black: '#000', lightGray: '#f0f2f1', darkGray: '#909190', primaryColor: '#007772', secondaryColor: '#0775BC', textColor: '#231F20', lightPrimary: '#DBFFFF', red: '#B80F0A', primaryHalf: '#7FBAB8', }, font: { family: 'Nunito-Regular', },};
Here's my component
import React from 'react';import styled from 'styled-components/native';const Wrapper = styled.View` background-color: ${(props) => props.theme.colors.white};`;const TestSimpleComponent: React.FC = ({ children }) => { return <Wrapper>{children}</Wrapper>;};export default TestSimpleComponent;
Pretty simple, just wraps something with a background of white coming from the theme.
And finally, here's my simple test
import React from 'react';import { Text } from 'react-native';import { render } from '@testing-library/react-native';import TestSimpleComponent from './TestSimpleComponent';import { ThemeProvider } from 'styled-components';import theme from '../../themes/primary';describe('TestSimpleComponent', () => { it('displays correct children', () => { const { queryByText } = render(<ThemeProvider theme={theme}><TestSimpleComponent><Text>Test</Text></TestSimpleComponent></ThemeProvider>, ); expect(queryByText('Test')).not.toBeNull(); });});
And here's the error that gets thrown. Basically saying that the theme provider isn't passing the theme to the components for some reason that I can't seem to figure out.
TypeError: Cannot read property 'white' of undefined 3 | 4 | const Wrapper = styled.View`> 5 | background-color: ${(props) => props.theme.colors.white}; | ^ 6 | `; 7 | 8 | const TestSimpleComponent: React.FC = ({ children }) => {
I feel like I've tried just about everything that I've found on here with people having the same issue and nothing has seemed to work. The only thing that does work is me manually passing the theme to the Wrapper, which isn't a viable solution since I have a a large app that uses themes in styled components all over the place.
All of my tests were passing before whenever I was using a colors file before, but once I switched it to theming, everything broke
I have also tried everything that was referenced here.
Does anyone know what I could possibly be doing wrong?