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

Question

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();
     }}/>

R4ncid · Accepted Answer · 2021-02-04 17:37:26Z

1

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) }/>)

answered Feb 4, 2021 at 17:37

R4ncid

7,1651 gold badge8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Richard KeMiKaL GeNeRaL Denton · Accepted Answer · 2021-02-04 17:34:55Z

0

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();
}

answered Feb 4, 2021 at 17:34

Richard KeMiKaL GeNeRaL Denton

4217 silver badges20 bronze badges

5 Comments

Richard KeMiKaL GeNeRaL Denton Over a year ago

I'm assuming you're calling the intermediateFunction outside of the return body?

sanket kheni Over a year ago

yes.but when I tried to run in return it gives error..

sanket kheni Over a year ago

')' expexted ahead of <safeareaview>

Richard KeMiKaL GeNeRaL Denton Over a year ago

Have you tried commenting out the 'safeAreaView' code to check that this is working and that error isn't due to something else?

Richard KeMiKaL GeNeRaL Denton Over a year ago

Let us continue this discussion in chat.

jcklopp · Accepted Answer · 2021-02-04 17:38:30Z

0

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) />

answered Feb 4, 2021 at 17:38

jcklopp

4916 silver badges11 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related