Mobx observer is not reacting to changes in observable - react-native

Question

After action call, the observable gets updated with new values but it doesn't trigger update in my observer class. The reaction occurs when I put an condition check in render which uses observable object. But I use observable object in another place inside the returned DOM as a prop condition. I couldn't understand why this happens.
Here is my observer class
#inject("store")
#observer
export default class SignupWithMobileNo extends Component {
constructor() {
super();
this.sendOTP = this.sendOTP.bind(this);
this.state = {
phoneInput: ""
};
}
static navigationOptions = {
header: null
};
componentDidMount() {
BackHandler.addEventListener("hardwareBackPress", this.handleBackButton);
}
handleBackButton() {
ToastAndroid.show("You cannot go back", ToastAndroid.SHORT);
return true;
}
sendOTP(phone) {
this.props.store.userStore.sendOTP(phone);
}
componentDidUpdate() {
console.log("component did update", this.props);
const navigation = this.props.navigation;
const { sendOTPRequest } = this.props.store.userStore;
if (sendOTPRequest.state === "succeeded") {
navigation.navigate("VerifyOTP");
}
}
render() {
const navigation = this.props.navigation;
const { sendOTPRequest } = this.props.store.userStore;
// reaction occurs when I uncomment the following lines.
// if (sendOTPRequest.state === "succeeded") {
// }
return(
<View style={styles.container}>
<Formik
initialValues={{
phone: ""
}}
onSubmit={values => {
this.sendOTP(values.phone);
}}
validate={values => {
let errors = {};
if (values.phone.length < 1) {
errors.phone = "Invalid phone number";
}
return errors;
}}
>
{({
handleChange,
handleSubmit,
setFieldTouched,
values,
errors,
touched
}) => (
<View style={styles.formBody}>
<Text style={styles.headline}>Get authenticate your account</Text>
<FormInput
onChange={handleChange("phone")}
value={values.phone}
placeholder="Enter your phone number"
keyboardType="phone-pad"
onBlur={() => {
setFieldTouched("phone");
}}
/>
<FormButton
onClickHandler={handleSubmit}
buttonText="Send OTP"
isDisabled={
values.phone.length < 1 ||
sendOTPRequest.state === "requested"
}
/>
{touched.phone && errors.phone ? (
<Text style={styles.body}> {errors.phone} </Text>
) : null}
{sendOTPRequest.state === "failed" ? (
<Text style={styles.body}> {sendOTPRequest.error_code</Text>
) : null}
</View>
)}
</Formik>
</View>
);
}
}

Answer 1

No subscribers to observable data in the observer's render function. Once I added that, the issue solved.