I am running into an issue in my react native app that uses react-native-autocomplete-input. The issue only occurs in android, which, according to the react-native-autocomplete-input has known issues:
Android does not support overflows (#20), for that reason it is
necessary to wrap the autocomplete into a absolute positioned view on
Android. This will allow the suggestion list to overlap other views
inside your component.
I am wrapping the autocomplete in an absolute positioned view, as suggested. And this solves some issues.
However, what's still happening is, if I have two autocomplete fields - one appearing higher on the screen than another, when the first field has the suggestion box open up, overlaying on the screen, if a user clicks on a suggestion that happens to line up with the input field immediately "under" that suggestion, the cursor suddenly jumps to that input field. So this is obviously some kind of zIndex issue.
The thing is, I have tried setting various zIndex values, so that the text field and its container has a lower value than the autocomplete suggestion box, but this is not preventing the behavior I described above from happening.
I have read about elevation in android. Is this something I can use, and if so, how? Any suggestions would be appreciated. Here is the relevant android styling for react-native-autcomplete-input. And list refers to the autocomplete suggestions box that overlays on the screen:
const androidStyles = {
container: {
flex: 1,
position: 'relative',
},
inputContainer: {
marginBottom: 0,
zIndex: -1,
left: 40,
},
input: {
zIndex: -1,
flex: 1,
flexDirection: 'row',
alignSelf: 'flex-start',
justifyContent: 'flex-end',
maxHeight: 200,
fontSize: 15,
borderWidth: 0,
textAlign: 'right',
},
list: {
...border,
backgroundColor: 'white',
borderTopWidth: 1,
margin: 10,
marginTop: 1,
zIndex: 99999,
borderRadius: 15,
width: '65%',
zIndex: 99999,
},
listContainer: {
zIndex: 99999,
}
};
Related
I am trying to make a background using two View to look , but I am falling to set the "start" of the radius on the left size.
The result I get using :
borderBottomLeftRadius: '20%',
borderBottomRightRadius: '40%',
Is this:
But I want this:
I want the "radius" start more vertically
Any tips how I get this effect?
Thank you
Exact shaping like this through radius is probably not possible, I achieved this by use of transform: [{ scale }]
Here is the code
const { width } = useWindowDimensions();
<View
style={{
backgroundColor: '#00ffff',
borderBottomLeftRadius: width / 3,
borderBottomRightRadius: width / 2,
borderWidth: 2,
borderColor: 'black',
height: width / 2,
width: width,
transform: [{ scale: 1.4 }],
}}
/>
Here what it looks like, is this workable for you?
you can tweak the values a little bit to meet your requirement.
I am using the react-native-simple-radio-button package. If I specify a fontSize for the label greater than 22, the top half gets cut off. Making the radio buttons even bigger does not seem to make a difference.
Here is my code:
let radio_props = [
{label: 'ABC ', value: 0},
{label: 'DEF', value: 1}
]
let menu = <View style={{marginLeft: 40, marginTop: 40}}>
<RadioForm
radio_props = {radio_props}
buttonSize = {40}
buttonOuterSize={60}
labelStyle = {{fontSize: 30}}
initial={this.state.mode}
formHorizontal={true}
onPress={(value) => this.onPress(value)}
/>
</View>
This code produces the following results:
Is there something I am doing wrong or is it a bug in the react-native-simple-radio-button module?
Adding padding to the top worked for me
labelStyle={{
fontSize: 30,
paddingTop: 6
}}
I'm making an React Native App in which i have 2 buttons/ TouchableOpacity's. When styling these buttons, they both get double border even when explicitly stating 'solid' borderstyle in the respective stylesheets. ( On the attached screenshot the middle button is all white, but when I make the border a different color it is a double one as well ). No where in the whole file have I defined a double borderstyle.
bottom left button stylesheet:
roomsbutton: {
alignItems: 'center',
backgroundColor: '#009DDC',
padding: 5,
borderRadius: 2,
borderWidth: 1,
borderStyle: "solid",
borderColor: 'white',
color: 'white',
}
and its parent view:
<View style={styles.bottom}>
<TouchableOpacity
style={styles.roomsbutton}
onPress={() => Alert.alert('more rooms')}
>
<Text style={styles.roomsbutton} >FIND MORE FREE ROOMS</Text>
</TouchableOpacity>
</View>
You are passing the styles to the <TouchableOpacity> and the <Text> components. So they are both surrounded by the border
You pass style={styles.roomsbutton} to both the TouchableOpacity and the Text components. Each have a solid white border
this is happining because you apply className .roomsbutton two times in a button. once in TouchableOpacity and once in Text.
just remove style={styles.roomsbutton} form Text like below..
<Text>FIND MORE FREE ROOMS</Text>
I have a view with 50% width, its' parent having the whole width of the phone, i want to make it circle though, this is my code that does not work:
clockContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width:Dimensions.get('window').width
},
clock: {
width: '50%',
borderRadius: '100%', // divide this by 2?
backgroundColor: 'red'
},
i looked around and it says you divide its' width by 2, but i don't know how to implement it in this case. Help?
React Native only allows for numeric inputs in its CSS values, not percentages.
You'll want to calculate the borderRadius the same way that you calculate the parent width, and then simply divide by two:
borderRadius: Dimensions.get('window').width / 2
Or:
borderRadius: Dimensions.get('window').width * 0.5
Go to https://snack.expo.io/HJV601djf and open login_screen/components/Form.js. As you can see, the textInput has the style
textInput: {
flex:1,
height: 50,
marginBottom: 20
}
You can see that the user icons are not aligned with the text input. If I take marginBottom out, everything goes ok, but with marginBottom: 20 the icons get dealigned. I can probably fix that by making the text input get aligned vertically too, but I'll not know the cause of the problem.
How can marginBottom affect the insides of UserInput if it's supposed to add space only on the outside?
Printscreen if you don't want to wait to load the app:
This is happening because , in your UserInput.js, you are trying to merge the styles for the textInput while the Image / Icon styles are remaining the same, therefore it is misaligned.
The optimum way to solve this would be to add a textInputContainer style to the component and set the margin to it as
TextInput.js
<View style={mergeObjects(this.props.containerStyle ? StyleSheet.flatten(this.props.containerStyle) : {}, StyleSheet.flatten(styles.inputWrapper))}>
Form.js
<UserInput
containerStyle={styles.textInputContainer}
style={styles.textInput}
source={{uri:'http://www.free-icons-download.net/images/user-icon-74490.png'}}
placeholder="e-mail"
autoCapitalize={'none'}
returnKeyType={'done'}
autoCorrect={false}
/>
and the styles
textInputContainer : {
marginBottom: 20
},
Here's the snack for the same