style-convention.js

// vars.js
const FG1 = '#333';
// ...

export FG1;


// SomeComponent.js

const styles = StyleSheet.create({
  foo: {
    // ...
  },
  bar: {
    // ...
  },
});


// try maintain some separation of concerns by only ever referring to styles
// defined above here (even one liners)

const SomeComponent = () => (
  <div>
    <div style={{styles.foo}}></div>
    <div style={{styles.bar}}></div>
  </div>
);