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.
Related
I have a FlatList in React Native with fullscreen image and video items (with pagingEnabled). I want to have a short descriptive touchable text floating on top of the FlatList, to open up a view with some information about the image/video when pressed.
To make the user experience nice, I'd like to be able to scroll the FlatList through the touchable text as well. I.e. if the user happen to start their scrolling motion on top of the text, the FlatList would scroll but if it is a simple press event I'd like to open the view with details about the image/video.
No mater what I try I end up with either the text being able to react to the press OR the FlatList being able to scroll. I have tried different configurations with a custom PanResponder and pointerEvents but seem to always end up with a state were one thing does not work. Do you guys have any smart ideas? I am probably just stuck in the wrong train of thought.
This is a simplified view of my component structure:
<View>
<View style={{ position: 'absolute', bottom: 100, zIndex: 10 }}>
<TouchableOpacity onPress={() => console.log('press')}>
<Text>Some Descriptive Text</Text>
</TouchableOpacity>
</View>
<FlatList pagingEnabled horizontal {...otherFlatListProps} />
</View>
I got an app with flatlist ,I added to the app TouchableOpacity that covers the whole screen,
works great when I click on item area but doesn't work when I click the area that got no items
this is the code of the TouchableOpacity:
<View style={{position: "absolute",width:'100%',height:HEIGHT,backgroundColor: 'rgba(0,0,0,0.8)',zIndex:6}}>
<TouchableOpacity onPress={()=>setEditing(false)} style={{flex:1,zIndex:6}}>
</TouchableOpacity>
Its looks like the flatlist block any clicks below it also in ios its works without any problems
Try change it to:
<View style={{position: "absolute",width:'100%',height:HEIGHT,backgroundColor: 'rgba(0,0,0,0.8)',zIndex:6}}>
<TouchableOpacity onPress={()=>setEditing(false)} style={{flex:1,zIndex:7}}>
</TouchableOpacity>
</View>
and run it
In react-native, using SectionList, I want to have a sticky section header with a background color, but only when the element is sticky. What I've done so far, is to set a views position to absolute. The problem is that I can't find a way to get the items behind the view, unlike the picture nested below:
Without zIndex'es applied:
Until now, I've tried to set different zIndex'es, but it doesn't seem to work, as everything just goes behind the view including the SectionHeaders, despite having a higher zIndex, than the view. I guess, it's because, the zIndex is relative to the parent. A picture is nested below:
With zIndex'es applied:
To sum up: How do I make sure that the items goes behind the view, to simulate a background, on the sticky section header? Other solutions to get a background on the sticky section header, is also much appreciated.
I have inserted the code (with zIndex'es) below.
render () { return (
<View>
{/* Header */}
<View style={[styling.headerContainer, {zIndex: 8}]}/>
{/* List */}
<SectionList
sections={DATA}
keyExtractor={(item, index) => `${item} - ${index}`}
stickySectionHeadersEnabled
style={{marginTop: 44}}
// Section Header
renderSectionHeader={({section}) =>
<View style={[styling.sectionHeaderContainer, {zIndex: 9}]}>
<Text style={styling.title}>{section.title}</Text>
</View>
}
// Items
renderItem={({item}) =>
<Text style={[styling.text, {zIndex: 7}]}>{item}</Text>
}
/>
</View>
)}
I was just wondering if it was possible, in React Native, to create a vertical overlay ; by that, I mean being on a page and when swiping down, an overlay comes down, covering the page, with various information on it (and the same when swiping up, an overlay coming from the bottom). I wanted to use react-native-swiper at first, but the vertical swiping is not compatible with Android.. So if anyone has another solution to offer, be my guest ! Thanks
check react-native-parallax-view hope this can help you.
EDIT
example:
return (
<View style={[{ flex: 1 }]}> {/* add parent container and then ParallaxView as specified in documentation */}
<ParallaxView
backgroundSource={require('image!backgroundImage')}
windowHeight={300}
header={(
<Text style={styles.header}>
Header Content
</Text>
)}
scrollableViewStyle={{ backgroundColor: 'red' }}
>
<View>
// ... scrollview content
</View>
</ParallaxView>
</View>
);
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.