I'm trying to control focus moving between few textInput elements, but they have no method of blur and focus. I've been struggled by this issue during the day. I have tried every solution I have searched and found on the web, but none of them are the solution of this. I'm not sure, if there is problem on my code or using wrong way of refs. I'm now using "react": "17.0.2" and "react-native": "^0.66.4" for my project, have checked the documentation of react-native and was not able to find any changes currently. Please help me out!!
these are my code.
import React, { useRef } from 'react';
import { View, Text } from 'react-native';
import { TextInput } from 'react-native-gesture-handler';
const template = (props) => {
const onEndEditing = (e) => {
console.log(inputRef.current);
// setInputFocus;
}
const useFocus = () => {
const htmlElRef = useRef(null);
const setFocus = () => {htmlElRef.current && htmlElRef.current.focus()};
return [ htmlElRef, setFocus ];
};
const [inputRef, setInputFocus] = useFocus();
return (
<View style={ styles.container }>
<Text style={styles.title}>id</Text>
<TextInput
clearTextOnFocus={true}
ref={inputRef}
onEndEditing={(e) => onEndEditing(e)}
>
</TextInput>
</View>
)
};
export default template;
below is all the properties in inputRef.current
{
"_children": [],
"_internalFiberInstanceHandleDEV": {
"_debugHookTypes": null,
"_debugNeedsRemount": false,
"_debugOwner": {
"_debugHookTypes": [Array
],
"_debugNeedsRemount": false,
"_debugOwner": [FiberNode
],
"_debugSource": [Object
],
"actualDuration": 0.13012400083243847,
"actualStartTime": 12217585.480157,
"alternate": [FiberNode
],
"child": [FiberNode
],
"childLanes": 0,
"deletions": null,
"dependencies": null,
"elementType": [Function InternalTextInput
],
"flags": 1048581,
"index": 0,
"key": null,
"lanes": 0,
"memoizedProps": [Object
],
"memoizedState": [Object
],
"mode": 2,
"pendingProps": [Object
],
"ref": null,
"return": [FiberNode
],
"selfBaseDuration": 0.10079099982976913,
"sibling": null,
"stateNode": null,
"subtreeFlags": 260,
"tag": 0,
"treeBaseDuration": 0.10983200185000896,
"type": [Function InternalTextInput
],
"updateQueue": [Object
]
},
"_debugSource": {
"columnNumber": 7,
"fileName": "/Users/ethanshin/Dev/moms_mobile/node_modules/react-native/Libraries/Components/TextInput/TextInput.js",
"lineNumber": 1186
},
"actualDuration": 0.02183300070464611,
"actualStartTime": 12217585.587698,
"alternate": {
"_debugHookTypes": null,
"_debugNeedsRemount": false,
"_debugOwner": [FiberNode
],
"_debugSource": [Object
],
"actualDuration": 0.008542003110051155,
"actualStartTime": 12217584.57749,
"alternate": [Circular
],
"child": null,
"childLanes": 0,
"deletions": null,
"dependencies": null,
"elementType": "AndroidTextInput",
"flags": 260,
"index": 0,
"key": null,
"lanes": 0,
"memoizedProps": [Object
],
"memoizedState": null,
"mode": 2,
"pendingProps": [Object
],
"ref": [Function forwardRef
],
"return": [FiberNode
],
"selfBaseDuration": 0.0050420016050338745,
"sibling": null,
"stateNode": [Circular
],
"subtreeFlags": 0,
"tag": 5,
"treeBaseDuration": 0.0050420016050338745,
"type": "AndroidTextInput",
"updateQueue": null
},
"child": null,
"childLanes": 0,
"deletions": null,
"dependencies": null,
"elementType": "AndroidTextInput",
"flags": 260,
"index": 0,
"key": null,
"lanes": 0,
"memoizedProps": {
"accessible": true,
"allowFontScaling": true,
"autoCapitalize": "sentences",
"blurOnSubmit": true,
"caretHidden": undefined,
"children": undefined,
"clearTextOnFocus": true,
"collapsable": false,
"disableFullscreenUI": undefined,
"focusable": true,
"forwardedRef": [Function anonymous
],
"mostRecentEventCount": 3,
"onBlur": [Function _onBlur
],
"onChange": [Function _onChange
],
"onClick": [Function onClick
],
"onEndEditing": [Function onEndEditing
],
"onFocus": [Function _onFocus
],
"onGestureHandlerEvent": [Function anonymous
],
"onGestureHandlerStateChange": [Function anonymous
],
"onResponderGrant": [Function onResponderGrant
],
"onResponderMove": [Function onResponderMove
],
"onResponderRelease": [Function onResponderRelease
],
"onResponderTerminate": [Function onResponderTerminate
],
"onResponderTerminationRequest": [Function onResponderTerminationRequest
],
"onScroll": [Function _onScroll
],
"onSelectionChange": [Function _onSelectionChange
],
"onStartShouldSetResponder": [Function onStartShouldSetResponder
],
"placeholder": "",
"rejectResponderTermination": true,
"selection": null,
"style": [Array
],
"text": "",
"textBreakStrategy": undefined,
"underlineColorAndroid": "transparent"
},
"memoizedState": null,
"mode": 2,
"pendingProps": {
"accessible": true,
"allowFontScaling": true,
"autoCapitalize": "sentences",
"blurOnSubmit": true,
"caretHidden": undefined,
"children": undefined,
"clearTextOnFocus": true,
"collapsable": false,
"disableFullscreenUI": undefined,
"focusable": true,
"forwardedRef": [Function anonymous
],
"mostRecentEventCount": 3,
"onBlur": [Function _onBlur
],
"onChange": [Function _onChange
],
"onClick": [Function onClick
],
"onEndEditing": [Function onEndEditing
],
"onFocus": [Function _onFocus
],
"onGestureHandlerEvent": [Function anonymous
],
"onGestureHandlerStateChange": [Function anonymous
],
"onResponderGrant": [Function onResponderGrant
],
"onResponderMove": [Function onResponderMove
],
"onResponderRelease": [Function onResponderRelease
],
"onResponderTerminate": [Function onResponderTerminate
],
"onResponderTerminationRequest": [Function onResponderTerminationRequest
],
"onScroll": [Function _onScroll
],
"onSelectionChange": [Function _onSelectionChange
],
"onStartShouldSetResponder": [Function onStartShouldSetResponder
],
"placeholder": "",
"rejectResponderTermination": true,
"selection": null,
"style": [Array
],
"text": "",
"textBreakStrategy": undefined,
"underlineColorAndroid": "transparent"
},
"ref": [Function forwardRef
],
"return": {
"_debugHookTypes": null,
"_debugNeedsRemount": false,
"_debugOwner": [FiberNode
],
"_debugSource": [Object
],
"actualDuration": 0.028791001066565514,
"actualStartTime": 12217585.581782,
"alternate": [FiberNode
],
"child": [Circular
],
"childLanes": 0,
"deletions": null,
"dependencies": null,
"elementType": [Object
],
"flags": 0,
"index": 0,
"key": null,
"lanes": 0,
"memoizedProps": [Object
],
"memoizedState": null,
"mode": 2,
"pendingProps": [Object
],
"ref": null,
"return": [FiberNode
],
"selfBaseDuration": 0.005458001047372818,
"sibling": null,
"stateNode": null,
"subtreeFlags": 260,
"tag": 10,
"treeBaseDuration": 0.00904100202023983,
"type": [Object
],
"updateQueue": null
},
"selfBaseDuration": 0.003583000972867012,
"sibling": null,
"stateNode": [Circular
],
"subtreeFlags": 0,
"tag": 5,
"treeBaseDuration": 0.003583000972867012,
"type": "AndroidTextInput",
"updateQueue": null
},
"_nativeTag": 53,
"clear": [Function clear
],
"getNativeRef": [Function getNativeRef
],
"handlerTag": 1,
"isFocused": [Function isFocused
],
"viewConfig": {
"Commands": {
"blurTextInput": 2,
"focusTextInput": 1
},
"Constants": {
"AutoCapitalizationType": [Object
]
},
"NativeProps": {
"accessibilityActions": "Array",
"accessibilityHint": "String",
"accessibilityLabel": "String",
"accessibilityLiveRegion": "String",
"accessibilityRole": "String",
"accessibilityState": "Map",
"accessibilityValue": "Map",
"adjustsFontSizeToFit": "boolean",
"alignContent": "String",
"alignItems": "String",
"alignSelf": "String",
"allowFontScaling": "boolean",
"aspectRatio": "number",
"autoCapitalize": "mixed",
"autoComplete": "String",
"autoCorrect": "boolean",
"autoFocus": "boolean",
"backgroundColor": "Color",
"blurOnSubmit": "boolean",
"borderBottomColor": "Color",
"borderBottomLeftRadius": "number",
"borderBottomRightRadius": "number",
"borderBottomWidth": "number",
"borderColor": "Color",
"borderEndWidth": "number",
"borderLeftColor": "Color",
"borderLeftWidth": "number",
"borderRadius": "number",
"borderRightColor": "Color",
"borderRightWidth": "number",
"borderStartWidth": "number",
"borderStyle": "String",
"borderTopColor": "Color",
"borderTopLeftRadius": "number",
"borderTopRightRadius": "number",
"borderTopWidth": "number",
"borderWidth": "number",
"bottom": "mixed",
"caretHidden": "boolean",
"collapsable": "boolean",
"color": "Color",
"contextMenuHidden": "boolean",
"cursorColor": "Color",
"disableFullscreenUI": "boolean",
"display": "String",
"editable": "boolean",
"elevation": "number",
"end": "mixed",
"flex": "number",
"flexBasis": "mixed",
"flexDirection": "String",
"flexGrow": "number",
"flexShrink": "number",
"flexWrap": "String",
"fontFamily": "String",
"fontSize": "number",
"fontStyle": "String",
"fontVariant": "Array",
"fontWeight": "String",
"height": "mixed",
"importantForAccessibility": "String",
"importantForAutofill": "String",
"includeFontPadding": "boolean",
"inlineImageLeft": "String",
"inlineImagePadding": "number",
"justifyContent": "String",
"keyboardType": "String",
"left": "mixed",
"letterSpacing": "number",
"lineHeight": "number",
"margin": "mixed",
"marginBottom": "mixed",
"marginEnd": "mixed",
"marginHorizontal": "mixed",
"marginLeft": "mixed",
"marginRight": "mixed",
"marginStart": "mixed",
"marginTop": "mixed",
"marginVertical": "mixed",
"maxFontSizeMultiplier": "number",
"maxHeight": "mixed",
"maxLength": "number",
"maxWidth": "mixed",
"minHeight": "mixed",
"minWidth": "mixed",
"minimumFontScale": "number",
"mostRecentEventCount": "number",
"multiline": "boolean",
"nativeID": "String",
"numberOfLines": "number",
"onContentSizeChange": "boolean",
"onKeyPress": "boolean",
"onLayout": "boolean",
"onScroll": "boolean",
"onSelectionChange": "boolean",
"opacity": "number",
"overflow": "String",
"padding": "mixed",
"paddingBottom": "mixed",
"paddingEnd": "mixed",
"paddingHorizontal": "mixed",
"paddingLeft": "mixed",
"paddingRight": "mixed",
"paddingStart": "mixed",
"paddingTop": "mixed",
"paddingVertical": "mixed",
"placeholder": "String",
"placeholderTextColor": "Color",
"position": "String",
"renderToHardwareTextureAndroid": "boolean",
"returnKeyLabel": "String",
"returnKeyType": "String",
"right": "mixed",
"rotation": "number",
"scaleX": "number",
"scaleY": "number",
"secureTextEntry": "boolean",
"selectTextOnFocus": "boolean",
"selection": "Map",
"selectionColor": "Color",
"shadowColor": "Color",
"showSoftInputOnFocus": "boolean",
"start": "mixed",
"testID": "String",
"text": "String",
"textAlign": "String",
"textAlignVertical": "String",
"textBreakStrategy": "String",
"textDecorationLine": "String",
"textShadowColor": "Color",
"textShadowOffset": "Map",
"textShadowRadius": "number",
"textTransform": "String",
"top": "mixed",
"transform": "Array",
"translateX": "number",
"translateY": "number",
"underlineColorAndroid": "Color",
"width": "mixed",
"zIndex": "number"
},
"bubblingEventTypes": {
"topBlur": [Object
],
"topEndEditing": [Object
],
"topFocus": [Object
],
"topKeyPress": [Object
],
"topSubmitEditing": [Object
],
"topTextInput": [Object
]
},
"directEventTypes": {
"topScroll": [Object
]
},
"uiViewClassName": "AndroidTextInput",
"validAttributes": {
"accessibilityActions": true,
"accessibilityHint": true,
"accessibilityLabel": true,
"accessibilityLiveRegion": true,
"accessibilityRole": true,
"accessibilityState": true,
"accessibilityValue": true,
"adjustsFontSizeToFit": true,
"alignContent": true,
"alignItems": true,
"alignSelf": true,
"allowFontScaling": true,
"aspectRatio": true,
"autoCapitalize": true,
"autoComplete": true,
"autoCorrect": true,
"autoFocus": true,
"backgroundColor": [Object
],
"blurOnSubmit": true,
"borderBottomColor": [Object
],
"borderBottomLeftRadius": true,
"borderBottomRightRadius": true,
"borderBottomWidth": true,
"borderColor": [Object
],
"borderEndWidth": true,
"borderLeftColor": [Object
],
"borderLeftWidth": true,
"borderRadius": true,
"borderRightColor": [Object
],
"borderRightWidth": true,
"borderStartWidth": true,
"borderStyle": true,
"borderTopColor": [Object
],
"borderTopLeftRadius": true,
"borderTopRightRadius": true,
"borderTopWidth": true,
"borderWidth": true,
"bottom": true,
"caretHidden": true,
"collapsable": true,
"color": [Object
],
"contextMenuHidden": true,
"cursorColor": [Object
],
"disableFullscreenUI": true,
"display": true,
"editable": true,
"elevation": true,
"end": true,
"flex": true,
"flexBasis": true,
"flexDirection": true,
"flexGrow": true,
"flexShrink": true,
"flexWrap": true,
"fontFamily": true,
"fontSize": true,
"fontStyle": true,
"fontVariant": true,
"fontWeight": true,
"height": true,
"importantForAccessibility": true,
"importantForAutofill": true,
"includeFontPadding": true,
"inlineImageLeft": true,
"inlineImagePadding": true,
"justifyContent": true,
"keyboardType": true,
"left": true,
"letterSpacing": true,
"lineHeight": true,
"margin": true,
"marginBottom": true,
"marginEnd": true,
"marginHorizontal": true,
"marginLeft": true,
"marginRight": true,
"marginStart": true,
"marginTop": true,
"marginVertical": true,
"maxFontSizeMultiplier": true,
"maxHeight": true,
"maxLength": true,
"maxWidth": true,
"minHeight": true,
"minWidth": true,
"minimumFontScale": true,
"mostRecentEventCount": true,
"multiline": true,
"nativeID": true,
"numberOfLines": true,
"onContentSizeChange": true,
"onKeyPress": true,
"onLayout": true,
"onScroll": true,
"onSelectionChange": true,
"opacity": true,
"overflow": true,
"padding": true,
"paddingBottom": true,
"paddingEnd": true,
"paddingHorizontal": true,
"paddingLeft": true,
"paddingRight": true,
"paddingStart": true,
"paddingTop": true,
"paddingVertical": true,
"placeholder": true,
"placeholderTextColor": [Object
],
"position": true,
"renderToHardwareTextureAndroid": true,
"returnKeyLabel": true,
"returnKeyType": true,
"right": true,
"rotation": true,
"scaleX": true,
"scaleY": true,
"secureTextEntry": true,
"selectTextOnFocus": true,
"selection": true,
"selectionColor": [Object
],
"shadowColor": [Object
],
"showSoftInputOnFocus": true,
"start": true,
"style": [Object
],
"testID": true,
"text": true,
"textAlign": true,
"textAlignVertical": true,
"textBreakStrategy": true,
"textDecorationLine": true,
"textShadowColor": [Object
],
"textShadowOffset": true,
"textShadowRadius": true,
"textTransform": true,
"top": true,
"transform": true,
"translateX": true,
"translateY": true,
"underlineColorAndroid": [Object
],
"width": true,
"zIndex": true
}
}
}
CodePudding user response：
import React, { useRef } from 'react';
Import { View, Text } from 'react-native';
import { TextInput } from 'react-native-gesture-handler';
const template = (props) => {
const inputRef = useRef(); //set input ref
const onEndEditing = (e) => {
console.log(inputRef.focus()); //use ref
}
return (
<View style={ styles.container }>
<Text style={styles.title}>id</Text>
<TextInput
clearTextOnFocus={true}
ref={inputRef}
onEndEditing={(e) => onEndEditing(e)}
>
</TextInput>
</View>
)
};
try this code
CodePudding user response：
import React, {useRef} from 'react';
import {StyleSheet,SafeAreaView,StatusBar,TextInput,View} from 'react-native';
const App = props => {
const inputRef = useRef();
const onEndEditing = e => {
console.log(inputRef);
inputRef?.current?.focus();
};
return (
<SafeAreaView style={styles.container}>
<View style={{flex: 1}}>
<TextInput
style={styles.input}
clearTextOnFocus={true}
ref={inputRef}
onEndEditing={e => onEndEditing(e)}
/>
<TextInput style={styles.input} />
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: StatusBar.currentHeight,
marginHorizontal: 16,
},
input: {
height: 40,
margin: 12,
borderWidth: 1,
padding: 10,
},
});
export default App;
you should use inputRef?.current to access focus and blur methods