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.
Related
I have completed an app that builds on both Android and iOS. It works as expected when I build the app from the CLI or when I build it via XCode / Android Studio. However, on TestFlight, it gets errors that simply do NOT exist when I build it locally. These errors only appear on TestFlight, and thus I have little to no idea on how to go finding them down or even resolving them. Does anyone have better expertise in this area?
I'm not sure how common an issue this is-- I've never heard of it before to be honest, but the components that were not working were components that utilized ({props}) in a component. For example, any component wthat utilized the following declarations did NOT work
function Example({props}){
// stuff
}
// OR //
const Example = ({props}) => {
// stuff
}
all of the values inside of props were unreadable. I fixed this by simply moving EVERYTHING into a recoil state instead and that mitigated any errors. For example...
navigation.navigate("path",{prop1: value})
// AND //
return (<Example prop={value} prop={value})
would not work unless the prop was a single value-- a string, an int, a bool, these would work. Objects and Arrays did NOT properly carry over.
Hope this helps someone in the future.
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 :)
This question has been asked several times here(here the most relevant,Another example), but no solution has been proposed in any of them. So I have 2 questions to you guys:
Any idea why it wouldn't work in a large project? I mean, there are any know issues with fast refresh related to the size of the project or the packages he includes that will make fast refresh stop working? There is any way to fix it?
Is there a convenient way to edit an internal page in the app without using a fast refresh (without running the page independently, since it depends on all the logic of the app)?
This bug really makes the development really difficult for me, and I find it hard to believe that professional developers have not found a way around this problem, Please help!
I'm using expo-cli(v3.26.2 - Expo SDK 38 that using react-native v0.62)
TLDR;
using default export with no name ALWAYS resulted in a full reload of the app without hot reload!
Details
So after a lot of months of pain, I accidentally found a strangely enough effect:
I usually write my react components in this syntax:
export default ({ ...props }) => {
...
};
and for some reason, changing a module that exports that way ALWAYS resulted in a full reload of the app without hot reload!
after months of pain, accidentally i found out that changing the export to:
const Test = ({ ...props }) => {
...
};
export default Test;
completely fixed the issue and now hot reload works perfectly fine!
I did not saw this effect mentioned in a single place on the internet!
From react-refresh-webpack-plugin troubleshoot section
Un-named/non-pascal-case-named components
See this tweet for drawbacks of not giving component proper names.
They are impossible to support because we have no ways to statically
determine they are React-related. This issue also exist for other
React developer tools, like the hooks ESLint plugin. Internal
components in HOCs also have to conform to this rule.
// Wont work
export default () => <div />;
export default function () {
return <div />;
}
export default function divContainer() {
return <div />;
}
There is an other way to obtain this weird behavior.
When you export a simple function:
//if we export this function in the entry file of the app,
//it will break the hot reload feature without any warnings.
export function someName() {
};
from the entry file of your app (with typescript template expo init nameApp the file is App.tsx)
It will exactly produce a full reload of the app rather than a hot reload.
This is vicious because on ios simulator it full reloads the app without the modification whereas in android it full reloads the app WITH the modification. So you'll take some time to realize that this is not a hot reload in android but a full reload.
IDK why ios don't display the modification like android does..
But when you think at the problem, we shouldn't export multiple things from the entry point of an app. This sounds weird isn't it ?
TLDR;
During development, I had your problem with the infinity "Refreshing..." message. As well as incomprehensible errors like "unknow resolve module 2" and "bundle error..."
Details
the solution turned out to be unexpected, I changed "require()" to "import" in the main index.js file
before
const module = require('some-module')
after
import module from 'some-module';
I just upgrade my react native app to 0.62.0, and now my app keeps getting this warning sign
ReactNativeFiberHostComponent: Calling `getNode()` on the ref of an Animated component
is no longer necessary. You can now directly use the ref instead.
This method will be removed in a future release.
I'm not sure why this issue is showing up? Can someone please explain?
I also see Stack
ref.getNode |
createAnimatedComponent.js:129:20
SafeView#_updateMeasurements | index.js:192:14
SafeView#componentDidUpdate | index.js:154:9
Update
I believe this might be coming from SafeAreaView from react-navigation
I also came to this warning after upgraded ro RN 0.62.1, and I didn't use getNode() at all, turns out it came from a depedencies that I use, called react-native-snap-carousel because they build it with FlatList and possibly using the getNode() as well.
And now there's an open issue about this in their GitHub repo that we can follow, here's the link to the issue
Update
this also came from package react-native-safe-area-view, possibly your app is using this package and now they have released new version to fix getNode() deprecation, see this PR
so instead of fixing the file directly yourself, you just need to update the package, simply run: npm i react-native-safe-area-view
Hope that's help :)
To quick fix this go to node_modules/react-native-safe-area-view => index.js
at line 192 change
this.view.getNode().measureInWindow((winX, winY, winWidth, winHeight)
to
this.view.measureInWindow((winX, winY, winWidth, winHeight)
If you are using react-native-snap-carousel you can fix it by modifying your node module locally.
first go to
./node_modules/react-native-snap-carousel/src/Carousel.js
change
const AnimatedFlatList = FlatList ? Animated.createAnimatedComponent(FlatList) : null;
const AnimatedScrollView = Animated.Animated.createAnimatedComponent(ScrollView);
into
const AnimatedFlatList = FlatList ? Animated.FlatList : null;
const AnimatedScrollView = Animated.ScrollView;
and finally, change your _getWrappedRef function to
_getWrappedRef () {
return this._carouselRef
}
This will stop the warning until we have an update on that package.
As seen in the blog post announcing the release of RN62, getNode() is now deprecated. You can just use ref without calling getNode(). See this commit.
the issue will happen when you use createAnimatedComponent for components while its already exist in animated library for example if we use it to FlatList this warning will be showing
for fix it just call componenty directly
for more detail enter link description here
change
return this._carouselRef && this._carouselRef.getNode && this._carouselRef.getNode();
to
return this._carouselRef;
*Removing getNode() will fix it.
i find that error in my project.
Fix: copy "getNode()" and find all in your project, delete it.
Delete warning getNode()
I've implemented a react-native application and now I want to enhance it by adding along side it another different react-native application.
What i want to achieve is to keep the two application separated in order to continue to implement them as two separate application, and avoid to rewrite them completely as a single application.
Both application are using react-redux to handle their states. The first brutal approach which I have tried is to wrap one of the two application into a npm package and add it as a dependence of the other one. Then I've just added a tab to the main application which when clicked navigate to the second application. This approach seems to work, but I don't think is the best way to do it.
Do you think there could be any sort of problem doing so? Is there a more intelligent and elegant way to do it? I know it is kinda a generic question, so I would accept also an article/link about this argument.
You can create a git tag of your second application and can add it as a dependency in your first application.
You can also add it as a git sub-module.
P.S. i prefer the first one.
I think the best way to do it would be Linking as described here: Basic usage. So, you can easily pass needed parameters to the other app you want to open and also read them as app opens. Check this simple example:
Caller app:
Linking.openURL('calleeApp://app?param1=test¶m2=test2')
Callee app:
componentDidMount() {
Linking.getInitialURL().then((url) => {
if (url) {
console.log('Initial url is: ' + url);
}
}).catch(err => console.error('An error occurred', err));
}
do not forget to import it first:
import { Linking } from "react-native";
Let me know if it worked for you!