Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Screen freezed after goBack from login screen #88

Open
ionictest2017 opened this issue Mar 11, 2024 · 1 comment
Open

Screen freezed after goBack from login screen #88

ionictest2017 opened this issue Mar 11, 2024 · 1 comment
Labels
bug Something isn't working needs more details

Comments

@ionictest2017
Copy link

ionictest2017 commented Mar 11, 2024

**When I come on the login screen without pressing on the input field goBack is working but when I press the input field then after coming to back screen freezes **

issue is coming in android TV
`import styled from '@emotion/native';
import { SpatialNavigationNode,DefaultFocus } from 'react-tv-space-navigation';
import { TextInput as RNTextInput } from 'react-native';
import { useRef ,useEffect} from 'react';
import { Typography } from './Typography';
import { Box } from './Box';
import { Spacer } from './Spacer';
import React from 'react';

/**

  • It works, but it's not perfect.

  • If you press the back button on Android to dismiss the keyboard,

  • focus is in a weird state where we keep listening to remote control arrow movements.

  • Ideally, we'd like to always remove the native focus when the keyboard is dismissed.
    */
    export const TextInputs = ({ label,onChange,value,error,readOnly }: { label: string,onChange:any,onBlur:any,value:any ,error:any,readOnly:any}) => {
    const ref = useRef(null);
    useEffect(() => {
    return () => {
    ref.current?.blur(); // Clear focus when component unmounts
    };
    }, []);
    return (

    {label}


    <SpatialNavigationNode
    isFocusable={readOnly?false: true}
    onSelect={() => {
    readOnly? null : setTimeout(() => {
    ref?.current?.focus();
    }, 500);

     }}
     onFocus={() => {
       // ref?.current?.focus();
     }}
     onBlur={() => {
       ref?.current?.blur();
     }}
    
     {({ isFocused }) => <StyledTextInput ref={ref}  value={value}
           onChangeText={onChange}
           keyboardType='email-address'
            isFocused={isFocused} 
            error={error}
            readOnly={readOnly}
            />}
    

);
};

const StyledTextInput = styled(RNTextInput)<{ isFocused: boolean,error:any,readOnly:boolean }>(({ isFocused, theme ,error,readOnly}) => ({
borderColor: isFocused ? 'white' : error ? 'red' :'black',
borderWidth: 2,
borderRadius: 8,
color:readOnly? 'gray' : 'white',
backgroundColor: theme.colors.background.inputBG,
paddingHorizontal:8
}));
`

I have tried to remove the onSelect code and isFocusable condition but the issue is still present
Please help

@ionictest2017 ionictest2017 added the bug Something isn't working label Mar 11, 2024
@pierpo
Copy link
Member

pierpo commented Apr 9, 2024

Hey, I am having a very hard time understanding your issue. The code is not formatted properly, and it looks like you're mixing native components (not supported by the lib) with custom components for the lib 🤔

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working needs more details
Projects
None yet
Development

No branches or pull requests

2 participants