Q:

Como usar variáveis de objeto JS para cores no CSS

se eu tenho um objeto JS por ex:
cores = {
 main: "#333",
 institutional: "blue"
}

e eu uso styled components para montar meus estilos css então crio ele assim:
styled. View`
  background-color: cores.main;
`;

ele não funciona pois cores.main = "#333" e não #333
as aspas creio que atrapalhe alguém sabe o que devo fazer? 

A:

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...

