react-native-reanimated#useValue TypeScript Examples

The following examples show how to use react-native-reanimated#useValue. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Notification.tsx    From react-native-crypto-wallet-app with MIT License 5 votes vote down vote up 
Notification: React.FC<INotification> = ({ type, message }) => {
  const opacity = useValue(0);
  const { dispatch } = useContext(AppContext);
  const { timing } = Animated;

  const animConfig = {
    duration: 300,
    easing: Easing.inOut(Easing.ease),
  };

  useEffect(() => {
    timing(opacity, { ...animConfig, toValue: 1 }).start();
  }, [animConfig, opacity, timing]);

  useEffect(() => {
    const fade = setTimeout(() => {
      timing(opacity, { ...animConfig, toValue: 0 }).start(({ finished }) => {
        if (finished) {
          dispatch({
            type: CLEAR_NOTIFICATION,
          });
        }
      });
    }, 2000);

    return () => {
      clearTimeout(fade);
    };
  }, [animConfig, dispatch, opacity, timing]);

  return (
    <SafeAreaView
      style={{
        ...StyleSheet.absoluteFillObject,
      }}
    >
      <AnimatedBox
        flexDirection="row"
        justifyContent="space-between"
        alignItems="center"
        height={56}
        position="absolute"
        top={16}
        left={16}
        right={16}
        backgroundColor="toast"
        borderRadius="full"
        {...{ opacity }}
        style={NotificationStyle.container}
      >
        <Box flexDirection="row" alignItems="center">
          <Icon name={type!} />
          <StyledText variant="label" color="white" style={NotificationStyle.message}>
            {message}
          </StyledText>
        </Box>
        <Icon name="x" color="white" />
      </AnimatedBox>
    </SafeAreaView>
  );
}
Example #2
Source File: AuthForm.tsx    From react-native-crypto-wallet-app with MIT License 4 votes vote down vote up 
AuthForm: React.FC<IAuthFormProps> = ({
  isSignUp,
  email,
  isEmailValid,
  password,
  isPasswordValid,
  loading,
  isButtonDisabled,
  showPassword,
  submitButtonLabel,
  bottomSectionLightTextLabel,
  bottomSectionAccentTextLabel,
  onEmailChange,
  onPasswordChange,
  onShowPasswordPress,
  onSignUpPress,
  onForgotPasswordPress,
  onNavigationToLoginOrSignUp,
}) => {
  const keyboardDidShow = useKeyboardDidShow();
  const { height } = Dimensions.get('window');
  const UNFOCUSED_HEIGHT = (height * 57) / 100;
  const FOCUSED_HEIGHT = (height * 87) / 100;
  const containerInitialHeight = useValue(UNFOCUSED_HEIGHT);

  const containerAnimConfig = {
    duration: 200,
    easing: Easing.inOut(Easing.ease),
  };

  useEffect(() => {
    if (keyboardDidShow) {
      timing(containerInitialHeight, { ...containerAnimConfig, toValue: FOCUSED_HEIGHT }).start();
    } else {
      timing(containerInitialHeight, { ...containerAnimConfig, toValue: UNFOCUSED_HEIGHT }).start();
    }
  }, [
    FOCUSED_HEIGHT,
    UNFOCUSED_HEIGHT,
    containerAnimConfig,
    containerInitialHeight,
    keyboardDidShow,
  ]);

  return (
    <ContentContainer height={containerInitialHeight}>
      <StyledInput
        label="Email Address"
        value={email}
        onChangeText={onEmailChange}
        keyboardType="email-address"
        disabled={loading}
        errorText={isEmailValid === undefined || isEmailValid ? '' : 'Email address is not valid'}
        ariaLabel="email"
      />
      <StyledInput
        {...{ showPassword }}
        label="Password"
        value={password}
        onChangeText={onPasswordChange}
        onShowPasswordPress={onShowPasswordPress}
        disabled={loading}
        errorText={isPasswordValid === undefined || isPasswordValid ? '' : 'Password is not valid'}
        isPassword
        ariaLabel="password"
      />
      {!isSignUp && (
        <Box alignSelf="flex-end">
          <PressableText
            variant="link"
            label="Forgot your password?"
            onPress={onForgotPasswordPress!}
          />
        </Box>
      )}
      <View style={AuthFormStyle.bottomSection}>
        <BottomSection
          mainButtonVariant="primary"
          mainButtonLabel={submitButtonLabel}
          mainButtonLoading={loading}
          mainButtonDisabled={isButtonDisabled}
          lightTextLabel={bottomSectionLightTextLabel}
          accentTextLabel={bottomSectionAccentTextLabel}
          onMainButtonPress={onSignUpPress}
          onAccentTextPress={onNavigationToLoginOrSignUp}
        />
      </View>
    </ContentContainer>
  );
}