Give styling to placeholder in TextInput in React Native - reactjs

Question

So I've a TextInput and the placeholder has a styling.
For this, I place a Text with position: 'absolute' and zIndex: 1 before the TextInput
activeField(){
this.setState({active: true})
}
render(){
return(
{ !this.state.active &&
<Text style={STYLES.textInputPlaceholder}>
{this.props.placeholder}
</Text>
}
<TextInput
style={STYLES.textInputField}
onFocus={() => this.activeField()}
/>
)
}
Now, the Text component which has the placeholder, when I press on it, I should be able press at the placeholder, which is the Text component here and be able to call the onFocus method of TextInput
I hope I'm able to clearly explain my problem.

Answer 1

We would not be able to trigger the onFocus event-listener of the TextInput by clicking on the Text. However, we can make it appear like that is happening with some clever CSS.
Make sure that the background of the TextInput is transparent or
at least matching that of the Text. That way Text is still visible when we give position: absolute.
Then we
We need the zIndex of the Text to be lower than the zIndex of the
TextInput. That way TextInput is actually in front of Text. So while it looks like you're clicking on the placeholder, you are actually just clicking on the TextInput and that will trigger the onFocus event.
Try this:
import React, { Component } from "react";
import { StyleSheet, Text, TextInput } from "react-native";
class App extends Component {
state = {
active: false,
text: ""
};
activeField = () => {
console.log("focused");
this.setState({
active: true
});
};
handleOnBlur = () => {
if (this.state.text.length === 0) {
this.setState({
active: false
});
}
};
render() {
return (
<div>
{!this.state.active && (
<Text style={STYLES.textInputPlaceholder}>
{this.props.placeholder}
</Text>
)}
<TextInput
style={STYLES.textInputField}
onChangeText={text => this.setState({ text })}
onFocus={this.activeField}
value={this.state.text}
onBlur={this.handleOnBlur}
/>
</div>
);
}
}
const STYLES = StyleSheet.create({
app: {
marginHorizontal: "auto"
},
textInputField: {
zIndex: 1,
width: 300,
borderColor: "black",
borderWidth: 1
},
textInputPlaceholder: {
zIndex: -1,
color: "blue",
position: "absolute",
backgroundColor: "transparent"
}
});
export default App;
App.defaultProps = {
placeholder: "Hello"
};
Here's the working sandbox: https://codesandbox.io/s/react-native-on23p