Divider

Last Updated on : 2024-06-05 03:14:32download

Overview

Divider.

Code demo

Divider will automatically adapt to the width of the parent element by default.

For more information, see Divider Demo.

import PropTypes from "prop-types";
 import React from "react";
 import { View, Text, TextInput, ViewPropTypes, StyleSheet } from "react-native";
 import { Divider, TYText } from "tuya-panel-kit";
 
function InputItem({
  style,
  title,
  titleStyle,
  inputStyle,
  ...textInputProps
 }) {
  return (
    <View style={[styles.container, style]}>
      <View style={styles.content}>
        <TYText style={[styles.title, titleStyle]}>{title}</TYText>
        <TextInput
          style={[styles.textInput, inputStyle]}
          placeholderTextColor="#dbdbdb"
          {...textInputProps}
        />
      </View>
      <View style={styles.dot} />
      <Divider />
    </View>
  );
 }
 
InputItem.propTypes = {
  ...TextInput.propTypes,
  title: PropTypes.string.isRequired,
  titleStyle: Text.propTypes.style,
  inputStyle: ViewPropTypes.style,
 };
 
InputItem.defaultProps = {
  titleStyle: null,
  inputStyle: null,
 };
 
const styles = StyleSheet.create({
  container: {
    height: 94,
    alignSelf: "stretch",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    paddingHorizontal: 24,
    backgroundColor: "#fff",
  },
 
 content: {
    flex: 1,
    alignItems: "flex-start",
    justifyContent: "center",
  },
 
 title: {
    fontSize: 14,
    color: "#999",
  },
 
 textInput: {
    alignSelf: "stretch",
    marginTop: 10,
    fontSize: 16,
    color: "#333",
  },
 
 dot: {
    width: 6,
    height: 6,
    borderRadius: 3,
    backgroundColor: "#dbdbdb",
  },
 });
 
export default InputItem;

API

style

Divider style.

Type Required
ViewPropTypes.style No

flexDirection

The direction of main axis. It is row by default.

Type Required Default value
row | column No row

visible

Whether it is visible or not.

Type Required Default value
boolean No true

color

Divider color.

Type Required Default value
ColorPropType No #dbdbdb

width

Divider width. It is the width of the parent element by default.

Type Required Default value
number No null

height

Divider height. It is the height of the parent element by default.

Type Required Default value
number No null