Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/laynef/web-css-to-react-native-styles-convertor
Convert your web CSS into JSON for mobile in React Native styles
https://github.com/laynef/web-css-to-react-native-styles-convertor
css json react-native
Last synced: 8 days ago
JSON representation
Convert your web CSS into JSON for mobile in React Native styles
- Host: GitHub
- URL: https://github.com/laynef/web-css-to-react-native-styles-convertor
- Owner: laynef
- License: mit
- Created: 2018-07-12T05:03:34.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-08-01T21:28:51.000Z (over 6 years ago)
- Last Synced: 2024-10-31T18:14:39.034Z (15 days ago)
- Topics: css, json, react-native
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@lfaler/retro-react-native
- Size: 467 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Retro React Native
Retro React Native is a quick easy way to have structured styling in your React Native code base.
It will convert web CSS to React Native styles in JSON. You can generate a structured directory for yourself
through 'retro-react-native create'
Once this is done you can generate files into the structured styling folder with auto-imports for your file names.
These must be files that will enter your stylesheet creators while the other files that you use can be used to
add mixin functions for your styling like SASS frameworks do. Those files can be imported into your styling files to
wrap your values to change and morph. The freedom is yourself to do what you will with this file structure. However
their are tools that may help.
## Structured Styles
### Create your style folder
```
retro-react-native create
```
### Generate a file with auto-imports
```
retro-react-native generate
```
If you don't want to import a path to this file into your style creator don't use 'generate'
## Convert CSS styles into React native styles
Retro will turn your css into json then filter the json for React native styles only
### How is that possible
- Well slightly Oboe Wan, any styles that do not fit React Native will be deleted
- Check out Bootstrap 4 conversion into React Native Styles
Check React Native Styling
- https://github.com/vhpoet/react-native-styling-cheat-sheet
### To Install
```
npm install -g @lfaler/retro-react-native@latest
```
## Documentation
```
retro-react-native
```
## To Run
- You can choose to use JSON format or a JS exported Object
```
// JSON to JS
retro-react-native js-to-json
// JS to JSON
retro-react-native json-to-js
```
### CSS to JS
```
retro-react-native css-to-js
// Then import your js json object in your Stylesheet creator
import retro from '';
import {StyleSheet} from 'react-native';
const styles = StyleSheet.create(retro);
```
### JS to CSS
```
retro-react-native js-to-css
```
## What do I do with this huge file?
I had this same problem. I generated a new file using 'generate' then filtered out styles
from the large conversion into the new small file I generated from one single styling purpose.
You can pull out the styles from that large file with keywords in that file into their new destintion file.
### Sort Out Big Style Files By Keyword
```
retro-react-native keyword-sort
```
## Examples
### Bootstrap 4
- Bootstrap 4 CSS File: https://github.com/laynef/Retro-CLI/blob/master/test/bootstrap4.css
- Retro JSON File: https://github.com/laynef/Retro-CLI/blob/master/test/retro-bootstrap.json
To test it on an existing example
```
git clone https://github.com/laynef/Retro-CLI.git
cd example
yarn install
react-native run-ios
```
The bootstrap library is now used on React Native
Happy coding!