NativeBase: useTheme must be used within NativeBaseConfigProvider

Simulator Screen Shot - iPhone 11 - 2021-11-15 at 18 25 56

Firebase.json { “name”: “myapp”, “version”: “0.0.1”, “private”: true, “scripts”: { “android”: “react-native run-android”, “ios”: “react-native run-ios”, “start”: “react-native start”, “test”: “jest”, “lint”: “eslint .” }, “dependencies”: { “@material-ui/core”: “^4.11.0”, “@material-ui/icons”: “^4.9.1”, “@react-native-community/async-storage”: “^1.11.0”, “@react-native-community/checkbox”: “^0.5.2”, “@react-native-community/datetimepicker”: “^3.0.2”, “@react-native-community/netinfo”: “^5.9.5”, “@react-native-community/picker”: “^1.8.0”, “@react-native-community/slider”: “^3.0.3”, “@react-native-community/toolbar-android”: “0.1.0-rc.2”, “@react-native-firebase/admob”: “^7.6.8”, “@react-native-firebase/app”: “^8.4.5”, “@react-navigation/native”: “^6.0.6”, “material-design-icons”: “^3.0.1”, “native-base”: “^3.0.0”, “nodemailer”: “^6.4.14”, “patch-package”: “^6.4.7”, “prop-type”: “0.0.1”, “react”: “16.9.0”, “react-native”: “^0.66.3”, “react-native-calendars”: “^1.403.0”, “react-native-chart-kit”: “^6.6.1”, “react-native-color-picker”: “^0.6.0”, “react-native-device-info”: “^5.2.1”, “react-native-easy-grid”: “^0.2.2”, “react-native-elements”: “^2.3.2”, “react-native-exit-app”: “^1.1.0”, “react-native-fs”: “^2.16.4”, “react-native-hr-component”: “^2.0.2”, “react-native-image-picker”: “^2.3.4”, “react-native-linear-gradient”: “^2.5.6”, “react-native-mail”: “^5.2.0”, “react-native-modal”: “^11.5.6”, “react-native-modal-datetime-picker”: “^9.0.0”, “react-native-modal-selector”: “^1.1.2”, “react-native-month-selector”: “^1.4.0”, “react-native-month-year-picker”: “^1.4.1”, “react-native-orientation”: “^3.1.3”, “react-native-paper”: “^3.12.0”, “react-native-permissions”: “^2.2.2”, “react-native-restart”: “^0.0.17”, “react-native-safe-area-context”: “^3.3.2”, “react-native-screens”: “^2.9.0”, “react-native-simple-toast”: “^1.0.0”, “react-native-svg”: “^9.12.0”, “react-native-video”: “^5.1.0-alpha8”, “react-native-video-controls”: “^2.6.0”, “react-native-video-player”: “^0.10.1”, “react-native-webview”: “^11.14.2”, “rn-fetch-blob”: “^0.12.0” }, “devDependencies”: { “@babel/core”: “^7.6.2”, “@babel/runtime”: “^7.6.2”, “@react-native-community/eslint-config”: “^3.0.1”, “babel-jest”: “^27.3.1”, “eslint”: “^8.2.0”, “jest”: “^27.3.1”, “metro”: “^0.66.2”, “metro-react-native-babel-preset”: “^0.56.0”, “moment”: “^2.24.0”, “react-native-gesture-handler”: “^1.4.1”, “react-native-reanimated”: “^1.2.0”, “react-native-render-html”: “^4.1.2”, “react-native-sqlite-storage”: “^4.1.0”, “react-native-vector-icons”: “^7.1.0”, “react-navigation”: “^4.4.4”, “react-navigation-drawer”: “^2.2.2”, “react-navigation-stack”: “^1.8.1”, “react-test-renderer”: “16.9.0” }, “jest”: { “preset”: “react-native” } }

