Problem with Global Theme in StyledComponents (React Native)
When attempting to utilize a color from my global theme in my component and setting it like so:
background-color: ${({theme}) => theme.}
The properties within theme, such as colors, font-size, etc., do not show up when I type the "dot". What could be causing this issue?
Snippet from my styles.ts file located in src/screens/Groups/:
import styled from "styled-components/native";
export const Container = styled.View`
flex: 1;
background-color: ${({ theme }) => theme.colors.gray_700};
justify-content: center;
align-items: center;
`;
export const Title = styled.Text`
font-size: 20px;
color: #FFF;
`;
Snippet from my index.ts file within src/theme/:
export default {
colors: {
white: '#FFFFFF',
green_700: '#00875F',
green_500: '#00B37E',
red: '#F75A68',
red_dark: '#AA2834',
gray_700: '#121214',
gray_600: '#202024',
gray_500: '#29292E',
gray_400: '#323238',
gray_300: '#7C7C8A',
gray_200: '#C4C4CC',
gray_100: '#E1E1E6'
},
fontFamily: {
regular: 'Roboto_400Regular',
bold: 'Roboto_700Bold'
},
fontSize: {
sm: 14,
md: 16,
lg: 18,
xl: 24
}
};
Snippet from my styled.d.ts file inside src/@types/:
import 'styled-components';
import theme from '../theme';
declare module 'styled-components' {
type ThemeType = typeof theme;
export interface DefaultTheme extends ThemeType { }
}
Snippet from my index.tsx file located in app/:
import React from "react";
import { ThemeProvider } from "styled-components/native";
import theme from "../src/theme";
import { Groups } from '@screens/Groups';
export default function Index() {
return (
<ThemeProvider theme={theme}>
<Groups />
</ThemeProvider>
)
}
I have attempted to address this issue by watching several YouTube tutorials, but without success. Could it be that I am missing an extension in VSCode perhaps?
Feel free to make any necessary adjustments or additions before submitting.