Initial signal value react native input field not showing

[SupertigerDev]

• [ ] Check if updating to the latest version resolves the issue

Environment

• [ ] I am using @preact/signals-core
• [ ] I am using @preact/signals
• [x] I am using @preact/signals-react
  • [x] I understand usage changed in v2, and I've followed the React Integration instructions

Describe the bug On web, it works fine. the input field shows the existing signal value. but on ios/android, the initial signal value does not show.

To Reproduce https://snack.expo.dev/PWLDLLtxZpvpWq2hW_OKT?platform=web

Steps to reproduce the behavior:

1. Go to the url above
2. go to the web version and see that its working as intended, the input field contains "test"
3. go to android/ios, see that the input field is empty.

Expected behavior The input field for ios/android should contain the word "test" just like in the web version.

[rschristian]

Looks like unwrapping the signal works, issue with the binding in RN I guess.

[SupertigerDev]

Looks like unwrapping the signal works, issue with the binding in RN I guess.

Unwrapping it also has bugs. I can't input text on android/iPhone

[rschristian]

You checked the "I understand usage changed in v2, and I've followed the React Integration instructions" box yet I don't see any indication of using the Babel plugin or useSignals()

[SupertigerDev]

Oh my apologies, I assumed the stuff in readme was the latest. I will try again with useSignal and give you an update later.

[SupertigerDev]

Is the Babel stuff optional if I just use useSignal?

[rschristian]

The ReadMe does document the latest usage, you just seem to have skipped over it.

useSignals(), plural. You need to use it or the Babel plugin.

[SupertigerDev]

Oh, by the way, the hyperlink for the issue template React Integration instructions points to a 404 page

[rschristian]

Yup, realized that. My bad #573

[SupertigerDev]

Ah, seems like I missread something. there is useSignal and useSignals which i did not realize because of their names being VERY similar. My bad.

Although, I'm not sure what is going on here. Is this an expo issue?

[rschristian]

Looks like they don't support package exports? That's a bit rough, I suppose you can try forming the path manually?

[SupertigerDev]

Annoyingly that didnt work either 😦 let me really quickly create a new react native project without expo 1 sec

[SupertigerDev]

Well, its working, however its not finegrained. Other elements also update. Unless its not intended to be finegrain like solidjs? Am i missunderstanding?

export default function App() {
  useSignals();
  return (
    <SafeAreaView style={styles.container}>
      <TextInput
        style={styles.input}
        value={testSignal.value}
        onChangeText={e => (testSignal.value = e)}
      />
      <Text>
        <>{testSignal}</>
      </Text>
      <Text>{Math.random()}</Text>
    </SafeAreaView>
  );
}

[rschristian]

however its not finegrained

Yes, if you unwrap with .value you de-opt into full component renders.

However, if RN is borked then this is all that I can recommend at the moment. RN isn't something we directly support / test against.

[SupertigerDev]

yea its broken when i dont unwrap 😭