This error is located at: in Container in HomeScreen (created by SceneView) in SceneView (at StackViewLayout.tsx:900) in RCTView (at View.js:32) in Unknown (at createAnimatedComponent.js:242) in AnimatedComponent (at createAnimatedComponent.js:295) in AnimatedComponentWrapper (at StackViewCard.tsx:106) in RCTView (at View.js:32) in Unknown (at createAnimatedComponent.js:242) in AnimatedComponent (at createAnimatedComponent.js:295) in AnimatedComponentWrapper (at src/index.native.js:105) in Screen (at StackViewCard.tsx:93) in Card (at createPointerEventsContainer.tsx:95) in Container (at StackViewLayout.tsx:975) in RCTView (at View.js:32) in Unknown (at src/index.native.js:139) in ScreenContainer (at StackViewLayout.tsx:384) in RCTView (at View.js:32) in Unknown (at createAnimatedComponent.js:242) in AnimatedComponent (at createAnimatedComponent.js:295) in AnimatedComponentWrapper (at StackViewLayout.tsx:374) in PanGestureHandler (at StackViewLayout.tsx:367) in StackViewLayout (created by withOrientation) in withOrientation (at StackView.tsx:104) in RCTView (at View.js:32) in Unknown (at Transitioner.tsx:267) in Transitioner (at StackView.tsx:41) in StackView (created by Navigator) in Navigator (created by KeyboardAwareNavigator) in KeyboardAwareNavigator (created by SceneView) in SceneView (created by Drawer) in RCTView (at View.js:32) in Unknown (created by ResourceSavingScene) in RCTView (at View.js:32) in Unknown (created by ResourceSavingScene) in ResourceSavingScene (created by Drawer) in RCTView (at View.js:32) in Unknown (at src/index.native.js:139) in ScreenContainer (created by Drawer) in RCTView (at View.js:32) in Unknown (at createAnimatedComponent.js:240) in AnimatedComponent(View) (created by Drawer) in RCTView (at View.js:32) in Unknown (at createAnimatedComponent.js:240) in AnimatedComponent(View) (created by PanGestureHandler) in PanGestureHandler (created by Drawer) in Drawer (created by DrawerView) in DrawerView (created by Navigator) in Navigator (created by NavigationContainer) in NavigationContainer (at myapp/index.js:24) in ThemeProvider (created by Provider) in RCTView (at View.js:32) in Unknown (created by Portal.Host) in Portal.Host (created by Provider) in Provider (at myapp/index.js:23) in Main (at renderApplication.js:50) in RCTView (at View.js:32) in Unknown (at AppContainer.js:92) in RCTView (at View.js:32) in Unknown (at AppContainer.js:119) in AppContainer (at renderApplication.js:43) in myapp(RootComponent) (at renderApplication.js:60) ERROR Error: useTheme must be used within NativeBaseConfigProvider

This error is located at: in NavigationContainer (at myapp/index.js:24) in ThemeProvider (created by Provider) in RCTView (at View.js:32) in Unknown (created by Portal.Host) in Portal.Host (created by Provider) in Provider (at myapp/index.js:23) in Main (at renderApplication.js:50) in RCTView (at View.js:32) in Unknown (at AppContainer.js:92) in RCTView (at View.js:32) in Unknown (at AppContainer.js:119) in AppContainer (at renderApplication.js:43) in myapp(RootComponent) (at renderApplication.js:60) ERROR Error: useTheme must be used within NativeBaseConfigProvider

HomeScreen.Java

import React, { Component } from ‘react’; import { StyleSheet, View, Text, Image, TouchableOpacity, Linking,ScrollView, TouchableWithoutFeedback, Keyboard, Dimensions, Platform, Clipboard } from ‘react-native’; import { TextInput, Snackbar } from ‘react-native-paper’; import Toast from ‘react-native-simple-toast’; import style from ‘…/styles/CommonLayout’; import GLOBALS from ‘…/customlibs/Globals’; import { DatabaseHelper } from ‘…/customlibs/DatabaseHelper’; import AsyncStorage from ‘@react-native-community/async-storage’; import { UtilityHelper } from ‘…/customlibs/UtilityHelper’; import LinearGradient from ‘react-native-linear-gradient’; var RNFS = require(‘react-native-fs’); import { Container, Header, Content,Button, Icon, Footer } from ‘native-base’; import { Col, Row, Grid } from ‘react-native-easy-grid’; import FontAwesome5 from ‘react-native-vector-icons/FontAwesome5’; import { Tips } from ‘…/model/Tips’; import Moment from ‘moment’; import { BannerAd, BannerAdSize, TestIds } from ‘@react-native-firebase/admob’; import DeviceInfo from ‘react-native-device-info’; import AdBanner from ‘…/layoutelements/AdBanner’ import Modal from ‘react-native-modal’;

