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.
Related
I am new in react native,I have to view right and left container given flex-between them,
now I have to give space in contents of left and right container also.
image shown in the below diagram as well as styling code,
const styles = StyleSheet.create({
mainContainer: {
width: "100%",
flexDirection: "row",
height: moderateScale(90),
backgroundColor: "red",
justifyContent: "space-between",
},
containerLeft: {
flexDirection: "row",
top: moderateScale(40),
backgroundColor: "green",
margin: moderateScale(12),
},
containerRightIcons: {
flexDirection: "row",
justifyContent: "flex-end",
top: moderateScale(40),
margin: moderateScale(12),
backgroundColor: "blue",
},
});
Wrap the individual child components inside a View and provide a marginRight when necessary. We could create a new component that handles this behaviour.
export function Spacer({isHorizontal = true, space = 10, children}) {
return <View style={isHorizontal ? {flexDirection: "row"} : null}>
{
React.Children.map(children, (child, index) => {
return index < children.length - 1 ? <View style={{marginRight: space}}>{child}</View> : child
})
}
</View>
}
We use the isHorizontal flag to indicate whether the children are layed out in a row. The default value is set to true to satisfy your current design. However, we can reuse it for column based layouts as well. The default spacing is set to 10. We can control it using the space prop.
Then, use it as follows.
<Spacer>
<Child1 />
<Child2 />
<Child3 />
</Spacer>
We can control the space via props.
<Spacer space={5}>
<Child1 />
<Child2 />
<Child3 />
</Spacer>
I am making an app to read Quran, using react native (expo). I am having some problems formatting the text.
Problems:
Random spacing
Text resize automatically
Text aligns on the left side at the end.
Here is my code:
function Read(){
return (
<SafeAreaView style={styles.container}>
<HeaderSurahScreen navigation={navigation} route={route} />
<Divider
orientation="vertical"
width={5}
style={{ borderBottomColor: "#545353" }}
/>
{/* create a logic here to display tranlition or arabic */}
<ScrollView style={styles.scroll}>
<Text style={styles.surahPage} adjustsFontSizeToFit>
{surah &&
surah.map((ayat, index) => (
<Text key={index} allowFontScaling={false} selectable={true}>
<Text selectable={true} style={styles.ayat}>
{ayat.text}
</Text>
<Text style={styles.number}>{toArabic(ayat.id)}</Text>
</Text>
))}
</Text>
</ScrollView>
<StatusBar style="auto" />
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: DEFAULT_BACKGROUND_COLOR_THEME,
},
scroll: {
flex: 1,
padding: 7,
},
surahPage: {
flex: 1,
marginTop: 15,
textAlign: "justify",
},
ayat: {
flex: 1,
fontFamily: ARABIC_FONT,
color: DEFAULT_COLOR_THEME,
fontSize: 30,
},
number: {
fontSize: 18,
color: DEFAULT_COLOR_THEME,
},
});
Screenshots(3):
The result I am looking for:
To make the text align in your text, you need to use justify to make all the lines have the same length, but also you need to add one attribute direction to make the justification to the right side.
direction: "rtl";
textAlign: "justify"
You may want to have a look at this:
http://jsfiddle.net/aew75/
Unfortunately, I fear I know no way of fixing the problem of the spaces between words coming from justify. There is no way to expand the letters size and width as in the mushaf. This can be a revolutionary idea of arabic fonts usage on the web and dispalys in general.
Maybe give it a shot and have other muslim / arab developers contribute :)
justify will do the job (except the last line) ,i think this what you are asking for
To solve this you should import I18nManager library from react-native,then:
In useEffect write this line :
I18nManager.forceRTL(true);
considering big spaces between words , i used to manage it as possible in styling the text like this :
letterSpacing: -3
change -3 to any other values below 0 ,this will narrow spaces between words as possible
that worked for me
I have a certain problem that I am facing and would like to see whether or not what I am facing is a react-native bug that needs submission to the react-native issues or if it is an error on my part.
I am trying to create a TextInput that is centered to my screen and is supposed to be able to grow in width as one types into it, once enough text is written it wraps to the next line. I am facing a problem that as one types in the TextInput the text appears first and then changes the size of the view causing a flicker and words typed to disappear and then reappear. Eventually the UI settles correctly and appears correct, but as one types the previous written characters can flow to be greater than the width of the View despite the View has no limit to width. I know I have figured out this is due to the parent have a alignItems property that makes the children (in this case the TextInput) centered.
The goal is to make the view expanded in width along side the text being written without this flickering bug.
return (
<KeyboardAvoidingView behavior="height" keyboardVerticalOffset={Platform.OS === 'ios' > 0 : 24} style={styles.flex1}>
<View style={styles.addingText}>
<TextInput
multiline
returnKeyType="done"
blurOnSubmit={true}
textAlignVertical="center"
style={styles.defaultAddingText}
autoFocus={addingText}
selectionColor="#3C99FF"
underlineColorAndroid="transparent"
value={text}
onChangeText={handleTextChange}
onSubmitEditing={handleSubmit}
/>
</View>
</KeyboardAvoidingView>
);
const styles = StyleSheet.create({
flex1: {
flex: 1,
},
addingText: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
zIndex: 100,
},
defaultAddingText: {
paddingHorizontal: 10,
borderRadius: 10,
},
});
Give a height to your defalutAddingText style as following,
const styles = StyleSheet.create({
flex1: {
flex: 1,
},
addingText: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
zIndex: 100,
},
defaultAddingText: {
height:auto,
paddingHorizontal: 10,
borderRadius: 10,
},
});
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
First of all let me share my code along with the current result of what I have going.
return(
<DismissKeyBoard>
<View>
<Formik
initialValues ={{user: 'User ', place: '', description: '', comments: '',datePosted: new Date(), location: '', eventDate: ''}}
onSubmit ={logInfo}>
{props =>(
<SafeAreaView style={styles.container}>
<ScrollView>
<View style={styles.form}>
<Text style={styles.text}>Pick a place for the event</Text>
<GooglePlacesAutocomplete
placeholder='Insert place to find'
minLength={2}
keyboardAppearance={'light'}
fetchDetails={false}
onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true
{props.values.location= data.description}
console.log("hello",props.values.location);
}}
styles={{
textInputContainer: {
backgroundColor: 'rgba(0,0,0,0)',
borderTopWidth: 0,
borderBottomWidth:0,
width: '100%',
},
textInput: {
fontSize: 16
},
predefinedPlacesDescription: {
color: '#1faadb',
height:'100%',
},
}}
query={{
key: '',
language: 'en', // language of the results
}}
/>
<View style={styles.container}>
<Text
placeholder= {props.values.user}
onChangeText = {props.handleChange('user')}
values = {props.values.user}
style={styles.text}>{props.values.user}</Text>
<TextInput
placeholder= 'Place (e.g Honolulu)'
onChangeText = {props.handleChange('place')}
values = {props.values.place}
style={styles.text}/>
<TextInput
placeholder= 'Description (e.g This is located...)'
onChangeText = {props.handleChange('description')}
values = {props.values.description}
style={styles.text}/>
<TextInput
placeholder= 'Comment (e.g This is fun because...)'
onChangeText = {props.handleChange('comments')}
values = {props.values.comments}
style={styles.text}/>
<Text style={styles.text} >Pick a date for the event</Text>
<DatePicker
date={props.values.eventDate}
onDateChange={(date) => {props.values.eventDate= date}}
values = {props.values.eventDate} />
{/* <Text style={styles.text}>Location</Text> */}
<View style={styles.viewbtn}>
<TouchableOpacity onPress={props.handleSubmit} style={styles.btn} ><Text style={styles.txtbtn} >Submit</Text></TouchableOpacity>
{/* <Button title="Submit" onPress={props.handleSubmit} /> */}
</View>
</View>
</View>
</ScrollView>
</SafeAreaView>
)}
</Formik>
</View>
</DismissKeyBoard>
)
}
const styles = StyleSheet.create({
container:{
// flex:1,
paddingTop:20,
// margin: 10,
alignItems: 'center'
},
// form:{
// alignItems: 'flex-start',
// paddingTop:40,
// },
text:{
borderBottomWidth: StyleSheet.hairlineWidth,
borderColor: 'black',
paddingTop:15,
},
viewbtn:{
paddingTop:15,
},
btn:{
backgroundColor: 'purple',
padding:20,
margin:20,
width: 100,
justifyContent: 'center',
alignItems: 'center',
borderRadius : 5,
},
txtbtn:{
fontWeight: 'bold',
fontSize: 14,
color: 'orange'
},
})
The issue
When I click on the GooglePlacesAutoComplete I am able to see the list of places, but then when I click on any of the found places it will not take the input.
Observations
When the <GooglePlacesAutocomplete /> is NOT inside a ScrollView I cannot see the suggestion.
When the <GooglePlacesAutocomplete /> is NOT within any other <View></View> it works perfectly fine.
Warning
With the above code I also get this warning message "VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead."
Desired Result
I would like to have the <GooglePlacesAutocomplete /> component displayed on top of the form, without any weird errors and its functionalities working properly. (Preferably as shown in the picture)
Edit
I am importing import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete'; from https://github.com/FaridSafi/react-native-google-places-autocomplete
I am not an expert in GUI, an explanation would be very appreciated and welcomed. If additional information is required I would be more than happy to provide it.
Thank you in advance.
So I faced the same problem and the one thing that helped me solve the problem was adding
keyboardShouldPersistTaps={true} inside the <ScrollView> as a prop.
This is my code snippet.
<ScrollView keyboardShouldPersistTaps={true}>
<SelectionDD studentstatus={studentStatus}/>
<SearchableDD collegeNames={collegeNames} placeholder='University'/>
</ScrollView>