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.
Related
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",
},
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
Trying to implement a thingy with no luck. Any help would be highly appreciated.
As much elements as possible should be displayed per row, but only if they fit. Elements might be with different width ( depending on a text ). Everything should be centered.
A picture is worth a thousands words:
Tried lots of things nothing worked..
Thanks in advance.
These are two useful links in your case https://facebook.github.io/react-native/docs/flexbox.html and https://facebook.github.io/react-native/docs/layout-props.html#flexwrap
That code works for me successfully on iOS
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<TouchableHighlight style={styles.button}><Text style={styles.buttonText}>Hello</Text></TouchableHighlight>
<TouchableHighlight style={styles.button}><Text style={styles.buttonText}>Some app</Text></TouchableHighlight>
<TouchableHighlight style={styles.button}><Text style={styles.buttonText}>TV&Internet</Text></TouchableHighlight>
<TouchableHighlight style={styles.button}><Text style={styles.buttonText}>Remarkable</Text></TouchableHighlight>
<TouchableHighlight style={styles.button}><Text style={styles.buttonText}>It works</Text></TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
paddingTop: 60,
alignItems: 'center',
justifyContent: 'center',
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap'
},
button: {
marginBottom: 30,
width: 'auto',
marginLeft: 10,
alignItems: 'center',
backgroundColor: '#2196F3'
},
buttonText: {
padding: 20,
color: 'white'
}
});
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"
I'm working in react native and I'm trying to style a component. I have a view (black border) that wraps two views (A and B). I would like something that looks like this - where I the view that wraps A has a width of about 75% and the view that wraps B has a width of about 25%.
When this component is rendered out as a list, however, what I'm getting is something like this - where the width of the A view is dependent on how much text it holds.
I was able to set the width to a specific amount, but it always seems to change based on the device I test it on (different on iPhone 5, 6, 6 plus, etc.). Therefore I'm trying to use flex styling, but can't seem to get it right. Here is my code for my styling and component structure:
const styles = StyleSheet.create({
title: {
color: '#000',
textAlign: 'left',
fontSize: 80,
},
row: {
flex: 1,
flexDirection: 'row',
padding: 0,
height: 180,
borderBottomColor: '#888',
borderBottomWidth: 1,
alignItems: 'stretch'
},
innerContainer: {
flex: 1,
padding: 0,
flexDirection: 'row',
alignItems: 'stretch',
},
sideDivider: {
flex: 0.8,
padding: 0,
backgroundColor: '#cacaca',
justifyContent: 'center'
},
sideDividerArrow: {
flex: 0.2,
padding: 0,
alignItems: 'center',
backgroundColor: 'cyan',
justifyContent: 'center',
},
});
...
render() {
return (
<View style={styles.row} ref={component => this._root = component}>
<TouchableHighlight onPress={this.handleClick.bind(this)}>
<View style={styles.innerContainer}>
<View style={styles.sideDivider}>
<Text style={styles.title}>
{this.state.routeData.busNumber}
</Text>
<Text>{this.state.routeData.fullRoute}</Text>
</View>
<View style={styles.sideDividerArrow}>
<Text>></Text>
</View>
</View>
</TouchableHighlight>
</View>
)
}
}
Any and all help is appreciated. Thanks!!
The flex attribute expects an integer. We cannot use fractions for it.
I guess rendering the following will help you achieve the desired look. You can then add your interactions and clean up the inline styles
<View style ={{flexDirection:'row',flex:1,borderColor:'black',borderWidth:1}}>
<View style ={{flex:3,backgroundColor:'blue',alignItems:'center',justifyContent:'center'}}>
<Text>A</Text>
</View>
<View style ={{flex:1,backgroundColor:'yellow',alignItems:'center',justifyContent:'center'}}>
<Text>B</Text>
</View>
</View>
Your picture has 3 components, but the code actually has more.
The code should work as intended if you do:
- row: flex: 1 (to make sure row is full width) + flexDirection: 'row' (so row children will be left to right).
- A container: flex: 3.
- B container: flex: 1.
At least one of the children of A or B should have a flex: 1 (or any other number) to ensure that children also stretch to fill the parent.
In your case, giving the title and the text components a flex: 1 property will probably do the trick.
Hope this helps!