Error could not find react-redux context value; please ensure the component is wrapped in a <Provider> in React Native

I get the error below after setting up Redux Toolkit on my React Native application.

Error: Could not find react-redux context value; please ensure the component is wrapped in a <Provider>

This happens when i add useDispatch to the code. Below is my app.js file

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Image, Pressable } from 'react-native';
import ImageViewer from './components/ImageViewer';
import ButtonOne from './components/ButtonOne';
import * as ImagePicker from 'expo-image-picker'
import { useState } from 'react';
import IconButton from './components/IconButton';
import CircleButton from './components/CircleButton';
import EmojiPicker from "./components/EmojiPicker";
import EmojiList from './components/EmojiList';
import { Provider } from 'react-redux';
import { store } from './ReduxStore/store'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from './ReduxStore/features/counter/counterSlice';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
// import { hello } from './modules/my-module';

import { GestureHandlerRootView } from "react-native-gesture-handler";
import ImageEditPage from './components/pages/ImagEditPage';
import CounterPage from './components/pages/counterPage';
const Stack = createNativeStackNavigator();
export default function App() {
  const count = useSelector((state) => state.counter.value)
  const dispatch = useDispatch()
  const placeholderImage = require('./assets/images/background-image.png')
  const [selectImage, setSelectImage] = useState(null)
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [showAppOptions, setShowAppOptions] = useState(false)
  const [pickedEmoji, setPickedEmoji] = useState(null);
  const pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      quality: 1

    if (!result.canceled) {
      console.log("res", result)
    else {
      alert('You did not select any image')

  const onReset = () => {

  const onAddSticker = () => {
  const onModalClose = () => {

  const onSaveImageAsync = async () => {

  const toggleOptions = () => {

  const [currentVal, setcurrentVal] = useState(0)

  return (
      <Provider store={store}>
        <GestureHandlerRootView style={styles.container}>
              options={{ title: 'Welcome' }}
            <Stack.Screen name="Counter" component={CounterPage} />


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#25292e',
    alignItems: 'center',
    justifyContent: 'center',
    color: "#fff"
  textColor: {
    color: '#fff'
  imageContainer: {
    flex: 1,
    paddingTop: 50

  optionsContainer: {
    position: 'absolute',
    bottom: 80,
  optionsRow: {
    alignItems: 'center',
    flexDirection: 'row'




message profile

The error occurs because you are attempting to use the useDispatch hook in the app.js file, which serves as the root component. To access Redux functionality, you must be within the Provider wrapper. To resolve this issue, move the useDispatch code to a separate component file and then import and set it up inside the Provider wrapper in app.js.

Add Message

Click on the button below to add a new message to this thread


#Javascript #ReactNative

Thread detail

Satus: Open
Messages: 1Started: 2023-07-27




Frontend Development |Backend Development |Full Website Development |Bootstrap Website upgrades | Website Debbugging | Website Hosting & deployment


Interested in hiring me or collaborating with me on a project, click on any of the links below to get my social media handle

Or contact me via Tel: (+234)-806-225-7480 | Email:
Privacy Policy

By using our website,
you agree that devmaesters can store cookies on your device and disclose information in accordance with our privacy policy.