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>
);
Related
I have a React page that needs a Scrollview, there's no way around it. The content goes off the bottom of the screen, and it is encapsulated in the ScrollView. I have a red border on the ScrollView element so I can see that it goes past the bottom of the screen where the rest of my content it. However, it just does not want to scroll. I even put an 'onScroll' prop inside with console.log('hit') at one point to see if the ScrollView was even registering my attempts, it was not. This is happening in a couple of similar components, their structure is very similar. The smallest of them looks like this...
<ScrollView style={{borderColor: 'red', borderWidth: 3}}>
<View style={QualityStyles.container}>
<View style={{width: '100%'}}>
<Text style={QualityStyles.leadersTitle}>Top Three Leaders</Text>
</View>
<View style={QualityStyles.topThree}>
{renderTopThree(topThree)}
</View>
<View style={{width: '100%'}}>
<Text style={QualityStyles.leadersTitle}>Employees</Text>
</View>
<View style={QualityStyles.remainders}>
{renderOthers(others)}
</View>
</View>
</ScrollView>
The code's pretty straightforward, with renderTopThree returning 3 components that will take up about 90% of the screen, and renderOthers will fit maybe one component on the screen, and the rest (while rendered and existent) can't be seen since I can't scroll. Anyone see what could be wrong?
I resolved the issue, I had a TouchableWithoutFeedback wrappping the entire Application, and it was blocking out any ability to scroll
I noticed that while adding 'View' with React native, it behaves as if "width: '100%'" was assigned even though I did not enter any style. Same situation exists for any component. It covers the whole area horizontally. What is the cause and solution?
return (
<View style={{flex:1}}>
{/* paints the line he is in full red but should only paint as much as the line of the text */}
<View style={{backgroundColor:'red'}}>
<Text>Example</Text>
</View >
</View>
);
If you want the background color to only encompass the text, you can use this:
<Text style={{backgroundColor: 'red', alignSelf: 'flex-start'}}>
Example
</Text>
I have the following code in my RN application.
<TouchableOpacity
// onPress={onPress}
onPressIn={this.handlePressIn}
onPressOut={this.handlePressOut}
disabled={disabled}
style={[
styles.button,
buttonStyle,
this.buttonStyles(),
]}
>
<Text>Hello</Text>
</TouchableOpacity>
I want to change the color of TouchableOpacity when it is being pressed. So, in onPressIn, I changed the color to darkRed, but it display a light red or something similar to that. No dark color can be set there. What is the issue here? How can I change the color till I onPressOut? The color should be a dark one.
Found the solution. Set your activeOpacity={1} in your TouchableOpacity.
<TouchableOpacity
onPress={onPress}
activeOpacity={1}
/>
Edit:
I guess I overengineered it a little bit. You can simply use the activeOpacity={1} prop.
Problem:
The problem is that TouchableOpacity already provides feedback by reducing the opacity of the button, allowing the background to be seen through while the user is pressing down. So even if you change the backgroundcolor of the button, you won't notice it. Fortunately, I have a solution for you.
Solution:
You can use TouchableWithoutFeedback together with an additional View to create your wanted behavior.
Code:
<TouchableWithoutFeedback
onPressIn={() => this.setState({pressIn: true })}
onPressOut={() => this.setState({pressIn: false})}
>
<View
// change the color depending on state
style={{ backgroundColor: this.state.pressIn ? '#4c7d4c': '#98FB98'}}
>
<Text> Custom Button </Text>
</View>
</TouchableWithoutFeedback>
Output:
Working Example:
https://snack.expo.io/#tim1717/quiet-watermelon
If you take a look on the left of the time on the status bar, you can see part of the scrollview showing. When scrolling up i can see the scrollview with all the elements ( pickers ,textinputs etc) scrolling underneath the statusbar.
My hierarchy looks like this
<React.Fragment>
<SafeAreaView forceInset={true} style={{ flex: 1, backgroundColor: colors.black, zIndex: 10000 }}>
<View style={{flex:1}}>
<Header/> //has certain height. had to add zIndex=10000 to avoid same issue
<KeyboardAvoidingView behavior='position'>
<ScrollViewWithContent/>
</KeyboardAvoidingView>
</View>
</SafeAreaView>
</React.Fragment>
Are you seeing anything obviously off?
Adding overflow:hidden; will do the trick. However i feel like this shouldnt be happening in the first place. The original bug is a weird state where part of the scrollview shows ( the text ) and part of it doesnt ( the background )
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.