fix: merge containers into one (#58)

* fix: merge containers into one * docs: add a tip for spacing between inputs
anday013 · May 28, 2024 · eb71388 · eb71388
1 parent 89dc143
commit eb71388
Show file tree

Hide file tree

Showing 4 changed files with 333 additions and 346 deletions.
diff --git a/README.MD b/README.MD
@@ -104,7 +104,9 @@ The `react-native-otp-entry` component accepts the following props:
 | `filledPinCodeContainerStyle`   | ViewStyle | Custom styles for the input field when it has a value.                             |
 | `disabledPinCodeContainerStyle` | ViewStyle | Custom styles for the input field when it is disabled.                             |
 
-Note: The `ViewStyle` and `TextStyle` types are imported from `react-native` and represent the style objects used in React Native for views and text, respectively.
+**Note:** The `ViewStyle` and `TextStyle` types are imported from `react-native` and represent the style objects used in React Native for views and text, respectively.
+
+**Tip:** If you have difficulties while applying `gap` or in any other style property to set a suitable space between the OTP input containers, please set the `width` in `containerStyle` to `'auto'` or `undefined`, as it is been set to `'100%'` by default.
 
 ![Theme](otp.drawio.svg)
 

diff --git a/src/OtpInput/OtpInput.styles.ts b/src/OtpInput/OtpInput.styles.ts
@@ -2,11 +2,8 @@ import { StyleSheet } from "react-native";
 
 export const styles = StyleSheet.create({
   container: {
+    width: "100%",
     flexDirection: "row",
-  },
-  inputsContainer: {
-    flexDirection: "row",
-    flex: 1,
     justifyContent: "space-between",
   },
   codeContainer: {

diff --git a/src/OtpInput/OtpInput.tsx b/src/OtpInput/OtpInput.tsx
@@ -57,39 +57,37 @@ export const OtpInput = forwardRef<OtpInputRef, OtpInputProps>((props, ref) => {
   };
 
   return (
-    <View style={[styles.container, containerStyle]}>
-      <View style={[styles.inputsContainer, inputsContainerStyle]}>
-        {Array(numberOfDigits)
-          .fill(0)
-          .map((_, index) => {
-            const char = text[index];
-            const isFocusedInput = index === focusedInputIndex && !disabled && Boolean(isFocused);
-            const isFilledLastInput = text.length === numberOfDigits && index === text.length - 1;
-            const isFocusedContainer = isFocusedInput || (isFilledLastInput && Boolean(isFocused));
+    <View style={[styles.container, containerStyle, inputsContainerStyle]}>
+      {Array(numberOfDigits)
+        .fill(0)
+        .map((_, index) => {
+          const char = text[index];
+          const isFocusedInput = index === focusedInputIndex && !disabled && Boolean(isFocused);
+          const isFilledLastInput = text.length === numberOfDigits && index === text.length - 1;
+          const isFocusedContainer = isFocusedInput || (isFilledLastInput && Boolean(isFocused));
 
-            return (
-              <Pressable
-                key={`${char}-${index}`}
-                disabled={disabled}
-                onPress={handlePress}
-                style={generatePinCodeContainerStyle(isFocusedContainer, char)}
-                testID="otp-input"
-              >
-                {isFocusedInput && !hideStick ? (
-                  <VerticalStick
-                    focusColor={focusColor}
-                    style={focusStickStyle}
-                    focusStickBlinkingDuration={focusStickBlinkingDuration}
-                  />
-                ) : (
-                  <Text style={[styles.codeText, pinCodeTextStyle]}>
-                    {char && secureTextEntry ? "•" : char}
-                  </Text>
-                )}
-              </Pressable>
-            );
-          })}
-      </View>
+          return (
+            <Pressable
+              key={`${char}-${index}`}
+              disabled={disabled}
+              onPress={handlePress}
+              style={generatePinCodeContainerStyle(isFocusedContainer, char)}
+              testID="otp-input"
+            >
+              {isFocusedInput && !hideStick ? (
+                <VerticalStick
+                  focusColor={focusColor}
+                  style={focusStickStyle}
+                  focusStickBlinkingDuration={focusStickBlinkingDuration}
+                />
+              ) : (
+                <Text style={[styles.codeText, pinCodeTextStyle]}>
+                  {char && secureTextEntry ? "•" : char}
+                </Text>
+              )}
+            </Pressable>
+          );
+        })}
       <TextInput
         value={text}
         onChangeText={handleTextChange}