CODEWITHSUNDEEP
javascriptreact-nativemobx-react
1337
1337

Reputation: 77

MobX + React Native not re-rendering

I am building a password reset with react native and MobX I am having a bit of trouble reseting the error state. I have tried multiple solutions but none seem to be working, the onChangeText for the input seems to be working but my boolean value doesn't work for updating the UI, I can see the store logging out and it seems correct but the UI doesn't seem to be adding the error message I am using also using react native navigation:

navigation.navigate('Forgot');

and heres my class:

import React from 'react';
import { action, observable } from 'mobx';

/**
 *
 */
class PasswordResetStore {
  @observable email = '';
  @observable emailError = false;

  @action setEmail = (value) => {
    console.log(this.emailError);
    this.emailError = true;
    this.email.value = value;
  };
}

const passwordResetStore = new PasswordResetStore();
export const PasswordResetContext = React.createContext(passwordResetStore);

and heres my component:

import React, { useContext } from 'react';
import { View } from 'react-native';
import { Text, Input, Button } from 'react-native-elements';

import { observer } from 'mobx-react';

import { PasswordResetContext } from '../store/PasswordResetStore';

const PasswordReset = observer(() => {
  const store = useContext(PasswordResetContext);

  return (
    <View>
      <View>
        <Text h3>Reset your password</Text>
      </View>

      <View>
        <Text>Enter the email your used to sign up</Text>
        <Input
          onChangeText={store.setEmail}
          value={store.email.value}
          placeholder="Email"
          keyboardType={'email-address'}
          autoFocus={true}
          autoCorrect={false}
          maxLength={256}
          autoCapitalize={'none'}
          errorMessage={store.emailError ? 'email not found' : ''}
        />
        {/*<Button onPress={store.onResetPassword} title="Search" />*/}
      </View>
    </View>
  );
});

export default PasswordReset;

Thanks

Initial load (where you see true I should be seeing the validate error) [1]: https://i.sstatic.net/HYcAy.png

Updated: added a reset but still not showing up the boolean values are correct:

  useEffect(() => {
    return () => {
      store.reset();
    };
  }, []);

  @action reset = () => {
    this.emailError = false;
  };

Upvotes: 0

Views: 1283

Answers (1)

Danila
Danila

Reputation: 18566

If you were using MobX 6 then you now need to use makeObservable method inside constructor to achieve same functionality with decorators as with MobX 5 before:

import { makeObservable } from "mobx"

class PasswordResetStore {
  @observable email = '';
  @observable emailError = false;

  constructor() {
    // Just call it here
    makeObservable(this);
  }

  @action setEmail = (value) => {
    console.log(this.emailError);
    this.emailError = true;
    this.email.value = value;
  };
}

Although there is new thing that will probably allow you to drop decorators altogether, makeAutoObservable:

import { makeAutoObservable } from "mobx"

class PasswordResetStore {
  // Don't need decorators now
  email = '';
  emailError = false;

  constructor() {
    // Just call it here
    makeAutoObservable (this);
  }

  setEmail = (value) => {
    console.log(this.emailError);
    this.emailError = true;
    this.email.value = value;
  };
}

More info here https://mobx.js.org/migrating-from-4-or-5.html and https://mobx.js.org/react-integration.html

Upvotes: 1

Related Questions