Getting a warning with getNodes in React Native - react-native

It is warning today my React Native got updated to 0.62 before i was not getting any of this warning.
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. React Native Fiber Host Component
in SafeView (at withOrientation.js:54)

If you are using ref.getNode() in your code, remove .getNode() part. If not then the warning is coming from one of the libraries that are not yet updated for react-native 0.62. Give it some time and then update your libraries. In the meantime you can safely disable this warning with console.ignoredYellowBox = ['Calling getNode()'] statement somewhere in your App.js

Related

withNavigationFocus React-Navigation alternative for class component after upgrade from 3.x to 6.x

I am currently updating the version of my application, and I have a function that is used that no longer exists, I tried several things according to the documentation
but I get either an "Invalid Hook Call" error or something else...
The problem without the withNavigationFocus function is that when the screen is rendered, the data is not displayed. I have to press Cmd+S to refresh and have the data on the screen. Knowing that the props are linked to Redux.
This is the line that causes the problem:
export default withNavigationFocus(connect(mapStateToProps, mapDispatchToProps)(Home));
I can't find an alternative so far, does anyone have an idea?
Upgrade doc link here
You can install a backward compatibility package and you can continue to use HOCs withNavigation and withNavigationFocus.
Inpm install #react-navigation/native#^5.x #react-navigation/compat#^5.x #react-navigation/stack#^5.x
It was designed with React Navigation 5. I didn't test with version 6

Why does styled-components 5.x warn about "Expected style to contain units."

When styling a React Native app with Styled Components 5.x I'm getting the warning...
Expected style "borderWidth: 2" to contain units.
This didn't happen with previous versions.
What does the warning mean?
After some research and questions on github I tracked this one down...
Styled Components uses the package css-to-react-native for it's React Native conversions.
css-to-react-native recently released version 3 which now requires units to be present for all measurements. Details here.
You should use px for React Native as it is density independent.
I think that using px is a bit of a pain, unintuitive, misleading, and even dangerous if you are using a theme giving some ...px string value to a component (Ionicons size for instance) that expect react native number units.
My way of dealing with this:
import { LogBox } from 'react-native'
LogBox.ignoreLogs([`to contain units`])

How to use fallback component in react native bugsnag?

I am using bugsnag in react native to track bugs and I want fallback to custom component when error occurs. For React fall back component mentioned in docs. But in react native I didn't find. How to use this. Help me out
You're best contacting Bugsnag support directly to get a quick response to queries about the product.
Bugsnag doesn't yet support error boundaries in React Native like we do for React but we plan to in the near future. We're also about to start officially supporting Expo as a platform and will be supporting error boundaries on that.
Thanks!

ToastAndroid showWithGravity Error

Following the document, I am including a toast in my projects:
import {ToastAndroid} from react-native
ToastAndroid.showWithGravity('A toast with gravity',ToastAndroid.SHORT,ToastAndroid.TOP);
But I got an error:
However, if I replace it with another function, it works:
ToastAndroid.show('A toast without gravity',ToastAndroid.SHORT);
I am using React Native 0.30.0
Is it a bug or I made the wrong way to use it.
ToastAndroid.showWithGravity(...) was implemented in ReactNative 0.31.0, upgrade your RN version.
First implemented here: v0.31.0-stable branch.

How to delete a ListItem by Swiping out the element?

I am trying to find a Component how to remove my ListItems in my ListView. Actually there is a Module working for iOS react-native-swipeout where you can swipeout the elements. I need the same for Android or atleast something similar.
Maybe someone has figured this out, and could tell me how they solved deleting Items from a ListView in a React Native Android App
The react native team removed their experimental implementation for the SwipeableFlatList component (which uses internally a FlatList instead really really deprecated ListView).
I rescued the original code from v0.59 which they removed on v.60 and its available as a npm module here
And theres a good how-to on medium here