My text component doesn't align when the text is more than 2 lines (see screenshot). I have tried playing around with alignment and ellipsizeMode but none of the settings change anything. Why is the 2nd line indented?
My code:
<View style={{ flex: 4, flexDirection: 'row', marginTop: 10}}>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<CircleIndicator style={{marginRight: 29}} />
<View
style={{
width: 4,
height: '100%',
backgroundColor: styles.colors.lipstick,
marginRight: 35,
}}
/>
</View>
<View style={{ flex: 2 }}>
<View style={{ flex: 1 }}>
<Text weight='bold' color='darkIndigo'> {activityType} </Text>
</View>
<View style={{ flex: 1 }}>
<Text color='blueyGrey' style={{opacity: 0.5}}> {activityDate}
</Text>
</View>
<View style={{ flex: 1, marginBottom: 30 }}>
<Text color='blueyGrey'> {activityDescription} </Text>
</View>
</View>
<View style={{ flex: 1 }} >
<Text weight='bold' color='lipstick'> {activityPoints} PTS </Text>
</View>
</View>
So I left this issue alone for a couple of days and revisited it. The reason for the misalignment was this:
<Text color='blueyGrey'> {activityDescription} </Text>
Changed it to:
<Text color='blueyGrey'>{activityDescription}</Text>
Such a rookie mistake :D
Related
Scroll view does not scroll, only shows first three items, the rest are lost.
<View style={styles.container}>
<ScrollView horizontal contentContainerStyle={{ flexGrow: 1 }}>
<View style={{ width: "33%" }}>
<TouchableOpacity style={styles.child}>
<Text>B1</Text>
</TouchableOpacity>
</View>
<View style={{ width: "33%" }}>
<TouchableOpacity style={styles.child}>
<Text>B2</Text>
</TouchableOpacity>
</View>
<View style={{ width: "33%" }}>
<TouchableOpacity style={styles.child}>
<Text>B3</Text>
</TouchableOpacity>
</View>
<View style={{ width: "33%" }}>
<TouchableOpacity style={styles.child}>
<Text>B4</Text>
</TouchableOpacity>
</View>
<View style={{ width: "33%" }}>
<TouchableOpacity style={styles.child}>
<Text>B5</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
Here are the styles I am using
const styles = StyleSheet.create({
container: {
height: "10%",
width: "75%",
backgroundColor: "transparent",
borderRadius: 5,
borderTopWidth: 1,
borderBottomWidth: 1,
borderColor: "lightsteelblue",
display: "flex",
flexDirection: "row",
overflow: "hidden",
},
child: {
backgroundColor: "transparent",
flex: 1,
alignItems: "center",
justifyContent: "center",
},
});
I have already tried several of the solutions offered here on other posts and have not found a solution. Any contructive, good hearted criticism is welcome, thanks for your time.
This is how I can able to scroll, I've changed some css's, you can change as per your requirements
<View style={{flex: 1}}>
<ScrollView horizontal>
<View style={{flex: 1}}>
<TouchableOpacity style={styles.child}>
<Text>B1</Text>
</TouchableOpacity>
</View>
<View style={{flex: 1}}>
<TouchableOpacity style={styles.child}>
<Text>B2</Text>
</TouchableOpacity>
</View>
<View style={{flex: 1}}>
<TouchableOpacity style={styles.child}>
<Text>B3</Text>
</TouchableOpacity>
</View>
<View style={{flex: 1}}>
<TouchableOpacity style={styles.child}>
<Text>B4</Text>
</TouchableOpacity>
</View>
<View style={{flex: 1}}>
<TouchableOpacity style={styles.child}>
<Text>B5</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
const styles = StyleSheet.create({
container: {
height: '50%',
backgroundColor: 'transparent',
borderRadius: 5,
borderTopWidth: 1,
borderBottomWidth: 1,
flexDirection: 'row',
},
child: {
backgroundColor: 'transparent',
width: 200,
height: 100,
alignItems: 'center',
justifyContent: 'center',
},
});
Here is a snack with your code that works.
https://snack.expo.io/#waheed25/horizontal-scroll-working-
Remove that flexGrow property and put width with respect to the device or a number and don't use percentage there as it was taking the width from the container.
or simply replace this code with your code.
<View style={styles.container}>
<ScrollView horizontal>
<View style={{ width: 100 }}>
<TouchableOpacity style={styles.child}>
<Text>B1</Text>
</TouchableOpacity>
</View>
<View style={{ width: 100 }}>
<TouchableOpacity style={styles.child}>
<Text>B2</Text>
</TouchableOpacity>
</View>
<View style={{ width: 100 }}>
<TouchableOpacity style={styles.child}>
<Text>B3</Text>
</TouchableOpacity>
</View>
<View style={{ width: 100 }}>
<TouchableOpacity style={styles.child}>
<Text>B4</Text>
</TouchableOpacity>
</View>
<View style={{ width: 100}}>
<TouchableOpacity style={styles.child}>
<Text>B5</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
I have a screen where my data is displayed. I want to display in the form of table (The data at the bottom of screen)as shown below in screenshot.
Edited: top part code:
It's inside the movies as well
<View>
<Text key={item.symbol}>{item.symbol}<Text>
<Text key={item.open}>{item.open}<Text>
<Text key={item.close}>{item.close}<Text>
</View>
Right now my screen looks like:
I want to create an interface like below:
The data next to the close, high etc is some json data that I fetched from api.
My Code as of now :
let movie = (
<View style={styles.bottomdata}>
<Text style={styles.text} key={item.name}>
{item.name}
</Text>
<Text style={styles.text} key={item.open}>
OPEN {item.open}
</Text>
<Text style={styles.text} key={item.close}>
CLOSE{item.close}
</Text>
<Text style={styles.text} key={item.volumes}>
VOLUME{item.volumes}
</Text>
<Text style={styles.text} key={item.low}>
LOW {item.low}
</Text>
<Text style={styles.text} key={item.high}>
HIGH{item.high}
</Text>
</View>
)
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.container}>
<View>{movie}</View>
</View>
</TouchableWithoutFeedback>
);
}
const styles = StyleSheet.create({
text: {
color: "black",
backgroundColor: "white",
},
bottomdata:
{
marginTop:400,
backgroundColor:"black",
}
});
The movie is the data displayed on the screen. How do I design it like that? And, at the top it is just the symbol name (same as at the bottom) and close and high values. How can I design my screen like that? I am able to fetch the data but not sure how to design it like that.
You will have to use layout the contents using a views and test which would create something like a table. The below code shows how to position items in a row.
JSX
<View style={{ flex: 1 }}>
<View
style={{
flexDirection: 'row',
backgroundColor: 'black',
alignItems: 'center',
}}>
<Text style={{ flex: 0.5, color: 'white' }}>{item.symbol}</Text>
<Text style={{ flex: 0.5, color: 'white' }} key={item.open}>{item.open}</Text>
<Text
style={{
flex: 0.5,
color: 'white',
backgroundColor: 'red',
marginVertical: 5,
paddingHorizontal: 10,
borderRadius: 10,
}}
key={item.close}>
{item.close}
</Text>
</View>
<View style={styles.bottomdata}>
<Text style={[styles.text, { alignSelf: 'center' }]} key={item.name}>
{item.name}
</Text>
<View style={styles.row}>
<View style={styles.rowItem}>
<Text style={styles.text}>OPEN</Text>
<Text style={styles.text}>{item.open} </Text>
</View>
<View style={styles.rowItem}>
<Text style={styles.text}>CLOSE</Text>
<Text style={styles.text}>{item.close}</Text>
</View>
</View>
<View style={styles.row}>
<View style={styles.rowItem}>
<Text style={styles.text}>LOW</Text>
<Text style={styles.text}>{item.low} </Text>
</View>
<View style={styles.rowItem}>
<Text style={styles.text}>HIGH</Text>
<Text style={styles.text}>{item.high}</Text>
</View>
</View>
<View style={styles.rowItem}>
<Text style={styles.text}>VOLUME</Text>
<Text style={styles.text}>{item.volumes}</Text>
</View>
</View>
</View>
Styles
const styles = StyleSheet.create({
text: {
color: 'white',
},
bottomdata: {
marginTop: 'auto',
backgroundColor: 'black',
},
row: {
flexDirection: 'row',
width: '100%',
},
rowItem: {
width: '50%',
justifyContent: 'space-between',
flexDirection: 'row',
paddingHorizontal: 5,
},
});
You just need to make divs with some alignments and all and just get those data in the relavant field
i want to achieve the following:
i am using a module called react-native-easy-grid
the whole thing is wrapped inside a Grid
with:
blue line being Col
red line being Row
orange line being View
here's my code so far:
<Grid>
<Col>
<Thumbnail circular source={selectedChildAvatar} />
</Col>
<Col size={4}>
<Row style={{ flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-evenly' }}>
{/* name, in review */}
<View>
{!_.isEmpty(selectedChild) && <Text>{selectedChild.firstName}</Text>}
<View
style={{
flexDirection: 'row',
alignItems: 'center'
}}>
<Text note>In review: {inReviewCount <= 0 && 0}</Text>
{inReviewCount > 0 && (
<View
style={{
backgroundColor: 'red',
paddingLeft: 4,
paddingRight: 4,
borderRadius: 50
}}>
<Text note>10</Text>
</View>
)}
</View>
</View>
{/* earnings, penalties */}
<View>
{/* earnings */}
<View
style={{
flexDirection: 'row',
alignItems: 'center'
}}>
<ProgressiveImage
resizeMode='cover'
imageStyle={styles.badge}
style={styles.badge}
source={images.icon.earnings}
/>
<Text style={[styles.digits, styles.earningDigits]}>12</Text>
</View>
{/* penalties */}
<View
style={{
flexDirection: 'row',
alignItems: 'center'
}}>
<ProgressiveImage
resizeMode='cover'
imageStyle={styles.badge}
style={styles.badge}
source={images.icon.penalties}
/>
<Text style={[styles.digits, styles.penaltyDigits]}>12</Text>
</View>
</View>
{/* review button */}
<View style={{ marginVertical: 10 }}>
<Button
small
iconRight
primary
block
disabled={inReviewCount === 0}>
<Text>Review</Text>
<Icon name='arrow-forward' />
</Button>
</View>
</Row>
</Col>
</Grid>
but this is what im getting:
what approach would it be to stretch the wrapped button to 100% of the width?
thank you!
use flex or set width to 100%
<View style={{ marginVertical: 10, flex: 1 }}>
<Button
small
iconRight
primary
block
disabled={inReviewCount === 0}>
<Text>Review</Text>
<Icon name='arrow-forward' />
</Button>
</View>
I am currently trying to implement a kind of 'statistics' overlay page.
I have the following code so far:
<View style={styles.container}>
<MapView
style={styles.map}
...
>
<MapView.Polygon
...
>
</MapView.Polygon>
<MapView.Marker coordinate={{latitude: 47.366965, longitude: 8.545102}}>
<View style={styles.radius}>
<View style={styles.marker}></View>
</View>
</MapView.Marker>
**THIS PART**
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between', bottom: 0}}>
<View style={{width: 100, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 100, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 100, height: 50, backgroundColor: 'steelblue'}} />
</View>
**THIS PART**
</MapView>
<Fab
direction="up"
containerStyle={{ marginLeft: 10 }}
style={{ backgroundColor: '#5067FF' }}
position="bottomRight">
</Fab>
</View>
Now the three containers I get are at the top; how can I focus them to the bottom?
I just want the Icon to be on the left and the text to be on center.
I have this structure:
<View style={styles.mainContainer}>
<Error screen={screen}/>
<View style={styles.headerContainer}>
{back &&
<Icon
raised
name='arrow-back'
onPress={ onBackPress }
containerStyle={styles.back}/>
}
<Text style={styles.header}>{ title }</Text>
</View>
<View style={styles.contentContainer}>
{ children }
</View>
</View>
Kinda like this:
-> MainContainer
--> HeaderContainer
----> Back button
----> Title
mainContainer: {
flex: 1,
flexDirection: 'column',
alignItems: 'stretch',
justifyContent: 'flex-start'
},
headerContainer: {
flex: 1,
padding: 10,
flexDirection: 'row',
// ommited for clarity
},
back: {
alignSelf: 'flex-start'
},
header: {
fontSize: 24,
alignSelf: 'center'
},
But it doesnt work as it produces:
I also tried adding in HeaderContainer:
justifyContent: 'space-between',
and a blank <View />, but the result is not good:
As you can see, it's not centered really.
Edit Produces:
It's not really centered, because we put an imaginary thrid element. Can we do it with only two elemets? One in start and other on center?
Why is it not posible?
Try the following:
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
<View style={{ flex: 1 }}>
{leftContent}
</View>
<View style={{ flex: 1, alignItems: 'center' }}>
{centerContent}
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
{rightContent}
</View>
</View>
Don't forget to set textAlign: 'center' if center component is <Text> or textAlign: 'right' if the right component is Text.
Put your Icon and text in separate Views and asign a flex to it something like this
<View style={styles.mainContainer}>
<Error screen={screen}/>
<View style={styles.headerContainer}>
<View style={{flex:.3,alignSelf:'flex-start}}>
{back &&
<Icon
raised
name='arrow-back'
onPress={ onBackPress }
containerStyle={styles.back}/>
}
</View>
<View style={{flex:.7,alignSelf:'flex-end',alignItems:'center'}}>
<Text style={styles.header}>{ title }</Text>
</View>
</View>
<View style={styles.contentContainer}>
{ children }
</View>
</View>
I think it shoud fix the problem