"dispatchCommand was called with a ref that isn't a native component" in searchbar while focusing using ref

[ipranshulsingla]

Current behaviour

Warning: dispatchCommand was called with a ref that isn't a native component. Use React.forwardRef to get access to the underlying native component

This warning is appearing while using searchbar component ref while using focus() method

Expected behaviour

It should focus the searchbar input

Stack trace:

Warning: dispatchCommand was called with a ref that isn't a native component. Use React.forwardRef to get access to the underlying native component

• node_modules\react-native\Libraries\LogBox\LogBox.js:173:8 in registerError
• node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
• node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
• node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
• node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:106:4 in printWarning
• node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:75:16 in error
• node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:21034:11 in dispatchCommand- node_modules\react-native\Libraries\Utilities\codegenNativeCommands.js:24:6 in commandObj.command
• node_modules\react-native\Libraries\Components\TextInput\TextInputState.js:99:6 in focusTextInput
• node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:3871:6 in focus
• node_modules\react-native\Libraries\Interaction\TaskQueue.js:117:14 in processNext
• node_modules\react-native\Libraries\Interaction\InteractionManager.js:207:6 in _processUpdate
• node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
• node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass
• node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates
• node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates
• node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0
• node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
• node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue

• [native code]:null in flushedQueue
• [native code]:null in callFunctionReturnFlushedQueue

Code sample

`import React, { useRef, useState } from "react";
import { Modal, SafeAreaView, StyleSheet, View} from "react-native";
import { IconButton, Searchbar } from "react-native-paper";
// import colors from "../assets/config/colors";

const SearchModal = ({ visible, onClose }) => {

const [searchQuery, setSearchQuery] = useState('')
const searchFieldRef = useRef()

const onChangeText = (t) => setSearchQuery(t)

const handleShow = () => {
    searchFieldRef.current.focus()
}

return (
    <Modal visible={visible} onShow={handleShow} animationType="slide">
        <SafeAreaView>
            <View style={styles.header}>
                <IconButton
                    icon="arrow-left"
                    onPress={onClose}
                />
                <Searchbar style={styles.searchbar} 
                    inputStyle={styles.searchbarInput}
                    value={searchQuery}
                    placeholder="Find People"
                    onChangeText={onChangeText}
                    ref={searchFieldRef}
                />
            </View>
        </SafeAreaView>
    </Modal>
);

};

export default SearchModal;

const styles = StyleSheet.create({
header: {
flexDirection: "row",
alignItems: "center"
},

searchbar:{
    height: 40,
    marginRight: 6,
    elevation: 0,
    flex: 1,
    // backgroundColor: colors.bg
    backgroundColor: "yellow"
  },

  searchbarInput:{
    fontSize: 15
  }

});
`

What have you tried

• autoFocus not working on modal (android)

Your Environment

software	version
android	10
react-native-paper	4.4.1
node	14.12.0
npm	6.14.9
expo sdk	39.0.2

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-vector-icons
• npm
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• yarn (found: 6.14.9, latest: 1.22.10)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-vector-icons
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[nthtrung09it]

I have the same issue.

[karimcambridge]

ref doesn't seem to work with Searchbar anymore since some version 4.x.x something, I can confirm. Can someone help us?

[YahyaBagia]

Having same issue on v4.7.0

[ikhsanalatsary]

tried to downgrade to v4.2.0. it works