https://snack.expo.io/#haosmark/kw-companion
I'm having a hard time figuring this out. To start, I'm just trying to take a list of players and push it over to my starting screen.
A bit of explanation of what I've done so far:
mockData.json is a file with the content that I'm trying to display
App.js creates a few navigators and sets the starting point to be PlayerNavigator
api.js is where I'm thinking of processing json content
redux/reducers/player_reducer.js is how I try to get the player list (reducers are pretty difficult for me to understand right now, so I'm not sure what goes into these files yet.)
screens/list.js is where I'm trying to connect redux to RN and read the player list.
At present, the code doesn't compile. My emulator screams that "players" returned undefined during initialization. Snack editor is screaming "Device: (78:20) Unable to resolve module 'module://mockData.js'" but I have no idea where it's even finding mockData.js since it isn't one of the files within the project.
Edit: I was able to figure out the .json problem for the snack, now the problem is the same as on the local emulator:
Device: (281:119) Reducer "players" returned undefined during
initialization. If the state passed to the reducer is undefined, you
must explicitly return the initial state. The initial state may not be
undefined. If you don't want to set a value for this reducer, you can
use null instead of undefined. Evaluating
module://redux/store/index.js
Just changing import mockData from './mockData' to import mockData from './mockData.json' should do the trick. I can confirm that it works on RN 0.55.2.
Regarding your new error: when you create the store it needs to be initialized with some initial state. It can be passed as the second argument to createStore, but the most straightforward way is to have a default value for the state argument in all of your reducers. For example, if your state.players substate is a list of players, your default argument value can be []. Then, to add or remove players inside your reducers you can use (for example) state.push() and state.pop() and you don't have to care about the prototype of your state object.
Related
I am currently working on a simple app to store workout routines in Nuxt 3 and Appwrite. The link to the source code is here.
After logging in and adding in some workouts in the app's UI, whenever I try to call the deleteWorkout function, I get an error in the console saying that the function is not defined, whereas I have clearly defined in the workoutStore. I can't seem to figure out the reason for the same.
The same can be seen in the given screenshot.
Console on clicking the delete button
PS:
Most probably the error should be originating from either /pages/workouts.vue, /components/WorkoutDetails.vue or /stores/workout.js.
I am using Appwrite to manage the back-end of the web app, and the instructions to setup the same can be found in the README.md. (Though I don't think the error I am facing is related to the same.)
In your code the problem is, you declear your deleteWorkout() function outside of the actions block in workout.js file.
Make sure all your functions in the workout store are inside the actions block. Then it will be accessable from the vue component
Before anyone rolls their eyes, I have NO variable named state, I have searched the file using crtl + f to find all instances of state and there were none that weren't a part of useState or something like that, so this is not a case of me not declaring a variable I have in play
My file compiles properly, everything renders and works as expected, until I run submit my local data to the database. The program does not error out, nor does an error message even appear; but I am using a Try / Catch on the mutation and logging the error. The error I get is just...
[Error: Can't find variable: state]
I similarly have console.log statements on the backend to find any errors on that side, and there appear to be none. The only things I have outside of my component inside the file in question are import statements and the export line. Thus, I am at a complete loss for what the issue could be, or what "state" variable its talking about
I am almost done with my chat application in React native with Firebase. At the end, typing indicator needs to be updated with the app. Since I searched I don't get any proper reference code to implement it.
Is there any Reference/Sample code for typing indicator in react-native-gifted-chat?
Thanks in Advance!
Referencing https://github.com/FaridSafi/react-native-gifted-chat/issues/1565
Comment by shamilovtim // fixed typo
I'm using the latest version of the plugin. I simply have it set to a stateful variable coming from my Redux store. and my working example would simply be that. There's something you're doing wrong with how you manage state. I'd start out with make sure you're using this plugin inside of a function component because that's where I can confirm the typing indicator works. Not sure if it's broken in class components but those are legacy at this point so you might need to refactor.
import { useDispatch, useTrackedState } from 'reactive-react-redux';
const state = useTrackedState();
<GiftedChat
...
...
isTyping={state.isTyping}
/>
I would also make sure that your screen didn't mount with state already set to true. If you set it to true after it's already true your state hasn't changed and React isn't going to rerender a component. (e.g. your defaultValue should be false).
Hopefully this helps.
I am kinda new to React Native. I get this warning which is really annoying and spamming the console every other second or so.
EventEmitter.removeListener('appStateDidChange', ...): Method has been deprecated. Please instead use `remove()` on the subscription returned by `EventEmitter.addListener`.
How do I debug this? The call stack says MeasurementProvider, but there is no removeListener anywhere in our code. Does this warning come from a third-party module?
For some reason, I only get this warning in 1 redux slice out of many which use the exact same code structure for deleting state items... Everything works as it should besides that warning popping up so I simply removed the warning using the code below in App.js
import {LogBox} from "react-native";
LogBox.ignoreLogs([
"EventEmitter.removeListener('appStateDidChange', ...)"
])
It's no long-term solution but it'll only show the warning in your dev console this way :)
I'm building a React-Native app and whenever I run it on my Android emulator, I get this error:
Objects are not valid as a React child (found: object with keys
{$$typeof, type, key, ref, props, _owner, _store}). If you meant to
render a collection of children, use an array instead.
throwOnInvalidObjectType
D:\rn\manager\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:7436:6
Because this error means nothing to me, I decide to enable "Debug JS Remotely" in Chrome to see if I can get an error I understand. But with Debug Remotely enabled, the error goes away.
If I build the project and install the app on a real device, the errors come back.
But I feel like I'm stuck in a catch-22 because if I try to debug, I get no errors, and if I turn off debugging, I get errors.
Is there anyway to get around this?
Thanks!
The error mentions you use an object in your render() method where you shouldn't. Since you did not post any code, here is what you could do:
Keep removing elements from your render() method until you no longer get the error. Once it is gone, start placing code back until you hit the error again. The code causing the error will be or return an object, possibly a typo causing an object to be returned instead of a string for instance.
TL;DR: Stopped using firebase and used react-native-firebase instead
The problem for me wasn't the render method in any of my components or classes. I realized after trying the answer above, I basically removed all my files, and was left with one file. I changed the render method to display text inside one view, but I still got the error.
Then I started removing the modules I was importing inside that file one by one and found that it was the firebase module uninstalled firebase and installed react-native-firebase.