Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for animate string value with % #1617

Merged
merged 2 commits into from
Jan 12, 2021

Conversation

piaskowyk
Copy link
Member

@piaskowyk piaskowyk commented Jan 11, 2021

Description

Add support for animate string value with %
Fixes: #1613

Example code

Example code
import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedStyle,
  Easing,
} from 'react-native-reanimated';
import { View, Button } from 'react-native';
import React from 'react';

export default function AnimatedStyleUpdateExample(props) {
  const randomWidth = useSharedValue('10%');
  
  const config = {
    duration: 500,
    easing: Easing.bezier(0.5, 0.01, 0, 1),
  };

  const style = useAnimatedStyle(() => {
    return {
      width: withTiming(randomWidth.value, config),
    };
  });

  return (
    <View>
      <Animated.View
        style={[
          { width: '100%', height: 80, backgroundColor: 'black' },
          style,
        ]}
      />
      <Button
        title="toggle"
        onPress={() => {
          randomWidth.value = Math.random() * 100 + '%' ;
        }}
      />
    </View>
  );
}

Copy link
Member

@jakub-gonet jakub-gonet left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you add some examples, update TS types if necessary, and update docs?

src/reanimated2/animations.js Outdated Show resolved Hide resolved
src/reanimated2/animations.js Outdated Show resolved Hide resolved
Copy link
Contributor

@karol-bisztyga karol-bisztyga left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks alright.
Could you please add an example where the 'pt' unit occurs?
Maybe @Szymon20000 could do a code review here?

src/reanimated2/animations.js Outdated Show resolved Hide resolved
@piaskowyk piaskowyk force-pushed the @piaskowyk/animation-unit-value branch from 329a883 to c00019e Compare January 11, 2021 14:18
@piaskowyk piaskowyk changed the title Add support for SV with unit Add support for animate string value with % Jan 11, 2021
react-native-reanimated.d.ts Outdated Show resolved Hide resolved
src/reanimated2/animations.js Outdated Show resolved Hide resolved
@jakub-gonet
Copy link
Member

Please don't force push into branches that have a pull request and reviews. It removes old commits, so you can't check history at the time of writing comments.

@piaskowyk piaskowyk merged commit eded190 into master Jan 12, 2021
@piaskowyk piaskowyk deleted the @piaskowyk/animation-unit-value branch January 12, 2021 16:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

not able to assign percent values to width
3 participants