Example React component file

Profile.js

/**
 * @providesModule Profile
 */
'use strict';

import React, {
  Image,
  PropTypes,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';

import autobind from 'autobind-decorator';
import { connect } from 'react-redux';

import AppStyles from 'AppStyles';
import Camera from 'Camera';

@connect((state, props) => ({
  profile: state.profiles.get(props.userId),  // state.profiles is an immutable Map
}))
export default class Profile extends React.Component {
  static propTypes = {
    userId: PropTypes.string,
  };
  
  constructor(props, context) {
    super(props, context);
    this.state = {
      isTakingPhoto: false,
    };
  }
  
  render() {
    let {
      profile,
      ...props,
    } = this.props;
    
    let photo = this.state.isTakingPhoto ?
      <Camera onCapture={this._handleCapturePhoto} style={styles.photo} /> :
      <Image source={{ uri: profile.photoUri }} style={styles.photo} />;
    
    return (
      <View {...props} style={[styles.container, props.style]}>
        <TouchableOpacity onPress={this._handlePressPhoto}>
          {photo}
        </TouchableOpacity />
        <Text style={styles.name}>
          {profile.firstName} {profile.lastName}
        </Text>
      </View>
    );
  }
  
  @autobind
  _handlePressPhoto() {
    this.setState({ isTakingPhoto: true });
  }
  
  @autobind
  _handleCapturePhoto(uri) {
    this.props.dispatch({
      type: 'SET_PHOTO',
      userId: this.props.userId,
      uri,
    });
    this.setState({ isTakingPhoto: false });
  }
}

let styles = StyleSheet.create({
  container: {
    alignItems: 'center',
  },
  photo: {
    width: 40,
    height: 40,
  },
  name: {
    fontSize: AppStyles.defaultFontSize,
  },
});