Stateless function components cannot hav refs - reactjs

Question

I'm building search page similar to Facebook or instagram. Basically if we press search button, it navigates to 'SearchScreen'. When its component is mounted, I want to set the search header is focused (cursor).
My problem is when I set TextInput ref as a prop. And I'm getting Stateless function components cannot have refs error. Is this right approach? Why is it not working? Do you know any better approach other than this?
I added _renderHeader private function to renderHeader props in FlatList.
This is _renderHeader
_renderHeader = () => {
return (
<View style={styles.layoutheader}>
<View style={styles.containerheader}>
<RkTextInput
rkType='row'
ref="sbar" /////////////////////HERE////////////
autoCapitalize='none'
autoCorrect={false}
label={<RkText rkType='awesome' style={{color:'white'}}>{FontAwesome.search}</RkText>}
placeholder='Search'
underlineWidth="1"
underlineColor="white"
style={styles.searchBarheader}
inputStyle={{color:'white'}}
labelStyle={{marginRight:0}}
value={this.state.inputText}
onChangeText={(inputText)=>{this.setState({inputText})}}
/>
<View style={styles.left}>
<RkButton
rkType='clear'
style={styles.menuheader}
onPress={() => {
this.props.navigation.goBack()
}}>
<RkText style={styles.titleText} rkType='awesome hero'>{FontAwesome.chevronLeft}</RkText>
</RkButton>
</View>
</View>
</View>
)
}
componentDidMount() {
this.refs.sbar.focus(); ////////// Here I want to focus RkTextInput when it's loaded
}
UPDATE here is actual code as requested
class SearchScreen extends Component {
static navigationOptions = ({navigation}) => ({
header: null
})
state = {
active: false,
inputText: ''
}
...
_renderRow = (row) => {
...
);
}
_renderHeader = () => {
...
}
render() {
return (
<FlatList
data={null}
renderItem={this._renderRow}
renderHeader={this._renderHeader}
keyExtractor={this._keyExtractor}
ListHeaderComponent={this._renderHeader}
/>
);
}
componentDidMount() {
this.refs.sbar.focus();
}
}

Answer 1

What seems to me is that you are not using the refs the right way. The way you are using them has been deprecated. You should follow this syntax:
<input
type="text"
ref={(input) => { this.textInput = input; }}
/>
and when you want to access it you can do this.textInput. In your case, this.textInput.focus().

Answer 2

You're using RkTextInput which is a functional component and it cannot have a ref. That's why you can't focus it.
I don't see a way to focus the input other than wrapping the Component, getting the ref of the root and finding your input element in order to focus it. A rough example :
class RoughExample extends React.Component {
componentDidMount() {
//find the input from your root
this.input = this.root.querySelector('input');
//if it exists, focus
this.input && this.input.focus();
}
render() {
<div ref={ (node) => {this.root = node;} }>
<RkTextInput />
</div>
}
}