\n\n# React Native Bootstrap Styles \n\n\n[](https://www.npmjs.com/package/react-native-bootstrap-styles)\n\nBootstrap style library for React Native. \n\nOriginal class names are transformed from \"dashed\" to \"camelcase\" format, for example: `text-center` to `textCenter` and `my-sm-4` to 'mySm4'. Also all the constants (variables in terms of Bootstrap) could be accessible in templates. It helps to make custom tweaks preserving styling guidelines, for example: {fontSize: 10 * FONT_SIZE_BASE}.\n\nDocumentation with snippets and live samples: [alpha version](https://expo.io/@andrenerd/react-native-bootstrap-styles). \n\n\nBasic \"Hello world\" example: \n```jsx\nimport React, { Component } from 'react';\nimport { View, Text } from 'react-native';\nimport BootstrapStyleSheet from 'react-native-bootstrap-styles';\n\nconst bootstrapStyleSheet = new BootstrapStyleSheet();\nconst { s, c } = bootstrapStyleSheet;\n\nclass Hello extends Component {\n render() {\n return (\n \n Hello world! 🤓🚀🚀🚀\n \n );\n }\n}\n```\n\nAdvanced \"Hello world\" example with custom styles:\n\n```jsx\nimport React, { Component } from 'react';\nimport { View, Text } from 'react-native';\nimport BootstrapStyleSheet from 'react-native-bootstrap-styles';\n\nconst\n BODY_COLOR = '#000022',\n TEXT_PRIMARY = '#882288';\n\n// custom constants\nconst constants = {\n BODY_COLOR, TEXT_PRIMARY,\n};\n\n// custom classes\nconst classes = {\n title: {\n color: 'red',\n }\n};\n\nconst bootstrapStyleSheet = new BootstrapStyleSheet(constants, classes);\nconst { styles: s, constants: c } = bootstrapStyleSheet;\n\nclass Hello extends Component {\n render() {\n return (\n \n \n Hello world!\n Hello second world!\n 🤓🚀🚀🚀\n \n \n );\n }\n}\n```\n\n\n\n\n## Constants\n\nBootstrap renamed `constants` to `variables` some time ago. \nNo renaming here for now. See actual example above. \n\nCheck the full list of constants in the source code: \n[./src/constants.js](./src/constants.js)\n\nExtra dynamic parameters available as `constants` or properties of the `bootstrapStyleSheet` object:\n```js\nDIMENSIONS_WIDTH, // ex. 750\nDIMENSIONS_HEIGHT, // ex. 1334\nDIMENSIONS_MAX, // ex. 1334\nORIENTATION_PORTRAIT, // ex. true\nORIENTATION_LANDSCAPE, // ex. false\nMODE_LIGHT, // ex. false\nMODE_DARK, // ex. true\nSCREENS, // ['Xs', 'Md']\nSCREEN, // ex. 'Md'\n```\n\n\n\n## Events\n\nStyles, containing \"media queries\", are automatically updated on dimentions, orientaion and mode changes. There is nothing to bother about, except one little thing. Components should be forced to re-render with the updated styles. That's where the events could be helpful: \n- addDimensionsListener\n- addOrientationListener (portrait/landscape)\n- addModeListener (light/dark)**\n\nHere is an example:\n\n```jsx\nclass App extends Component {\n\n componentDidMount() {\n bootstrapStyleSheet.addDimensionsListener(data => {\n // params are accessible\n // const dimensions = data;\n\n // direct call\n // this.forceUpdate();\n\n // or via state change\n // this.setState({update: me})\n\n // or via redux state change\n // dispatch('NAME', {update: me})\n });\n }\n\n render() {\n // poor pattern, supposed to be passed in state or props\n const width = bootstrapStyleSheet.DIMENSIONS_WIDTH\n\n return (\n \n Screen width: {width}\n \n );\n }\n}\n\n```\n\n** extra package should be installed: [react-native-appearance](https://github.com/expo/react-native-appearance).\n\n\n\n## Layout\n\nSimplified version of the original layout classes.\nAny ideas how to extend grid classes are welcome.\n\nImpelemented features: `.container-*`, `.gutters-*`, `.no-gutters-*`. `.row-{screen}-{n}`, `.col-{screen}-{n}`. \nAmong non-impelemented features: `.row-cols-*`, `.offset-*-*`, `.order-*-*`. \n\n\n\n## Text\n\nAs there is no such things as \"tag-based\" styles, \"inheritance\" and \"nesting\" for styles in React Native. Extra text classes defined, that should be applied to all `Text` tags, for example:\n```\nText\nText\nText\nText\nText\n...\n```\n\nText styles for elements already include base `s.text` style instructions and can be used without it:\n```\nButton text\nForm text\nForm label text\nNav link\n...\n```\n\n\n\n## Content and Utilities\n\nCheck the related chapter in the Bootstrap [documentation](https://getbootstrap.com/docs/4.5/utilities/) to get the list of all the utilities.\n\nWhat's implemented or near to: \n- align \n- borders \n- code \n- colors \n- display \n- flex \n- overflow \n- shadow \n- sizing \n- spacing \n- tables\n- text \n- visibility \n\n\nCheck live examples with code snippets in [the app](https://expo.io/@andrenerd/react-native-bootstrap-styles). \n\n\n\n\n## Elements\n\nBootstrap calls them components. The term is changed to not mess with React components.\nCheck the related chapter in the Bootstrap [documentation](https://getbootstrap.com/docs/4.5/components/) to get the list of all the elements (ie components).\n\nWhat's implemented or neat to: \n- alerts \n- buttons \n- button group\n- cards \n- carousel \n- forms \n- list group\n- modal \n- pagination \n- progress \n- tables\n- toasts\n\nCheck live examples with code snippets in [the app](https://expo.io/@andrenerd/react-native-bootstrap-styles). \n\n\n\n\n## Misc\n\n\n### Selectors \n\nAn attempt to mimic CSS selectors for group pseudo-classes, such as `:first-child`, and media queries:\n```jsx\n\n {\n group.map((item, index) => (\n \n Colored for Md+\n Colored for Lanscape\n \n ))\n }\n\n```\n\nCheck the full list of selectors in the source code: \n[./src/mixins/selectors.js](./src/mixins/selectors.js)\n\nSome element classes have selector-based extensions, for example `cardHeaderFirstChild`:\n```\nprovide an example...\n```\n\n\n### Custom\n\n- `flex` is an alias for `flex1`, and the same for `flex{screen}` \n- some styles contain undocumented, but supported by [Yoga](https://yogalayout.com/), instructions, such as `width: '100%'`. React Native uses Yoga as a layout engine. \n\n","readmeFilename":"README.md"}
![\"React](\"./assets/logo.svg\" "\\"React"){kind=logo}
\n