Being pretty new to React Native, hopefully this is an obvious oversight, but I've experimented and not found a solution. It's a pretty straightforward problem: when I have a couple of Views and a TextInput, everything lays out as expected. When I wrap them in a ScrollView, the Views remain but the TextInput no longer renders. I have not been able to figure out why.
To test and share it I created an rnplay app here: https://rnplay.org/apps/P774EQ
As you can see, the text in the Views wrapping the TextInput appear as expected, but the TextInput isn't there. If you just remove the ScrollView (lines 18 & 39), the TextInput appears.
Hopefully someone experienced will look at this and have an answer in a few seconds because I'm pretty sure I'm just missing something obvious. Thanks in advance.
1) Line17: style={styles.scrollview} => style={styles.scrollView}, you have a spell mistake.
2) Use contentContainerStyle for ScrollView (for more details about contentContainerStyle)
<ScrollView keyboardDismissMode='interactive' style={styles.scrollview} contentContainerStyle={styles.contentContainerStyle}>
and here is the contentContainerStyle:
contentContainerStyle: {
flex: 1,
}
3) The flex property of message style is better to set as .125 because the flex of inputcontainer is .75.
Related
I am facing a problem very similar to what was reported and resolved in this SO Question: iOS 11 Safari bootstrap modal text area outside of cursor
. However, the difference for me is that I am using Aurelia & Semantic UI.
I have tried using position: fixed in ux-dialog-body as described in several fixes for the problem occuring in bootstrap (in those examples to be added to the body of the modal), however that did not work.
I would appreciate any help on this issue, thanks in advance.
So I got the idea for the fix here : Semantic-Org/Semantic-UI-React
Basically the problem relates to the height of the content behind the modal/what the modal is lying on top of. So, hide all of it when opening the Modal and put it back when done. However, only for iOS, because for some reason on our site doing otherwise breaks Android devices.
iOS: boolean = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
In opening the modal
if (this.iOS) {
$('body > :not(ux-dialog)').hide();
$("ux-dialog").show();
}
And closing
if (this.iOS) {
$('body > :not(ux-dialog)').show();
$("ux-dialog").hide();
$("ux-dialog-overlay").hide();
$("ux-dialog-container").hide();
}
I hope this helps someone else.
I'm posting here because I'm completely lost on this one.
I've searched all over the web, tried a lot of things myself, and searched weeks on this bug, but I can't find it.
So ever since iOS 11 (doesn't happen on iOS 10), everytime I press a button that activates the "show" segue in a UINavigationController the animation shows some weird padding at the top.
This padding disappears when the animation is finished.
I've changed the backgroundcolor of the superview to a red color, and the space you can see is indeed from the superview itself, so my guess is the whole UITableView is being moved down for some reason, although I'm not sure what exactly is the cause here.
(I'm using storyboard and AutoLayout constraints)
Another thing I noticed is that the spacing/padding you see is different on the iPhone X compared to the other devices (my guess is that it's the same height as the (non)safe area at the top? Again, not sure.
I don't think code is necessary to be provided here, as I wouldn't really know which part causes this behaviour (and there's a lot of code that I can't share for reasons..).
Any suggestions/help on how to fix this would be deeply appreciated!
Here are some examples:
iPhone X running iOS 11.1 (also happened on 11.0)
iPhone 8 gif
EDIT: I should add, some things I already tried:
tableView.contentInsetAdjustmentBehavior = .never
Setting headerviews to 0
tableView.setContentOffset(0, animated: false)
Playing with the translucency settings of the UINavigationBar
AutomaticallyAdjustContentInsets is set to false
So, as suggested by Spenser-Arn, I played around with the constraints and the Safe Areas, turns out, the safe areas where the cause of the issue.
Hope this helps other people as much as it helped me, and a big thankyou to Spenser-Arn!
enter image description here
When I run this project in Xcode, 'NSLog(#"view init......")' this line has been executed, but the React component is not displayed in iOS simulator. Please help or try to give some ideas how to achieve this, thanks in advance!
I had resolved this problem. I missed the style of this component and also make sure the Width & Height had been set.
Also setting flex: 1 to the style of the component should do the trick.
I want to keep the keyboard displayed at the bottom by default without using a text input which the user needs to tap.
I need to keep the keyboard at the bottom at all times.
Then I need to listen to the events of the keyboard.
How can I do this?
The workaround I implemented was adding an invisible text box somewhere on the screen and then set it as focused manually.
Just in case someone else might stumble upon this, OP's self answer works. In order to set focus manually, you'll need to get the ref to the hidden input.
<TextInput
ref={input => (this.textinput = input)}
style={{ display: 'none' }}
/>
then elsewhere in the code, you focus manually by
if (this.textinput) {
this.textinput.focus();
}
This answer is way too late to do the OP any good, but for others:
You can't do this. In iOS, the operating system, keyboards simply don't/can't work this way. iOS never shows a keyboard without an active text input focus, and there is no way for even a native iOS app to override this OS-level behavior. The OS itself prevents this from happening.
I'm new to React Native (done a couple example apps but I'm trying to branch out without a road map), and I'm having trouble with SliderIOS. My slider code is the following
<SliderIOS style={styles.slider}
onValueChange={(value) =>this.setState({value:value})}
maximumValue={100.0}
minimumValue={0.0} />
Styles includes:
slider:{
height:30,
margin:15,
}
The getInitialStateMethod sets this.state.value to 0.
The track is missing and the nob is totally nonfunctional (see http://i.imgur.com/K85zRBG.jpg - can't post images yet).
I'm sure I'm missing something very simple, but not sure how to solve it. Let me know if you need more information to make my question sensible.
Thank you!
I think your issue is that you did not specify a width for the slider. Try adding flex: 1 to the style slider, which will make the slider consume all remaining space not required by other components. For further details see CSS tricks as well as the React Native documentation. Alternatively, you can set the width attribute. Below you can see some code I use for creating the slider illustrated by the following Image:
sliderConfigurationView:
{
height: 20,
flex: 1,
margin: 6
}