https://github.com/rintoj/native-x-stack
https://github.com/rintoj/native-x-stack
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/rintoj/native-x-stack
- Owner: rintoj
- Created: 2021-02-02T04:43:16.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-10-03T20:11:45.000Z (over 3 years ago)
- Last Synced: 2025-02-14T13:05:22.183Z (over 1 year ago)
- Language: TypeScript
- Size: 313 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# native-x-stack
[](https://github.com/semantic-release/semantic-release)
This modules helps you define stacked views in React Native application
## Install
### Yarn
```sh
yarn add native-x-stack
```
### NPM
```sh
npm install native-x-stack
```
## Usage
```tsx
import { Stack } from 'native-x-stack'
function MyComponent() {
return
{...}
}
```
## API
| Property | Default Value | Usage |
| --------------------------------------------- | ------------- | ---------------------------------------------------------------------- |
| hAlign?: HAlign | | Horizontal alignment: HAlign.{LEFT, CENTER, RIGHT} |
| vAlign?: VAlign | | Vertical alignment: HAlign.{TOP, MIDDLE, BOTTOM} |
| justifyAround?: boolean | false | Justify around items in the stack |
| justifyBetween?: boolean | false | Move items towards the corner of the stack |
| reverse?: boolean | false | Reverse the direction of flex |
| horizontal?: boolean | false | Stack items horizontally if true |
| fill?: boolean | number | Fill parent or set style to { flex: ${fill} } |
| wrap?: boolean | false | Wrap content once reached the end of the current row |
| zIndex?: number | | Z-Index ordering |
| width?: number | | Width of the stack |
| height?: number | | Height of the stack |
| minWidth?: number | | Min width of the stack |
| minHeight?: number | | Min height of the stack |
| maxWidth?: number | | Max width of the stack |
| maxHeight?: number | | Max height of the stack |
| spacing?: number | | Spacing between items |
| overflow?: Overflow | | Make content visible beyond content borders, Overflow.{VISIBLE,HIDDEN} |
| onLayout?: (event: LayoutChangeEvent) => void | false | Callback handler for layout changes |
| style: ViewStyle | | Additional style |
## Automatic Release
Here is an example of the release type that will be done based on a commit messages:
| Commit message | Release type |
| ------------------- | --------------------- |
| fix: [comment] | Patch Release |
| feat: [comment] | Minor Feature Release |
| perf: [comment] | Major Feature Release |
| doc: [comment] | No Release |
| refactor: [comment] | No Release |
| chore: [comment] | No Release |