Material Icons library render icons correctly in development mode, but it seems corrupted in production. It renders a question mark which means that icon name is invalid. But it is not.
Some of the icons are visible, but others are not and you say that this issue is from the last update so I think this is related to the names of the icons, take a look at this ref:
https://github.com/oblador/react-native-vector-icons/issues/1003
React-native vector icons shown as question mark
https://github.com/oblador/react-native-vector-icons/issues/697
Expo Icons show question marks
Related
I want to have a scrollable (with snap points) react native navigation stack screen(presentation: "modal") in my app. I don't want anything like "react-native-modal" library or official Modal from react native library. I want an actual screen with modal behaviour and I can achieve that with presentation: "modal" property but I want it to have snap points. Perfect example would be the iOS fitness app.
So this is the screen when you initially press upload button. As you can see it takes maybe 40% - 50% height of the screen
If you scroll down height expands and it acts as ordinary screen with presentation: "modal"
And lastly if you scroll back up it springs back to its original position and it acts as a modal(no gap at the top of the screen as in second image)
That is the behaviour I am looking for.
If it is possible I would like to get similar behaviour on android as well.
I tried to implement that behaviour with "react-native-modal" and official Modal from "react-native" components but I want to have it as a separate screen. I also want it to feel "native like" and with these stuff it doesn't feel that way.
You may try this library react-native-simple-bottom-sheet
When screen height changes (In the case of my project because a custom bottom tab is removed for certain screens), the Stack Navigator height does not update to occupy the entire screen anymore for some reason.
The same scenario works just fine on Android and on the Web for some reason, on iOS, when a view that was occupying some portion of the screen is removed after the stack screen was already being rendered, the Stack does not change its height.
Please take a look at this minimal expo snack example that demonstrates the issue and compare going to the 2nd screen on iOS emulator versus going to the 2nd screen on Android for example.
Expo Snack
Adding a key={currentScreenName} to Stack.Navigator fixes the issue but that is not really a viable solution since it will cause a re-render and the screen will flicker when transitioning between the pages.
I know that using a bottom tab this way is not really ideal but I was wondering if someone might have any good suggestions as to how this can be addressed.
Thank you.
Quick note, this seems to be working just fine with #react-navigation/stack but not with #react-navigation/native-stack
Following the example of this docs page from React Navigation, I created a nested bottom navigation system for my React Native app (simplified version of my code can be seen and tested here). However, I have noticed that the icons for the pages shown in the navigation bar are the typical question mark symbols (on iOS) that show when the image is not recognized:
However, if I use a simple navigation bar, with no nesting, the icons are shown no problem. Any ideas on how to fix this?
I found out what the problem was: I was adding the icon into the deepest (second) layer of the navigation bar. When using nested navigation bars, the icons must be placed in the highest level navigation layer. Here is a working version of the previous example, with the appropriate correction.
The Google Spaces app had a raised bump in its bottom navigation. I kinda liked the look but I'm not sure how best to recreate it using React Native.
I'm assuming it would be something like adding an image above the navbar to show the bump but that doesn't seem right since the actual button in the navbar wouldn't extend into the curved area.
Here's a link to an image of the navbar in question:
Is there any way by which we can show the tabs to navigate screen in bottom part rather than default top part in Android. I am making an app where I need tabs to be at bottom just like in iOS.
I found out that by simply adding "tabBarPosition: 'bottom' " to TabBarConfig, I was able to get the expected output. You can refer to the docs here.