-
-
Notifications
You must be signed in to change notification settings - Fork 131
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* chore: updated reanimation & redash * chore: added a callback for rawbutton onlayout * chore: added material preset * chore: added material preset examples * fix: fixed usage of useValues * fix: fixed initial background color * chore: updated types descriptions * docs: update readme and added material doc * docs: update material docs * docs: update material docs
- Loading branch information
Showing
34 changed files
with
1,445 additions
and
66 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| # Material Preset | ||
|
|
||
| > This preset is inspired by [timomeh](https://github.com/timomeh) works on [react-native-material-bottom-navigation](https://github.com/timomeh/react-native-material-bottom-navigation). | ||
| ### Icon with label | ||
|
|
||
| <img height="200" src="../docs/previews/material-1.gif" /> | ||
|
|
||
| ### Icon only | ||
|
|
||
| <img height="200" src="../docs/previews/material-2.gif" /> | ||
|
|
||
| ### Icon with label on focus | ||
|
|
||
| <img height="200" src="../docs/previews/material-3.gif" /> | ||
|
|
||
| ## Interfaces | ||
|
|
||
| ### MaterialTabBarConfig | ||
|
|
||
| | name | description | required | type | default | | ||
| | ----------------- | -------------------------------------- | -------- | ------------------------------------------------------- | --------------- | | ||
| | `animation` | Material animation preset. | NO | `iconWithLabel` \| `iconOnly` \| `iconWithLabelOnFocus` | `iconWithLabel` | | ||
| | `inactiveOpacity` | Tab bar item inactive opacity. | NO | number | 0.75 | | ||
| | `inactiveScale` | Tab bar item indicator configurations. | NO | number | 0.85 | | ||
|
|
||
| <details> | ||
| <summary>TypeScript Interface</summary> | ||
|
|
||
| ```ts | ||
| export interface MaterialTabBarConfig { | ||
| /** | ||
| * Material animation preset. | ||
| * @type {'iconWithLabel' | 'iconOnly' | 'iconWithLabelOnFocus'} | ||
| * @default 'iconWithLabel' | ||
| */ | ||
| animation?: 'iconWithLabel' | 'iconOnly' | 'iconWithLabelOnFocus'; | ||
| /** | ||
| * Tab bar item inactive opacity. | ||
| * @type {number} | ||
| * @default 0.75 | ||
| */ | ||
| inactiveOpacity?: number; | ||
| /** | ||
| * Tab bar item inactive scale. | ||
| * @type {number} | ||
| * @default 0.85 | ||
| */ | ||
| inactiveScale?: number; | ||
| } | ||
| ``` | ||
|
|
||
| </details> | ||
|
|
||
| ### MaterialTabBarItemConfig | ||
|
|
||
| | name | description | required | type | default | | ||
| | ------------ | ------------------------------------------------------------ | -------- | ------------------- | ------------- | | ||
| | `labelStyle` | This will apply to the tab bar item label. | NO | TextStyle | | | ||
| | `icon` | Icon configurations. | YES | object | | | ||
| | `├component` | Icon component, this could be a function or class component. | YES | [`ReactNode`](#L45) | | | ||
| | `└color` | Icon color. | YES | string | | | ||
| | `ripple` | Tab bar item ripple configurations. | YES | object | | | ||
| | `└color` | Ripple color. | NO | string | `label color` | | ||
|
|
||
| <details> | ||
| <summary>TypeScript Interface</summary> | ||
|
|
||
| ```ts | ||
| export interface MaterialTabBarItemConfig { | ||
| /** | ||
| * Tab bar item label style. | ||
| */ | ||
| labelStyle?: StyleProp<TextStyle>; | ||
| /** | ||
| * Tab bar item icon config. | ||
| */ | ||
| icon: { | ||
| /** | ||
| * Tab bar item icon component, this could be a function or | ||
| * a react node. | ||
| * @type {(props: MaterialTabBarIconProps) => React.ReactNode | React.ReactNode} | ||
| */ | ||
| component: | ||
| | React.FC<MaterialTabBarIconProps> | ||
| | React.ComponentClass<MaterialTabBarIconProps> | ||
| | React.ReactNode; | ||
| /** | ||
| * Icon color. | ||
| * @type {string} | ||
| */ | ||
| color: string; | ||
| }; | ||
| /** | ||
| * Tab bar item ripple config. | ||
| */ | ||
| ripple: { | ||
| /** | ||
| * Tab bar item ripple color. | ||
| * @type {string} | ||
| */ | ||
| color: string; | ||
| }; | ||
| } | ||
| ``` | ||
|
|
||
| </details> | ||
|
|
||
| ### MaterialTabBarIconProps | ||
|
|
||
| | name | description | required | type | default | | ||
| | --------------- | ---------------------------------- | -------- | ----------------------- | ------- | | ||
| | `animatedFocus` | Tab bar item animated focus value. | YES | `Animated.Node<number>` | | ||
| | `color` | Tab bar item icon color. | YES | number | | | ||
| | `size` | Tab bar item icon size. | YES | number | | | ||
|
|
||
| <details> | ||
| <summary>TypeScript Interface</summary> | ||
|
|
||
| ```ts | ||
| export interface MaterialTabBarIconProps { | ||
| /** | ||
| * Tab bar item animated focus value. | ||
| * @type {Animated.Node<number>} | ||
| */ | ||
| animatedFocus: Animated.Node<number>; | ||
| /** | ||
| * Tab bar item icon color. | ||
| * @type {string} | ||
| */ | ||
| color: string; | ||
| /** | ||
| * Tab bar item icon size. | ||
| * @type {number} | ||
| */ | ||
| size: number; | ||
| } | ||
| ``` | ||
|
|
||
| </details> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.