React Native: View Config not found for name RNCWebView

error image

I'm trying to use WebView from react-native-webview so when i press the button (renderItem function) it'll open a webview from the link given by the api, but however i try to use the webview the error from the image appears.

import React, { Component } from 'react';
import api from '../services/api';

import { View, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native';

export default class Main extends Component {
    static navigationOptions = {
        title: "JSHunt"
    };

    state = {
      productInfo: {},
      docs: [],
      page: 1,
    };

    componentDidMount() {
      this.loadProducts();
    }

    loadProducts = async (page = 1) => {
      const response = await api.get(`/products?page=${page}`);

      const { docs, ...productInfo } = response.data;

      this.setState({ 
        docs: [... this.state.docs, ...docs], 
        productInfo,
        page
      });
    };

    loadMore = () => {
      const { page, productInfo } = this.state;

      if(page === productInfo.pages) return;

      const pageNumber = page + 1;

      this.loadProducts(pageNumber)
    };

    renderItem = ({ item }) => (
      <View style={styles.productContainer}>
        <Text style={styles.productTitle}>{item.title}</Text>
        <Text style={styles.productDescription}>{item.description}</Text>
        <TouchableOpacity style={styles.productButton}
         onPress={() => {
           this.props.navigation.navigate('Product', { product: item })
         }}>
          <Text style={styles.productButtonText}>Acessar</Text>
        </TouchableOpacity>
      </View>
    )

    render() {
        return(
          <View style={styles.container}>
            <FlatList contentContainerStyle={styles.list}
            data={this.state.docs} keyExtractor={item => item._id} renderItem={this.renderItem}
            onEndReached={this.loadMore}
            onEndReachedThreshold={0.1}/>
          </View>
        )
    }
}

WebView component, here i'm using the arrow function instead of the class so i can pass the "navigation" data from the api that's being imported from '../services/api';

import React from 'react';

import { WebView } from 'react-native-webview';

 const Product = ({ navigation }) => (
  <WebView source={{ uri: navigation.state.params.product.url}} />
);

Product.navigationOptions = ({ navigation }) => ({
  title: navigation.state.params.product.title
});

export default Product;