styled-component-react-and-RN.js

// App.js
import React from 'react';
import { ThemeProvider } from 'styled-components';
import MyApp from 'src/MyApp';


const theme = {
  button: {
    color: 'white',
    background: 'coral',
  },
};

const App = () => (
  <ThemeProvider theme={theme}>
    <MyApp />
  </ThemeProvider>
);


// Button.web.js
import React from 'react';
import styled from 'styled-components';

const StyledButton = styled.div`
  color: ${props => props.theme.button.color};
  background: ${props => props.theme.button.background};
`;

export function Button({ onClick, label }) {
  return <StyledButton onClick={onClick}>{label}</StyledButton>;
}

// Button.native.js
import React from 'react';
import styled from 'styled-components/native';

const StyledTouchable = styled.Touchable`
  background: ${props => props.theme.button.background};
`;

const StyledText = styled.Text`
  color: ${props => props.theme.button.color};
`;

export function Button({ onClick, label }) {
  return (
    <StyledTouchable onPress={onClick} styles={styles.buttonBody}>
      <StyledText styles={styles.buttonLabel}>{label}</StyledText>
    </StyledTouchable>
  );
}