It'd be a lot easier (not to mention likely faster) to build the styles in SCSS and just pass in a list of what's needed directly to the button's className prop as a string, eg className={"link lined google large"} with CSS rules for .link, .google, .lined, and .large that override styles from the previous class as necessary.
This is part of a project where the entire app code is shared across native and web apps. The app uses React Native for iOS and android, and react-native-web for the web app. All three apps run from the same code.
Due to this constraint, the only way to define styles that can be reused across web and native is to use react native's `StyleSheet` api.
About this:
> a button can't be both a Google style button and a Facebook style button - and the code doesn't have any checks for that.
Button receives a single string prop that defines the button style, from there the bool values are calculated:
``` const isDefault = imStyle === 'default'; const isPrimary = imStyle === 'primary'; const isFacebook = imStyle === 'facebook'; const isGoogle = imStyle === 'google'; ```
This assures that a button can't be both Facebook and Google button at the same time. But I agree that it probably makes sense to move Facebook and google buttons to separate components since they have fixed icons that are always meant to appear on the left side. Right now, you'll manually have to enter the icon name.