React Native переменные между классами JavaScript

Я пытаюсь настроить действие навигации с помощью реакции-навигации, но у меня возникают проблемы, так как я использую FlatList и Pure Component для визуализации элементов в списке. Список отображается нормально, но когда я пытаюсь добавить функцию onPress к TouchableHighlight, я не могу вызвать обычную функцию навигации, потому что она не знает, что означает переменная navigate. Я хотел бы сохранить отдельный файл для Pure Component вместо того, чтобы перемещать его в другой класс, если это возможно.

Чистый компонент:

export default class Lot extends React.PureComponent {

    render() {
        return (
            <TouchableHighlight
                onPress={() => navigate('LotView')}
            >
                <View style={{ flex: 1, height: 150, alignItems: 'center', justifyContent: 'center' }}>
                    <View>
                        {this.props.active && (<Image source={images[this.props.index]} style={[styles.images]} />)}
                    </View>

                 </View>

            </TouchableHighlight>
        );
    }
}

Следующее находится в моем классе App.js.

FlatList

<FlatList
    data={this.state.lots}
    renderItem={({ item }) => <Lot {...item} />}
/>

Экраны навигации

export const MyApp = StackNavigator({
    Home: { screen: HomeScreen },
    LotView: { screen: LotView },
});