COMPONENT-2.js

// style.js
const BACKGROUND_COLOR = '#7c0a02';
export const HEADER_COLOR = '#666';

export default {
  header: {
    backgroundColor: BACKGROUND_COLOR,
  },
}

// index.js
import Style, { HEADER_COLOR } from './style';

export default function Header() {
  return (
    <View style={Style.header}>
      <Text style={HEADER_COLOR}>Hello world! I am gray.</Text>
    </View>
  );
}

can you make this something not involving colors, like the following? otherwise this conflicts with the new STYLE-6.

// style.js
export default {
  view: {
    height: 20,
    width: 20,
  },
}

// index.js
import Style from './style';

export default function Box() {
  return (
    <View style={Style.view} />
  );
}