How to use Model/State in TextInput in React Native

[ghost]

I'm a classic React Native programmer, I usually create my projects with npx react-native init and it went well for me, I decided to try the ignite 'boilerplate' which is super cool, and I was watching Michel Weststrate's tutorials on 'egghead.io' about mobx-state-tree.

After cloning the boilerplate and compiling successfully 😊, I run the command npx ignite-cli generate model User add some properties like id and username, and my model looks like this 👁:

import { Instance, SnapshotOut, types } from "mobx-state-tree"

export const UserModel = types
   .model("User")
   .props({
      id: types.maybe(types.integer),
      username: types.maybe(types.string)
   })
   .views((self) => ({
      get nick() {
         return "#" + self.username
      }
   })) 
   .actions((self) => ({

      setUsername(username: string) {
         self.username = username
      }

   }))

type UserType = Instance<typeof UserModel>
export interface User extends UserType { }
type UserSnapshotType = SnapshotOut<typeof UserModel>
export interface UserSnapshot extends UserSnapshotType { }
export const createUserDefaultModel = () => types.optional(UserModel, {})

After that I added it to the RootStoreModel so I can use it on my screen 💪🏻. This is my root-store.ts

import { Instance, SnapshotOut, types } from "mobx-state-tree"
import { CharacterStoreModel } from "../character-store/character-store"
import { UserModel } from "../user/user"

export const RootStoreModel = types.model("RootStore").props({
  characterStore: types.optional(CharacterStoreModel, {} as any),
  userStore: types.optional(UserModel, {} as any),
})

export interface RootStore extends Instance<typeof RootStoreModel> {}

export interface RootStoreSnapshot extends SnapshotOut<typeof RootStoreModel> {}

And finally in my screen I have simple experiment 😷:

export const SignInScreen: FC<StackScreenProps<NavigatorParamList, "signIn">> = observer(({ navigation }) => {

   let user = UserModel.create({
      username: 'joje'
   })

   return (
      <Screen style={ROOT} preset="scroll">

         <Text text={"Username: " + user.username} />

         <TextInput
            value={user.username}
            onChangeText={(value) => { user.setUsername(value) }}
         />

      </Screen>
   )

})

But this is where my doubt is 😢, first it doesn't let me write in the text field (It cannot be edited, I write and it returns the same value 😞), and second it doesn't update that property (I think so) 🤔.

Using React.useState() works fine 😉, but I think there may be a way to do this with the model the right way ⚒. With the React.useState() look like this:

const [username, setUsername] = React.useState("joje");

<Text text={"Username: " + username} />

<TextInput
     value={username}
     onChangeText={(value) => { setUsername(value) }}
 />

My question is 🥺, should I use React.useState() for this, or should there be a correct way to perform this experiment 😕?

Thanks for reading 🙏🏻, I appreciate any advice and help. Greetings 👋🏻.

[ghost]

Using this block of code I got it to work, but is it the right way?

const [username] = React.useState(UserModel.create({
  username: 'jojemapa'
}));

[EmilTholin]

Hi @jojemapa!

To access your RootStoreModel instance you can use the useStores hook and then use the property you named userStore to access your user.

export const SignInScreen: FC<StackScreenProps<NavigatorParamList, "signIn">> =
  observer(({ navigation }) => {
    const { userStore } = useStores();

    return (
      <Screen style={ROOT} preset="scroll">
        <Text text={"Username: " + userStore.username} />

        <TextInput
          value={userStore.username}
          onChangeText={(value) => {
            userStore.setUsername(value);
          }}
        />
      </Screen>
    );
  });

[ghost]

Ohhhh, thats works nice. thanks you.