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.
Related
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 ?
I am fairly new to React Native and I am building an app that will be using navigation. I have a solution for navigating screens that seems to work just fine however I do not see many people using this approach. I am using state in a navigation component to render a specific screen(or component).
The main solution(the documented solution) I see is using this package
#react-navigation/native #react-navigation/native-stack
My current solution works like this:
const [screen, setScreen] = useState(0)
const returnScreen = () => {
switch (screen) {
case 0:
return <AccountScreen/>
}
}
When you click a menu icon, it would change the state to say 1, and render a different screen.
Can someone help me understand why this is a bad approach or an uncommon approach(if it is)? My app will only have 5-7 screens, I am mainly looking to understand why the library is the community approach and if I am missing something.
If you wanted the ability to navigate to other screens to exist outside your menu/drawer you will have to either prop drill your setScreen function or create a context to make it accessible to other components. While this isnt hard to do, it is something that all #react-navigation navigators do without requiring additional code.
If you wanted to enable going to the previous screen, your current navigation code becomes obsolete. Just returning a screen is no longer enough, as you need to track and modify navigation history. So you write more code that you have to test and debug (keep in mind that #react-navigation/stack already does this).
If you are certain that your app will remain small and your navigation features wont increase too much then your approach is completely fine. But if your app will increase in size then you probably will find yourself implementing, testing, and debugging features that have already been implemented, tested, and debugged by the #react-navigation community
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",
I an writing a react-native app, And I noticed that while the buttons look like native buttons when clicked - they do not behave as one (At lease not like android button behave).
Clicking on android app button - make a sound and give the user an haptic Feedback.
On the sound I saw that there is github discussions and open issue, but I could not found anywhere anything about the haptic Feedback.
How can I make my view (any touchable view..) to make haptic feedback on click?
This is really important feeling in an app.
I want something like this (In android)
View view = findViewById(...)
view.performHapticFeedback(HapticFeedbackConstants.VIRTUAL_KEY);
This doesn't require from the app to have permission for Vibrate.
And managing haptic feedback on my own with the Vibrate api will cause users that disable this option globally to experience bad behavior
Thanks
If you are using Expo with react-native, I recommend you to use Expo haptics
After installing the library You can use it like:
<TouchableOpacity onPress = { ()=> {
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)
or
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
or
Haptics.selectionAsync()
} } > </TouchableOpacity>
I found this component on github https://github.com/charlesvinette/react-native-haptic
I didn't try it yet, but it should help you to get the haptic feedback you want.
I also have nearly the same requirements and I ended up using this library react-native-haptic-feedback.
Keep in mind that haptic feedback is available only on some latest android devices and in iOS above iPhone 6s. Here is a simple code snippet:
import ReactNativeHapticFeedback from "react-native-haptic-feedback";
const options = {
enableVibrateFallback: true,
ignoreAndroidSystemSettings: false
};
ReactNativeHapticFeedback.trigger("impactMedium", options);
In your case, it will work directly with the button's onPress method such as:
<TouchableOpacity onPress={()=>{ReactNativeHapticFeedback.trigger("impactMedium", options);}} />
Note: I found that the most versatile type which is supported by maximum devices is impactMedium.
You can use the built-in Vibration module facebook.github.io/react-native/docs/touchablewithoutfeedback
import { Vibration } from 'react-native';
...
<TouchableWithoutFeedback
onPressIn={() => Vibration.vibrate()}
/>
Remember to include this in your AndroidManifest
<uses-permission android:name="android.permission.VIBRATE" />
I published a project on Github which provides this functionality.
Check this repo out: react-native-haptic-view
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