React-native-image-viewer: Image cannot be centered with renderHeader implementation

[chinalwb]

Hello @ascoders

After adding the implementation of renderHeader, the image cannot be centered.

Here is my code:

<ImageViewer
          backgroundColor="#314047"
          imageUrls={imageUrls}
          loadingRender={this.loadingRender}
          onClick={this.close}
          renderHeader={this.renderHeader}
          renderIndicator={this.renderIndicator}
        />


renderHeader = () => {
    const {
      title,
      zoomPer,
    } = this.state
    return (
      <View style={styles.container}>
        <IconToggle
          color="white"
          name={getMaterialIconName('image2')}
        />
        <View style={styles.ViewForTitleStyle}>
          <Text
            ellipsizeMode="tail"
            numberOfLines={1}
            style={styles.titleTextStyle}
          >
            {title}
          </Text>
        </View>
      </View>
    )
  }

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'nowrap',
    marginLeft: 10,
    marginRight: 10,
    paddingBottom: 10,
    paddingTop: 40,
  },
  titleTextStyle: {
    color: 'white',
    fontSize: 22,
  },
  ViewForTitleStyle: {
    alignItems: 'flex-start',
    justifyContent: 'center',
    width: 160,
  },
})

Any advice?

Thanks.

[gerardo15]

Hey!

Im running into the same issue.

Did you solve it?

[chinalwb]

Add style {position: 'absolute'} to header elements container helps me resolving that issue.

[gerardo15]

Thank you very much!

It helped!

[xstable]

If you use this _position:absolute_ for a Close-Button, don't forget to add _zIndex:1_ to the encapsulating View-Layer. Else the Press would't recognised.

[HemantRMali]

@xstable , Thanks, zIndex:1 helped me out to show the floating close button.