CODEWITHSUNDEEP
cssreactjsreact-native
Jothi Kannan
Jothi Kannan

Reputation: 3358

react native ScrollView items with equal padding on both top and bottom

I am designing a scroll component to looks like a gallery of images. I am trying to center the images based on the device height with equivalent padding on both top and bottom. But based on the devices the top padding is not looking good. I need help to make it consistent in all the devices.

To get Height and Width of the device i am using Dimension

  const {width: screenWidth, height: screenHeight} = 
   Dimensions.get('window');
    const width = screenWidth ;
    const height = screenHeight;

<View style={styles.DefaultView}>
          <ScrollView
           maximumZoomScale={1}
           minimumZoomScale={1}
           bouncesZoom={true}
           style={styles.scrollView}
           automaticallyAdjustContentInsets={true}
           pagingEnabled={true}
           horizontal={true}
           showsHorizontalScrollIndicator={false}
           onScroll={this._onScroll}
           contentContainerStyle={{flexGrow : 1, justifyContent : 'center'}}
           >
           {images.map((row, i) => (
              <View key={i}>
                  <Image
                      resizeMode='contain'
                      style={{width, height}}
                      source={{uri: row.src}}
                  />
              </View>
          ))}
           </ScrollView>
        </View>

const styles = StyleSheet.create({
    scrollView: {
        flex: 1,
        flexDirection: 'row',
    },
    DefaultView: {
        flex: 1,
        backgroundColor: '#000',
    },
});

Please refer attached image for the current output Iphone 6 plus

Upvotes: 8

Views: 18409

Answers (2)

Davide Carpini
Davide Carpini

Reputation: 1711

there is a prop for this called contentContainerStyle

<ScrollView 
  contentContainerStyle={{
    paddingTop: 25,
    paddingBottom: 25,
  }}>
 *** CONTENT ***
</ScrollView>

Upvotes: 25

A.Matt
A.Matt

Reputation: 71

Try to give the view that contains the image component style as: 

<View styles={{flex:1, justifyContent:'center', alignItems:'center'}}>... </View>

without giving padding top and bottom, plus give a fixed height to the images.

Upvotes: 0

Related Questions