Divider

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.

flexDirection

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

visible

Whether it is visible or not.

color

Divider color.

width

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

height

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