I have a TextInput component that is located inside a View with a style setting of position: "absolute":
const [searchTerm, setSearchTerm] = useState('Test');
return (
<View style={{position: "absolute"}}>
<TextInput
autoFocus={true}
value={searchTerm}
onChangeText={text => setSearchTerm(text)}
/>
</View>
)
When this style is set, I cannot focus or perform any interaction with the TextInput (including autoFocus={true}) even though I can see the input field and default text (Test). Once I remove the absolute positioning I am able to work with the TextInput as usual.
What is the reason for this behavior? (using Android)
you should add zIndex:400 or some high number it worked for me
Related
I am using react native and expo.
I'd like to change height and add some Views when I click the box.
How to add some Views seems difficult for me.
So I've tried to change height on CSS first.
const [style, setStyle] = useState(true);
I set 'style' as using useState.
Default value of style is 'true'.
<Header onPress={() => setStyle(!style)}>
And I made it so that if I click Header box, setStyle changes into reversed value of style.
And on css code of box that I wanted to apply change, I use props to be changed depending of the style's state.
height: ${(props) => (props.style ? "60px" : "260px")}
When I console.log the state value, it changes true to false and false to true correctly whenever I click the Header box.
But CSS style is not applied accordingly.
How can I make it applied?
And if you can teach me how to add some View more depending on the state, it would be really helpful.
You haven't included enough code to easily understand the structure of your app, or what exactly you're trying to do. Here's an example that should solve some of your issues... but you'll have to figure out how that fits your particular structure:
function App() {
const [active, setActive] = useState(false);
return <View>
<TouchableOpacity onPress={() => setActive(!active)}>
<Text>Press Me</Text>
</TouchableOpacity>
<View style={{height: active ? 260 : 60}}>
{active && <Text>Content</Text>}
</View>
</View>;
}
I have an Input from react native elements which looks like this
<Input
placeholderTextColor={constants.inputPlaceholderFontColor}
inputContainerStyle={{marginTop: 30, borderBottomColor: constants.dimmedFontColor}}
placeholder='Spieleranzahl'
keyboardType='numeric'
leftIconContainerStyle={{marginRight: 10, marginBottom: 8}}
leftIcon={
<Icon
name='user'
size={ 24 }
color= {constants.iconColor}/>
}
onChangeText={input => this.setState({numberOfPlayers: input})}
I tried to set the color by
style={{color: 'white'}}
inputStyle={{color: 'white'}}
inputContainerStyle={{color: 'white'}}
The documentation says: "This component inherits all native TextInput props that come with a standard React Native TextInput element, along with the following..." so I dont understand why the style property doesn't work because it works with the standard TextInput component.
Also, the documentation says about inputStyle: "style that will be passed to the style props of the React Native TextInput" so that should also work because this is the way to set color on the standard Text component.
Am I missing something?
I've created an example on snack.expo and inputStyle works perfectly on both iOS and Android. Most probably there is another issue, that's why I would recommend to reimplement my simple example and see if it works.
Update: Maybe only your placeholdertext is shown. I can't see the place in your code, where you pass the value prop to your input.
Demo:
https://snack.expo.io/Yunjp2ozw
Output:
Code:
export default function App() {
const [text, setText] = React.useState('Test');
return (
<View style={styles.container}>
<Input
value={text}
onChangeText={(text) => setText(text)}
inputStyle={{'color': 'red'}}
/>
</View>
);
}
I have TouchableOpacity in a space between flex container that I want to take space even not shown,
My code:
<TouchableOpacity
style={showClear && { visibility: 'hidden' }}
onPress={() => this.props.clearCompleted()}>
<Text>Clear Completed</Text>
</TouchableOpacity>
display: none works but it doesn't take space, the code above dont work but does in web?
In my case, I needed to use the element, so I did something like this:
<TextInput style={{opacity: 0, height: 0}} {...props} />
I hope this works for someone else with my problem.
Update
React Native's StyleSheet now supports toggling visibility using display: 'none' and display:flex.
Not all CSS are supported in React Native, that include visibility: hidden or display:none.
To hide a component, not to render it at all, render empty View or null. Or you want to switch a component visibility, verify react's state
<View>
{ !showClear && (
<TouchableOpacity
onPress={() => this.props.clearCompleted()}>
<Text>Clear Completed</Text>
</TouchableOpacity>
}
</View>
showClear is kept in state
As Leu mentioned, you can just render null.
Another option if you want to keep the area used by TouchableOpacity is setting up opacity: 0.0 in style, but then you have to remember to set also disabled={false} in props of the TouchableOpacity, to avoid call clicking action on invisible area
Just setting the opacity to 0 was enough for my use case.
If we want to make sure element takes space on DOM but is kept hidden to user,
Step 1: Hide it from user using opacity: 0 .
Step 2: Disable interactions of hidden element.
Our JSX should be like below:
<IconButton
icon="close"
disabled
style={styles.hiddenElement}
onPress={() => console.log("Pressed")}
/>
Our stylesheet should look like below:
const styles = StyleSheet.create({
...
hiddenElement: {
opacity: 0,
},
...
});
I am working on a react native project. Where I need to implement drop-down with an input field. When I type anything in the input field it should filter the dropdown content.
I can't use react-native-dropdown on anything because it placed a mask on the whole screen and I am not able to type anything when the dropdown is open.
So I tried to implement my own drop-down.
<View style = {{position:'absolute', zIndex:5, backgroundColor:'red'}}>
<View style = {[Styles.dropdownView, {display:this.props.display}]}>
<ScrollView style={{ top:0, bottom:0}}>
{ listData.map((val, i) => <Text key = {i} > {val} </Text> )}
</ScrollView>
</View>
</View>
Every thing is working fine but I am not able to scroll it vertically. Though it's working fine with horizontal scroll.
Please help me to fix this or suggest some other way.
I have TextInput at the bottom of the screen. When TextInput is focused then keyboard appears and due to this all the flex view gets shrink to the available screen. I want to achieve that page layout should not change and input should be visible to user.
<View style={MainView}>
<View style={subMain1}>
<View style={{flex:1,backgroundColor:'#add264'}}></View>
<View style={{flex:1,backgroundColor:'#b7d778'}}></View>
<View style={{flex:1,backgroundColor:'#c2dd8b'}}></View>
</View>
<View style={subMain2}>
<View style={{flex:1,backgroundColor:'#cce39f'}}></View>
<View style={{flex:1,backgroundColor:'#d6e9b3'}}></View>
<View style={{flex:1,backgroundColor:'#69ee9a'}}>
<TextInput placeholder="input field"/>
</View>
</View>
</View>
const Styles = {
MainView:{
flex:1,
backgroundColor:'green'
},
subMain1:{
flex:1,
backgroundColor:'blue'
},
subMain2:{
flex:1,
backgroundColor:'orange'
}
}
I just found an answer to this.
I just have to use fixed height for my main container and inside that I can use flex layout. And If keyboard is hiding the content then we can use Scrollview that will allow scrollable interface when user clicks on input.
This helped me hope it can help others. :)
I'm not quite sure I understand what the issue you're running into, but I recently struggled with keyboard avoiding views in my app - for some reason, the native component just wasn't working.
Check this package out - it did the trick for me, and offers some cool customization capabilities:
https://github.com/APSL/react-native-keyboard-aware-scroll-view
Use 'react-native-keyboard-aware-scroll-view' and keep this as parent view and put all view inside that view. This node module creates scrollview and it listens to keyboard show event and automatically scrolls your screen so user can see the input box without getting it hidden behind the soft keyboard.