How to use the mobx-react/native.observer function in mobx-react

import React from 'react'
import { StyleSheet } from 'react-native'
import { observable } from 'mobx'
import { observer } from 'mobx-react/native'
import { Text } from '@app/components/common/text'
import { DoubleClick } from '@app/components/common/double-click'
import colors from '@app/style/colors'
import fonts from '@app/style/fonts'
import { IS_IOS } from '@app/config'

interface IHeaderProps {
  onDoubleClick?(): void
  title?: string
}

export const CustomHeader = observer((props: IHeaderProps): JSX.Element => {
  const { title, onDoubleClick } = props
  const { styles } = headerStyles

  function handleClick() {
    onDoubleClick && onDoubleClick()
  }

  return (
    
      
    
  )
})

export const headerStyles = observable({
  get styles() {

StyleSheet,
    Text,
    View,
    Image,
    Dimensions,
    ScrollView,
} from 'react-native';

const computeViewHeight = (nbProjects) => {
    const { height } = Dimensions.get('window');
    const projectLinesHeight = 40 + (MONTH_BAR_HEIGHT + ((PROJECT_LINE_HEIGHT + 25) * nbProjects)) + 10;

    return (projectLinesHeight > height) ? projectLinesHeight : height;
};

const Month = observer(({ month }) => {
    return (
        
    );
});

Month.propTypes = {
    month: React.PropTypes.object,
};

const MonthBar = observer(() =>  {
    const { width } = Dimensions.get('window');

});

Slot.propTypes = {
    state: React.PropTypes.oneOf([
        'taken',
        'available',
        'yours',
    ]).isRequired,
    date: React.PropTypes.string.isRequired,
    memberPicture: React.PropTypes.string,
    oneshot: React.PropTypes.bool.isRequired,
    slotObject: React.PropTypes.object.isRequired,
    activityStore: React.PropTypes.object.isRequired,
};

const SlotGroup = observer(({ username, slots, activityStore, alreadyRegistered }) => {

    const slotState = (slot) => {

        if (alreadyRegistered) {
            return 'taken';
        }

        if (!slot.master) {
            return 'available';
        }

        if (slot.master.login === username) {
            return 'yours';
        }

        return 'taken';

/**
 * TouchableView
 * @file 公共可点击控件，解决了透明度重复使用的问题
 * @module app/components/common/touchable-view
 * @author Surmon 
 */

import React from 'react'
import { TouchableOpacity, TouchableOpacityProps } from 'react-native'
import { observer } from 'mobx-react/native'
import { IChildrenProps } from '@app/types/props'
import sizes from '@app/style/sizes'

export const TouchableView = observer((props: TouchableOpacityProps & IChildrenProps): JSX.Element => {
  return (
    
      {props.children}
    
  )
})

import {
    View,
    Text,
    ScrollView,
    Image,
    LayoutAnimation
} from 'react-native';
import _ from 'lodash';

import Accordion from 'react-native-collapsible/Accordion';

import moment from 'moment';
import { observer } from 'mobx-react/native';
import RegisterButton from './RegisterButton';

const Slot = observer(({ oneshot, state, date, memberPicture, slotObject, activityStore }) => {

    const borderLeftWidth = {
        taken: 0,
        available: 3,
        yours: 3,
    };

    const borderLeftColor = {
        taken: 'transparent',
        available: '#62C462',
        yours: '#FFD783',
    };

    const slotStateToRegister = {
        yours: oneshot ? 'forbidden' : 'registered',
        available: 'unregistered',

import { observable } from 'mobx'
import { observer } from 'mobx-react/native'
import Ionicon from 'react-native-vector-icons/Ionicons'
import { optionStore } from '@app/stores/option'
import { Text } from '@app/components/common/text'
import { LANGUAGE_KEYS } from '@app/constants/language'
import { ICategory, ITag } from '@app/types/business'
import { TouchableView } from '@app/components/common/touchable-view'
import { archiveFilterStore, EFilterType } from './filter'
import i18n from '@app/services/i18n'
import colors from '@app/style/colors'
import sizes from '@app/style/sizes'
import mixins, { getHeaderButtonStyle } from '@app/style/mixins'

export interface IArchiveProps {}
export const ArticleArchiveHeader = observer((props: IArchiveProps): JSX.Element | null => {

  const { styles } = obStyles
  const { filterActive: isFilterActive, filterType, filterValue, filterTypeText } = archiveFilterStore

  if (!isFilterActive) {
    return null
  }

  const filterValueText = (
    filterType === EFilterType.Search
      ? filterValue as string
      : optionStore.isEnLang
        ? (filterValue as ICategory | ITag).slug
        : (filterValue as ICategory | ITag).name
  )

/**
 * Text
 * @file 公共文本控件，解决了默认颜色和样式的问题
 * @module app/components/common/text
 * @author Surmon 
 */

import React from 'react'
import { Text as RNText, TextProps } from 'react-native'
import { observer } from 'mobx-react/native'
import { IChildrenProps } from '@app/types/props'
import colors from '@app/style/colors'
import fonts from '@app/style/fonts'

export const Text = observer((props: TextProps & IChildrenProps): JSX.Element => {
  return (
    
      {props.children}
    
  )
})

const Month = observer(({ month }) => {
    return (
        
    );
});

Month.propTypes = {
    month: React.PropTypes.object,
};

const MonthBar = observer(() =>  {
    const { width } = Dimensions.get('window');

    return (

import React, { Component } from 'react';
import {
    View,
    Animated,
    Easing,
    ActivityIndicator,
    LayoutAnimation,
    UIManager,
} from 'react-native';
import { observer } from 'mobx-react/native';
import { Button } from 'native-base';

const ButtonAnimated = Animated.createAnimatedComponent(Button);

const TextButton = observer(({ children, opacity }) => {
    return (
        
            { children }
        
    );
});

TextButton.propTypes = {
    children: React.PropTypes.string.isRequired,
    opacity: React.PropTypes.object.isRequired,
};

const MobileSearchBox = ListItem => observer(SearchBox(MobileSearchFrame, MobileSearchInput, MobileSearchResults(ListItem)));