TopBar

Overview

TopBar is the top toolbar integrated in FullView by default. It is called ActionBar in Android and UINavigationBar in iOS.

The new version of TopBar unifies the code of the Android and iOS operating systems, and splits out three components, TopBar.Container, TopBar.Content, and TopBar.Action. If the height is self-defined, the three components can be used for combined construction.

In addition, the height of TopBar is adapted to Android and iOS respectively, which can be obtained through TopBar.height:

• iPhoneX and above models: 88
• Models below iPhoneX: 64
• Android models: 56

Code demo

Note: for more information, see Demo.

Basic use

import React from "react";
 import { View, Platform } from "react-native";
 import { TYNative, TopBar } from "tuya-panel-kit";
 
const backIcon = Platform.OS === "ios" ? "backIos" : "backAndroid";
 
export default () => (
  <View>
    {/* Split version */}
    <TopBar.Container background="#000">
      <TopBar.Action
        name={backIcon}
        color="red"
        onPress={TYNative.Navigator.pop}
      />
      <TopBar.Content title="Title" />
      <TopBar.Action
        name="pen"
        color="yellow"
        onPress={TYNative.showDeviceMenu}
      />
    </TopBar.Container>
 
   {/* Encapsulation version */}
    <TopBar
      style={{ marginTop: 24 }}
      background="#000"
      title="Title"
      color="red"
      actions={[
        {
          name: "pen",
          color: "yellow",
          onPress: () => TYNative.showDeviceMenu(),
        },
      ]}
      onBack={TYNative.Navigator.pop}
    />
  </View>
 );

Gradient

import React from "react";
 import { View, Platform } from "react-native";
 import { TYNative, TopBar } from "tuya-panel-kit";
 
const backIcon = Platform.OS === "ios" ? "backIos" : "backAndroid";
 
const linearBackground = {
  stops: {
    "0%": "red",
    "100%": "yellow",
  },
 };
 
const radialBackground = {
  stops: [
    {
      offset: "0%",
      stopColor: "#ff0",
      stopOpacity: "1",
    },
    {
      offset: "100%",
      stopColor: "#00f",
      stopOpacity: "1",
    },
  ],
 };
 
export default () => (
  <View>
    {/* Split version */}
    <TopBar.Container background={linearBackground}>
      <TopBar.Action name={backIcon} onPress={TYNative.Navigator.pop} />
      <TopBar.Content title="Title" />
    </TopBar.Container>
 
   {/* Encapsulation version */}
    <TopBar
      style={{ marginTop: 24 }}
      background={radialBackground}
      title="Title"
      onBack={TYNative.Navigator.pop}
    />
  </View>
 );

Multi-Toolbar

import React from 'react';
 import { View, Platform } from 'react-native';
 import { TYNative, TopBar } from 'tuya-panel-kit';
 
const backIcon = Platform.OS === 'ios' ? 'backIos' : 'backAndroid';
 
export default () => (
  <View>
    {/* Split version */}
    <TopBar.Container background="blue">
      <TopBar.Action
        name={backIcon}
        onPress={TYNative.Navigator.pop}
      />
      <TopBar.Action
        source="Timing"
        color="red"
        onPress={() => {
          TYNative.simpleTipDialog('click timing', () => {});
        }}
      />
      <TopBar.Content
        title="Very Very Very Very Very Long Title"
        subTitle="SubTitle"
        onPress={() => {
          TYNative.simpleTipDialog('click title', () => {});
        }}
      />
      {['plus', 'warning', 'edit'].map(v => (
        <TopBar.Action
          key={v}
          name={v}
          onPress={() => {
            TYNative.simpleTipDialog(`click ${v}`, () => {});
          }}
        />
      ))}
    </TopBar.Container>
 
   {/* Encapsulation version */}
    <TopBar
      style={{ marginTop: 24 }}
      background="blue"
      title="Very Very Very Very Very Long Title"
      subTitle="SubTitle"
      onPress={() => TYNative.simpleTipDialog('click title', () => {})}
      leftActions={[{
        name: backIcon,
        onPress: TYNative.Navigator.pop,
      }, {
        source: 'Timing',
        color: 'red',
        onPress: () => TYNative.simpleTipDialog('click timing', () => {}),
      }]}
      actions={['plus', 'warning', 'edit'].map(v => ({
        name: v,
        onPress: () => TYNative.simpleTipDialog(`click ${v}`, () => {}),
      }))}
    />
  </View
 );

