flickering bug

[codthing]

I tested this project. There is flickering when rotating the car picture.

[magnusfernandes]

+1

[thanhcong2801]

I tested this project. There is flickering when rotating the car picture.

me too

[Essam-Harrous]

me too

[hassancodess]

You'll need to customize the Image360Viewer component and replace the image component either with FastImage or Expo Image, with priority set to high

[ghost]

@codthing Change the following files

1. node_modules/@hauvo/react-native-360-image-viewer/lib/index.js

Instead of rendering image after every swipe, here all the images has been rendered initially and stacked one after another. Only the image's tintColor is being changed from transparent to null while pan gesture.

import React, { Component } from 'react'
import { View, Image, PanResponder, Dimensions } from 'react-native'
import styles from './styles'

const { width } = Dimensions.get('window')
export default class Image360Viewer extends Component {
  static defaultProps = {
    width, // width of image
    height: 300, // height of image
    srcset: [],
    rotationRatio: 0.5, // the drag distance compares to 180 degree: width / rotationRatio = 180 degree,
  }

  constructor(props) {
    super(props)
    this.createPanResponder()

    this.state = {
      rotation: 0,
      rotatePeriod: 360 / props.srcset.length,
    }
  }

  createPanResponder = () => {
    this.panResponder = PanResponder.create({
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onPanResponderGrant: (evt, gestureState) => {
        // console.log('onPanResponderGrant', gestureState)
        this.startMoving(gestureState)
      },
      onPanResponderMove: (evt, gestureState) => {
        // console.log('onPanResponderMove', gestureState)
        this.moving(gestureState)
      },
      onPanResponderRelease: (evt, gestureState) => {
        // console.log('onPanResponderRelease', gestureState)
        this.endMoving(gestureState)
      }
    })
  }

  startMoving = (gestureState) => {
    this.startX = gestureState.moveX
    this.startRotation = this.state.rotation
  }

  moving = (gestureState) => {
    this.currentX = gestureState.moveX
    this.updateRotation()
  }

  endMoving = (gestureState) => {
    this.currentX = gestureState.moveX
    this.updateRotation()
  }

  updateRotation = () => {
    const { rotationRatio } = this.props
    const deltaRotation = (this.currentX - this.startX) * 180 / (rotationRatio * this.props.width)
    this.setState({ rotation: this.startRotation + deltaRotation })
  }

  getImage = () => {
    const { rotation, rotatePeriod } = this.state
    const mRotation = rotation - Math.floor(rotation / 360) * 360
    const index = Math.floor(mRotation / rotatePeriod)
    return index
  }

  render() {
    const { srcset } = this.props
    const { width, height } = this.props
    return (
      <View style={{ flex: 1, backgroundColor: 'black' }}>
        {
          srcset.map((item, index) =>
            <View {...this.panResponder.panHandlers}>
              <Image source={{ uri: item }} style={[styles.image, { width, height, tintColor: this.getImage() === index ? null : 'transparent' }]} resizeMode='contain' />
            </View>
          )
        }
      </View>
    )
  }
}

2. node_modules/@hauvo/react-native-360-image-viewer/lib/styles.js

import { StyleSheet } from 'react-native'

export default StyleSheet.create({
  image: {
    resizeMode: 'contain',
    position: 'absolute',
    alignSelf: 'center', 
  }
})

This solved the flickering issue when the source of image is either local asset or url.