rn-code-input - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

dist/rn-code-input.d.ts

		import React from "react";
		import { RNCodeInputProps } from "./types";
		declare const RnCodeInput: ({ onChange, value, length, hide, showSoftInputOnFocus, activeBoxStyle, inActiveBoxStyle, mask, textStyle, boxStyle, style }: RNCodeInputProps) => React.JSX.Element;
		declare const RnCodeInput: ({ onChange, value, length, showSoftInputOnFocus, style, ...props }: RNCodeInputProps) => React.JSX.Element;
		export default RnCodeInput;

dist/rn-code-input.js

		import React from "react";
		import { TextInput, View, Text } from "react-native";
		import styles from "./style";
		const RnCodeInput = ({ onChange, value, length = 6, hide = false, showSoftInputOnFocus = false, activeBoxStyle, inActiveBoxStyle, mask = "●", textStyle, boxStyle, style }) => {
		const RnCodeInput = ({ onChange, value, length = 6, showSoftInputOnFocus = false, style, ...props }) => {
		const getValue = React.useCallback((index) => value[index] \|\| "", [value]);
		return (React.createElement(View, { style: [styles.container, style] },
		Array.from({ length }).map((_, index) => (React.createElement(CodeBox, { key: index, hide: hide, index: index, value: getValue(index), values: value, activeBoxStyle: activeBoxStyle, inActiveBoxStyle: inActiveBoxStyle, mask: mask, textStyle: textStyle, boxStyle: boxStyle }))),
		Array.from({ length }).map((_, index) => (React.createElement(CodeBox, { key: index, index: index, value: getValue(index), values: value, ...props }))),
		React.createElement(TextInput, { keyboardType: "number-pad", style: styles.input, showSoftInputOnFocus: showSoftInputOnFocus, onChangeText: onChange, value: value, maxLength: length })));
		};
		export default RnCodeInput;
		const CodeBox = ({ value, values, index, hide = false, activeBoxStyle, inActiveBoxStyle, mask, textStyle, boxStyle }) => {
		const isActive = React.useMemo(() => values.length === index, [values, index]);
		const CodeBox = ({ value, values, index, hide = false, activeBoxStyle, inActiveBoxStyle, mask = "●", textStyle, boxStyle, filledBoxStyle }) => {
		const { isActive, isFilled } = React.useMemo(() => ({ isActive: values.length === index, isFilled: !!value }), [values, index]);
		return (React.createElement(View, { key: index, style: [
		@@ -17,4 +17,5 @@ styles.box,
		boxStyle,
		isActive ? activeBoxStyle : inActiveBoxStyle
		] }, !!value && React.createElement(Text, { style: [styles.text, textStyle] }, hide ? mask : value)));
		isActive ? activeBoxStyle : inActiveBoxStyle,
		isFilled ? filledBoxStyle : {}
		] }, !!value && (React.createElement(Text, { style: [styles.text, textStyle] }, hide ? mask : value))));
		};

dist/types.d.ts

		@@ -10,2 +10,3 @@ import { TextStyle, ViewStyle } from "react-native";
		inActiveBoxStyle?: ViewStyle;
		filledBoxStyle?: ViewStyle;
		mask?: string;
		@@ -12,0 +13,0 @@ textStyle?: TextStyle;

package.json

		{
		"name": "rn-code-input",
		"version": "0.0.2",
		"version": "0.0.3",
		"description": "React-Native Code input implementation",
		@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

		@@ -79,2 +79,3 @@ ## rn-code-input
		* `inActiveBoxStyle`: (ViewStyle) - Styles applied to the inactive code box.
		* `filledBoxStyle`: (ViewStyle) - Styles applied to the filled boxes.
		* `mask`: (string) - The character to display as a mask.
		@@ -107,2 +108,3 @@ * `textStyle`: (TextStyle) - Styles applied to the text displayed within the code box.
		inActiveBoxStyle={{ borderColor: "gray" }}
		filledBoxStyle={{ borderColor: "green" }}
		boxStyle={{ borderRadius: 99, marginHorizontal: 5 }}
		@@ -109,0 +111,0 @@ hide

rn-code-input - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics