in react-native when you make a TextInput multiline, the text inside the input is top aligned in IOS and center aligned in Android.
According to the doc we may use 'textAlignVertical' to align top the Text on android
But it don't work on IOS
my question is: How to vertical align center a Text in IOS multiline TextInput
Unfortunately the property textAlignVertical is for Android only. The common workaround is to put the TextInput into the center of a container with a fixed height:
<View style={{height:200, width:200, justifyContent:"center"}}>
<TextInput
multiline={true}
numberOfLines={10}
style={{textAlign:"center", width:"100%"}}
placeholder="Something useful" />
</View>
or
<View style={{height:200, width:200, justifyContent:"center", alignItems:"center"}}>
<TextInput
multiline={true}
numberOfLines={10}
placeholder="Something useful" />
</View>
will do the trick.
Related
I have a component that show on iPhone 13 however on iPhone SE which have slight smaller screen some of my elements are not completely showing. I like to know if there a way that I can scale the component so that everything shows on the screen. In this example I have iPhone SE which is cutting off my save button and preview window. however on bigger devices everything show. I do not want this view to be able to scroll.
<>
<Appbar.Header>
<Button
labelStyle={{color: 'white'}}
icon="arrow-left"
mode="text"
onPress={() => goToStep(1)}>
Scenes List
</Button>
<Appbar.Action />
</Appbar.Header>
<View
style={[
styles.container,
{
paddingLeft: insets.left,
paddingRight: insets.right,
},
]}>
<View style={styles.topContainer}>
<TextInput
label="Title (Optional. Default is used if blank)"
mode="outlined"
ref={inputRef}
value={text}
onChangeText={inputText => setText(inputText)}
/>
<Paragraph>
Select a text color then an icon or background color for your button{' '}
<Paragraph style={{color: 'red'}}>
(To reset, press and hold buttons)
</Paragraph>
</Paragraph>
<View style={styles.row}>
<View style={styles.btnWrapper}>
<View style={styles.textBtnContainer}>
<ColorPickerButton
containerStyle={styles.styleBtn}
useText={'TEXT COLOR'}
selectedColor={setSelectedTextColor}
/>
<ColorPickerButton
containerStyle={styles.styleBtn}
useText={'BG COLOR'}
selectedColor={setSelectedBgColor}
/>
<UploadIcon path={setImage} />
</View>
<Button
icon="content-save"
mode="contained"
onPress={saveSelections}>
Save
</Button>
</View>
{screen.orientation === 'Landscape' && (
<View style={styles.previewPortrait}>
<PadPreview item={padSelections} />
</View>
)}
</View>
</View>
{screen.orientation === 'Portrait' && (
<View style={styles.previewLandscape}>
<PadPreview item={padSelections} />
</View>
)}
</View>
</>
There is no general solution for dealing with smaller devices that work out of the box. Most of the time, you have to explicitly deal with this yourself. One way to do this is by retrieving the screen dimensions and than change the design layout and font sizes yourself.
You can do this by using the following code snippet.
import { Dimensions } from "react-native"
const width = Dimensions.get("window").width
const height = Dimensions.get("window").height
An iPhone SE in the first generation has a logical screen width of 320 pixels and a logical height of 568 pixels.
In your specific case you might want to implement a different layout, if the screen width is less or equal to 320 pixel. You could also try to scale the sizes of your components responsively. For the save button this could look as follows.
const width = Dimensions.get("window").width
...
<Button
style={{width: width > 320 ? "100%" : "70%"}}
icon="content-save"
mode="contained"
onPress={saveSelections}>
Save
</Button>
You could also play around with different flex layouts, but you eventually will need to implement different behaviors for very small devices yourself.
Scenario: I want to achieve a situation like the code shown below. Where there will be:
A multiline TextInput with other components and the screen will be scrollable.
I don't want the TextInput to be scrollable.
Problem: What happens is, after writing a certain amount of lines in the TextInput, the texts vanishes. I can still select the text and get suggestion in the keyboard. It's like the texts and the TextInput became transperant. After the TextInput reaches the height of the phone screen, this problem occurs.
Is this a bug of React-Native? or am I doing something wrong here?
Note: I'm using "expo": "~40.0.0". Also, the code below is just to portrait the situation, not the actual code.
return (
<ScrollView>
<View style={styles.block} />
<View style={styles.block} />
<TextInput
value={content}
onChangeText={setContent}
placeholder="Start writing from here"
multiline
/>
<View style={styles.block} />
<View style={styles.block} />
</ScrollView>
);
const styles = StyleSheet.create({
block: {
height: 200,
backgroundColor: 'blue',
},
});
Try out any of following Workarounds:
Enabling scrollEnabled on the TextInput
Explicitly setting a height on the TextInput (eg. by dynamically measuring the contents)
<ScrollView scrollEnabled style={{ marginTop: 100 }}>
<TextInput multiline placeholder="type here" scrollEnabled={true} />
</ScrollView>
I'm using react-native-paper Modal.
I used KeyboardAvoidingView but its not working. It working fine in android ,But it's not working in IOS.
I have specify behaviour as padding, position, height of KeyboardAvoidingView but it doesn't work
Please give any solution.
Screenshot on Android [1]: https://i.stack.imgur.com/UETKh.jpg
Screenshot on IOS[2]: https://i.stack.imgur.com/SIDib.png
My code is as below:
<Modal
contentContainerStyle={{ backgroundColor: 'white', padding: 20, borderRadius: 10, marginLeft: 30, marginRight: 30 }}
animationType="fade"
visible={this.state.dialogVisible}
>
<KeyboardAvoidingView behavior='padding' enabled>
<Text style={styles.descDialogInqueryFor}> Inquire for </Text>
<TextInput
autoFocus={true}
maxLength={50}
underlineColorAndroid={'transparent'}
style={styles.inpuTextDialog}
placeholder='Name'
placeholderTextColor='#C7C7CD'
onChangeText={(text) => this.setState({ name: text })}
></TextInput>
<TextInput
autoCompleteType={'email'}
maxLength={40}
underlineColorAndroid={'transparent'}
style={styles.inpuTextDialog}
placeholder='Email'
placeholderTextColor='#C7C7CD'
onChangeText={(text) => this.validateEmail(text)}
></TextInput>
<Text style={[styles.errorText, { display: this.state.displayEmailError }]}>Invalid email address</Text>
<TextInput
autoCompleteType={'email'}
maxLength={40}
underlineColorAndroid={'transparent'}
style={styles.inpuTextDialog}
placeholder='Email'
placeholderTextColor='#C7C7CD'
onChangeText={(text) => this.validateEmail(text)}
></TextInput>
<Text style={[styles.errorText, { display: this.state.displayPhoneError }]}>Invalid phone number</Text>
<TextInput
maxLength={30}
underlineColorAndroid={'transparent'}
style={styles.inpuTextDialog}
placeholder='Subject'
placeholderTextColor='#C7C7CD'
onChangeText={(text) => this.setState({ subject: text })}
></TextInput>
<TextInput
blurOnSubmit={true}
multiline={true}
underlineColorAndroid={'transparent'}
style={styles.messageInpuText}
placeholder='Message'
placeholderTextColor='#C7C7CD'
onChangeText={(text) => this.setState({ message: text })}
></TextInput>
<Button style={styles.sendButtonDialog} onPress={() => this.sendInquire()}>
<Text style={styles.sendButtonText}>Send</Text>
</Button>
</KeyboardAvoidingView>
</Modal>
You just add KeyboardSpacer in the Modal
In my experience, if you don't want any issue about keyboard you need using scrollview and observer keyboard show/hide for animal fix layout. Custom yourself.
I have get this issue too and because I support many version ios so using KeyboardAvoidingView can not fix all of them and sometime get some hidden issue just appear when you have many user using special version.
Android auto scroll content when layout change so you no need to do anything to fix layout when keyboard show. If you check KeyboardAvoidingView for ios maybe it effects to android. So observer keyboard show and custom yourself will be best that is mine sugess.
PS I remember KeyboardAvoidingView have contentOffSet attribute to fix animation scroll when keyboard change state. But I very confused how to using it fixable for all version ios and after many trying time I custom myself. Hope my experience can help you see the right way in your case
My code is :
<TextInput
multiline={true}
value={inputValue}
/>
Placeholder is on middle on android, however on ios it is on top.
textAlignVertical
is not work on ios
i used text alignItems: 'center' and alignSelf: center these are not work as well.
How can i handle this ?
You are missing the prop textAlignVertical for the TextInput component. Set this prop to "top" and the problem is solved.
<TextInput
multiline={true}
value={inputValue}
textAlignVertical='top'
/>
Just Add textAlign: 'center' to your textInput style.
I tried rgba(156, 39, 176, 1) but it does not cover the color under it.
How can I make the purple color circle cover the part of background bell?
First try setting zIndex on the badge to make it render on top. However Android has some zIndex issues, so if that doesn't work then you have to render it after. So you have this right now:
<View>
<Badge>
<Image>
</View>
You need to do:
<View>
<Image>
<Badge>
</View>
You can use react-native-icon-badge to create this notification icon symbol with count.
<View style={styles.container}>
<IconBadge
MainElement={
<View>
<Image
style={{width:60,height:60,margin:3}}
source={bell}
/>
</View>
}
BadgeElement={
<Text style={{color:'#FFFFFF'}}>3</Text>
}
IconBadgeStyle={
{width:30,
height:30,
backgroundColor: '#9c27b0'}
}
Hidden={this.state.BadgeCount==0}
/>
</View>