react-native-web-uikit
v2.9.2
Published
UI Kit for react-native and react-native-web
Downloads
466
Readme
UI Kit
StoryBook
git clone [email protected]: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";
<ThemeProviderWrapper>
{this.props.children}
</ThemeProviderWrapper>
import {
withTheme,
ThemeProps,
ThemeParamsType,
ThemeType,
} from "react-native-web-uikit";
type Styles = ReturnType<typeof getStyles>;
interface Props extends ThemeProps<Styles> {}
class Component extends React.PureComponent<Props, State> {
render() {
const { styles, theme, fonts, colors, toggleTheme, variables } = this.props;
return <View style={styles.container} />
}
}
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<Props, DefaultProps>(getStyles)(Component);
Web
- `npm run storybook`
Mobile
- `npm run android`
Usage
import { ComponentName } from "react-native-web-uikit"
<ComponentName {...props} />
For show Modal Wrap Root Container with RootWrapper
Component
Libraries
Peer Dependencies
- react
- react-dom
Peer Dependencies Mobile
- react-native
- react-native-linear-gradient
- react-native-svg
- react-native-modal
- react-native-webview
- react-content-loader
- react-native-shimmer-placeholder
Peer Dependencies Web
- react-art
- react-native-web
- react-native-web-linear-gradient
- react-native-svg-web
- react-content-loader,