Primeiramente seria ideal se você colocasse esse objeto de variáveis como um tema no Provider
do styled-components
, assim:
import { ThemeProvider } from 'styled-components';
const cores = {
main: "#333",
institutional: "blue"
};
function App() {
return (
<ThemeProvider theme={cores}>
<Componente />
</ThemeProvider>
);
}
Isso te possibilita usar as variáveis de tema em todos os componentes sem ter que ficar importando o objeto, fora que mudanças no provider se refletem em todo lugar pelo app.
E aí, no export
do component, você faz assim, por exemplo:
import styled from 'styled-components'
import { View } from 'react-native'
export default styled(View)`
background-color: ${props => props.theme.main};
`;
Funciona. Eu acho meio overkill usar styled-components
em apps React Native, mas isso é assunto pra outra discussão...
var cor = "#333"
e depois em cores vc colocacores = { main: cor }
? É só uma ideia mesmo pq não entendo bem de JS, mas vai que passa :)