fix: merge containers into one

anday013 · May 25, 2024 · 37bfe66 · 37bfe66
1 parent 4da4c01
commit 37bfe66
Show file tree

Hide file tree

Showing 3 changed files with 328 additions and 343 deletions.
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,37 +57,35 @@ 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(hasCursor);
+    <View style={[styles.container, containerStyle, inputsContainerStyle]}>
+      {Array(numberOfDigits)
+        .fill(0)
+        .map((_, index) => {
+          const char = text[index];
+          const isFocusedInput = index === focusedInputIndex && !disabled && Boolean(hasCursor);
 
-            return (
-              <Pressable
-                key={`${char}-${index}`}
-                disabled={disabled}
-                onPress={handlePress}
-                style={generatePinCodeContainerStyle(isFocusedInput, 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(isFocusedInput, 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}