Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Focussing a text input as soon as it is available crashes the application.
See original GitHub issueCurrent behaviour
I’m trying to give a TextInput focus as soon as the Dialog in which it is contained, is opened. When trying to focus it as soon as the reference is available, the application crashes.
Expected behaviour
I expect the TextInput to focus and open the Keyboard as soon as the dialog opens.
Code sample
The following should reproduce:
<TextInput
ref={i => i.focus()} //This crashes.
name="value"
label={this.props.label}
value={this.state.value}
onChangeText={this.onValueChange}
multiline={this.props.multiline}
numberOfLines={this.props.numberOfLines} />
What have you tried
Placing it on a timeout, and checking if i itself is null (it is not). After that I was out of ideas pretty quickly.
Your Environment
| software | version |
|---|---|
| android | SDK 26 |
| react-native | 16.3.1 |
| react-native-paper | 2.0.1 |
| node | v8.11.3 |
| npm or yarn | 6.1.0 |
Stack Trace
09-05 18:31:16.112 23268 2546 E ReactNativeJS: TypeError: null is not an object (evaluating ‘i.focus’) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: 09-05 18:31:16.112 23268 2546 E ReactNativeJS: This error is located at: 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in withTheme(TextInput) (at DialogPreferenceText.js:28) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in View (at DialogPreferenceText.js:27) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in View (at ScrollView.js:791) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in RCTScrollView (at ScrollView.js:887) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in ScrollView (at AbstractDialog.js:58) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in View (at AbstractDialog.js:57) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in View (at Surface.js:65) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in Surface 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in ThemeProvider 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in withTheme(Surface) (at createAnimatedComponent.js:154) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in AnimatedComponent (at Dialog.js:114) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in View (at Modal.js:160) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in View (at createAnimatedComponent.js:154) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in AnimatedComponent (at Modal.js:148) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in Modal 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in ThemeProvider 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in withTheme(Modal) (at Dialog.js:113) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in Dialog 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in ThemeProvider 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in withTheme(Dialog) (at AbstractDialog.js:55) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in ThemeProvider (at Portal.js:54) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in View (at PortalManager.js:44) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in PortalManager (at PortalHost.js:134) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in Portal.Host (at App.js:47) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in View (at MenuProvider.js:219) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in View (at MenuProvider.js:218) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in MenuProvider (at App.js:45) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in ThemeProvider (at Provider.js:17) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in View (at PortalHost.js:131) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in Portal.Host (at Provider.js:16) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in Provider (at App.js:44) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in App (at renderApplication.js:33) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in View (at AppContainer.js:102) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in View (at AppContainer.js:122) 09-05 18:31:16.112 23268 2546 E ReactNativeJS: in AppContainer (at renderApplication.js:32) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: TypeError: null is not an object (evaluating ‘i.focus’) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: 09-05 18:31:16.126 23268 2546 E ReactNativeJS: This error is located at: 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in withTheme(TextInput) (at DialogPreferenceText.js:28) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in View (at DialogPreferenceText.js:27) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in View (at ScrollView.js:791) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in RCTScrollView (at ScrollView.js:887) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in ScrollView (at AbstractDialog.js:58) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in View (at AbstractDialog.js:57) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in View (at Surface.js:65) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in Surface 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in ThemeProvider 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in withTheme(Surface) (at createAnimatedComponent.js:154) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in AnimatedComponent (at Dialog.js:114) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in View (at Modal.js:160) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in View (at createAnimatedComponent.js:154) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in AnimatedComponent (at Modal.js:148) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in Modal 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in ThemeProvider 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in withTheme(Modal) (at Dialog.js:113) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in Dialog 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in ThemeProvider 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in withTheme(Dialog) (at AbstractDialog.js:55) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in ThemeProvider (at Portal.js:54) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in View (at PortalManager.js:44) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in PortalManager (at PortalHost.js:134) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in Portal.Host (at App.js:47) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in View (at MenuProvider.js:219) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in View (at MenuProvider.js:218) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in MenuProvider (at App.js:45) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in ThemeProvider (at Provider.js:17) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in View (at PortalHost.js:131) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in Portal.Host (at Provider.js:16) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in Provider (at App.js:44) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in App (at renderApplication.js:33) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in View (at AppContainer.js:102) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in View (at AppContainer.js:122) 09-05 18:31:16.126 23268 2546 E ReactNativeJS: in AppContainer (at renderApplication.js:32) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: TypeError: null is not an object (evaluating ‘i.focus’) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: 09-05 18:31:16.132 23268 2546 E ReactNativeJS: This error is located at: 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in withTheme(TextInput) (at DialogPreferenceText.js:28) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in View (at DialogPreferenceText.js:27) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in View (at ScrollView.js:791) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in RCTScrollView (at ScrollView.js:887) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in ScrollView (at AbstractDialog.js:58) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in View (at AbstractDialog.js:57) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in View (at Surface.js:65) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in Surface 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in ThemeProvider 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in withTheme(Surface) (at createAnimatedComponent.js:154) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in AnimatedComponent (at Dialog.js:114) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in View (at Modal.js:160) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in View (at createAnimatedComponent.js:154) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in AnimatedComponent (at Modal.js:148) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in Modal 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in ThemeProvider 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in withTheme(Modal) (at Dialog.js:113) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in Dialog 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in ThemeProvider 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in withTheme(Dialog) (at AbstractDialog.js:55) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in ThemeProvider (at Portal.js:54) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in View (at PortalManager.js:44) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in PortalManager (at PortalHost.js:134) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in Portal.Host (at App.js:47) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in View (at MenuProvider.js:219) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in View (at MenuProvider.js:218) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in MenuProvider (at App.js:45) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in ThemeProvider (at Provider.js:17) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in View (at PortalHost.js:131) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in Portal.Host (at Provider.js:16) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in Provider (at App.js:44) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in App (at renderApplication.js:33) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in View (at AppContainer.js:102) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in RCTView (at View.js:60) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in View (at AppContainer.js:122) 09-05 18:31:16.132 23268 2546 E ReactNativeJS: in AppContainer (at renderApplication.js:32)
Issue Analytics
- State:
- Created 5 years ago
- Comments:6 (4 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
I thought I would take a look at it myself and offer a PR to fix if I could figure it out. For me this is an implementation issue. In the TextInput example, it initially works fine. When you navigate away and the component is unmounted, the reference is destroyed.
I’ve not seen a TextInput be focused like that, though it is nice and succinct. If you are to try and focus automatically like that you should have a defensive check to check the component exists.
Personally I would say it wasn’t a bug.
Ahh, that explains a lot! Thanks for the help, and I’m sorry for wasting your time. I’ll leave this issue open for you guys to decide whether you want to look at the “bug” or not. Have a nice day!