CODEWITHSUNDEEP
react-native
rnn
rnn

Reputation: 2563

How to make image resize in Animated.Image?

when I use <Image /> tag it has resizeMode='contain' to resize image. However, <Animated.Image /> doesnt have. so I cant adjust my image size. How can i solve this ?

 <View style={{ backgroundColor: 'black', flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <StatusBar hidden />
                <Animated.Image 
                source={require('../Image/img.png')}

                style={{
                    height: 100, width: '80%', opacity: this.opacityValue,
                    transform: [{ scale: rotateX }],

                }} >
                </Animated.Image>

            </View>

i did this however it isnt good solution. It can seem bad on other phones

Upvotes: 0

Views: 1393

Answers (1)

cuongtd
cuongtd

Reputation: 3182

this can help you scale the image and still retain resizeMode='contain'

        <View style={{ backgroundColor: 'black', flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <StatusBar hidden />
            <Animated.View style={{ transform: [{ scale: rotateX }] }}>
              <Image 
                source={require('../Image/img.png')}
                resizeMode='contain'
                style={{
                  height: 100, width: '80%', opacity: this.opacityValue,
                }} >
            </Image>
          </Animated.View>         
        </View>

Upvotes: 3

Related Questions