I am trying to create a calculator, but I am facing a problem when the text gets long because it turns into an ellipsis, so I used ScrollView. It can be scrolled by increasing the value of numberOfLines, but when I tried scrolling up, it bounced back, and I would like it to stay where it is scrolled.
I set adjustsFontSizeToFit to true but it gets smaller too much which is not the one I want.
You can test it from here https://snack.expo.dev/_i4anOJ8v
Here is the screenshot: https://imgur.com/a/BAYyN5e
Any help is appreciated
<View style={styles.fieldContainer}>
<ScrollView contentContainerStyle={styles.field}>
<Text
// adjustsFontSizeToFit={true}
numberOfLines={500}
style={{
fontSize: textFontSize,
}}>
{text}
</Text>
</ScrollView>
</View>;
const styles = StyleSheet.create({
fieldContainer: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'flex-end',
},
field: {
marginTop: 'auto',
justifyContent: 'flex-end',
alignItems: 'flex-end',
flexDirection: 'column',
},
});
==> you need to change your style in scrollview.
field: {
justifyContent: 'flex-end',
alignItems: 'flex-end',
flexDirection: "column",
},
Related
I'm trying to align my component TextInput that uses a TextField from #ubaids/react-native-material-textfield and a Text but i couldn’t. The result i have is in the image below :
I added alignItems: 'center' in the container but i didn't work. My code is:
<View style={styles.container}>
<View style={styles.input}>
<TextInput
containerStyle={{ height: 20, marginVertical: 10 }}
label=""
value=""
keyboardType="phone-pad"
/>
</View>
<View style={styles.label}>
<Text style={[styles.text, { textTransform: 'uppercase' }]}>Text</Text>
</View>
</View>
container: {
flexDirection: 'row',
alignItems: 'center'
},
input: {
flex: 0.2
},
label: {
paddingTop: 20,
paddingHorizontal: 10
},
You should try and add justifyContent to your container‘s Styling:
container: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
}
And also, you don't need the view above the Text with the styles.label.
This way, both your TextInput and your Text components will be aligned on both axis
You have to set display css property to inline-block for both input and label style:
text: {
fontWeight: "bold",
fontSize: "1.5rem",
marginVertical: "1em",
},
container: {
flexDirection: "row",
alignItems: "center"
},
input: {
flex: 0.2,
display: 'inline-block'
},
label: {
// paddingTop: 20,
paddingHorizontal: 10,
display: 'inline-block'
}
As you can see I commented paddingTop: 20 in label (but if you need, you can add it again but you have to add it to input also).
Here a codesandbox.
Already answered but I'd like to add a bit more on the topic and different ways to do it depending on your use case.
You can add adjustsFontSizeToFit={true} (currently undocumented) to Text Component to auto adjust the size inside a parent node.
<Text adjustsFontSizeToFit={true} numberOfLines={1}>Hiiiz</Text>
You can also add the following in your Text Component:
<Text style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>
I have a screen named SelectedTimings in my project in which i have to show all the selected timings by the user. When the time is selected more than 3 times, values have gone away from the screen. So i used flexWrap:wrap to break them into multiple lines. But the broken lines overlapping with the below objects.
<View style={styles.cutomTimeContainer}>
{
whenAndTotalTimes.type == 'Daily' &&
selectedTimes.map((item, key) =>
<View style={styles.customTime} key={key}>
<CustomDailyTime
mode={whenAndTotalTimes.type}
showHour={item?.hour}
showMin={item?.minutes}
showAmpm={item?.ampm}
selectedColor={isClicked}
/>
</View>
)
}
</View>
cutomTimeContainer:
{
flexWrap: 'wrap',
flexDirection: 'row',
justifyContent: 'center',
marginVertical: 10,
alignContent: 'stretch',
// height: 100
},
customTime:
{
alignItems: 'center',
marginTop: 10
},
Is there any way to set the auto height for flexWrap? Please find the below image for ref. Thanks in Advance.
I have two Views under my main View
<View style={styles.container}>
<View style={styles.header}>
<Image
resizeMode="contain"
source={require("../assets/logo-large.png")}
style={styles.logo}
/>
</View>
<View style={styles.content}>
<TextInput
style={styles.input}
onChangeText={(email) => setEmail(email)}
defaultValue={email}
placeholder="Your email"
autoCompleteType="email"
textContentType="emailAddress"
></TextInput>
</View>
My code for styling looks like this:
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
},
header: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "gold",
},
content: {
flex: 2,
justifyContent: "center",
alignItems: "center",
backgroundColor: "lightblue",
},
});
What I want to achieve is to have a header with logo at the top of the screen and to have the content below, but I want to have all elements in content to be top aligned. At the moment those elements are center aligned in content.
Can someone help with this?
Since your main view defaults to flex-direction = column then your content style justifyContent: "center", will arrange elements from content at vertical middle and alignItems: "center" will make them horizontal center. You need to remove those to keep the content elements to start from the top.
Please update your styles to the following.
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
},
header: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "gold",
},
content: {
flex: 2,
alignItems: "center",
backgroundColor: "lightblue",
},
});
Good Luck
I have adjusted it using justifyContent on header and footer styles.
header: {
flex: 1,
justifyContent: "flex-end",
alignItems: "center",
backgroundColor: "gold",
paddingBottom: "10%",
},
content: {
flex: 2,
justifyContent: "flex-start",
alignItems: "center",
backgroundColor: "lightblue",
},
I'm trying to have my two buttons sit in a row, equally spaced, and I want them of equal height and width. But they look like this at the moment.
I'm very new to React Native so please go gently!
Here's my code for what's returned.
return (
<View style={styles.screen}>
<View style={styles.horseProfile}>
<HorseProfile />
</View>
<View style={styles.vitalSignsGrid}>
<LargeVitalSigns />
</View>
<View style={styles.buttonContainer}>
<TouchableOpacity onPress={this._alertHandler}>
<View style={styles.buttonStyling}>
<Text style={styles.buttonText}>ECG</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={this._alertHandler}>
<View style={styles.buttonStyling}>
<Text style={styles.buttonText}>Resp Pattern</Text>
</View>
</TouchableOpacity>
</View>
<View>{/* timer and stop button */}</View>
</View>
)
Here are my styles.
const styles = StyleSheet.create({
screen: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
horsePatientProfile: {
flex: 1
},
vitalSignsGrid: {
flex: 3,
backgroundColor: '#14172B'
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'space-around',
backgroundColor: 'green',
width: '100%',
flex: 4
},
buttonStyling: {
backgroundColor: '#2B4250',
borderRadius: 30,
alignItems: 'center',
justifyContent: 'space-around',
width: '50%',
height: '35%',
flexDirection: 'row',
},
buttonText: {
color: '#84C5C6',
fontWeight: 'bold'
}
})
Can anyone help please? Thank you.
the width of your buttons styles.buttonStyling is 50% which is 50% of the parent Component, the parent is the touchableOpacity, since it doesn't have a set width itself it will stretch with the content, in other words the 50% does not mean the same thing, you should give an exact (relative size, I like react-native-size-matter) to the touchable opacity and justifyContent as space between to space evenly
For height, width try using React Native Dimensions React Native Dimentions
Import it:
import {Dimensions} from "react-native";
var {height, width} = Dimensions.get('window');
Example using in style:
buttonStyling: {
backgroundColor: '#2B4250',
borderRadius: 30,
alignItems: 'center',
justifyContent: 'space-around',
width: width/2,
height: height / 3.5,
flexDirection: 'row',
},
or use Flexbox
In react native I have:
<View style={styles.navBar}>
<Text>{'<'}</Text>
<Text style={styles.navBarTitle}>
Fitness & Nutrition Tracking
</Text>
<Image source={icon} style={styles.icon}/>
</View>
with these styles:
{
navBar: {
height: 60,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
navBarTitle: {
textAlign: 'center',
},
icon: {
height: 60,
resizeMode: 'contain',
},
}
This is the effect I get:
This is the effect I want:
In the first example, the spacing between items is equal.
In the second example, each item is justified differently. The first item is left-justified. The second item is center-justified. The third, right-justified.
This question is similar, but it looks like react native does not support margin: 'auto'. Furthermore, the other answers only work if you only care about left and right justification, but no one really addresses center justification without auto margin.
I am trying to make a navigation bar in react native. The vanilla ios version looks like this:
(source: apple.com)
How do I do something similar? I'm mainly concerned with centering.
One way is to use nested View (flex containers) for 3 different regions and set flex:1 to left and right region
<View style={styles.navBar}>
<View style={styles.leftContainer}>
<Text style={[styles.text, {textAlign: 'left'}]}>
{'<'}
</Text>
</View>
<Text style={styles.text}>
Fitness & Nutrition Tracking
</Text>
<View style={styles.rightContainer}>
<View style={styles.rightIcon}/>
</View>
</View>
const styles = StyleSheet.create({
navBar: {
height: 60,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: 'blue',
},
leftContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-start',
backgroundColor: 'green'
},
rightContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center',
backgroundColor: 'red',
},
rightIcon: {
height: 10,
width: 10,
resizeMode: 'contain',
backgroundColor: 'white',
}
});
You could also set marginLeft: 'auto' to the middle component. It should push it to the right. Also works for React Native
Source: https://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6
If you're using a NavigationBar from the Navigator module see my question: Changing the default style for a Navigator.NavigationBar (title)
use this
marginLeft: "auto",
marginRight: "auto"