Exciting news!Announcing our $4.6M Series Seed. Learn more →
Socket
LoveBlogFAQ
Install
Log in

react-native-bootstrap-styles

Package Overview
Dependencies
2
Maintainers
1
Versions
25
Issues
File Explorer

Advanced tools

react-native-bootstrap-styles

Bootstrap style library for React Native

    4.5.0-rlatest

Version published
Maintainers
1
Yearly downloads
6,457
decreased by-16.38%

Weekly downloads

Readme

Source

React Native Bootstrap Styles

React Native Bootstrap Styles

npm version

Bootstrap style library for React Native.

Original 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}.

Documentation with snippets and live samples: alpha version.

Basic "Hello world" example:

import React, { Component } from 'react'; import { View, Text } from 'react-native'; import BootstrapStyleSheet from 'react-native-bootstrap-styles'; const bootstrapStyleSheet = new BootstrapStyleSheet(); const { s, c } = bootstrapStyleSheet; class Hello extends Component { render() { return ( <View style={[s.body]}> <Text style={[s.text, s.textPrimary]}>Hello world! 🤓🚀🚀🚀</Text> </View> ); } }

Advanced "Hello world" example with custom styles:

import React, { Component } from 'react'; import { View, Text } from 'react-native'; import BootstrapStyleSheet from 'react-native-bootstrap-styles'; const BODY_COLOR = '#000022', TEXT_PRIMARY = '#882288'; // custom constants const constants = { BODY_COLOR, TEXT_PRIMARY, }; // custom classes const classes = { title: { color: 'red', } }; const bootstrapStyleSheet = new BootstrapStyleSheet(constants, classes); const { styles: s, constants: c } = bootstrapStyleSheet; class Hello extends Component { render() { return ( <View style={[s.body]}> <View style={[s.container, s.h100, s.justifyContentCenter]}> <Text style={[s.text, s.title]}>Hello world!</Text> <Text style={[s.text, s.textPrimary, s.myXs1, s.myMd3]}>Hello second world!</Text> <Text style={[s.text, s.py3, {fontSize: 5 * c.REM}]}>🤓🚀🚀🚀</Text> </View> </View> ); } }

Constants

Bootstrap renamed constants to variables some time ago.
No renaming here for now. See actual example above.

Check the full list of constants in the source code:
./src/constants.js

Extra dynamic parameters available as constants or properties of the bootstrapStyleSheet object:

DIMENSIONS_WIDTH, // ex. 750 DIMENSIONS_HEIGHT, // ex. 1334 DIMENSIONS_MAX, // ex. 1334 ORIENTATION_PORTRAIT, // ex. true ORIENTATION_LANDSCAPE, // ex. false MODE_LIGHT, // ex. false MODE_DARK, // ex. true SCREENS, // ['Xs', 'Md'] SCREEN, // ex. 'Md'

Events

Styles, 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:

  • addDimensionsListener
  • addOrientationListener (portrait/landscape)
  • addModeListener (light/dark)**

Here is an example:

class App extends Component { componentDidMount() { bootstrapStyleSheet.addDimensionsListener(data => { // params are accessible // const dimensions = data; // direct call // this.forceUpdate(); // or via state change // this.setState({update: me}) // or via redux state change // dispatch('NAME', {update: me}) }); } render() { // poor pattern, supposed to be passed in state or props const width = bootstrapStyleSheet.DIMENSIONS_WIDTH return ( <View style={s.container}> <Text style={[s.mediaDependentClass]}>Screen width: {width}</Text> </View> ); } }

** extra package should be installed: react-native-appearance.

Layout

Simplified version of the original layout classes. Any ideas how to extend grid classes are welcome.

Impelemented features: .container-*, .gutters-*, .no-gutters-*. .row-{screen}-{n}, .col-{screen}-{n}.
Among non-impelemented features: .row-cols-*, .offset-*-*, .order-*-*.

Text

As 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:

<Text style="{[s.text]}">Text</Text> <Text style="{[s.text, s.textSmall]}">Text</Text> <Text style="{[s.text, s.textMuted]}">Text</Text> <Text style="{[s.text, s.textWhite]}">Text</Text> <Text style="{[s.text, s.textBlack50]}">Text</Text> ...

Text styles for elements already include base s.text style instructions and can be used without it:

<Text style="{[s.btnText]}">Button text</Text> <Text style="{[s.formText]}">Form text</Text> <Text style="{[s.formLabelText]}">Form label text</Text> <Text style="{[s.navLinkText]}">Nav link</Text> ...

Content and Utilities

Check the related chapter in the Bootstrap documentation to get the list of all the utilities.

What's implemented or near to:

  • align
  • borders
  • code
  • colors
  • display
  • flex
  • overflow
  • shadow
  • sizing
  • spacing
  • tables
  • text
  • visibility

Check live examples with code snippets in the app.

Elements

Bootstrap calls them components. The term is changed to not mess with React components. Check the related chapter in the Bootstrap documentation to get the list of all the elements (ie components).

What's implemented or neat to:

  • alerts
  • buttons
  • button group
  • cards
  • carousel
  • forms
  • list group
  • modal
  • pagination
  • progress
  • tables
  • toasts

Check live examples with code snippets in the app.

Misc

Selectors

An attempt to mimic CSS selectors for group pseudo-classes, such as :first-child, and media queries:

<View style={[s.flexRow]}> { group.map((item, index) => ( <View key={index} style={[s.selectorFirstChild(index, s.bgLight)]}> <Text style={[s.selectorMediaUpMd([s.text, s.textPrimary])>Colored for Md+</Text> <Text style={[s.selectorMediaLandscape([s.text, s.textPrimary])>Colored for Lanscape</Text> </View> )) } </View>

Check the full list of selectors in the source code:
./src/mixins/selectors.js

Some element classes have selector-based extensions, for example cardHeaderFirstChild:

provide an example...

Custom

  • flex is an alias for flex1, and the same for flex{screen}
  • some styles contain undocumented, but supported by Yoga, instructions, such as width: '100%'. React Native uses Yoga as a layout engine.

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc