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 } from 'react-native'

import { Container, Header, Icon, Item, Input, Text } from 'native-base';

import ProductList from './ProductList';

const data = require('../../assets/data/products.json');

const ProductContainer = () => {

const [products, setProducts ] = useState([]);

useEffect(() => {

    setProducts(data);

    return () => {

        setProducts([])
    }

}, [])

const styles = StyleSheet.create({

    container: {

      flex: 1,

      backgroundColor: '#fff',

      alignItems: 'center',

      justifyContent: 'center',

    }
})

return (

    <Container>

        <Header searchBar rounded>

            <Item>

                <Icon name="ios-server"/>

                <Input

                    placeholder='Search'

                    // onFocus={}

                    // onChangeText={(text) => }

                />

            </Item>

        </Header>

        <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>
    
)

}

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',

},

});

export default ProductContainer;

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": "^2.15.2",

"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

}

My ProductContainer.js

import React, { useState, useEffect } from 'react'

import { View, StyleSheet, ActivityIndicator, FlatList } from 'react-native'

import { Container, Header, Icon, Item, Input, Text } from 'native-base';

import ProductList from './ProductList';

const data = require('../../assets/data/products.json');

const ProductContainer = () => {

const [products, setProducts ] = useState([]);

useEffect(() => {

    setProducts(data);

    return () => {

        setProducts([])

    }

}, [])

const styles = StyleSheet.create({

    container: {

      flex: 1,

      backgroundColor: '#fff',

      alignItems: 'center',

      justifyContent: 'center',

    }
})

return (

    <Container>

        <Header searchBar rounded>

            <Item>

                <Icon name="ios-server"/>

                <Input

                    placeholder='Search'

                    // onFocus={}

                    // onChangeText={(text) => }

                />

            </Item>

        </Header>

        <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>
    
)

}

export default ProductContainer;

Please can anyone try to solve this issue as soon as possible

Thanks in advance

CodePudding user response：

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>
);