Открыть картинку на другом экране

Мне нужно сделать что бы при нажатии на одну из карточек, открывалась аватарка автора в новом экране (полный размер). А так же отображалось его имя в заголовке вместо Full Image.

App.js

import React, { Component } from 'react';
import { Stack } from './src/components/Router';
export default class App extends Component {
    static navigationOptions = {
        title: 'Users'
    }
    render() {
        return (
           <Stack />
        );
    }
}

Gallery.js

import React, { Component } from 'react';
import {
Text,
View,
StyleSheet,
ListView,
Image,
TouchableHighlight,
} from 'react-native';
import UserImage from './UserImage';
const ds = new  ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2});
export default class Gallery extends Component {
constructor(props){
    super(props);
    this.state = {
        dataSource: ds,
        loaded: false                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
    }
}
componentDidMount(){
    this.fetchData();
}
fetchData() {
    return fetch('https://api.500px.com/v1/photos?feature=popular&consumer_key=wB4ozJxTijCwNuggJvPGtBGCRqaZVcF6jsrzUadF&page=3', {method: 'GET'})
    .then((response) => response.json())
    .then((responseData) => {
        for (var i = 0; i < responseData.photos.length; i++) {
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(responseData.photos),
                loaded: true
            });
        } 
    }).done();
}
render() {
    if(!this.state.loaded) {
        return this.renderLoadingView();
    }
    return(
        <ListView 
            dataSource={this.state.dataSource}
            renderRow={this.renderRow.bind(this)}
        />
    );
}
renderLoadingView(){
    return(
        <View style={styles.container}>
            <Text style={styles.loadingText}>
                Loading data...
            </Text>
        </View>
    );
}
onMore(dataRow) {
    this.props.navigation.navigate('UserImage', dataRow);///???????
}
renderRow(dataRow) {
    return (
        <TouchableHighlight
            onPress={() => this.onMore('UserImage', dataRow)} ///?????
        >
            <View style={styles.container}>
                <Image 
                    style={styles.contImage}
                    source={{ uri: dataRow.user.userpic_url }}                        
                />
                <Text style={styles.contName}>{dataRow.name}</Text>
                <Text style={styles.contText}>{dataRow.user.fullname}</Text>
            </View>
        </TouchableHighlight>
    );
}
}
const styles = StyleSheet.create({
container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
    paddingTop: 50,
    backgroundColor: '#665CAC',
    borderBottomWidth: 1,
    borderColor: '#000'
},
loadingText: {
    fontSize: 20,
    color: '#fff'
},
contImage: {
    width: 150,
    height: 150,
    borderRadius: 75,
    borderColor: '#fff',
    borderWidth: 1
},
contName: {
    fontSize: 15,
    marginTop: 10,
    color: '#fff',
    textAlign: 'center'
},
contText: {
    marginTop: 5,
    fontSize: 10,
    color: '#fff',
    textAlign: 'center'
}
});

UserImage.js

import React, { Component } from 'react';
import {
StyleSheet,
View,
Image
} from 'react-native';
import { StackNavigator } from 'react-navigation';
export default class UserImage extends Component {
render(dataRow) {
   const { name, user } = this.props.navigation.state.params;///???????
    return(
        <View style={styles.container}>
            <Image
                style={styles.contImage}
                source={{ uri: user }}//??????
            />
        </View>  
    );
}
}
const styles = StyleSheet.create({
container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
    paddingTop: 50,
    backgroundColor: '#665CAC'
},
contImage: {
    width: 300,
    height: 300
},
contText: {
    justifyContent: 'center',
    alignItems: 'center',
    color: '#fff'
}
});

Router.js

import React, { Component } from 'react';
import { 
    StyleSheet
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import Gallery from './Gallery';
import UserImage from './UserImage';
export const Stack = StackNavigator({
    Gallery: {
        screen: Gallery,
        navBarTextColor: 'red',
        navigationOptions: {
            title: 'Users'
        }
    },
    UserImage: {
        screen: UserImage,
        navigationOptions: {
            title: 'Full Image'
        }
    }
    },{
        headerMode: 'screen',
        backgroundColor: '#665CAC'
});