I have implemented a react-native-material-textfield TextField which is focusing on taps outside of the TextField component (but within a certain distance from the component). Why does this happen?
I have tried limiting the size of both container and inputContainer, as well as wrapping the TextField in a View shrinked to fit the TextField component.
This is my implementation of the TextField:
<TextField
ref={this.passwordRef}
secureTextEntry={true}
containerStyle={{width: 300, backgroundColor: 'green'}}
inputContainerStyle={{width:300, backgroundColor: 'yellow'}}
tintColor={'rgba(0, 0, 0, .38)'}
fontSize={20}
enablesReturnKeyAutomatically={true}
autoCapitalize='none'
autoCorrect={false}
returnKeyType='done'
label='Password'
error={this.state.errors.password}
onChangeText={this.handlePasswordChange}
value={this.state.password}
/>
The expected behavior is that the TextField should focus when tapped, not when the target of a tap is outside the component.
Finally figured this out. Even though no overflow was visible neither for the TextInput (referenced by style) nor the InputContainer (referenced by inputContainerStyle), setting the overflow prop to hidden for the containerStyle fixed my problem.
set your style prop equal to the other widths:
style = {{width: 300}}
If you have a width it is also best to specify a height if your component is not wrapped in a View.
Related
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
I'm having an issue with the React Native Picker.
My problem is that the selectedValue in the Picker does not show on small screens! On big screens it works just fine, but at a certain width, the selectedValue is not rendered, only the little downwards arrow.
When I manually set the width of the picker to be 100, it works fine, however, if the width is set to 50 (which is what I need), the selectedValue doesn't render, only the arrow downwards.
My code looks like this:
<Picker
selectedValue={props.selectedCurrency}
style={headerStyle.picker}
onValueChange={props.setCurrency}
>
<Picker.Item label="USD" value={Currency.USD} />
<Picker.Item label="EUR" value={Currency.EUR} />
</Picker>
And then the styles look like this:
picker: {
flex: 1,
width: 50,
},
I have figured out one solution, which is to render a component besides the Picker, but then the Text isn't clickable, which isn't the best UX design..
Can anyone help? I just want the selectedValue to render on both small and big screens.
Thank you very much in advance.
Unfortunately, if you need a minimum width to display correctly your items you do not have much choices. You can define a style for your items and maybe lower their size or use a font which render them lower. For example :
<Picker
selectedValue={props.selectedCurrency}
style={headerStyle.picker}
itemStyle={headerStyle.pickerItem}
onValueChange={props.setCurrency}
>
<Picker.Item label="USD" value={Currency.USD} />
<Picker.Item label="EUR" value={Currency.EUR} />
and for style
picker: {
flex: 1,
width: 50,
},
pickerItem: {
fontSize: 12
}
Or/and maybe you will have to change your UI in order to display the picker elsewhere in your screen to be sure to have enough space to display it correctly.
Hope this helps !
from this answer, you need to convert selected value to string.
<Picker
//...
selectedValue={props.selectedCurrency ? props.selectedCurrency.toString() : null}
//...
>
By default, it seems like the text in a TextInput is put at half opacity when editable={false}. This appears to combine with any opacity passed in via a style object - if you pass in opacity: 1 the effect still happens, and if you pass in opacity: 0.5 the "disabled" opacity is ~0.25. How can I stop this behaviour? Tested on Android but may also occur on iOS. Thanks!
I solved this problem doing this:
<View pointerEvents='none'>
<TextInput
...
editable={true}
/>
</View>
PointerEvents documentation: https://facebook.github.io/react-native/docs/view#pointerevents
I'm doing a drawer navigation with design, but I don't know how to custom an opacity background under it.
To apply blur (like this https://www.w3schools.com/cssref/playit.asp?filename=playcss_filter&preval=blur(5px)) you need to use a third party lib since React Native doesn't support it by default. You can check if this one handles exactly what you need https://github.com/react-native-community/react-native-blur
By the print screen you posted, however, it looks like you want to make a darken background when your menu is activated. To do so, you can apply backgroundColor style to your main component with some value like rgba(0, 0, 0, 0.25). Or you can also have a component over your content that's displayed when your menu is activated. Or your menu container can hold the backgroundColor since the menu itself won't fit the whole screen (I think it's the best option).
Example:
<View style={{ backgroundColor: rgba(0, 0, 0, 0.25), flex: 1 }}>
<Menu>
...
</Menu>
</View>
Consider the code above just as an expression of the idea. You must apply the correct styles to make it
Hope it helps
You can control it by using overlayColor prop in Drawer Navigator.
<Drawer.Navigator
overlayColor="rgba(0,0,0,0.5)"
headerMode="none">
<Drawer.Screen name={ROUTES.HOME} component={HomeStack} />
</Drawer.Navigator>
See this link for more information on the customization of the drawer. https://reactnavigation.org/docs/drawer-navigator/#providing-a-custom-drawercontent
I am trying to implement a UI where there is a full-page <ScrollView /> with a <View /> positioned absolutely underneath it. The <ScrollView /> has padding at the top, so initially the <View /> is visible and then the <ScrollView /> scrolls up to cover it. The issue, of course, is that the <View /> does not receive touches, as they're being eaten up by the <ScrollView /> responder.
Is there any way right now to implement or subclass <View /> such that you can pass events through to underlying elements?
You should use an Animated.View that accepts ScrollView's y offset as an Animated.Value prop. Then, you can use that value to perform animations while scrolling the ScrollView. The scroll will catch the pan animation and pass it through props to whoever needs it.
One of the best code-samples you'll find for this is Facebook's F8 app. Precisely, this file: https://github.com/fbsamples/f8app/blob/b5df451259897d1838933f01ad4596784325c2ad/js/common/ListContainer.js. In that file, ParallaxBackground gets the offset Animated.Value that comes from the ListView children.