Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andrenerd/react-native-bootstrap-styles
Bootstrap style library for React Native
https://github.com/andrenerd/react-native-bootstrap-styles
android bootstrap design ios layout react react-native responsive style theme
Last synced: about 5 hours ago
JSON representation
Bootstrap style library for React Native
- Host: GitHub
- URL: https://github.com/andrenerd/react-native-bootstrap-styles
- Owner: andrenerd
- Created: 2018-04-04T20:27:53.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-02-07T06:28:10.000Z (almost 3 years ago)
- Last Synced: 2024-08-09T22:53:01.527Z (3 months ago)
- Topics: android, bootstrap, design, ios, layout, react, react-native, responsive, style, theme
- Language: JavaScript
- Homepage:
- Size: 205 KB
- Stars: 93
- Watchers: 7
- Forks: 12
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Native Bootstrap Styles
[](https://www.npmjs.com/package/react-native-bootstrap-styles)
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](https://expo.io/@andrenerd/react-native-bootstrap-styles).
Basic "Hello world" example:
```jsx
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 (
Hello world! 🤓🚀🚀🚀
);
}
}
```
Advanced "Hello world" example with custom styles:
```jsx
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 (
Hello world!
Hello second world!
🤓🚀🚀🚀
);
}
}
```
## 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](./src/constants.js)
Extra dynamic parameters available as `constants` or properties of the `bootstrapStyleSheet` object:
```js
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:
```jsx
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 (
Screen width: {width}
);
}
}
```
** extra package should be installed: [react-native-appearance](https://github.com/expo/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
Text
Text
Text
Text
...
```
Text styles for elements already include base `s.text` style instructions and can be used without it:
```
Button text
Form text
Form label text
Nav link
...
```
## Content and Utilities
Check the related chapter in the Bootstrap [documentation](https://getbootstrap.com/docs/4.5/utilities/) to get the list of all the utilities.
What's implemented or near to:
- align
- background
- borders
- display
- flex
- sizing
- spacing
- text
also:
- tables
## Elements
Bootstrap calls them components. The term is changed to not mess with React components.
Check the related chapter in the Bootstrap [documentation](https://getbootstrap.com/docs/4.5/components/) to get the list of all the elements (ie components).
What's implemented or neat to:
- buttons
- cards
- forms
- modal
- pagination
- progress
### Buttons
TouchableHighlight as button:
```jsx
Signup
```
Links as default and outline buttons with some optional tweaks (see `underlayColor`):
```jsx
// import { Link } from 'react-router-native';
Submit
Cancel
```
### Card
Basic card:
```jsx
Hello Card!
```
### Modal
Basic modal (temporal approach, till higher level component added to the lib):
```jsx
Hello Modal!
```
### Progress bar
Basic progress bar
```jsx
```
## Misc
### Selectors
An attempt to mimic CSS selectors for group pseudo-classes, such as `:first-child`, and media queries:
```jsx
{
group.map((item, index) => (
Colored for Md+
Colored for Lanscape
))
}
```
Check the full list of selectors in the source code:
[./src/mixins/selectors.js](./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](https://yogalayout.com/), instructions, such as `width: '100%'`. React Native uses Yoga as a layout engine.