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>
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.
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).
I want to send <Text> World </Text> end of the screen.
This is my code :
<Text style={{position: 'relative}}>
<Text>Hello</Text> <Text style={{position: 'absolute', right:0}>World</Text>
</Text>
I guess right: 0 sends 'world' end of the in this text <Text style={{position: 'absolute', right:0}>World</Text>. How do I send child <Text> end of parent <Text> ?
Edited :
<TouchableOpacity>
<Text>
<Text>Hello</Text> <Text>World</Text>
</Text>
</TouchableOpacity>
Try this:
<View style={{ flex: 1, flexDirection: 'row',justifyContent: 'space-between' }}>
<Text>Hello</Text>
<Text>World</Text>
</View>
EDIT
This should work, you don't need a parent <Text>. This TouchableOpacity will act if you click both text's
<TouchableOpacity>
<View style={{ flex: 1, flexDirection: 'row',justifyContent: 'space-between' }}>
<Text>Hello</Text>
<Text>World</Text>
</View>
</TouchableOpacity>
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