I have a TextInput in my React Native App. All this while I was using simulator "iPhone X" and it was working fine. Now I changed my simulator to "iPhone 5" and the width doesn't match.
<TextInput
value={value}
placeholder='Search Here...'
onChangeText={(text)=>{this.handleSearch(text)}
onTouchStart={()=>{this.setTempNotifications()}
style={{ height: 40, width: 290}}
autoCapitalize='none'
selectTextOnFocus={true}
/>
I had set the width to "290". How do I make my TextInput width flexible???? It has to fit all phone screens and I do not have to fix a width.
You don't really have to give a width value. Only the height is enough to make the TextInput span across its parent.
export default function App() {
return (
<View style={{flex: 1}}>
<TextInput
placeholder='Search Here...'
style={{ height: 40, borderWidth: 1}}
autoCapitalize='none'
selectTextOnFocus={true}
/>
</View>
);
}
The containing view can have padding or margin for appropriate gutter space
Related
I have a component that wraps a TextInput and has an option to display the content on multiline. However, it's used in multiple places around the app, and in some spots the multiline makes the height of the TextInput grow, but in others it remains the same. The weirdest thing is that it is used in the exact same screen, one below the other (as you can see below)!
<View style={styles.inputContainer}>
<TextInput
style={styles.input}
onChangeText={(text) => onChangeText(text)}
value={value}
multiline={multiline}
keyboardType={keyboardType}
/>
</View>
Styling:
inputContainer: {
flexDirection: 'row',
alignItems: 'center',
borderBottomWidth: 1,
borderBottomColor: colors.grayLighter
},
input: {
color: colors.grayTextDarker,
paddingVertical:12,
width: '100%',
paddingHorizontal: 20,
fontFamily: FONTS.Arial,
fontSize: 18,
textAlign: 'center',
justifyContent: 'center'
},
Usage of component when height is not adapted:
<CustomInput2
label={'HEIGHT OF TEXTINPUT NOT RESIZING WHEN TEXT IS MULTILINE'}
onChangeText={(value) => updateState(value)}
value={'vjner vnrjg nvdy hf ythnf vt f mb yhb c vyh fbt j vth yb j fv yjbd trxh vydr hbf tdfx yd yjhbtf jy'}
multiline={true}
keyboardType="default"
/>
Usage of component when height IS adapted:
<CustomInput2
label={"My Label}
onChangeText={(value) => setState(value)}
value={"as you can see in the picture below, the height of the input resizes here"}
multiline={true}
keyboardType="url"
/>
It seems like this behavior is caused by the "url" keyboardType, since it may not accept multiline URLs.
I am building an Android specific app using React-Native.
In this app I am trying to build a custom TextInputField which can be re-used. This is my Custom Function Component
function AppTextInput({ icon, ...otherProps }) {
return (
<View style={styles.container}>
{icon && (
<MaterialCommunityIcons
name={icon}
size={20}
color={colors.medium}
style={styles.icon}
/>
)}
<TextInput style={customStyles.text} {...otherProps} />
</View>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: colors.light,
borderRadius: 25,
flexDirection: "row",
width: "100%",
padding: 15,
marginVertical: 10,
},
icon: {
margin: 3,
marginRight: 7,
},
});
export default AppTextInput;
I call this component from my App.js like so
<AppTextInput
autoCapitalize="none"
autoCorrect={false}
icon="email"
keyboardType="email-address"
placeholder="Email"
/>
The issue here is, this field is set-to focus only when I touch on the width occupied by placeholder text and not the entire text field. What am I doing wrong?
The focus effect will only happen when you press on the text input itself, and if you give it a background color you will find out that your text input is small and the pressable area that will trigger the focus effect is small (Only the text input area)
The solution is to make the whole View that contain the input and the icon trigger the focus via useRef like this:
export default function AppTextInput({ icon, ...otherProps }) {
const textInput = React.useRef(null);
function handleClick() {
textInput.current.focus();
}
return (
<Pressable style={styles.container} onPress={handleClick}>
{icon &&
<MaterialCommunityIcons
name={icon}
size={20}
color={colors.medium}
style={styles.icon}
/>}
<TextInput ref={textInput} {...otherProps} />
</Pressable>
);
}
Also replace the View with Pressable to be able to use onPress.
Try this simple solution,
<TextInput style={[customStyles.text, { flex: 1 }]} {...otherProps} />
I am making a UI design in react native i have made a card of categories i want to increase the width of view if category name is long. but i am not understanding how to do that.Please help here is my code.
<View style={styles.CardMainView}>
<View style={styles.ThirdLayerStyle} />
<View style={styles.SecondLayerStyle} />
<View style={styles.FirstLayerStyle}>
<Image resizeMode={'contain'} style={styles.CatImageStyle}
source={require('../../Assets/Images/doccatImage.png')}
/>
</View>
<Text numberOfLines={1} style={{color:'#fff' , fontSize:15, top:28 , marginLeft:25 , marginRight:20, fontFamily: "poppinsregular"}}>Orthopaedic</Text>
</View>
</View>
CardMainView:{
flexDirection:'row',
borderRadius:4,
backgroundColor:"#1abc9c",
width:190,
height:80,
elevation:3,
shadowColor:'#000',
overflow:'hidden',
},
if you do not set width for component, that component can be resizable if the content size change.
also, I write a component which expands on height if the text size increased.
set height: 0 on state
and add this function to class for focusing on text input
focus () {
this.textInput && this.textInput.focus()
}
and add this component to return
<TextInput
{...this.props}
ref={(view) => (this.textInput = view)}
multiline
onContentSizeChange={(event) => {
if (event && event.nativeEvent && event.nativeEvent.contentSize) {
this.setState({
height: event.nativeEvent.contentSize.height
})
}
this.props.onContentSizeChange && this.props.onContentSizeChange(event)
}}
style={[this.props.style, { height: Math.max(35, this.state.height) }]}
/>
hopefully, this can help you or get an idea ;)
I think you can control your size with give a padding innermost component, when you give a padding your component will increase with your text size.
I am using RN 50. I have a TextInput with a height of 40. But the text doesn't get as big as my textInput. I tried allowFontScaling={true} but didn't work. So I want the letters to be as tall/big as my TextInput height.
You just need to pass a fontSize along with the height:
<TextInput style={{ height: 40, fontSize: 40 }} />
Have you tried wrapping it all in text and applying the font size to the outer text?
<Text style={{fontSize: xx})>
<TextInput/>
<Text/>
Alternatively you have tried this?
<TextInput
style={{fontSize: 40}}
/>
I've been stuck on the following issue for awhile now. I have a ToolbarAndroid component and a TextInput component:
<View style={{flex: 1}}>
<ToolbarAndroid
navIcon={require('./ic_menu_black_24dp.png')}
onIconClicked={() => this.drawer.openDrawer()}
style={styles.titleView}
title="Blah"
titleColor="black"
/>
<ScrollView>
<TextInput
{...this.props}
multiline={true}
onChange={(event) => {
this.setState({
text: event.nativeEvent.text,
height: event.nativeEvent.contentSize.height,
color: 'black'
});
}}
style={{fontSize: 14, textAlignVertical: 'top', height: Math.max(60, this.state.height)}}
value={this.state.text}
placeholder="Spread your message!"
placeholderTextColor='lightslategray'
underlineColorAndroid='white'
enablesReturnKeyAutomatically={true}
returnKeyType="done"
maxLength={1000}
/>
</ScrollView>
</View>
My TextInput box is auto-expanding which means it grows as it types. The input also re-focuses on top of the keyboard as it grows. However, as it grows to be bigger than my screen, it doesn't scroll behind the Toolbar. Instead, it pushes the toolbar off the screen. I'd like it to scroll behind the toolbar but I can't seem to get it to work.
Any help would be greatly appreciated.
Thanks