useRef() does not work in Android app (react native)

Question

I have several TextInput that I am using on a math app. The user can put a number and at the end click on a button and that textInput shows the right answer. I use useRef to work with this values as I don't want re-renders with UseState. I use expo and testing in a browser , it all works but once I test on android, the only thing that works with useRef is clear.

example

<TextInput
    onChangeText={ActionChange} 
    ref={refTextInput}
    style={styles.somestyles} 
    keyboardType='numeric'  
    placeholder="?"
    ></TextInput>

I use refTextInput.current.clear() that works and then on showing the results I use:

refTextInput.current.style.color='red' - works on browser not in android refTextInput.current.value=ValueOne+ValueTwo - works on browser not in android

onChangeText is also working everywhere without problem.

I am looking how else I can do it or why it does not work. Thank you

score 0 · Accepted Answer · answered Jun 23 '22 at 15:13

0

This is because the api for changing those values is not the same on web and android. On android you cannot use style.color, but on web you can use it.

answered Jun 23 '22 at 15:13

Aseem Lalfakawma

186
9

thanks for your answer with a little delay. I changed the way I do it. I was looking for dynamic way but it seem it didn't work (as shown above). – ReshaRoshla Feb 09 '23 at 14:30

score 0 · Answer 2 · answered Mar 02 '23 at 14:49

You can use setNativeProps

to read more about it: https://reactnative.dev/docs/0.66/direct-manipulation

so your code will be something like that:

 function changeColor(e) {
      if(Platform.OS == "android") 
         refTextInput.current.setNativeProps({backgroundColor:"red"}) // android
      else if(Platform.OS == "web")
         e.target.style.backgroundColor="red"// web 
      }
    onChangeText={(e)=>changeColor(e)}

useRef() does not work in Android app (react native)

2 Answers2