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>
Related
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 )
My all screen has a scrollView, and there's a in the middle of it. I want when someone scroll up, the text be fixed at the top and does not disappear. How can I do that? I didn't find it anywhere, thanks.
<View style={styles.container}>
<Text style={{ position : 'absolute', textAlign: 'center'}}>
Special Text
</Text>
<ScrollView>
</ScrollView>
</View>
you can do something like this
Use css property position: sticky. that will fixed your text at the top it's called sticky position. So, Please read it https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky
Be patient.
Cheer you!
i was trying to implement something similar and i got it done but unfortunately it is kinda complex (relatively) at least compared to what you would do on the web. it requires using the onLayout prop.
state = {zIndex: 0};
<View>
<View style={[your_style, {position: "relative", zIndex: this.state.zIndex}]} onLayout={({nativeEvent}) => {this.outTextHeight = nativeEvent.layout.height}}>
<Text>Special Text</Text>
</View>
<View style={{[your_style, {zIndex: 1}]}>
<ScrollView onScroll={({nativeEvent}) => {if(nativeEvent.contentOffset.y >= (this.insideTextHeight + this.insideTextOffsety){this.setState({zIndex: 2})})}}>
// your content
<View onLayout={({nativeEvent}) => {this.insideTextHeight = nativeEvent.layout.height; this.insideTextOffsety = nativeEvent.layout.y}}>// this maybe the same height so may be unnecessary
<Text>Special Text</Text>
</View>
</ScrollView>
</View>
</View>
My code is pretty simple: (relevant parts shown only)
<ScrollView style={{/* padding, centering... */}>
<Text>SHARE WITH YOU FRIENDS</Text>
</ScrollView>
Yet, when I inspect the Text node, its width is 100% of its container, and the grey background goes all the width.
Is there a layout setting to make this Text's width as small as possible? I.e. only until the end of the Text.
You can use alignSelf property:
<View style={{alignSelf: 'flex-start'}}>
<Text>SHARE WITH YOU FRIENDS</Text>
</View>
For Scroll view you can try like
<ScrollView contentContainerStyle={{ alignItems: 'flex-start'}}>
<Text >SHARE WITH YOU FRIENDS</Text>
</ScrollView>
Hope this will help!
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>
);