how to put the amount label and value on left side
and
amount Paid label and value on right side
i am also want the button on front of Date on right side
<FlatList
data={this.state.data}
renderItem={({ item }) =>
<View style={style.listItems}>
<View>
<Text>
<Text style={style.textHeader}>Amount: </Text>
<Text style={style.text}> {item.Amount} </Text>
<Text style={style.textHeader}>Amount Paid: </Text>
<Text style={style.text}> {item.AmountPaid} </Text>
</Text>
</View>
</View>
}
keyExtractor={(item, index) => index.toString()}
/>
how can i fixed this issue
Depending on your existing styles, you would typically solve this by wrapping in a View like so:
<View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Text style={style.textHeader}>Amount: </Text>
<Text style={style.text}> {item.Amount} </Text>
</View>
{...other rows}
</View>
*Note that I discarded the Text element that was wrapping your rows
*Note2: a common issue with Text elements inside a View with flexDirection: row is that if you have very long text in the first Text, it might push the other Text out of your View's bounds. To fix this, apply flexShrink: 1 to the first Text style (in your case, textHeader).
Related
I am trying to include a clickable email within a body of text and I'm finding that when I wrap <Text> with <Pressable> the alignment of the link is higher than the rest of the sentence. Why is this and how can I fix this?
<View style={{padding: 10}}>
<Text>
This is the body of my text
<Pressable onPress={() => Linking.openURL('info#company.com')}>
<Text style={{color: 'blue}}> info#company.com</Text>
</Pressable>
</Text>
</View>
Result:
<View style={{padding: 10}}>
<Text style={{ alignVertical: 'center' }}>
This is the body of my text
<Pressable style={{ flexDirection: 'row', alignItems: 'center' }} onPress={() => Linking.openURL('info#company.com')}>
<Text style={{color: 'blue}}> info#company.com</Text>
</Pressable>
</Text>
</View>
Keep the main Text tag separate. Text doesn't contain any other tags in it. so your code will be like as below:
<View style={{padding: 10, flexDirection:"row"}}> // Add flexDirection:"row"
<Text>This is the body of my text </Text>
<Pressable onPress={() => Linking.openURL('info#company.com')}>
<Text style={{color: 'blue'}}> info#company.com</Text>
</Pressable>
</View>
I hope this will work for you. Let me know if you have any other questions.
I need some text to wrap differently based on the screen width. flexDirection appears to have no effect here:
<Text style={{
flexDirection: breakpoint ? "column" : "row"
}>
<Text>Choose </Text>
<Text>your workout</Text>
</Text>
Can Text elements not apply this style?
You cannot apply flexDirection and you are missing a close '}' in style check this
change
<Text style={{
flexDirection: breakpoint ? "column" : "row"
}>
<Text>Choose </Text>
<Text>your workout</Text>
</Text>
to
<View style={{
flexDirection: breakpoint ? "column" : "row"
}}>
<Text>Choose </Text>
<Text>your workout</Text>
</View>
I have some text with onPress wrapped in a TouchableOpacity.
<TouchableOpacity onPress={doNavigateToComment}>
<View>
<Text>
<Text onPress={doNavigateToUser}>
#{user.username}
</Text>{" "}
liked your comment.
</Text>
</View>
... more stuff ...
</TouchableOpacity>
Tapping anywhere on that text will trigger doNavigateToComment. When the user taps the username it should call doNavigateToUser Is there a way to give the underlying Text onPress priority? It seems to only recognize the outer touchable wrapper.
I modified your code a little bit, but I am getting exactly your intended behavior.
doNavigateToComment() {
console.log('doNavigateComment');
}
doNavigateToUser() {
console.log('doNavigateToUser');
}
<View style={styles.container}>
<TouchableOpacity
onPress={() => this.doNavigateToComment()}>
<View style={{ backgroundColor: 'red', height: 40, justifyContent: 'center', alignItems: 'center' }} >
<Text>
<Text
style={{ backgroundColor: 'blue' }}
onPress={() => this.doNavigateToUser()}>
Username
</Text>{' '}
liked your comment.
</Text>
</View>
</TouchableOpacity>
</View>
Pressing on Username (blue area) will print doNavigateToUser and pressing the red area will print doNavigateComment.
You probably just need to adapt your styling.
Screenshot:
Working expo:
https://snack.expo.io/SkOzaxdiV
I figured it out. I was importing TouchableOpacity from react-native-gesture-handler instead of react-native. Once I fixed that import the taps started working correctly.
I created a custom dropdown component which has a transparent Scrollview with ToucableOpacity elements. However the onPress on them are not working, even though, zIndex is making them appear on top of everything else.
In the main screen, I created two elements, 1 header containing the Dropdown and 2nd one is the body which contains the rest. Its code is given below:
<View style={styles.body, {zIndex:0}}>
<View style={[styles.header,{zIndex:1}]}>
<Text style={styles.header_text}>Search In </Text>
<Dropdown items={CATEGORIES}/>
</View>
<View style={[styles.main,{zIndex:-1}]}>
<Text style={{backgroundColor:'blue'}}>I am the body</Text>
</View>
<View>
I have included the render event markup of the Dropdown element. Its code is given below:
<View style={styles.container}>
<TouchableOpacity style={styles.main_container} onPress={this.animate}>
<Text style={styles.text}>{this.state.selectedCategoryText}</Text>
<Text>-V-</Text>
</TouchableOpacity>
<View style={{zIndex:3}}>
<Animated.View style={[styles.animated_container,{opacity: this.opacity, zIndex:4}]}>
<ScrollView style={{height:60,zIndex:4}}>
{ this.data.map( (item, i)=>
<TouchableOpacity
style={{zIndex:5}}
disabled={this.state.disabled}
key={i}
onPress={()=>this.selectItem(i)}>
<Text >{item} {i}</Text>
</TouchableOpacity>
)}
</ScrollView>
</Animated.View>
</View>
</View>
Styles for Dropdown are:
container:{
zIndex:2
},
main_container:{
flexDirection: 'row',zIndex:2
},
text:{
fontFamily: fontStyles.PoppinsRegular,
fontSize: moderateScale(14)
},
animated_container:{
backgroundColor: colors.secondaryWhiteColor,
position: 'absolute',
top: '100%',
width: '100%',
zIndex:3
}
Screenshot is given as. zIndex makes the elements appear on top but i cannot trigger onPress on Toucable opacities.
<View style={styles.item} onPress={this._onPress}>
<View style={styles.itemLeft}>
some
</View>
<View style={styles.itemRight}>
some
</View>
<ReviewInNewsItem/> <<<<<< I want to move this to next line.
</View>
item View's style is below.
item: {
flexDirection:row,
borderBottomWidth:1, borderBottomColor: 'grey'
}
So, Views in item is deployed horizontal.
But I want to move ReviewInNewsItem to next line.
Surely, I can move ReviewInNewsItem out of the item but the item have border. I want ReviewInNewsItem is in border of item.
If I'm using web, I'll use this.
clear: both;
Is there similar property like this in React-Native?
I can't find property like clear:both in React-Native.
So I've changed like below.
<View style={styles.item} onPress={this._onPress}>
<View style={{flexDirection: 'row'}}> // Add
<View style={styles.itemLeft}>
some
</View>
<View style={styles.itemRight}>
some
</View>
</View>
<ReviewInNewsItem/>
</View>
And I've remove flexDirection:row in style of item.
item: {
borderBottomWidth:1, borderBottomColor: 'grey'
}
you can use another row for another line
<View style={styles.item} onPress={this._onPress}>
<View style={style.row}>
<View style={styles.itemLeft}>
some
</View>
<View style={styles.itemRight}>
some
</View>
</View>
<View style={style.row}>
<ReviewInNewsItem/> <<<<<< your next line
</View>
</View>
now row has a style of flexDirection:'row' . so everything is on one line similar next row will display in next line