TopBar.Container API

style

The container style of the top toolbar internally handles the three StatusBar situations of iOS versions below and above iPhoneX, and Android. You can also define your own style.

Type	Required	Default value
ViewPropTypes.style	No	null

contentStyle

The style of the container content of the top toolbar.

Type	Required	Default value
ViewPropTypes.style	No	null

background

The background of the top toolbar container, which can be a solid color or a gradient color. For the format of the gradient color, see LinearGradient or RadialGradient.

Type	Required	Default value
string or object	No	null

children

The child elements of the top toolbar container, usually TopBar.Action and TopBar.Content. TopBar.Container automatically adapts to the position of these two components.

Type	Required	Default value
any	No	null

TopBar.Action API

TopBar.Action is a main part of TopBar, which can be pictures, text, or IconFont. TopBar.Action will determine the type of action by itself based on the data source.

Note: If name or d has been set, IconFont will be rendered first.

style

TopBar.Action style.

Type	Required	Default value
ViewPropTypes.style	No	null

contentStyle

TopBar.Action content style, which can be pictures, text, or IconFont.

Type	Required	Default value
ImageStyleProps or Text.propTypes.style or IconFontProps	No	null

size

TopBar.Action IconFont size.

Type	Required	Default value
number	No	26

spacing

The left and right margins of TopBar.Action.

Note: If you set the text type, spacing will be added to the action as an extra width.

Type	Required	Default value
number	No	6

color

TopBar.Action content color, which can be the background color of the picture, text color, or IconFont color.

Type	Required	Default value
ColorPropType	No	#fff

source

TopBar.Action content.

• String: rendering text components.
• Value or web image: rendering image components.
• Not exist: render an empty View.

Type	Required	Default value
string or number or { uri }	No	null

disabled

Whether to disable or not.

Type	Required	Default value
boolean	No	false

background

TopBar background, which can be a specified color or gradient color.

Type	Required	Default value
string or object	No

children

TopBar.Action child element. If you do not enter it, TopBar.Action will automatically render the required child elements according to the type of source passed.

Type	Required	Default value
any	No	null

TopBar.Content API

TopBar.Content is the central content component of TopBar.

style

TopBar.Content style.

Type	Required	Default value
ViewPropTypes.style	No	null

color

TopBar.Content title and subtitle color. The subtitle color is the color with 0.6 transparency.

Type	Required	Default value
ColorPropType	No	#fff

title

TopBar.Content title.

Type	Required	Default value
string	No	‘’

titleStyle

TopBar.Content title style.

Type	Required	Default value
Text.propTypes.style	No	null

subTitle

TopBar.Content subtitle.

Type	Required	Default value
string	No	‘’

subTitleStyle

TopBar.Content subtitle style.

Type	Required	Default value
Text.propTypes.style	No	null

position

The position of TopBar.Content, which can be left-aligned, center-aligned and right-aligned.

Type	Required	Default value
enum: 'left','center','right'	No	center

children

The child element of TopBar.Content.

Type	Required	Default value
any	No	null

onPress

The click event of TopBar.Content.

Type	Required	Default value
() => void	No	null

TopBar API

TopBar is an encapsulated component that can be used when the degree of customization is low. In addition to the following parameters, TopBar props can also be inherited from TopBar.Content.

style

The container style of TopBar.Container internally handles the three StatusBar situations of iOS versions below and above iPhoneX, and Android. You can also define your own style of StatusBar.

Type	Required	Default value
ViewPropTypes.style	No	null

contentStyle

TopBar.Container container content style.

Type	Required	Default value
ViewPropTypes.style	No	null

background

TopBar.Container container background, which can be a specified color or gradient color. For the format of gradient color, see LinearGradient or RadialGradient.

Type	Required	Default value
string or object	No	None

color

TopBar.Action content color, which can be the background color of the picture, text color, or IconFont color.

Type	Required	Default value
ColorPropType	No	#fff

leftActions

The left toolbar configuration of TopBar. If it is null, it will render the default return buttons for iOS and Android.

Type	Required	Default value
array	No	null

actions

The right toolbar configuration of TopBar. The objects in the array will be passed to TopBar.Action as props.

Type	Required	Default value
array	No	null

onBack

Return event.

Type	Required	Default value
() => void	No	null