https://github.com/pvinis/react-native-layout
a layout library for react native apps
https://github.com/pvinis/react-native-layout
react-native
Last synced: 2 months ago
JSON representation
a layout library for react native apps
- Host: GitHub
- URL: https://github.com/pvinis/react-native-layout
- Owner: pvinis
- Created: 2017-12-09T11:57:32.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-04-01T17:44:08.000Z (over 2 years ago)
- Last Synced: 2025-01-31T01:13:44.717Z (over 1 year ago)
- Topics: react-native
- Language: JavaScript
- Homepage:
- Size: 3.91 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
My react native Layout library
===
I made this to help me with some repeating problems and annoyances I had/have while writing react native apps.
Details
===
`Flex` is nice to use because I don't need to type `style={{ flex: 1 }}` all the time. Also it's very easy to try with and without flex, by changing from `` to `` and back.
`Spaced` is my second most used layout. It allows me to have a bunch of views with specific space `between` them and `around` them. Sometimes with flex it's hard to have a specific size, or you need to add empty views on the edges in order to have one size of space around and between, so I put all than in there. It has `inner`, which is the space between items, `outer`, for the space around the edge items, and `size`, which is the `inner` and `outer` together.
`Split` started as an easy way to had a view with two subviews, that automatically get 50% of the available space each. I want to add functionality like `space={ [30, 70] }` and that would make the first view 30% and the second one 70% etc.
`Empty` is not often useful, but sometimes it's needed, and now it's here.
`Screen` is what I use for every new screen in my apps. It is basically a `Flex` with optional shadow, and some base style.
`Separator` is pretty self-explanatory, it's just an easy way to add a separator between views.
`Shadow` is also simple, it adds a small shadow on the top of the view, usually used for adding shadow below the navbar.
To do
===
add a `package.json`
make it into an npm package
add examples of code and screenshots