I am creating an app in react-native and I'm having problem with the display.
I have a textinput in scrollview. When I tap on the textinput and it's focused, the display will go up and goes off screen.
I have seen the same issue posted in github.
Here is the link: Github issue posted by someone
This is the default behavior of they keyboard for Android. You have to manually change the android:windowSoftInputMode in AndroidManifest.xm to another option (adjustNothing is more iOS like). See the options here: https://developer.android.com/guide/topics/manifest/activity-element.html#wsoft.
Also, keep in mind that keyboardWillShow() and keyboardWillHide() are not fired on Android, and if you opt to use adjustNothing, not even keyboardDidShow() or keyboardDidHide() are fired.
I would recommend keeping the default behavior of android:windowSoftInputMode, but use the keyboardDidShow() and keyboardDidHide() to manually adjust the ScrollView position.
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
I have problem with my scrollable materialTopTabNavigator stuff. When I swipe to another tab, I see delay, but then the selected tab aligns. My behavior in the first gif.
https://ibb.co/yXsCbFh
I need behavior like this, without delay and with auto align
https://ibb.co/c67BSQf
How can I achive this?
I'm having similar performance issues and am able to workaround them by disabling Remote JS Debugging.
or
Without spending much time into the issue, you might want to check debug > slow animations in your ios simulator.
I am working on a react native android app that needs a search bar. I am using the SearchBar from react-native-paper, and I checked their documentation and couldn't find any sort of way to find if the user pressed the little search button on their keyboard.
Not sure if there is an official name for this input or the button itself as I am unfamiliar with mobile app development, but here is an screenshot from the app in case it is unclear. I am referring to the search button on the keyboard itself, which is in this case blue.
From some digging I found out that TextInputs in react native have an onSubmitEditing={} that triggers whatever return key action you want.
Essentially I was wondering if there was an equivalent prop for the SearchBar in react-native-paper.
If you take a look at the implementation of react-native-paper SearchBar https://github.com/callstack/react-native-paper/blob/master/src/components/Searchbar.tsx it looks like you can pass a onSubmitEditing prop to it and, as react-native-paper uses a TextInput, that input will receive that prop
Ok so it seems that as tintef pointed out, you can just pass onSubmitEditing to the SearchBar since it uses a TextInput. I just tested this and it works perfectly!
This is for iOS app created using react-native. I am using KeyboardAvoidingView in a form which contains a few TextInput fields. I have observed that the view is not moved high enough to accommodate the keyboard when a TextInput field towards the bottom of the screen is selected.
I created a snack that demonstrates this behavior (Link below). I have also observed that in some cases, the view is moved high enough on one iPhone but not the other. Initially, the problem was reported for iPhone 6S Plus in which users reported that the view is not moved high enough to accommodate the keyboard and in such cases, they are not able to see what they are typing the input box. When I was trying to create a snack to reproduce the problem, I found that I was able to reproduce that even on an iPhone 5s.
https://snack.expo.io/ry15dng2-
In the above snack, if you click on the TextInput box with value jug, you should see that the keyboard overlaps the input box and it is not clearly visible.
I am sorry for the quality of the snack. I just tried to create a minimal example to reproduce the problem.
How can I fix this problem?
I also experienced this issue (on Android). They key is this prop in the KeyboardAvoidingView:
/**
* This is the distance between the top of the user screen and the react native view,
* may be non-zero in some use cases. The default value is 0.
*/
keyboardVerticalOffset: PropTypes.number.isRequired,
The view does not automatically identify the offset between the top of the app frame and the top of the KeyboardAvoidingView that you are rendering, so it doesn't shift itself enough if that number is nonzero.
To fix this, either add an explicit keyboardVerticalOffset if it's known, like this...
<KeyboardAvoidingView behavior={"position"} keyboardVerticalOffset={Constants.statusBarHeight}>
... or move the KeyboardAvoidingView to the root of your component tree so that there is no offset above it.