I use react-native-material-dropdown and when I select an item, the selected item is visible. How to make it disappear to avoid getting text over an image like this :
Thanks a lot for any help !
<View style={[styles.centeredView, {marginTop:0}]}>
<MaterialDropdown
data={data_dropdown}
pickerStyle={styles.dropdownPickerStyle}
affixTextStyle={{ fontFamily: "FunctionLH" }}
itemTextStyle={{ fontFamily: "FunctionLH" }}
labelTextStyle={{ fontFamily: "FunctionLH" }}
containerStyle={styles.dropdownContainerStyle}
itemCount={10}
dropdownPosition={-4.5}
underlineColor='transparent'
labelExtractor={({ label }) => label}
valueExtractor={({ value }) => value}
propsExtractor={({ props }, index) => props}
onChangeText={(value) => this.choiceAction(value)}
useNativeDriver={true}
/>
<Image
source={require("../../assets/images/btn-filter-by-period.png")}
style={{resizeMode: "contain",
width: "95%",
height: 50,
borderRadius: 100 / 2,
position: 'absolute',
margin: 0,
padding: 0,
height:30,
borderRadius:0}}/>
</View>
Related
I am using this library to implement dropdown option. I have multiple dropdown view in a screen. All are showing nicely but the problem is when one box view is opened I am going to open another dropdown. In that time both boxes are in open state.
What I want to achieve? - When one box is opened and I clicked another dropdown to open previous dropdox box will automatically get closed. How could I achieve that?
Below is my code of two dropdown-
<View style={{ marginRight: 8, marginLeft: 8, marginBottom: 3 }}>
<View style={{ width: '100%', justifyContent: 'center', marginTop: 12 }}>
<View style={{ width: '100%', height: CONSTANTS.windowHeight * 0.0755, }}>
</View>
<DropDownPicker
zIndex={3000}
zIndexInverse={1000}
searchable={true}
onOpen={() => { this.setState({ dropdown_visible: false }), console.log("opened"), this.stateOpen() }}
// onClose={() => this.setState({ dropdown_visible: false })}
// style = {{marginTop: 50}}
open={this.state.state_open}
containerStyle={{ position: 'absolute', height: CONSTANTS.windowHeight * 0.07, alignSelf: 'center', left: 1, right: 1 }}
itemStyle={{ justifyContent: 'flex-start' }}
dropDownStyle={{ borderColor: CONSTANTS.COLOR.BASE_COLOR, backgroundColor: CONSTANTS.COLOR.DROPDOWN_BACKGROUND, textAlign: 'flext-start' }}
items={states}
placeholder="Select State"
placeholderStyle={{
color: 'gray',
textAlign: 'left'
}}
controller={instance => this.controller = instance}
onChangeList={(states, callback) => {
this.setState({
states // items: items
}, callback);
}}
defaultValue={this.state.value}
onChangeItem={(item, index) => (this.setState({
state_name: item.value, state_id: states_with_id[index].id
}), this.getCity(states_with_id[index].id))}
/>
</View>
</View>
<View style={{ marginRight: 8, marginLeft: 8, marginBottom: 3 }}>
<View style={{ width: '100%', justifyContent: 'center', marginTop: 12 }}>
<View style={{ width: '100%', height: CONSTANTS.windowHeight * 0.0755 }}>
</View>
<DropDownPicker
zIndex={2000}
zIndexInverse={2000}
controller={instance => controller = instance}
searchable={true}
onOpen={() => { this.setState({ dropdown_visible: false }), this.cityOpen() }}
// onClose={() => this.setState({ dropdown_visible: false })}
// style = {{marginTop: 50}}
open={this.state.city_open}
containerStyle={{ position: 'absolute', height: CONSTANTS.windowHeight * 0.0755, alignSelf: 'center', left: 1, right: 1 }}
itemStyle={{ justifyContent: 'flex-start' }}
dropDownStyle={{ borderColor: CONSTANTS.COLOR.BASE_COLOR, backgroundColor: CONSTANTS.COLOR.DROPDOWN_BACKGROUND, textAlign: 'flext-start' }}
items={cities}
placeholder="Select City"
placeholderStyle={{
color: 'gray',
textAlign: 'left'
}}
controller={instance => this.controller = instance}
onChangeList={(cities, callback) => {
this.setState({
cities // items: items
}, callback);
}}
defaultValue={this.state.value}
onChangeItem={(item, index) => this.setState({
city_name: item.value, city_id: cities_with_id[index].id
})}
/>
</View>
</View>
You could use variables in your state that relate directly to the opening of the dropdown menus.
For example: dropdown1, dropdown2. In your first render, they should be set to false.
Now, whenever opening a dropdown with the function onOpen(), you should set the state of the dropdown you want to open to true, and the rest to false:
Dropdown 1 example
onOpen={() => { this.setState({ dropdown1: true, dropdown2: false }), this.cityOpen() }}
And then only show the dropdown that you need by using conditions.
I am using this library to show drop down picker option. It's working fine when i am using it without FlatList (Screenshots attached)
But when i am using it inside FlatList view, picker's children view is going behind next FlatList row's view (Screenshots attached)
I have also tried to use zIndex in Desc order for picker.
It's been a very long time I am with this problem and didn't get anything to make things happen.
How things can get solved?
Any other way to show dropdown children in UI and it's selectable?
FlatList child content
Render code for each FlastList child is geven below,
<View >
<Card style={{ elevation: 10, margin: 7 }}>
<Card.Content style={{ backgroundColor: '#B5DBF7' }}>
<View style={{ marginTop: 3, }}>
<View style={{ paddingLeft: 10 }}>
<Text style={{ color: CONSTANTS.COLOR.BASE_COLOR, fontSize: 18, fontWeight: 'bold' }}>{item.text}</Text>
<View style={{ marginTop: 10, width: '100%', height: 1.5, backgroundColor: CONSTANTS.COLOR.BASE_COLOR }}></View>
<Text style={{ fontSize: 14, marginTop: 3 }}>This will be descriptive text for notification of the user. Dummy data is being showing now.</Text>
</View>
<DropDownPicker
items={[
{ label: 'USA', value: 'usa', icon: () => <Icon name="flag" size={18} color="#900" />, hidden: true },
{ label: 'UK', value: 'uk', icon: () => <Icon name="flag" size={18} color="#900" /> },
{ label: 'France', value: 'france', icon: () => <Icon name="flag" size={18} color="#900" /> },
]}
// defaultValue={this.state.country}
containerStyle={{ height: 40 }}
childrenContainerStyle={{
height: 1030
}}
style={{ backgroundColor: '#fafafa', zIndex: index_value - index, position: 'relative'}}
itemStyle={{
justifyContent: 'flex-start'
}}
dropDownStyle={{ backgroundColor: '#fafafa', height: 100, }}
onChangeItem={item => this.setState({
country: item.value
})}
/>
</View>
</Card.Content>
</Card>
</View>
I want to call an API on save button, the thing which i need is that i need the disable the dropdown and edit it using a button.
But i am not able to find how do i disable and edit the 'react-native-material-dropdown'. How can i make it toggle or change between edit and disable ?
I am not able to find anything on google and in the documentation.
<View style={styles.margin}>
<Dropdown
textColor={color.textWhiteColor}
textAlign='center'
fontSize={14}
itemCount={4}
value={prop.current_inventory}
baseColor={color.textWhiteColor}
fontWeight='bold'
fontFamily='Lato'
textAlign='left'
left={10}
top={5}
dropdownPosition={-3.5}
pickerStyle={{
backgroundColor: color.textWhiteColor,
width: '80%',
marginLeft: 20
}}
containerStyle={{
borderRadius: 10,
backgroundColor: color.headerDropdown,
width: '100%',
marginTop: 5
}}
onChangeText={(value) => this.checkValue(value, index)}
itemTextStyle={{
fontWeight: 'bold',
fontFamily: 'Lato',
}}
inputContainerStyle={{ borderBottomColor: 'transparent' }}
itemColor='black'
selectedItemColor='black'
dropdownOffset={
{ top: 0, left: 0 }}
data={this.currentInventory}
/>
</View>
<View>
<TouchableHiglight onPress= >
<Text>SAVE</Text>
</TouchableHiglight>
<TouchableHiglight onPress= >
<Text>EDIT</Text>
</TouchableHiglight>
</View>
You can try passing a variable (since this is related to UI, we expect to pass a state) to handle the "disable property". The only thing you have to do is to give your View wrapper a prop called pointerEvents.
So, it would be like the following:
<View style={styles.margin} pointerEvents={isDisabled ? "none" : undefined}>
<Dropdown
textColor={color.textWhiteColor}
textAlign='center'
fontSize={14}
itemCount={4}
value={prop.current_inventory}
baseColor={color.textWhiteColor}
fontWeight='bold'
fontFamily='Lato'
textAlign='left'
left={10}
top={5}
dropdownPosition={-3.5}
pickerStyle={{
backgroundColor: color.textWhiteColor,
width: '80%',
marginLeft: 20
}}
containerStyle={{
borderRadius: 10,
backgroundColor: color.headerDropdown,
width: '100%',
marginTop: 5
}}
onChangeText={(value) => this.checkValue(value, index)}
itemTextStyle={{
fontWeight: 'bold',
fontFamily: 'Lato',
}}
inputContainerStyle={{ borderBottomColor: 'transparent' }}
itemColor='black'
selectedItemColor='black'
dropdownOffset={
{ top: 0, left: 0 }}
data={this.currentInventory}
/>
</View>
Also, I encourage you to use a linting tool like ESLint, you are repeating the same prop "textAlign" twice. See more
I am new to react native.
I have used a Flat Grid and I want to access a Image component on click event. I want to update its image and I am unable to access that image tag.
On click of gird item I want to update image src.
Scenario :-
I have got list of recipes and on click of these I want show them selected by making the Icon to tick.
below is Flat Grid I have used.
<FlatGrid
itemDimension={130}
items={this.state.recipie_listing}
renderItem={({ item, index }) => (
<TouchableOpacity
onPress={() => this.AddRecipe(index, item.id)}>
<View>
<ImageBackground
style={{
height: 250,
width: "100%"
}}
imageStyle={{ borderRadius: 10 }}
source={{
uri: item.image
}}
>
<Icon
name={this.state.icon_name}
style={{
color: this.state.icon_color,
position: "absolute",
right: 2,
top: 2
}}
/>
<View
style={{
backgroundColor: "rgba(220, 222, 224, 0.8)",
height: 60,
width: "100%",
borderBottomEndRadius: 10,
borderBottomStartRadius: 10,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
position: "absolute",
bottom: 0
}}
>
<CustomText
style={{
marginStart: 10,
marginEnd: 5,
color: "white",
fontSize: 15,
fontWeight: "bold"
}}
>
{item.name}
</CustomText>
</View>
</ImageBackground>
</View>
</TouchableOpacity>
)}
/>
At first, add a state variable like showImage to false and then
In AddRecipe method call the setState method and toggle the variable value and then where you want to load the image src add conditional rendering
here is a code example
state = { showImage : false}
------
AddRecipe = () =>{
this.setState({
showImage:!this.state.showImage
})
render(){
return(
----------
<ImageBackground
style={{
height: 250,
width: "100%"
}}
imageStyle={{ borderRadius: 10 }}
source={{
uri: this.state.showImage === true ? src1 : src2
}}
>
----------
)
}
I think that will help you as far as I understand your problem.
I need to disable a button when scrolling using Animated.ScrollView in react-native.
I am trying to apply something like:
disabled={this.state.scrollY._value <= 30 ? false : true}
in the props of the TouchableHighlight.
From what I have learned, it is not possible to apply the value: this.state.scrollY._value directly into the 'disabled' prop of the TouchableHighlight. However I really dont know how to proceed -.-
I am really grateful for any help.
my button is in the following format:
<Animated.View>
<TouchableHighlight>
<Icon />
</TouchableHighlight>
</Animated.View>
here is the complete code:
<Animated.View style={{
position: 'absolute',
elevation: 5,
justifyContent: 'center',
flex: 1,
height: 100,
width: 100,
opacity: 1,
left: SCREEN_WIDTH / 2 - SIZE / 2,
top: 120,
opacity: buttonTopDisappearance,
}}>
<TouchableHighlight
onPress={() => {
this.toggleView(playBack);
if (!playBack) {
this.setState({ playBack: true })
} else {
this.setState({ playBack: false })
}
}}
underlayColor="#2882D8"
disabled={this.state.scrollY._value <= 30 ? false : true}
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
width: null,
height: null,
borderRadius: SIZE / 2,
backgroundColor: '#48A2F8',
position: 'relative',
elevation: 6,
}}
>
<IconFontAwesome name="plus" size={24} color="#F8F8F8" />
</TouchableHighlight>
</Animated.View>