react-native-ui-lib/src/components/actionBar/actionBar.api.json

[](https://stand-with-ukraine.pp.ua)

{
  "name": "ActionBar",
  "category": "controls",
  "description": "Quick actions bar, each action support Button component props",
  "extends": ["basic/View"],
  "modifiers": ["margin", "padding"],
  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ActionBarScreen.tsx",
  "images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ActionBar/ActionBar.gif?raw=true"],
  "props": [
    {"name": "actions", "type": "ButtonProps[]", "description": "The actions for the action bar", "required": true},
    {"name": "height", "type": "number", "description": "Height", "default": "48"},
    {"name": "backgroundColor", "type": "string", "description": "Background color", "default": "Colors.white"},
    {"name": "centered", "type": "boolean", "description": "Should action be equally centered"},
    {
      "name": "keepRelative",
      "type": "boolean",
      "description": "Keep the action bar position relative instead of it absolute position"
    },
    {
      "name": "useSafeArea",
      "type": "boolean",
      "description": "In iOS, use safe area, in case component attached to the bottom",
      "default": "true"
    },
    {"name": "style", "type": "ViewStyle", "description": "Component's style"}
  ],
  "snippet": [
    "<View marginT-40>",
    "  <ActionBar",
    "    actions={[",
    "      {label: 'Delete'$1, onPress: () => console.log('delete')$2},",
    "      {label: 'Replace Photo'$3, onPress: () => console.log('replace photo')$4},",
    "      {label: 'Edit'$5, onPress: () => console.log('edit')$6}",
    "    ]}",
    "  />",
    "</View>"
  ]
}