I'm trying to implement two text inputs. I'm not sure if the best practice is to wrap these inside a scroll view or not. However, when I do it as shown below, I just see a single line in the middle.
If I remove the scroll view and just leave a single Text Input, it displays a box with input that I can interact with. Though I'm still unable to get the keyboard to display on the simulator. But I can manually type in and change state.
Any idea on how to allow more than one text input, as well as how to show the native keyboard that pops up from the bottom?
render() {
return (
<ScrollView>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
placeholder="Enter item 1"
value={this.state.text}
onChangeText={this.onChange} />
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
placeholder="Enter item 2"
value={this.state.text}
onChangeText={this.onChange} />
</ScrollView>
);
}
1 - For the iOS Simulator there is an option Hardware -> Keyboard -> Toggle Software Keyboard (which is unchecked by default). Checking this option should solve your issue of displaying the native keyboard.
2 - Regarding multi-line text input. Yes this is an issue, but there is a work around shared in this answer below. I'll attach the link to the answer for your reference.
P.s: I haven't tried it myself, but the answer has been marked to have solved the issue!
Multi-Line TextInput Hack - https://stackoverflow.com/a/31759113/5783646
Display keyboard in iOS Simulator: Hardware -> Keyboard -> Toggle Software Keyboard
Show more than one text input: My guess is that there are styles applied (or not applied) to a parent element or elsewhere that is preventing the TextInput from rendering at a useable size.
I created an example on RN Playground that demonstrates what you are asking for: https://rnplay.org/apps/ldlfWw
Related
I am facing something weird issue with React-Native's <Text/> component in iOS.
I wanted to apply borderBottomWidth style into <Text/> component but it did NOT work. However, the borderWidth option worked.
Worked
<Text style={{borderWidth:1}}> React Native </Text>
NOT Worked
<Text style={{borderBottomWidth:1}}> React Native </Text>
Is there any way to only apply bottom level border into the <Text/> component?
Thank you!
Note:
I am aware of following mentioned approaches in order to achieve this but in my case, I required to apply the style only to the <Text/> component.
We can try wrapping <View/> to the <Text/> and apply borderBottomWidth style to the <View/>. (borderBottomWidth works fine with <View/>)
Adding such <View/> just below to the <Text/> component which can look like a line.
Even though borderBottom doesn't work on the Text component, it did work for me on the TextInput component, just set editable to false and set the value to your desired text as so...
<TextInput
style={styles.textInput}
editable={false}
value={'My Text'}/>
const styles = StyleSheet.create({
textInput: {
borderBottomColor: 'black',
borderBottomWidth: 1,
}
});
This isn't currently possible. See the following RN issue: https://github.com/facebook/react-native/issues/29 and this ticket on Product Pains: https://productpains.com/post/react-native/add-borderwidth-left-right-top-bottom-to-textinput-/
We can now use :
const styles = StyleSheet.create({
textZone: {
borderTopRightRadius: 10,
borderTopLeftRadius: 10,
borderBottomRightRadius: 10,
borderBottomLeftRadius: 10
},
})
My TextInput is missing inside ScrollView for iOS. It works fine on android.
Included is the sample app using Playground.
https://rnplay.org/apps/KtTZ2g
You could see that android is showing the TextInput, but the iOS's one does not show it.
These kind of bugs is making me crazy...
When using the TextInput, be sure to provide a height:
<TextInput
style={{flex: 1, color: 'black', height:40}}
editable={false}
defaultValue="+"
underlineColorAndroid='#C8C7CC' />
https://rnplay.org/apps/a6i08w
The problems statement is similar to this question
But I am looking for some pointers to implement the same with react-native.
I am building a chat window (like iMessage, whatsapp) where messages(ListView) come on top with a sticky footer containing a TextInput.
I am able to get a sticky footer, but when someone tries to enter text with TextInput in footer, the keyboard hides the TextInput. I tried approaches mentioned in this post, but none seem to work because of presence of ListView above.
Here is what my current layout code looks like:
<View style={styles.container}>
<ListView
automaticallyAdjustContentInsets={false}
keyboardDismissMode="on-drag"
keyboardShouldPersistTaps={true}
showsVerticalScrollIndicator={false}
/>
<View style={styles.textContainer}>
<TextInput/>
</View>
</View>
I have created a Picker, but I am unable to reduce the height of the picker. I tried the height property too still no use.
My code:
<View class="pageContainer">
<Picker id="langPicker">
<PickerRow title="Select a Language"/>
<PickerRow title="English"/>
<PickerRow title="French"/>
<PickerRow title="Spanish"/>
</Picker>
<Button class="button" onClick="saveLang" dataTransform="transformFunction">Proceed</Button>
</View>
Style
"#langPicker": {
width: '90%',
top: '25dp',
height: '50dp'
}
How can I reduce the height of the picker? Any suggestions
From the docs:
"On iOS, by default, the size of the picker, including its background,
is fixed at the same size as the iPhone keyboard to respect the iOS
Human Interface Guidelines. The size of the picker should not be
modified."
So even if you do somehow manage to hack the height of the picker on iOS, it will most likely be rejected from the app store when you try to submit.
Workaround for this is to show the picker only when the users presses something on the view.
I'm using dojox.mobile.SearchBox in Worklight project.
I found out 2 issues.
The first is that the clear button(a small cross in a circle, which must to clear the text in the search box) does not work on the IOS Safari(or in the workilght app which uses safari).
The only thing happens is that the cursor moves to right side of the text are in the search box. That's it. It does not remove the text.
And the second one.
I need to call function by pressing search button on the virtual keybord.
If I set the type="search" in search box - there is no search button on the keybord.
So i put my search button into the .
So search button appears on the virtual keybord.
But after the pressing this button, the form submits and I page reloads.
And I just need to call a function.
I've resolved both issues))
1) About event on pressing Search button(enter)
There is an issue in IOS Safari with appearing "Search button" on virtual keybord.
your text input with type="search" must be inside form tag.
Show 'Search' button in iPhone/iPad Safari keyboard
(second answer)
To call some function on pressing Search button and not submit a form I put the following javascript into the from tag:
<form onsubmit="myFunction(...);return false;">
Pressing Search button starts the Submit action. And this javascript call my function at this time and stop the submitting. That's what I need!
2)
The second problem with clear button of the search box.
This is the bug of dojo. https://bugs.dojotoolkit.org/ticket/16672
I've found a workaround. http://dojo-toolkit.33424.n3.nabble.com/dojox-mobile-SearchBox-Clear-Button-x-fails-in-iPad-iOS-16672-td3995707.html
But I change it a little, cause it does not work in my case.
This is the my variant:
<form onsubmit="myFunction(...);return false;">
<input id="searchBox" ontouchstart="clearButtonSupport(event);" data-dojo-type="dojox.mobile.SearchBox"
data-dojo-props="type:'search'" type="search"
placeholder="Some placeholder...">
</form>
This is the clearButtonSupport function:
function clearButtonSupport(evt) {
require([ "dijit/registry", "dojox/mobile/SearchBox" ], function(registry) {
var searchBox = registry.byId('searchBox');
var rect = document.getElementById('searchBox').getBoundingClientRect();
// if touched in the right-most 20 pels of the search box
if (rect.right - evt.touches[0].clientX < 20) {
evt.preventDefault();
searchBox.set("value", "");
}
});
}
onclick and onmouseup event in IOS safari works only when text input is not focused.
If the focus on the search box(cursor is inside) this event is not thrown.
So i used ontouchstart event
ontouchstart - multitouch event in IOS safari.
It's thrown every time you touch the element.
So I take the coordinates of the first(and the only) touch.
And look if it's less than 20px far away from the right side of the element.()position of the clear button)
And clear the search box.
That's it!