I have used Animated API to scale my center item of FlatListtwice the size and it's working perfectly. The problem is the margins or paddings are not being scaled causing center item to overlap with previous and next item.

My Animated.View

<Animated.View
        style={{
          alignItems: 'center',
          justifyContent: 'center',
          marginLeft: 6,
          marginRight: 6,
          width: 70,
          height: 70,
          borderRadius: 35,
          borderColor: 'white',
          position: 'relative',
          borderWidth: 2,
          transform: [
            {
              scale: animatedValue.interpolate({
                inputRange: [index - 1, index, index + 1],
                outputRange: [1, 2, 1],
                extrapolate: 'clamp'
              })
            }]
        }}>
....other components
</Animated.View>

I have also tried putting all components inside Animated.View and giving them margin or padding. Still no success.

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.