CODEWITHSUNDEEP
performancereact-nativeanimationreact-native-reanimated
Augusto Chmieleski
Augusto Chmieleski

Reputation: 1

react-native reanimated does not respond to onFocus and onBlur

What I am trying to do

I need to animate a View's background color when a text input is focused.

What I did until now

I built a component that has two functions, onFocus and onBlur - it's just an event function from react-native-reanimated.

 const onFocus = event<NativeSyntheticEvent<TextInputFocusEventData>>([
    {
      nativeEvent: ({ target }) => set(colorAnimation, 1)
    }
  ]);

  const onBlur = event<NativeSyntheticEvent<TextInputFocusEventData>>([
    {
      nativeEvent: ({ target }) => set(colorAnimation, 0)
    }
  ]);

I am passing this function to an Animated TextInput, I get no error on console and it shows the custom background color that I've set. But not changing on Focus or Blur.

Code

I am using typescript

import React from 'react';
import { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';
import Reanimated from 'react-native-reanimated';
import { bInterpolateColor } from 'react-native-redash';
import styled from 'styled-components/native';

const { Clock, Value, event, set, debug, block, divide } = Reanimated;

const StyledTextInput = styled.TextInput`
  height: 40px;
  padding: ${props => props.theme.spacing.default * 2}px
    ${props => props.theme.spacing.default * 3}px;
`;

const AnimatedTextInput: typeof StyledTextInput = Reanimated.createAnimatedComponent(
  StyledTextInput
);

const Container = styled(Reanimated.View)`
  width: 100%;
  border: 1px solid ${props => props.theme.colors.border};
  background: #e3e7eb;
  border-radius: ${props => props.theme.shapping.borderRadius * 2};
`;

const TextInput = () => {
  const clock = new Clock();
  const colorAnimation = new Value(0);

  const onFocus = event<NativeSyntheticEvent<TextInputFocusEventData>>([
    {
      nativeEvent: ({ target }) => set(colorAnimation, 1)
    }
  ]);

  const onBlur = event<NativeSyntheticEvent<TextInputFocusEventData>>([
    {
      nativeEvent: ({ target }) => set(colorAnimation, 0)
    }
  ]);

  return (
    <Container
      style={{
        backgroundColor: bInterpolateColor(
          colorAnimation,
          { r: 255, g: 0, b: 0 },
          { r: 0, g: 0, b: 255 }
        )
      }}
    >
      <AnimatedTextInput onFocus={onFocus} onBlur={onBlur} />
    </Container>
  );
};

export default TextInput;

Result

Textinputs screenshot

Upvotes: 0

Views: 888

Answers (1)

user13030064
user13030064

Reputation: 11

from what I can see you're not using binterpolatecolor correctly.

from the doc:

const bInterpolateColor: (value: Animated.Adaptable<number>, color1: string | number, color2: string | number, colorSpace?: "hsv" | "rgb") => Animated.Node<number>;

you are not providing the colorspace (but this is optional so I don't know how relevant that is), also color 1 and color 2 can only be string or number and you've given an object it seems.

so that's the first problem, I am also not sure if your container component will update without some sort of state change via setstate(), but I could be wrong as I'm not a reanimated expert by any means.

Upvotes: 1

Related Questions