const pageStyles = StyleSheet.create({ mainContainer: { flex: 1, marginTop: 5, marginLeft: 15, marginRight: 15, marginBottom: 15 }, modalContent: { backgroundColor: ‘white’, padding: 5, justifyContent: ‘center’, borderWidth:4, borderColor: ‘#000000’, borderRadius: 10 }, });

export default class HomeScreen extends Component { constructor(props) { super(props) this.state = { background_color: ‘#5c5c5c’, password: ‘’, tip_today: 0, ads_path: require(‘…/images/banner1.png’), newUpdateSnackbar: false, announcementModalVisible: false, announcements: null }; this.utilHelper = new UtilityHelper(); this.dbHelper = new DatabaseHelper(); this.tipsModel = new Tips(); this.willFocusSubscription; }

componentDidMount(){

Moment.locale('en')
var didLoad = false;
this.willFocusSubscription = this.props.navigation.addListener(
  'didFocus',
  () => {
    didLoad = true;
    this.loadData();

    var path = "";
    if(GLOBALS.ADS_COUNT == 1){
      path = require('../images/banner1.png');
    }else if(GLOBALS.ADS_COUNT == 2){
      path = require('../images/banner2.png');
    }else if(GLOBALS.ADS_COUNT == 3){
      path = require('../images/banner3.png');
    }else if(GLOBALS.ADS_COUNT == 4){
      path = require('../images/banner4.png');
    }
    this.setState( {
      ads_path: path,
    });
    if(GLOBALS.ADS_COUNT == 4){
      GLOBALS.ADS_COUNT = 1;
    }else{
      GLOBALS.ADS_COUNT++;
    }
  }
);

setTimeout(() => {
  if(!didLoad){
    this.loadData();
  }
}, 1000)

var device = (Platform.OS === 'ios') ? 'ios' : 'android';
fetch('http://myurl.com/', {
      method: 'POST',
      headers: new Headers({
          'Content-type': 'application/x-www-form-urlencoded',
      }),
      body: "action=getannouncements&appname=myapp&device=" + device
    }).then((response) => {
      return response.json()
    }).then(async (json)=>{

      console.log(JSON.stringify(json) + "where is this again");
      this.jsondata = [];
      console.log("here001");

      if(json.success) {
        console.log("5555");

        console.log("json.data.lengthhereee 122211: "+ json.data.length);
        for(var i=0;i<json.data.length; i++) {
          if(json.data[i].optionnum != 2 && json.data[i].optionnum != 1) {
            console.log("heree11111");
            this.jsondata.push(json.data[i])
            this.pokeservercount(json.data[i].id)
          }
          else {
            console.log("heree222222");

            var enddate = json.data[i].enddate;
            var annid =  json.data[i].id;
            var rowjson = json.data[i];
            if(json.data[i].optionnum == 1) {
              enddate = 1;
            }
            await this.dbHelper.insertannouncementlog(annid, enddate, rowjson).then((result) => {
              console.log("heree1323232323");
              console.log(result);

              if(result != 0) {
                console.log("appending" + result.id);
                this.jsondata.push(result)
                console.log(JSON.stringify(this.jsondata))
                this.pokeservercount(result.id)
              }
            });
          }
        }
      }
      return this.jsondata;
    }).then((a_data)=>{
      console.log("a_data: "+a_data);
      console.log("a_data: "+a_data.length);
      if(a_data.length > 0) {
        var newArray = []
        a_data.forEach(obj => {
          if(!newArray.some(o=>o.date_modified === obj.date_modified)) {
            newArray.push({...obj})
          }
        });
        //var announcements = this.pubOps.convertTimeFromStampToDisplay(newArray[0].date_modified, true) + "\n\n\n" + newArray[0].announcement
        var announcements = newArray.map((maprecords,o_index) => {
          return (
              <View>
                <View style={{marginBottom: 10}}>
                  <Text style={{fontWeight: 'bold'}}>{this.convertTimeFromStampToDisplay(maprecords.date_modified, true)}</Text>
                </View>
                <View style={{marginBottom: 20}}>
                    <Text>{maprecords.announcement}</Text>
                </View>
              </View>
              )
          })
        }
        if(a_data.length > 0)
          return announcements;
        return 0;
    }).then((result)=>{
      console.log("heresresresresulttttt");
      //console.log(result);
        if(result != 0) {
          setTimeout(()=>{
              this.setState({
              announcementModalVisible: true,
              announcements: result
            })
          }, 1000)
        }
        else {
          this.setState({
            announcementModalVisible: false,
          },()=>{
          });

        }
    }).catch((error) => {
      console.log(error);
    })

}

componentWillUnmount(){ this.willFocusSubscription.remove()

}

pokeservercount(id) { try { AsyncStorage.multiGet([‘user_data’,‘background_color’], (err, items) => { if(items[0][1] != ‘’ && items[0][1] != ‘undefined’ && items[0][1] != null){ var myObject = JSON.parse(items[0][1]); fetch(“http://webcoastserver.com/central/public.php”,{ method: ‘POST’, headers: new Headers({ ‘Content-type’ : ‘application/x-www-form-urlencoded’, }), body: “action=updateviews&aid=”+id+“&uid=”+myObject.user_id }).then((response)=>{

      })
    }
  });
} catch(e) {
}

}

convertTimeFromStampToDisplay(timestamp, monthname = true) { return Moment(timestamp, “YYYY-MM-DD HH:mm”).format((monthname ? “MMM DD YYYY hh:mm A” : “MM DD YYYY hh:mm A”)); }

async loadData() { AsyncStorage.multiGet([‘background_color’], (err, items) => { //console.log(items[0][1]) if(items[0][1] != ‘undefined’ && items[0][1] != null){ this.setState({ background_color: items[0][1] }); } }); var formatdate_sql = Moment(new Date()).format(‘YYYY/MM/DD’); this.tipsModel.getTipsByQuery(“SELECT * FROM “+GLOBALS.TIPS+” where tipdate='”+formatdate_sql+“'”) .then((result) => { if(result.length > 0){ this.setState({ tip_today: result[0].tipamt }) } },(err) => {})

this.checkVersion();

}

async checkVersion() { fetch(“###########”, { method: ‘GET’, headers: new Headers({ ‘Content-Type’: ‘application/json’, // <-- Specifying the Content-Type }) }) .then(response => response.json() ) .then(data => { //console.log(data.android_version) if(Platform.OS == ‘ios’) {

  }
  else {
    var android_ver = data.android_version;
    if(android_ver > DeviceInfo.getBuildNumber()){
      // this.setState({
      //   newUpdateSnackbar: true
      // })
    }
  }
})
.catch((error) => {
  console.log(error)
});

}

render() { const { checked } = this.state; const {navigate} = this.props.navigation;

return (

  <Container style={{backgroundColor:this.state.background_color}}>
  <Modal
          isVisible={this.state.announcementModalVisible}
          onBackButtonPress={() => {
            this.setState({ announcementModalVisible: false });
          }}
          onBackdropPress={() => {
            this.setState({ announcementModalVisible: false });
          }}
          >
          <View style={pageStyles.modalContent}>
              <ScrollView>
                <View style={{flexDirection: 'row'}}>
                  <Image source={require('../images/app_logo.png')} style={{width: 50, height:50}} />
                  <Text style={{fontSize: 20, fontWeight: 'bold', marginBottom: 30, marginTop: 10, marginLeft: 5}}>
                    Announcements
                  </Text>
                </View>
                <View style={{marginTop: 20}}>
                  {this.state.announcements}
                </View>
              </ScrollView>
            </View>
        </Modal>
    <Snackbar
      visible={this.state.newUpdateSnackbar}
      onDismiss={() => {this.setState({newUpdateSnackbar: false}); this.props.navigation.navigate('SettingsScreen', {}, this.props.navigation.state.params)}}
      >
      New update available
    </Snackbar>
    <Content style={{margin:20}}>

      <Grid>
        <Col style={{height:100}}>
          <Image style={{ width: '100%', height: '100%'}} resizeMode="contain" source={require('../images/money_tray.png')} />
        </Col>
        <Col style={{ justifyContent:'center',height:100 }}>
          <Text style={{color:'white',fontSize:18}}>You have earned</Text>
          <Text style={{color:'#15A246',fontSize:25}}>$ {this.state.tip_today.toFixed(2)}</Text>
          <Text style={{color:'white',fontSize:18}}>Tip for today</Text></Col>
      </Grid>

      <Grid style={{marginTop:35}}>
        <Col style={{height:110,marginRight:5, backgroundColor:'white', alignItems:'center', justifyContent:'center', borderRadius: 5}}>
          <TouchableOpacity onPress={() => this.props.navigation.navigate('EnterTipsScreen', {}, this.props.navigation.state.params) } style={{alignItems:'center', justifyContent:'center'}}>
            <FontAwesome5 style={{marginTop:2,marginLeft:3}} name="edit" size={25} color="#15A246" />
            <Text style={{fontSize:17}}>Enter Tips</Text>
          </TouchableOpacity>
        </Col>
        <Col style={{height:110,marginLeft:5, backgroundColor:'white', alignItems:'center', justifyContent:'center', borderRadius: 5}}>
          <TouchableOpacity onPress={() => this.props.navigation.navigate('SummaryScreen', {}, this.props.navigation.state.params)} style={{alignItems:'center', justifyContent:'center'}}>
            <FontAwesome5 style={{marginTop:2,marginLeft:3}} name="book" size={25} color="#15A246" />
            <Text style={{fontSize:17}}>Summary</Text>
          </TouchableOpacity>
        </Col>
      </Grid>

      <Grid style={{marginTop:15}}>
        <Col style={{height:110,marginRight:5, backgroundColor:'white', alignItems:'center', justifyContent:'center', borderRadius: 5}}>
          <TouchableOpacity onPress={() => this.props.navigation.navigate('CalendarScreen', {}, this.props.navigation.state.params)} style={{alignItems:'center', justifyContent:'center'}}>
            <FontAwesome5 style={{marginTop:2,marginLeft:3}} name="calendar" size={25} color="#15A246" />
            <Text style={{fontSize:17}}>Calendar</Text>
          </TouchableOpacity>
        </Col>
        <Col style={{height:110,marginLeft:5, backgroundColor:'white', alignItems:'center', justifyContent:'center', borderRadius: 5}}>
          <TouchableOpacity onPress={() => this.props.navigation.navigate('ReportsScreen', {}, this.props.navigation.state.params)} style={{alignItems:'center', justifyContent:'center'}}>
            <FontAwesome5 style={{marginTop:2,marginLeft:3}} name="print" size={25} color="#15A246" />
            <Text style={{fontSize:17}}>Reports</Text>
          </TouchableOpacity>
        </Col>
      </Grid>

      <Button onPress={() => this.props.navigation.navigate('SettingsScreen', {}, this.props.navigation.state.params) } block iconLeft style={{marginTop:35,backgroundColor:'#15A246'}}>
        <Icon name='cog' />
        <Text style={{fontSize:17,color:'white'}}>Settings</Text>
      </Button>

    </Content>

    <Footer style={{backgroundColor: '#ffffff00'}}>
      <Grid style={{alignItems: 'center', justifyContent: 'center'}}>
        <Col style={{flexDirection:'row'}}>
          <TouchableOpacity onPress={() => {Linking.openURL("http://webcoastapps.com/privacy-policy/")}}>
            <Text style={{fontSize:15, color:'white', justifyContent:'center', marginLeft: 10}}>Privacy</Text>
          </TouchableOpacity>
        </Col>
        <Col style={{flexDirection:'row', justifyContent: 'flex-end'}}>
          <TouchableOpacity onPress={() => {Linking.openURL("http://webcoastapps.com")}} style={{flexDirection:'row', justifyContent: 'flex-end'}}>
            <Image style={{ width: 35, height: 20}} resizeMode="contain" source={require('../images/wca_logo.png')} />
            <Text style={{fontSize:15,marginLeft:5, color:'white', justifyContent:'center', marginRight: 10}}>Web Coast Apps</Text>
          </TouchableOpacity>

        </Col>
      </Grid>
    </Footer>
    <AdBanner />
  </Container>

);

} }

Actions to duplicate: npm install pod install run in ios

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 39 (1 by maintainers)

Most upvoted comments

@tburnt I’ve found the source of the problem. There should be always NativeBaseProvider component at the root of Native Base components tree. In my case this component was not the root.

+29

dimtim on Nov 19, 2021

I’m getting this error when running jest tests. I’ve wrapped everything in the <NativeBaseProvider> tag, still not working.

error

+11

nick-0101 on Apr 11, 2022

Same here, add NativeBaseProvider like @phoenixbeats01 said partially resolve, because seems my snapshoot tree is empty, like if NativeBaseProvider not render childrens

it('renders correctly', () => {
    const tree = renderer.create(< NativeBaseProvider><PermissionAction text="HAR!!!!" buttonLabel="IAM A BUTTON" buttonAction={()=>null} /></NativeBaseProvider >).toJSON();
    expect(tree).toMatchSnapshot();
  });

and my snapshoot

exports[`Permission Action renders correctly 1`] = `
<RNCSafeAreaProvider
  onInsetsChange={[Function]}
  style={
    Array [
      Object {
        "flex": 1,
      },
      undefined,
    ]
  }
/>
`;

And yes, my PermissionAction renders correctly when run on device

neuberoliveira on Apr 20, 2022

you have to put <NativeBaseProvider> first at all, example

nothing here <NativeBaseProvider> All here… </NativeBaseProvider> nothing here

maocop on Feb 16, 2022

Any news on this? I simply cannot test anything on my app because of this issue.

I’ve solve this… click on link

https://stackoverflow.com/a/73043985/17818034

JambaGoDevCode on Aug 14, 2022

I get the same error in my project. @tburnt Did you find a solution to work around the problem?

nope I am still burning my candles with this one among all other problems

tburnt on Nov 18, 2021

To fix the testing issue, you can simply pass initialWindowMetrics to NativeBaseProvider in your tests.

const inset = {
  frame: { x: 0, y: 0, width: 0, height: 0 },
  insets: { top: 0, left: 0, right: 0, bottom: 0 },
};

<NativeBaseProvider initialWindowMetrics={inset}>
  {children}
</NativeBaseProvider>

IlirBajrami on Dec 3, 2022

I’m still facing the issue regarding the tests…

The app runs fine and everything since I wrapped the App.js content inside the NativeBaseProvider tag but when running unit tests against React components I get the useTheme must be used within NativeBaseConfigProvider error. I then wrapped the render of the tested component inside the NativeBaseProvider in the test file but that just changes the error to something not very understandable.

How did you guys manage to test your code?

MrVico on Sep 12, 2022

@dimtim Thanks for the solution.

NativeBaseProvider should be at the root level of the react tree.
We cannot use useTheme hook (other NativeBase hooks as well) outside NativeBaseProvider. Our App.js should look like this

import React from "react";
// 1. import `NativeBaseProvider` component
import { NativeBaseProvider, Text, Box } from "native-base";

function Example () {
    const {theme} = useTheme(); // This will work fine as it is inside NativeBaseProvider
    return <Box flex={1} bg="#fff" alignItems="center" justifyContent="center">
            <Text>Open up App.js to start working on your app!</Text>
          </Box>
}
export default function App() {
  // 2. Use at the root of your app
  // 3. We cannot use useTheme here. This will throw an error.
  return (
    <NativeBaseProvider>
       <Example/>
    </NativeBaseProvider>
  );
}

Going to close this issue. Please feel free to reopen if you face any problems. Thanks ❤️

surajahmed on Sep 8, 2022

I managed to solve that error by wrapping the actual component I was testing in <NativeBaseProvider>

const tree = renderer.create(<NativeBaseProvider><ComponentToTest /></NativeBaseProvider>).toJSON()

nick-0101 on Apr 20, 2022

This works for me https://docs.nativebase.io/testing#page-title

MyTestfile-test.tsx

import 'react-native';
import React from 'react';
import { Test } from '../screens/Test';

import { render } from '@testing-library/react-native';
import { NativeBaseProvider } from 'native-base';

const inset = {
  frame: { x: 0, y: 0, width: 0, height: 0 },
  insets: { top: 0, left: 0, right: 0, bottom: 0 },
};

it('renders correctly', () => {
  const wrapper = render(
    <NativeBaseProvider initialWindowMetrics={inset}>
      <Test />
    </NativeBaseProvider>,
  );
  wrapper.findByText('Test');
});

Test.tsx

import { Text } from 'native-base';
import React from 'react';

export const Test = () => {
  return <Text testID='test'>Test</Text>;
};

norellanac on Mar 16, 2023

@dimtim Thanks for the solution.

NativeBaseProvider should be at the root level of the react tree.

We cannot use useTheme hook (other NativeBase hooks as well) outside NativeBaseProvider. Our App.js should look like this
import React from "react";
// 1. import `NativeBaseProvider` component
import { NativeBaseProvider, Text, Box } from "native-base";

function Example () {
    const {theme} = useTheme(); // This will work fine as it is inside NativeBaseProvider
    return <Box flex={1} bg="#fff" alignItems="center" justifyContent="center">
            <Text>Open up App.js to start working on your app!</Text>
          </Box>
}
export default function App() {
  // 2. Use at the root of your app
  // 3. We cannot use useTheme here. This will throw an error.
  return (
    <NativeBaseProvider>
       <Example/>
    </NativeBaseProvider>
  );
}
Going to close this issue. Please feel free to reopen if you face any problems. Thanks ❤️

Gives error when testing: useTheme must be used within NativeBaseConfigProvider Please re-open!

IlirBajrami on Dec 3, 2022

Any news on this? I simply cannot test anything on my app because of this issue.

robbporto on Aug 8, 2022

Visite…

https://stackoverflow.com/a/73043985/17818034

JambaGoDevCode on Jul 19, 2022

I get the same error in my project. @tburnt Did you find a solution to work around the problem?

dimtim on Nov 18, 2021