1

I really love to use pose on react native because it's really easy. But I got some small issues. My question is; is there any way to use pose on react native to make animations with width, height or padding? I made some animations with position, opacity or transform but I couldn't figure it out with width.

I wrote a small example code below to understand better.

Example Code;

import React from 'react';
import posed from 'react-native-pose';
import { View } from 'react-native';

export const SearchBoxAnimated = posed.View({
  getBigger: { x: -16, width: '100%' },
  normal: { x: 0, width: '85%' }
});

const SearchBox = ({isGetBigger}) => (
   <View>
      <SearchBoxAnimated pose={isGetBigger ? 'getBigger' : 'normal'} />
   </View>
);

When I try this, It gives an error.

Error: Style property 'width' is not supported by native animated module.

Package Versions:

  • React native: 0.55.4
  • Expo: 30.0.1
  • React: 16.3.1
  • React native pose: 0.8.1
the_bluescreen
  • 3,126
  • 2
  • 18
  • 31

1 Answers1

1

The main limitation in react native is that you can only animate non-layout properties, I suggest you to use the transform property, which might work in this case.

Praveen
  • 333
  • 1
  • 7