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.
Related
as the title states, I am attempting to implement a modal in such way that it only takes up some part of the screen so as to allow the user to be able to interact with some of the background components. For reference I am using the react-native-modal library. The current screen looks like this:
I would like to be able to interact with the icons in the header (both are already wrapped in Touchable components so already clickable). However when the Modal is visible I am unable to interact with those.
My implementation is as such:
<Modal
isVisible={showModal}
style={styles.modalContainer}
customBackdrop={<CustomBackdrop />}
onBackdropPress={() => setShowModal(false)}
animationIn="fadeInDown"
animationOut="fadeOutUp"
>
<View style={styles.container}>
<TouchableOpacity style={styles.itemContainer}>
<Text style={styles.label}>A</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.itemContainer}>
<Text style={styles.label}>B</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.itemContainer}>
<Text style={styles.label}>C</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.itemContainer}>
<Text style={styles.label}>D</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
styles.itemContainer,
{ borderBottomLeftRadius: 16, borderBottomRightRadius: 16 },
]}
>
<Text style={styles.label}>E</Text>
</TouchableOpacity>
</View>
</Modal>
And my custom background looks like this:
<View
style={{
marginTop: hp("50%"),
flex: 1,
}}
>
<TouchableWithoutFeedback onPress={() => setShowModal(false)}>
<View
style={{ backgroundColor: "#000", height: hp("50%"), width: wp("100%") }}
/>
</TouchableWithoutFeedback>
</View>
I want to place a text and a toggle button in such a manner that the Text should be there at flex-start and the toggle would be there at the flex end. I have come up with the following code :
<TouchableRipple onPress={() => { }}>
<View style={{flexDirection: 'row'}}>
<Text style={{ fontSize: 18, fontWeight: "bold" }}>
<FontAwesome5 name="bookmark" size={16} /> Booked
</Text>
<View pointerEvents="none" style={{justifyContent: "flex-end"}}>
<Switch value={true} />
</View>
</View>
</TouchableRipple>
But the view is coming as follows:
How can I put the same at the end ?
Any help would be appritiated.
Here try this
<TouchableRipple onPress={() => { }}>
<View style={{flexDirection: 'row'}}>
<View style={{flex:1}}> //wrap Text inside view with flex 1
<Text style={{ fontSize: 18, fontWeight: "bold" }}>
<FontAwesome5 name="bookmark" size={16} /> Booked
</Text>
</View>
<View pointerEvents="none" style={{flex:1,justifyContent: "flex-end"}}> //add flex 1 here
<Switch value={true} />
</View>
</View>
</TouchableRipple>
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>
render() {
return (
<View style ={styles.container}>
{/*for header*/}
<View style = {{flexDirection:'row',justifyContent:'space-between',alignItems: 'center',width:'100%',height:'09%',backgroundColor: '#009AFF'}}>
<TouchableWithoutFeedback onPress={() =>this.props.navigation.goBack()}>
<Image style={{width: 25, height: 25,margin:10}} source={require('../assets/clinic/left-arrow.png')} />
</TouchableWithoutFeedback>
<View>
<Text style={{fontSize: 21,fontWeight: 'bold', color: "white",paddingRight:25}}>Dummy</Text>
</View>
<View>
</View>
</View>
{/*for main content*/}
<ScrollView style={{width:'100%',height:'90%'}} contentContainerStyle={{ flexGrow: 1 }} nestedScrollEnabled={true}>
<View>
<View style = {{width:'100%',height:'45%',backgroundColor: '#009AFF',justifyContent:'center',alignItems: 'center'}}>
<Text style={{fontSize: 18,fontWeight: 'bold', color: "white",paddingRight:25}}>John Alison</Text>
</View>
<TouchableOpacity
style={styles.submitButton}>
<Text style={styles.submitText}>Update</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.submitButton}>
<Text style={styles.submitText}>Update</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.submitButton}>
<Text style={styles.submitText}>Update</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
)
}
Above code i have implemented in react native for learning purposes.But in above code ScrollView does not works,means it does not scrolls,why? i have tried many possible ways like setting flex and flexGrow equal to 1,enabling nested scrolling but it does not works.What is wrong with my code
I would like to style text as superscript in React Native. How would this be accomplished? Is there a way to make use of the Javascript sup() string method to return a string as superscript within a <Text> object?
I got this working for me using a view container and flex.
<View style={{flexDirection: 'row', alignItems: 'flex-start'}}>
<Text style={{fontSize: 20, lineHeight: 30}}>10</Text>
<Text style={{fontSize: 11, lineHeight: 18}}>am</Text>
</View>
Here is the link to this in action https://repl.it/Haap/0
Cheers!
i just do this to achieve superscript in my case
<View style={{ flexDirection: 'row' }}>
<Text style={{ fontSize: 30 }}>e</Text>
<Text style={{ fontSize: 10 }}>x</Text>
</View>
Just use fontSize, lineHeight, textAlignVertical:
<Text style={{fontSize:20, lineHeight:22}}>
foo
<Text style={{fontSize:20 * 1.6, lineHeight:22 * 1.1, textAlignVertical: 'top'}}>
bar
</Text>
</Text>
Javascripts sub() function will only surround your text with <sub></sub> tags and they are recognized as text in RN. You would need to build your own function like:
export default class Test extends Component {
sub = (base, exponent) => {
return <View style={{flexDirection: 'row'}}>
<View style={{alignItems: 'flex-end'}}>
<Text style={{fontSize: 13}}>{base}</Text>
</View>
<View style={{alignItems: 'flex-start'}}>
<Text style={{fontSize: 10}}>{exponent}</Text>
</View>
</View>
}
render() {
return(
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>{(() => 'hello'+'world'.sub())()}</Text>
{(() => this.sub('hello','world'))()}
{(() => this.sub('2','6'))()}
</View>
);
}
}
The best method I found for this problem is not ideal, but it works cross-platform. The character I needed to superscript is the ® which some fonts have superscripted by default. So, I simply included a similar font family with the superscripted ® and it worked like magic.