CODEWITHSUNDEEP
reactjsreact-native
sanket kheni
sanket kheni

Reputation: 1628

How to apply animation in react-native?

I want to add animation to this search bar. when the user touches the search bar it size decreases and again increases and gets to its default size(like animation in popups)

enter image description here

This is my code

<View style={{flexDirection:'row',alignSelf:'center'}}>
        <TextInput
           
          onChangeText={(text) => setSearch(text)}
          onFocus={()=>{
            setSize('92%');
            setInterval(()=>{setSize('95%')},1000)
            }}
          placeholder="Search"
          style={{...styles.searchbox,width:size}}     
                             
        ></TextInput>   
 </View>

I am currently trying to change width..

Upvotes: 0

Views: 285

Answers (1)

dianaqqq
dianaqqq

Reputation: 668

Firstly, I suggest you to take a look at RN animated documentation, maybe it will help you to understand better how the animations work.

Also, it depends on what you're having there: a class component or a function component. If you're using a function component, you could do it like this:

  1. Creating a custom hook, called, let's say useAnimation(), which would look something like this

export const useAnimation = ({ doAnimation, duration, initialValue, finalValue }) => {
  const [animation, setAnimation] = useState(new Animated.Value(initialValue))

  useEffect(() => {
    Animated.spring(animation, {
      toValue: doAnimation ? initialValue : finalValue,
      duration,
      bounciness: 8,
      useNativeDriver: false
    }).start();
  }, [doAnimation]);

  return animation
}

  1. As it is said in the documentation, you could animate only Animated components, and for example if you want to have an animated View, the tag will be <Animated.View> {...} </Animated.View, but for the <TextInput> we have to create the animated component:

  const AnimatedTextInput = Animated.createAnimatedComponent(TextInput)

and combining the first 2 steps

const AnimatedTextInput = Animated.createAnimatedComponent(TextInput)
const [collapsed, setCollapsed] = useState(true)
 const animation = useAnimation({ doAnimation: collapsed, duration: 300, initialValue: 20, finalValue: 200 });

  const onFocusText = () => setWidth(false)
  return (
      <AnimatedTextInput
        onFocus={onFocusText}
        placeholder={"Search something"}
        style={{width: animation, height: 50, borderColor: 'gray', borderWidth: 1, borderRadius: 4, padding: 10}}
      />
      )

Also, if you're having a class component, you could have a method which will start the animation (but don't forget about the step 2 which is essential)

  private size: Animated.Value = new Animated.Value(COLLAPSED_VALUE)


  get resizeInputWidth(): Animated.CompositeAnimation {
    return Animated.timing(this.size, {
      toValue: EXPANDED_VALUE,
      duration: 500,
    })
  }
  
  startAnimation = () => this.resizeInputWidth.start()
  
  
  <AnimatedTextInput
      onFocus={this.startAnimation}
      style={{ width: this.size }}
  />

Upvotes: 2

Related Questions