I wanted to start updating my react-navigation dependency from version 5.X to version 6.x but I'm running into problems regarding an accessibility setting that is hardcoded in the codebase for their bottom tab bar.
In their BottomTabBar.tsx they have a view that looks like the following
<View accessibilityRole="tablist" style={styles.content}>
And this results in the error below
It made me think it was a bug in the library but somehow I was not able to reproduce the same issue in a expo snack. Changing the value for something else like "button" solves the issue but I don't like to mess around in the node_modules. Another solution would be to override the tab bar and write a custom implementation (I've tried this when worrying not to much about styling) but this kind of is a big overhead for something that appears to be simple
A new update to the library has fixed the issue for me, at the time of writing the answer the combination of packages below is what appears to work for me
"#react-navigation/bottom-tabs": "^6.2.0",
"#react-navigation/native": "^6.0.8",
"#react-navigation/stack": "^6.1.1",
Related
Material-Bottom-Tabs active icon with react-native-paper version 4.9.2 looks like
Material-Bottom-Tabs active icon with react-native-paper version 5.2.0 looks like
I tried searching for something like shadow, background, highlight etc. without success.
When I sourrund my app with the following code the thing behind the icon indeed disappears.
const theme = {
colors: {
},
};
...
<PaperProvider theme={theme}>
<MyApp>
</PaperProvider>
The documentation of #react-navigation/material-bottom-tabs doesn't say anything about that. I don't understand why I should have to change anything here. I have not really used react-native-paper for anything. For me, it is an optional dependency that improves #react-navigation. I understand that I could use it for themes and might decide to so in the future, but why do I need to change anything after upgrading?
This question here is almost a duplicate of mine, however, my issue came with upgrading to react-native-paper 5.2.
I know theres a lot of similar questions/answers about Fast Refresh being broken. Mine's a little different I believe. I can point to the line that causing it to be broken, and I'm trying to understand why.
Package.js:
"react": "^18",
"react-native": "0.70.3",
"#react-navigation/bottom-tabs": "^6.4.0",
"#react-navigation/elements": "^1.3.6",
"#react-navigation/native": "^6.0.13",
"#react-navigation/stack": "^6.3.2",
In the app we have three layers navigation stacks (using react-navigation)
• Parent Stack Navigator
• Authenticated Stack < Problem is here
• Tab Navigator
• All other stacks
useState() or some form of state management exists in all three of the stack/tab navigators. and fast refresh is currently broken. However, if I remove ALL of the useState() calls from the Authenticated Stack then fast refresh works throughout the app as expected.
I've go so far as to delete all state calls except for the one below, AND it's not even referenced in the file and its still causing fast refresh to be broken. If I comment it out, everything works as expected.
const [isChatClientReady, setIsChatClientReady] = useState(false)
Has anyone experienced anything like this? Or have some advice on where to look?
Thanks!
So issue is that one of the app i working on as react-native developer is using
Material Top Tabs Navigator
Which is officially recommended by react-native but since it is depended on
react-native-tab-view
react-native-pager-view
and apparently react-native-tab-view have issue with RTL it not work properly.
Also in there limitation they also mention that rtl support is limited
https://reactnavigation.org/docs/limitations/
For me my app is causing weird behaviour in rtl and i want to ask about probable solutions for this
I am able to fix this issue by forking the "react-native-pager-view" but issue remain that mean i also have to fork "Material Top Tabs Navigator" as i want to use my own pager view.
One more solution i come up with is to write my own library by using native scrollview.
So what you suggest what is better option. In case one i have to wait for their solution until then i just have to keep my fork repository up-to-date but complete dependency on update for rtl.
In case 2 i have to maintain my code by myself but i good side full control over code.
which is the better option according to you and why ?
we working with expo and using mapview, however, there are many restrictions in react native maps, as we are planning to implement turn by turn navigation. Integrating Mapbox would have been the best option, however we do not think it’s best to eject the project as expo doesn’t still support Mapbox. Although, I came across a package, react native maps navigation, I would like to know if anyone has been able to successfully implement it in their project and it functioned properly, and also know if there are any drawbacks that comes along with it. I am asking this because the author says “Please note that this module is usable but still under heavy development. Some properties and/or component names might change without notice.”
Kindly give your suggestions and advice. Thanks
Mapbox works very well in a react-native projects and recommend to use this service for your project but effectively, it don't works with expo so for me, you should eject your project to use it.
I paste here some packages I used for a GPS project (The last one is to get the current position of an user)
react-native-mapbox-gl/maps
mapbox-sdk
react-native-geolocation
Hope that could help you
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