Mobx does not updating store. need to refresh manually after every action call

Question

import {action, observable, autorun} from 'mobx';

class Streams {
 @observable
 data = null;

 @action
 getStreams() {   
    this.data = ['pen', 'book', 'pencil'];  
 }
}

index.js //stores

import Streams from './streams';
export default {
 Streams: new Streams(),
};

Root.js

import stores from './store';
import {inject, observer, Provider} from 'mobx-react';

return(
<Provider {...stores}>
  <Routes>
</Provider>
)

Main.js

import {inject, observer} from 'mobx-react';
 @inject('Streams')
 @observer
 class Main extends Component {
   constructor(props) {
    super(props);
     this.props.Streams.getStreams();
  }

render() {
 console.log(this.props.Streams.data)
 }

I am new to mobx. I integrated mobx to my app but store not updating observers at first app launch. need to refresh the app. For routing i am using 'react-native-router-flux' library.