Error when filling all the boxes

[greggameplayer]

Tested on web navigator, only when fully filled there is those two errors which appear :

[retyui]

@greggameplayer, Could you please create a demo to reproduce this issue?

[greggameplayer]

here is the code i've used to make a component :

import React, {useState, useEffect} from "react";
import {SafeAreaView, StyleSheet} from "react-native";
import {LinearGradient} from 'expo-linear-gradient';
import {Input} from 'react-native-elements';
import {View, Text} from "./Themed";
import {
    CodeField,
    Cursor,
    useBlurOnFulfill,
    useClearByFocusCell,
} from 'react-native-confirmation-code-field'

const CELL_COUNT = 6;

export function CustomCodeInput({dataArg, setDataArg}: { dataArg: React.SetStateAction<string>, setDataArg: React.SetStateAction<any> }) {
    const [value, setValue] = useState('');

    useEffect(() => {
        // @ts-ignore
        setValue(dataArg)
    }, [dataArg])

    useEffect(() => {
        setDataArg(value)
    }, [value, setDataArg])
    const ref = useBlurOnFulfill({value, cellCount: CELL_COUNT});
    const [props, getCellOnLayoutHandler] = useClearByFocusCell({
        value,
        setValue,
    });

    return (
        <View>
            <CodeField
                ref={ref}
                {...props}
                value={value}
                onChangeText={setValue}
                cellCount={CELL_COUNT}
                rootStyle={styles.codeFieldRoot}
                keyboardType="number-pad"
                textContentType="oneTimeCode"
                renderCell={({index, symbol, isFocused}) => (
                    <View
                        // Make sure that you pass onLayout={getCellOnLayoutHandler(index)} prop to root component of "Cell"
                        onLayout={getCellOnLayoutHandler(index)}
                        key={index}
                        style={[styles.cellRoot, isFocused && styles.focusCell]}>
                        <Text style={styles.cellText}>
                            {symbol || (isFocused ? <Cursor/> : null)}
                        </Text>
                    </View>
                )}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    root: {padding: 20, minHeight: 300},
    title: {textAlign: 'center', fontSize: 30},
    codeFieldRoot: {
        marginTop: 20,
        width: '100%',
        display: "flex",
        justifyContent: "space-around",
        marginLeft: 'auto',
        marginRight: 'auto'
    },
    cellRoot: {
        width: 40,
        height: 40,
        justifyContent: 'center',
        alignItems: 'center',
        borderBottomColor: '#ccc',
        borderBottomWidth: 1
    },
    cellText: {
        color: '#000',
        fontSize: 25,
        textAlign: 'center'
    },
    focusCell: {
        borderBottomColor: '#007AFF',
        borderBottomWidth: 2,
    },
});

[greggameplayer]

Here is how i inserted it in my page :

import {View, Text, Button, SafeAreaView} from "react-native";
import * as React from 'react';
import Frame0 from "./Frame0";
import CustomButton from "../components/CustomButton";
import {CustomCodeInput} from "../components/CustomCodeInput";
import {useState} from "react";
import useColorScheme from '../hooks/useColorScheme';


export default function FrameTest({navigation}: {navigation: any}) {
    const [dt, setDt] = useState('');
    return (

                //accès l'app
                <SafeAreaView style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: (useColorScheme() == "dark") ? 'black' : 'white' }}>
                    <CustomButton action={() => {alert('coucou')}} title={'test'} icon={{name: 'facebook', color: '#FD3178'}} type={"outlined"} disabled={true} width={'55%'} />
                    <CustomButton action={() => {alert('coucou')}} title={'second test'} width={'55%'} icon={{name: 'facebook', color: 'white'}} type={"plain"} />
                    <CustomCodeInput dataArg={dt} setDataArg={setDt}/>
                    <CustomButton action={() => {alert(dt)}} type={"plain"} title={"validate"} width={'55%'}/>
                    <Text>Frame Test</Text>
                    <Button title='accès frame 0' onPress={() => navigation.navigate('Frame0')}/>
                </SafeAreaView>
    );
}

[retyui]

@greggameplayer I create an expo snack and it works (web) without error for me https://snack.expo.io/@retyui/d95d7f

[greggameplayer]

@retyui it's weird and if you try under a real project it's doesn't error error either ?

[retyui]

So if you provide this real project it was easier to fix this issue

[retyui]

Fixed in

• 7.1.0
• 6.7.0

diff: 7.0.0...7.1.0