CODEWITHSUNDEEP
typescriptreact-nativetypes
Entalist
Entalist

Reputation: 103

Type issues with Dynamic StyleSheet property access

I've created a React Native functional component with both light and dark theme styles.

const lightThemeOverrides = StyleSheet.create({ <light_override_styles_here> });
const styles = StyleSheet.create({ <styles_here> });

I'm trying to use them in my code with the help of a function:

const themedStyles = (key: string) => {
  if (props.theme === 'light') {
    return { ...styles[key], ...lightThemeOverrides[key] };
  } else {
    return styles[key];
  }  
};

I use this function in my JSX like so: <View style={themedStyles('popup')}>

But my ts linter is complaining, that Element implicitly has an 'any' type because type '{ popup: { backgroundColor: string; }; text: { color: string; }; }' has no index signature.

Any idea how to fix this? All tips will be highly appreciated.

Upvotes: 1

Views: 249

Answers (1)

Entalist
Entalist

Reputation: 103

My current solution is modifying the themedStyles function like so:

const themedStyles = (key: 'popup' | 'text'): StyleProp<any> => {
  if (props.theme && props.theme === 'light') {
    return { ...styles[key], ...lightThemeOverrides[key] };
  } else {
    return styles[key];
  }  
};

Where the key is of type 'popup' | 'text' or similar. Containing each possible key in the lightThemeOverrides StyleSheet.

I also set the type of the function to StyleProp<any> to fix further type issues within JSX.

While I don't like this solution, because the function must be changed for each component, it does it's job. For now. Any further comments are still welcome :)

Upvotes: 1

Related Questions