'`useTheme` must be used within `NativeBaseConfigProvider`

In my project I faced the above error can anyone tell me how to solve this error.

The error I faced is:

Error: useTheme must be used within NativeBaseConfigProvider

This error is located at:

in Container
in ProductContainer (created by App)
in RCTView (created by View)
in View (created by App)
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer

ProductContainer.js:

import React, { useState, useEffect } from 'react'
import { View, StyleSheet, ActivityIndicator, FlatList, Text} from 'react-native'
import { Container, Header, Icon, Item, Input } from 'native-base';
import ProductList from './ProductList';
import SearchedProduct from './SearchedProducts';
const data = require('../../assets/data/products.json');
const ProductContainer = () => {
    const [products, setProducts ] = useState([]);
    const [productsFiltered, setProductsFiltered] = useState([]);
    const [focus, setFocus] = useState();
    useEffect(() => {
        setProducts(data);
        setProductsFiltered(data);
        setFocus(false);
        return () => {
            setProducts([])
            setProductsFiltered([])
            setFocus()
        }
    }, [])    
    const SearchProduct = (text) => {
        setProductsFiltered(
            products.filter((i) => i.name.toLowerCase().includes(text.toLowerCase()))
        );
    }
    const openList = () => {
        setFocus(true);
    } 
    const onBlur = () => {
        setFocus(flase);
    }
    return (
        <Container>
            <View  style = {{ flexDirection: "row"}}>
                  <Input
                  width = "100%"
                  variant = "rounded"
                  placeholder="Search"
                  onFocus={openList}
                  onChangeText={(text) => SearchProduct(text)}
                  />                  
            </View>
            {focus == true ? (
                <SearchProduct 
                    productsFiltered={productsFiltered}
                />
            ) : (
                <View style={styles.container}>
                <Text>Product Container</Text>
                <View style={styles.listContainer}>
                    <FlatList 
                        data={products}
                        numColumns={2}
                        renderItem={({item}) => <ProductList 
                        key={item.brand}
                        item={item}/>}
                        keyExtractor={item => item.brand}
                    />
                </View>
            </View> 
        )}        
        </Container>        
    )
}
const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });
export default ProductContainer

App.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

//Screens
import Header from './Shared/Header'
import ProductContainer from './Screens/Products/ProductContainer'

export default function App() {
    return (
        <View style={styles.container}>
          <Header />
          <ProductContainer />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

package.json:

{
    "name": "animal-feedmart",
    "version": "1.0.0",
    "main": "node_modules/expo/AppEntry.js",
    "scripts": {
        "start": "expo start",
        "android": "expo start --android",
        "ios": "expo start --ios",
        "web": "expo start --web",
        "eject": "expo eject"
    },
    "dependencies": {
        "expo": "~44.0.0",
        "expo-status-bar": "~1.2.0",
        "native-base": "^3.3.7",
        "react": "17.0.1",
        "react-dom": "17.0.1",
        "react-native": "0.64.3",
        "react-native-base": "^1.1.0",
        "react-native-safe-area-context": "^4.2.1",
        "react-native-svg": "^12.3.0",
        "react-native-web": "0.17.1"
    },
    "devDependencies": {
        "@babel/core": "^7.12.9"
    },
    "private": true
}

Please can anyone help me solve this issue? Thanks in advance

node.jsnpm


Solution 1:[1]

in your app.js import NativeBaseProvider and wrap your other components around it

import { NativeBaseProvider } from 'native-base';

return (
<NativeBaseProvider>
  <View style={styles.container}>

    <Header />

    <ProductContainer />

  </View>
</NativeBaseProvider>
);

Solution 2:[2]

If you put in the native provider and it is still showing the error, please ensure to change your Header as native base removed it from v3 upward, use HStack instead and if you want to use the Header downgrade the native base version to v2.12.14

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Quayson David

Related Questions