`useTheme` must be used within `NativeBaseConfigProvider`

user_18473287 0
Viewed 4751

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

npm node.js
4 Answers

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

import { NativeBaseProvider } from 'native-base';

return (
   <NativeBaseProvider>
      {Your other components}
   </NativeBaseProvider>
);
user_178988010

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

user_134047000 
import { NativeBaseProvider } from 'native-base';

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

I have solved this in App.js

import { NavigationContainer } from '@react-navigation/native';
import { NativeBaseProvider, extendTheme } from 'native-base';

Create a Theme

  const newColorTheme = {
    brand: {
      900: '#5B8DF6',
      800: '#ffffff',
      700: '#cccccc',
    },
  };

const theme = extendTheme({
  colors: newColorTheme,
});

and use on

export default function App() {
  return (
    <NativeBaseProvider theme={theme}>
      <NavigationContainer>
        <Header />
        <Main/>
      </NavigationContainer>
    </NativeBaseProvider>
  );
}
user_178180340
Related