On opening the keyboard, and on pressing the next button from the keyboard, the screen gets pushed up into the status bar, making the contents of the statusbar and the screen to overlap in react native android. I am using react-native version 0.59.2 and react-native-router-flux version 0.4.6
I have tried using keyboard avoiding view but no success.
I have also tried setting android:windowSoftInputMode="adjustResize", but using it pushes my tab bar over the keyboard.
Making the combination of android:windowSoftInputMode="adjustResize|adjustPan", however does not pushes the screen above the status bar, but does make my screen scroll automatically, thus user has to scroll manually.
StatusBar Component
<StatusBar translucent={true} hidden={false} backgroundColor={'rgba(0,0,0,0.0)'} barStyle={"light-content"}/>
This is how I am using it in the class.
<View style={{flex:1}>
<StatusBar/>
<Header/>
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<TextInput/> //here i have multiple textinput fields
</ScrollView>
</View>
Expected result should be "the screen should go beneath the statusbar and not over it."
Related
I have a web page, when I click one button(by both using mouse click or using keyboard with tab and press), it will show some items, normally, it works perfect.
However, if I
1> open windows magnifier with 200%,
AND
2> use keyboard with tab and press
to trigger the button,
the items still shows correctly,
but the whole page moves back and forth in horizon automatically until I move mmouse or press any key.
++++++
I got the root cause:
As I input the follow code
document.addEventListener('focus',
function()
{ console.log('focused: ', document.activeElement)
},
true);
in console to monitor the focused element,
it shows the focus are switch between two elements,
however, I try to set the two element with tabindex = 0 or -1,
and all the 4 combinations,
but it doesn't work.
Are you using "docked", "full screen", or "lens" view for the magnifier?
I'm guessing "full screen" because in that mode, as you tab through a page, the magnifier will try to keep the keyboard focus within view. You might have an issue where your focus is moving between two elements that both can't be displayed in the magnifier at the same time. Usually it will just move the magnifier to the element that has focus.
I'd suggest trying "Docked" and "Lens" view first to see if you still have an issue.
Currently, I'm working on Snapchat and I want to scroll the screen slightly
1.device.vc.dump()
2.device.vc.findViewByIdOrRaise("com.snapchat.android:id/neon_header_avatar_container").touch()
3.device.vc.dump()
Now I want to scroll the screen to findViewWithText My friends. so how I can do it,
You can use culebra and generate the python code needed for scrolling or dragging.
Run
culebra -Gu --scale=0.25
then right-click and open the command dialog, select Drag dialog and grab the points clicking on the device image (using Settings here as an example)
something like the following code will be generated
device.dragDip((184.73, 699.64), (176.0, 443.64), 1000, 20, 0)
vc.sleep(1)
vc.dump(window=-1)
When executed you will see the device scrolling.
Fab button is not working on a scroll view. I am using FAB from react-native-paper and the icon is displayed but when i press fab button, its not working. As an alternative, i tried to make a sticky button which sticks to the bottom when i use scroll view, but the button is displayed after the scrollview content and is not fixed at the bottom of our screen. It also fails.
My code is like :
<View>
<FAB style={{position:'absolute',right:0,bottom:0}}/>
<ScrollView></ScrollView>
</View>
Rendering Fab below the ScrollView should work.
<ScrollView />
<Fab />
Fab needs to be above all the components.
Put it inside <Portal> tag
https://callstack.github.io/react-native-paper/portal.html
I'm building an app and I need to use an input text.
The problem comes when you tap on this input text, the keyboard doesn't appear.
I don't know why, I don't know what I'm doing wrong. It is supposed to be straightforward.
Here is some of my code:
<View style={ styles.storyContentContainer }>
<TextInput ref='username' style={{width: 300, height: 20, borderWidth: 1,}}/>
</View>
And a video to show to you guys when the input text gets the focus nothing happen:
I hope you guys can help me with this issue.
I assume you are running this on the iOS simulator? Turn off the host machine's hardware keyboard integration by unchecking Hardware > Keyboard > Connect Hardware Keyboard, or you can use the Keyboard Shortcut: Shift + Cmd + K, and the keyboard will appear when you focus on a TextInput.
You can also manually toggle the software keyboard visibility with Cmd +K.
On a real device the keyboard should work out-of-the-box as expected.
Here is how you can easily disconnect your hardware key board.
Now when you will focus inside textInput area, it will open the keypad of iOS simulator
If the keyboard is not popping on clicking of TextInput then just tap on device means simulator and press cmd + k.
After that, it will be showing every time you tap on the TextInput
In my app, I'm using view pager and on that view pager I have some form layout.
When I click on edit text to enter some text in form, soft keyboard comes up but the main layout takes much time to resize.
Same lagging issue occurs when soft keyboard goes.