How to use the @teleporthq/teleport-plugin-react-styled-components.createReactStyledComponentsPlugin function in @teleporthq/teleport-plugin-react-styled-components
To help you get started, we’ve selected a few @teleporthq/teleport-plugin-react-styled-components examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
teleporthq / teleport-code-generators / packages / teleport-component-generator-reactnative / src / index.ts View on Github 
import prettierJSX from '@teleporthq/teleport-postprocessor-prettier-jsx'
import { createComponentGenerator } from '@teleporthq/teleport-component-generator'
import ReactNativeMapping from './react-native-mapping.json'
import { ComponentGenerator, Mapping, ReactNativeStyleVariation } from '@teleporthq/teleport-types'
// This extracts Text, View, Image as illegal element names
const rnMapping = ReactNativeMapping as Mapping
const illegalElementNames = Object.keys(rnMapping.elements).map(
(key) => rnMapping.elements[key].elementType
)
const styledComponentsPlugin = createReactStyledComponentsPlugin({
componentLibrary: 'reactnative',
illegalComponentNames: [...ReactNativeMapping.illegalClassNames, ...illegalElementNames],
})
const stylePlugins = {
[ReactNativeStyleVariation.InlineStyles]: inlineStylesPlugin,
[ReactNativeStyleVariation.StyledComponents]: styledComponentsPlugin,
}
const createReactNativeComponentGenerator = (
variation = ReactNativeStyleVariation.StyledComponents,
mapping: Mapping = {}
): ComponentGenerator => {
const generator = createComponentGenerator()
const stylePlugin = stylePlugins[variation] || inlineStylesPlugin@teleporthq/teleport-plugin-react-styled-components
A plugin for injecting the styles through styled-components inside React components
