Closed rsys2022 closed 2 months ago
when we focus on the input field and type anything then go back from the screen then crash the app faces this issue only on Android TV
Please Help me
I am unable to resolve this issue
without focus on input field every thing is working fine, I am using your component for input Field
Hello!
I am sorry, but it is very hard to understand your problem 😂
Can you provide more info?
whenever i have click on input field and type anything then click back button then got freeze or crashed
Hey, the screenshots of the code are not helpful. Can you provide screenshots and videos of your app?
Besides, you are mixing native components (not supported by the lib) with custom components. Checkout TextInput.tsx in the example of the lib.
<Page>
<DefaultFocus>
<View style={styles.container}>
{isLoading && <Loader />}
<SpatialNavigationVirtualizedGrid
data={gridData}
header={
<View style={styles.searchContainer}>
<DefaultFocus>
<SearchTextInputs onChange={setSearchQuery} />
</DefaultFocus>
</View>
}
headerSize={HEADER_SIZE}
renderItem={renderItem}
itemHeight={(theme.sizes.program.portrait.height * 1.1) + 20}
numberOfColumns={NUMBER_OF_COLUMNS}
numberOfRenderedRows={NUMBER_OF_RENDERED_ROWS}
numberOfRowsVisibleOnScreen={NUMBER_OF_ROWS_VISIBLE_ON_SCREEN}
onEndReachedThresholdRowsNumber={INFINITE_SCROLL_ROW_THRESHOLD}
rowContainerStyle={styles.rowStyle}
style={{ backgroundColor: '#111' }}
/>
{!gridData.length && (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', paddingTop: 200 }}>
<Text style={{ color: 'white' }}>This Movie is available!</Text>
</View>
)}
</View>
</DefaultFocus>
</Page>
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 { Box } from './Box';
import { Spacer } from './Spacer';
import React from 'react';
import { scaledPixels } from '../helpers/scaledPixels';
/**
* 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 SearchTextInputs = ({ onChange, value }: { onChange: any, value: any }) => {
const ref = useRef<RNTextInput>(null);
const handleSelect = () => {
// Focus on the input after a short delay
setTimeout(() => {
ref?.current?.focus();
}, 500);
};
const handleBlur = () => {
// Blur the input when the focus is lost
console.log('oin blur------------------------------',ref?.current)
ref?.current?.blur();
};
return (
<Box>
{/* <DefaultFocus> */}
<SpatialNavigationNode
isFocusable={true}
onSelect={handleSelect}
onBlur={handleBlur}
>
{({ isFocused }) =>
<StyledTextInput ref={ref} value={value}
onChangeText={onChange}
placeholder='Search'
keyboardType='email-address'
isFocused={isFocused}
/>
}
</SpatialNavigationNode>
{/* </DefaultFocus> */}
<Spacer direction="vertical" gap="$5" />
</Box>
);
};
const StyledTextInput = styled(RNTextInput)<{ isFocused: boolean }>(({ isFocused, theme }) => ({
borderColor: isFocused ? 'white' : 'gray',
borderWidth: 2,
borderRadius: 8,
color: 'white',
backgroundColor: theme.colors.background.inputBG,
paddingHorizontal: 8,
height: scaledPixels(80), //40,
width: scaledPixels(550),
alignSelf:'center',
textAlignVertical: 'center',
}));
focus still present on input field while it is showing traversing on cards but after click always open keyboard in TVOS only
`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';
/**
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 (
); };
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, height:55 })); `
screen freeze after goback from a screen which have input firld Please help