Here in my application I have added 2 images side by side in a scrollView but they are joined each other I want them to be saperated by spaces.
here is the image of how it looks
Here is the code:
<View style={{ height: 230, marginTop: 20, justifyContent:'space-around' }}>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false} >
<Image source={require('../assets/images/restaurant.jpg')} />
<Image source={require('../assets/images/experiences.jpg')} />
</ScrollView>
</View>
Add margin to each image and resize the images accordingly. If you dont want extra margin around every side of the images provide the first image marginRight and the second image marginLeft.
Related
My goal is to get a newsflash component with animations.
I'm implementing a View that contains moving text.
The ScrollView does perform well the animation, however, the inner text doesn't displayed from the start:
<Animated.View style={flex: 4}>
<ScrollView
style={{flex: 1 }}
horizontal={true}
scrollEnabled={false}
contentContainerStyle={{ flex: 1, flexGrow: 1 }}>
<Animated.View style={{ flex: 1, marginLeft }}>
<Text numberOfLines={1}>{this.props.subtitle}</Text>
</Animated.View>
</ScrollView>
</Animated.View>
I tried almost every variation of flex and flexGrow and more but nothing doesn't work well.
If I'm removing the ScrollView it shows well the text, but the effect looks bad.
In the picture, you can see the bottom text cropped (fami)
I have managed to figure it out with removing the flex: 1 from the views and adding:
onContentSizeChange={this.scrollListToStart}
that will run only once at the start using a state variable.
I am using react native 0.59, for layout I am using native base and react-native-easy-grid.
Because of different size of mobile device, I need to put flatlist height dynamic. it is starting almost middle of the screen, and I would like to show it until the footer bar.
here is my code
<Container>
<ImageBackground source={require(imagePath+"bg-default.png")}
style={{width: screenWidth, height: screenHeight, resizeMode: 'cover'}} >
<Content scrollEnabled={false}>
<Grid>
<Row style={{ height: screenHeight*0.36, alignItems:'center',justifyContent:'center' }}>
<Image style={styles.iconImage} source={{ uri: this.state.image_url.displayImage}}/>
</Row>
<Row style={{ backgroundColor: "#1a0568", height:screenHeight*0.058, textAlignVertical: 'center', alignItems: 'center'}}>
<Text style={styles.titleStyle}>{"Information list"}</Text>
</Row>
<Row style={{ backgroundColor: 'none',height:screenHeight*0.38}}>
<FlatList
style={[styles.listContainer]}
data={this.state.informationList}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
</Row>
</Grid>
</Content>
</ImageBackground>
</Container>
As you can see, I set flatlist height screenHeight*0.38, therefore, in some mobile its perfect, but in some mobile there is some empty space. (See the attached picture)
I have tried to make it dynamic with different example to fill rest of the space like
How to set the style attribution to fill the rest space?
(though I need to fill until footer bar), This example works well with normal component But it didnt work with flatlist. Flatlist doesnt scroll anymore. Because it loads all rows which goes out of the screen. what is the right way of setting dynamic height with flatlist?
I could solve it by playing around with different options and taking help from How to set the style attribution to fill the rest space?
Unfortunately Grid, Row did not work with this.
Here is the demo (Don't forget to select iOS or android tab to view the app)
https://snack.expo.io/#shaondebnath/layouttest
I am using react-native scrollview to slide my imageBackground.
I am using pagingEnabled to swipe the images. But is there a way I could get number of the index when ever I swipe?
I am using the scroll view like the code below. Adding pagingEnabled will make the scrollview work like a swiper but I don't know how to get the index.
<ScrollView horizontal={true} pagingEnabled={true}>
{this.createScrollImageSources(this.state.image)}
</ScrollView>
You could make use of the onScroll method together with the Dimensions module to calculate the currentScreenIndex.
Example:
render
<View style={styles.container}>
<ScrollView pagingEnabled horizontal style={{flex: 1}} onScroll={(e)=>this.handleOnScroll(e)} scrollEventThrottle={5}>
<View style={{width: SCREEN_WIDTH, backgroundColor: 'yellow'}} />
<View style={{width: SCREEN_WIDTH, backgroundColor: 'red'}} />
<View style={{width: SCREEN_WIDTH, backgroundColor: 'green'}} />
</ScrollView>
</View>
handleOnScroll
handleOnScroll(event){
//calculate screenIndex by contentOffset and screen width
console.log('currentScreenIndex', parseInt(event.nativeEvent.contentOffset.x/Dimensions.get('window').width));
}
Working Demo
https://snack.expo.io/HyxzFr2HxU
What I did was to use the onScroll prop to check the current offset of the horizontal scrollview. Then compare the current offset with your device width.
Try:
<ScrollView onScroll={this.handleScroll} />
And then:
handleScroll: function(event: Object) {
console.log(event.nativeEvent.contentOffset.x);
},
I am trying to have a screen with a background image, but if the image dimensions dont work to have it fullscreen i want the image to be pinned to the top. RN docs appear to say that resizeMode="contain" should do the trick but for some reason it still centers the image just like resizeMode="center" does. Is there a way to do this? The following code does not work.
<ImageBackground source={defaultImage} style={{ flex: 1 }} resizeMode="contain">
</ImageBackground>
If you want to fill the image with the size of your cell phone, you can use 'stretch'.
stretch: Scale width and height independently, This may change the
aspect ratio
of the src.
<ImageBackground source={defaultImage} style={{ flex: 1 }} resizeMode="stretch">
</ImageBackground>
You can use position props if you want to maintain the image ratio and hold the image at the top.
<ImageBackground
style={{ flex:1,position:'absolute',width:"100%",height:"100%",bottom:150,justifyContent:"flex-end",alignItems:"center"}}
source={{ uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png' }}
resizeMode = "contain"
>
<Text style={{fontSize:30,fontWeight:"bold"}}> ImageBackground</Text>
</ImageBackground>
I have a image in my component and I am trying to place an image on top of that. But only the first image shows, the one I am trying to place on top of it doesn't.
React Native supports zIndex. You can give your second image a style like this { zIndex: 1, position: 'absolute', ... // other position style } to put it on top of other view.
See https://facebook.github.io/react-native/docs/layout-props.html#zindex for reference.
Put the second Image inside the first one:
<View style={Styles.container}>
<View style={Styles.viewStyle}>
<Image
style={Styles.imageStyle}
source={require('./Bakgrundsbild.png')} >
<View style={Styles.logoViewStyle}>
<Image
style={Styles.logoStyle}
source={require('./Logo.png')}
/>
</View>
</Image>
</View>
</View>
You need to give ImageBackground & then give Image
<ImageBackground>
<Image></Image>
</ImageBackground>
like this