I'm new to react native and I'm trying to do horizontal scrolling with scroll view but it is not scrolling at all.. it is completely static
I'm currently using react-native: "0.68.2", expo: "~45.0.0"
This is my code
<ScrollView
horizontal
showsHorizontalScrollIndicator={true}
contentContainerStyle={{flexGrow:1}}
>
<BookCard/>
<BookCard/>
</ScrollView>
and the code for the Book Card is
const BookCard = styled.View
background-color: ${(props) => props.theme.colors.bg.primary};
border-radius: 5px;
margin-left: 5px;
flex-direction: row;
height: 150px;
border-radius: 5px;
width: 70%;
I have also added a View with flex:1 around the scroll view but it still doesn't work... please what am I getting wrong?
actually i just worked out the issue ... It was because i set the width of the bookcards to a percentage value that is why it didn't work i.e like if you set the cards to width:50% and you put 4 cards in the scrollview , it only scrolls to 2 cards because the 2 cards add up to 100% of the scrollview (i was quite dumb lol)
I replaced the percentage values with px values and no matter the amount of items, it's scrolling perfectly now.. Thank you
Related
How can I properly use sprite sheets in react-native? Or do people typically load icons separately and not use sprite sheets? Mind you this is not sprites for animation, just pure icons.
For example here is my sheet...
And here is the css for one icon...
.Sprite {
background-image: url(./assets/images/spritesheet.png);
background-repeat: no-repeat;
display: inline-block;
}
.IconMenu30px {
width: 30px;
height: 30px;
background-position: -53px -5px;
}
And I tried to translate this into React Native like this...
<Image source={require("../assets/images/spritesheet.png")} style={styles.menuIcon} />
const styles = StyleSheet.create({
menuIcon: {
width: 30,
height: 30,
},
})
But apparently there is no background position attribute in React Native.
Did you try
<ImageBackground />
This might help with your issue
I have a modal box which has some content and at the bottom a button container which has two buttons. I want the button container to be always relative to the screen / viewport. Now the tricky part is the modal box is draggable. I can move it up and down but the height remains 100%.
Now if I give position:absolute;bottom:0 to the button container, it sticks to the bottom of the modalbox. but when I push the modal downwards, the button container also gets pushed down.
How could I achieve positioning this always at the bottom of the screen regardless of the movement of modal ?
const ButtonContainer = styled(View)`
align-items: center;
justify-content: flex-end;
flex-direction: row;
position: absolute;
bottom: 0;
right: 0;
left: 0;
`
const Container = styled(View)`
padding-left: 15;
padding-bottom: 60;
padding-right: 15;
padding-top: 15;
height: 100%;
`
<Container>
<ScrollView>
{content}
</ScrollView>
<ButtonContainer>{buttons}</ButtonContainer>
</Container>
How to resize the Materialize chip component?
http://materializecss.com/chips.html
I tried changing the CSS of chip, but the round shape distorts.
You can just change it's width and height with css.
.chip{
width: 240px;
height: 80px;
border-radius: 80px;
line-height: 80px;
}
.chip img{
height: 80px;
width: 80px;
}
Standard border-radius is 16px so change this value to the same value as the height this will make the chip round again.
Also the line-height is to make the text centered again.
If you use an image inside the chip you will have to make that bigger aswell.
Example
I have a very long page and when I open a bootstrap modal from the bottom of this page the modal is displayed on top of page not on top of the screen. So the user has to scroll up in order to see the modal.
How can I change this behavior?
You have got the result after adding below style sheet in your css.
yourselector {
position: fixed;
top: 50px;
bottom: 50px;
left: 50px;
right: 50px;
}
I have a single div element in a page styled as follow:
div {position: absolute; width: 340px; height: 480px; overflow-y:scroll}
I use a simple jquery script to center it in the available width and height on window.resize event.
The div is displayed and works perfectly on Safari 5 for Mac.
On Safari 5 for Windows it works perfectly (i can scroll the content using the mouse wheel) but the vertical scrollbar is not rendered.
Any idea?
Thanks in advance.
There's no need to use jquery to center, just use the following:
div {
position: absolute;
width: 340px;
height: 480px;
overflow-y: scroll;
top: 50%;
left: 50%;
margin-top: -240px;
margin-left: -170px;
}
Maybe the scrollbar is not rendered because it's disabled (there's no more content), otherwise try with overflow-y:auto