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>
Related
I have a ScrollView that I would like to vertically center. There are two requirements: when the ScrollView is small (one text line), that line should be in the center of screen. When the ScrollView is large (exceeds the screen size), it should function as a normal ScrollView. I can seemingly only get one or the other to work.
<SafeAreaView style={{flex: 1}}>
<Pressable style={flex: 1, justifyContent: 'center'}>
<Pressable>
<ScrollView />
</Pressable>
</Pressable>
</SafeAreaView>
Your ScrollView needs to have a fixed height.
const CenteredScrollView = (props) => {
// random text to render
let randomText = [
"Just some random stuff, ya know? Hopefully this manages to reach the point that it exceeds the screen size, ya know ? ",
"Read on brother of another mother. ",
"Read on sister of another mister. ",
"Some words here. Hopefully this manages to reach the point that it exceeds the screen size, ya know ? ",
"Some words there. Hopefully this manages to reach the point that it exceeds the screen size, ya know ? ",
"Some words where? Hopefully this manages to reach the point that it exceeds the screen size, ya know ? ",
"I really dont know what but some stuff has just happened. ",
"How much text do I need to fill the screen size? ",
]
// simulate ScrollView exceeding screen height
for( let i = 0; i<5;i++)
randomText = randomText.concat(randomText.reverse())
return(
<SafeAreaView style={{flex: 1 }}>
<Pressable style={{flex: 1, justifyContent:'center', backgroundColor:'green' }}>
<Pressable>
<ScrollView
{/*important to give ScrollView a height*/}
style={{backgroundColor:'pink',height:'50%'}}
>
{randomText.map((text,i)=><Text key={i}>{text}</Text>)}
</ScrollView>
</Pressable>
</Pressable>
</SafeAreaView>
);
}
You can apply alignSelf property to ScrollView parent to center itself. Here is a Snack for same.
<SafeAreaView style={{flex: 1}}>
<Pressable style={{flex: 1, justifyContent: 'center'}}>
<Pressable style={{
height: '100%',
width: '60%',
alignSelf : 'center'
}}>
<ScrollView />
</Pressable>
</Pressable>
</SafeAreaView>
I was able to achieve this with the following:
const content = useMemo(() => <View onLayout={({nativeEvent}) => setContentHeight(nativeEvent.layout.height)}>{insert_anything}</View>, [insert_anything])
return <View onLayout={({nativeEvent}) => setParentHeight(nativeEvent.layout.height)}>
{
contentHeight >= parentHeight ?
<ScrollView>{content}</ScrollView} :
content
}
</View>
I am using react-native-gifted-chat, and I am having a hard time figuring out how to color or add a view below the InputToolbar to resemble something like the second image below.
This is what I have
This is what I am trying to do
If anyone knows how I could get close to the second image that would be great. If someone could send a link to a similar example or any help at all is much appreciated.
You cab use renderInputToolbar and set the height for the root view as long as it fills to the bottom:
import {LeftAction, ChatInput, SendButton} from 'react-native-gifted-chat'
...
minInputToolbarHeight={70}
renderInputToolbar={(props)=> (
<View style={{ backgroundColor: COLORS.lighterblue, height: 200 }}>
<View style={styles.inputContainer}>
<LeftAction {...props} />
<ChatInput {...props} />
<SendButton {...props} />
</View>
<View></View>
</View>
)}
Result:
I'm trying to create an image with a text on it, and in order for the the text to be clearly seen I need to make the image darker.
Also (don't sure if it matters or not) I need the background image to be touchable.
This question was asked several times here and I've seen some answers, but none of them worked for me, so I'm wondering if I'm missing something more crucial here.
My code is the following:
<View style={postStyles.container}>
<TouchableOpacity onPress={() =>
this.props.navigation.navigate('AnotherWindow')}>
<ImageBackground source={require('../../assets/images/my_img.jpg')}
style={{width: '100%', height: 150}}>
<Text style={postStyles.title} numberOfLines={2}>
My text
</Text>
</ImageBackground></TouchableOpacity>
From looking around here, I've tried the following solutions:
Tried to wrap the text element inside the imagebackground tag inside a
View element that has a style property of "backgroundColor" with value of 'rgba(255,0,0,0.5)' (also tried different values),
Tried to add this backgroundColor property to the styles of both the container itself, the TouchableOpacity element
Tried to above two solutions with the "elevation" property instead of backgroundColor (I work in Android).
None of the above solutions worked, in a sense that the background image didn't change at all, so I'm wondering if I'm missing something more crucial.
Thanks!
If anyone still having problems with the ImageBackground component, this is how i solved it, basically i set a view inside the image background which has the backgroundColor that darkens the image.
<ImageBackground
source={Images.background}
style={styles.imageBackground}
>
<View style={styles.innerContainer}>
{content}
</View>
</ImageBackground>
const styles = StyleSheet.create({
imageBackground: {
height: '100%',
width: '100%'
},
innerContainer: {
flex: 1,
backgroundColor: 'rgba(0,0,0, 0.60)'
},
});
if you want to make the image darker, you'll need the Image component and use the tintColor prop like:
<Image source={require('./your_image.png')} style={{ tintColor: 'cyan' }}>
this tintColor prop only works for Image component not ImageBackground, also if you want to add a text on the Image component, you'll need to positioning that text with position: 'absolute' or 'relative'
<View style={postStyles.container}>
<TouchableOpacity
onPress={() => his.props.navigation.navigate('AnotherWindow')}>}
>
<Image
source={require('./my_image.png')}
resizeMode="contain"
style={{ width: '100%', height: 150, tintColor: 'cyan' }}
/>
<Text style={postStyles.title} numberOfLines={2}>
My text
</Text>
</TouchableOpacity>
</View>
Also, if you implement this approach you'll need to calculate the dimensions of the screen for each device, well you'll need to check this other component from react-native: https://facebook.github.io/react-native/docs/dimensions
Please, let me know if this works :D
You should just add tintColor to ImageBackground imageStyle and you're done. easy peasy!
<TouchableOpacity onPress={() => this.props.navigation.navigate('AnotherWindow')}>
<ImageBackground source={require('../../assets/images/my_img.jpg')}
style={{width: '100%', height: 150}}
imageStyle={{tintColor: 'rgba(255,0,0,0.5)'}}>
<Text style={postStyles.title} numberOfLines={2}>
My text
</Text>
</ImageBackground>
</TouchableOpacity>
If I try to scroll to the bottom of my ScrollView, it bounces back to its default position and won't let me view the entirety of its content.
My ( truncated ) setup is fairly simple :
<View>
<View>
<ABunchOfStuff />
</View>
<View style={styles.sectionNode} >
<ABunchOfStuff />
</View>
<ScrollView> <------ My broken ScrollView :(
<View>
<ABunchOfStuff />
</View>
</ScrollView>
</View>
This is a simplified version of my actual code. But I'm reaching the conclusion that there's some kind of "unbounded height" going on as in this reference.
I did try making sure everything and all parents have flex: 1 all the way to the child <View> of my <ScrollView> and up to its parents. But that didn't seem to do the trick.
Any idea on how to debug this? I know ReactNative's website recommends this and says it would be easy to do in the inspector ( but with no instructions on how to do it ). If my assumption that there's an "unbounded height" issue, how would one go about and find this rascal unbounded node? Or is it something else?
Try taking flex out of the ScrollView entirely and just put flex: 1 on the parent. That did the trick for me.
For me the problem was setting a paddingVertical, paddingTop or paddingBottom on the ScrollView. Just don't do that. it influences the height of the content of the ScrollView, without the ScrollView adjusting to it appropriately.
The parent view must have style={{flex: 1}} then the scrollview can have style={{flex: 1}} 🥇
The bounded height thingy means the ScrollView itself must be bound.
If the ScrollView has unbounded height, it will stretch with your content and won't scroll.
You can just add height to the ScrollView and see how this works, from there on you can use absolute height or use flex in a way that will limit the ScrollView height to what you want.
This worked for me:
<View style={{flex: 1}}>
<ScrollView>
<View style={{paddingTop: 16, paddingBottom: 16}}>
<SearchBar />
<ItemsContainer />
</View>
</ScrollView>
</View>
You must make sure that ScrollView has fixed height, either by setting it for parents or for itself.
I use flex to set its height instead of specifying it directly so it works on all screen size. So for your code something like
<View style={{flex: 1}}>
<View>
<ABunchOfStuff />
</View>
<View style={styles.sectionNode} >
<ABunchOfStuff />
</View>
<ScrollView style={{flex:0.8}}>
<View>
<ABunchOfStuff />
</View>
</ScrollView>
</View>
More information in react native docs
This works for me
<ScrollView>
<View style={{height:2000}}>
</View>
<ScrollView>
The important thing is to put a defined height for the elements that are inside the ScrollView
<ScrollView style={{flex: 1, marginBottom: 30}} />
items
</ScrollView>
What worked for me was to wrap the ScrollView in View. Then giving the View a height and setting flex : 1 on ScrollView.
Something like this:
<View style={{ height: "60%" }}>
<ScrollView style={{ flex: 1 }}>
<List/>
</ScrollView>
</View>
The suggested answers above with parent flex: 1 and child flex: 1 work, but this thing was causing my bug.
I had <Image> with percentage height and once I replaced the percentage with a number, it fixed the issue.
this will solve your problem
<ScrollView
contentContainerStyle={{flexGrow:1,justifyContent:'space-
between'}}
>
<The Other Components or Lists/>
</ScrollView>
add <Text></Text>
at the bottom inside scrollview. it will give some space
When I wrap content like this example below, it scrolls Perfectly..
return(
<ScrollView>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
...
</ScrollView>
);
However, whenever I wrap it in another View, It will not scroll.
return(
<View>
<ScrollView>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
...
</SCrollView>
</View>
);
Is there some sort of fix to this. I am trying to put a nav bar header above all of the content, couldn't really figure it out though.
It's a typo:
Your closing ScrollView tag is: </SCrollView> rather than </ScrollView>.
You also need to add a style to the View container, here's an example of what it should look like:
return(
<View style={{flex: 1}}>
<ScrollView>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
...
</ScrollView>
</View>
);
Try next code:
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
</ScrollView>
If your ScrollView is within something that handles touch (Pressable, TouchableWithoutFeedback etc) then you either need to stop the touch event propagating up to that parent handler or else the ScrollView won't handle the touch event and therefore won't scroll.
This can be done either with onStartShouldSetResponder={() => true} or by wrapping the children in an element which itself handles the touch event (e.g. Pressable):
return (
<ScrollView>
<Pressable>
<Text>This is scrollable</Text>
<Pressable>
<Pressable>
<Text>As is this</Text>
<Pressable>
</ScrollView>
);
Try adding style={{flex:1}} to <View> and <ScrollView> components. You also have a typo on your code: </SCrollView> in line 9. An example code will look like this:
<View style={{backgroundColor:'white', flex:1}}>
<NavigationBar title="Title" />
<ScrollView style={{flex:1, backgroundColor:'white'}}>
<View style={{flex:1,justifyContent:'center'}}>
<RegisterForm />
</View>
</ScrollView>
</View>
Another solution is to add a height property to the parent View container. This sometimes works well when calculating the height against the screen height.
render () {
const screenHeight = Dimensions.get('window').height
return(
<View style={{height: screenHeight}}>
<ScrollView>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
...
</ScrollView>
</View>
)
}
I have tried all of these solutions and none were working. Then I just fully restarted the app and the metro server and everything worked fine.
As #Evan Siroky has answered above it's working well I'm just adding on thing for a auto height in case you don't want to reserve the space
render () {
const screenHeight = Dimensions.get('window').height
return(
<View style={{ Height: "auto", maxHeight: screenHeight}}>
<ScrollView>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
...
</ScrollView>
</View>
)
}
I had a similar issues, it got solved by removing height/width if set to '100%'.
Just adding here if someone faces the same issues. :D
Set nestedScrollEnabled as true for Hybrid Android + react app as it might be issue with gesture/click for scrolling issue.
Just if anyone is as desperate as I was:
My view was inside a StackNavigator. In the StackNavigator you can assign a default cardStyle. This card style needs height: "100%".
For me this was the case but I had overwritten it within the cardStyle of the Stack.Screen definition.
See this working example:
// This is the stack navigator
<ModalStack.Navigator screenOptions={() => ({
cardStyle: {height: "100%"}
});}}>
<ModalStack.Screen name={ScreenItemDetail} options={{
// cardStyle: {} be sure to not override card style again!
}} component={ItemDetailScreen} />
// ...
</ModalStack.Navigator>
removing contentContainerStyle prop from the ScrollView has fixed the issue for me
Just add ScrollView as parent View if it's still not working for you...just restart your app or server and your ScrollView will work fine. Because sometimes our app freezes for no reason.
I think the best way of doing this is to put all requires inside an array and map this array.
const images = [
require('../your/path/here'),
require('../other/image/here'),
...
];
return ( {images.map((image) => <Image ... source={image} />)
note that if you want it as a background image with other elements above the image, you may use BackgroundImage and either render elements for each image or position absolute the image map and zIndex it behind all things