CODEWITHSUNDEEP
reactjsreact-native
sanket kheni
sanket kheni

Reputation: 1628

How to add two functions together in one??react -native

enter image description here

I am trying to add these 2 Functions in one. I am new to react-native. As in code, I tried but only the first one is working.

My question is How I can use setSearch and animation together in the onChangetext function?

<TextInput
    style={styles.searchbox}
    onChangeText={(text) => {
        setSearch(text)
        scaleValue.setValue(1)
        Animated.timing(scaleValue,{
            toValue:0.5,
            duration:100,
            easing: Easing.linear,
            useNativeDriver:true
        }).start();
     }}/>

Upvotes: 0

Views: 128

Answers (3)

jcklopp
jcklopp

Reputation: 491

Create a new function to encapsulate the two actions you want to invoke by onChangeText. Something along the lines of:

 const doSomething = (text) => {
          setSearch(text)
          scaleValue.setValue(1)
          Animated.timing(scaleValue,{
            toValue:0.5,
            duration:100,
            easing: Easing.linear,
            useNativeDriver:true
            }).start();
          }
 }

 ...

 <TextInput style={styles.searchbox}
          onChangeText={(text) => doSomething(text) />

Upvotes: 0

R4ncid
R4ncid

Reputation: 7129

The problem here is that once you use setSearch(text) you're changing the state of the component and that change trigger the re-rendering of the component itself so the rest of the code doesn't run.
I've never used react native so I'm not sure 100% but if you are using a Functional component you can do something like this

const [search, setSearch] = useState('')
useEffect(() => {
   scaleValue.setValue(1)
   Animated.timing(scaleValue,{
                   toValue:0.5,
                   duration:100,
                   easing: Easing.linear,
                   useNativeDriver:true
                }).start();
}, [search])


return (<TextInput
              style={styles.searchbox}
              onChangeText={(text) => setSearch(text) }/>)

Upvotes: 1

Richard KeMiKaL GeNeRaL Denton
Richard KeMiKaL GeNeRaL Denton

Reputation: 421

Can't you just use an intermediate function to call them both?

<TextInput
    style={styles.searchbox}
    onChangeText={(text) => intermediateFunction(text)}
/>

intermediateFunction = (text) => {
    setSearch(text);
    Animated.timing(scaleValue,{
                  toValue:0.5,
                  duration:100,
                  easing: Easing.linear,
                  useNativeDriver:true
                }).start();
}

Upvotes: 0

Related Questions