UI Kit

> UI Kit for react-native and react-native-web

StoryBook

- git clone git@github.com:trucknet-io/react-native-web-uikit.git
- npm install
- to add a Storybook story, create a ComponentName.story.tsx file in component's folder
- to add a readme name file README.md in a component folder
- stories and readme files will be found, loaded and added to storybook automatically

Try to add to stories only required props, rest props will be added withSmartKnobs addon.
SmartKnobs will not automatically create knobs for props whose name is in the ignoreProps array
addDecorator(withSmartKnobs({ ignoreProps: ["gradientStartColor", "gradientEndColor"] }))

ThemeProvider

``
import { ThemeProviderWrapper } from "react-native-web-uikit";


{this.props.children}

`

`
import {
withTheme,
ThemeProps,
ThemeParamsType,
ThemeType,
} from "react-native-web-uikit";

type Styles = ReturnType;

interface Props extends ThemeProps {}

class Component extends React.PureComponent {
render() {
const { styles, theme, fonts, colors, toggleTheme, variables } = this.props;
return
}
}

const getStyles = ({ colors, fonts, variables }: ThemeParamsType) => {
const { shadow, size, borderRadius, borderWidth } = variables;
return (
StyleSheet.create({
container: {
backgroundColor: colors.background,
padding: size.m,
alignItems: "center",
justifyContent: "center",
},
card, {
flex: 1,
borderRadius,
borderWidth,
...shadow,
}
text: fonts.BodyRegular,
});
)
}


export default withTheme(getStyles)(Component);

`

$3

- npm run storybook

$3

- npm run android

Usage

`
import { ComponentName } from "react-native-web-uikit"

`

For show Modal Wrap Root Container with RootWrapper` Component

Libraries

$3

- react
- react-dom

$3

- react-native
- react-native-linear-gradient
- react-native-svg
- react-native-modal
- react-native-webview
- react-content-loader
- react-native-shimmer-placeholder

$3

- react-art
- react-native-web
- react-native-web-linear-gradient
- react-native-svg-web
- react-content-loader,