title: MobX & React Native Functional Component : How can we implement mobX in React Native Functional Component?
body: <p>The code below is just an example I found online.</p>
  <pre><code>import { observable, computed } from &quot;mobx&quot;;
  import { observer } from &quot;mobx-react&quot;;
  import React from &quot;react&quot;;
  import { SafeAreaView, Text, TextInput, StyleSheet } from &quot;react-native&quot;;
  @observer
  class Shop extends React.Component {
      @observable price = 9;
      @observable quantity = 11;
      @computed get total() {
              return this.price * this.quantity;
      }
      render() {
          return (
              &lt;SafeAreaView style={styles.container}&gt;
                  &lt;Text&gt;Price: &lt;/Text&gt;
                  &lt;TextInput value={this.price} onChangeText={value =&gt; { this.price = value }} /&gt;
                  &lt;Text&gt;Quantity: &lt;/Text&gt;
                  &lt;TextInput value={this.quantity} onChangeText={value =&gt; { this.quantity = value }} /&gt;
                  &lt;Text&gt;Total (Price and Quantity): {this.total}&lt;/Text&gt;
              &lt;/SafeAreaView&gt;
          )
      }
  }
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
  })
  </code></pre>
  <p>Sadly, most of the example about MobX in React Native I found online are used for Class Component.</p>
  <p>Could anyone kind convert this code into a functional component?</p>
  <p>Thank you</p>