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.
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 have a Card tag that contains some Text tags in the card header, the texts are displayed inline however i am trying to place them under each other.
return (
<Card style={style.card}>
<CardItem header style={style.header}>
<Thumbnail source={{uri: `${link}images/${player.photo}`}}/>
<Text style={{fontSize: 18,marginLeft:10}}>{player.username}</Text>
<Text style={{fontSize: 16,marginLeft:10}}>{player.fullName}</Text>
<Text style={{fontSize: 14,marginLeft:10}}>{player.position}</Text>
</CardItem>
</Card>
);
If you want to sort text vertically, you can use flexDirection: "column" .
and If you want to create lines for every text, you can use textDecorationLine. It can also be styled or color
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Change code
</Text>
<Text style={styles.paragraph}>
Change code
</Text>
<Text style={styles.paragraph}>
Change code
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
flexDirection: "column" // vertical alignment
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
textDecorationLine: 'underline',
textDecorationColor: 'blue',
textDecorationStyle: 'solid'
},
});
I have buttons that are not located at the same place in iOS and Android.
In Android they are at the middle bottom of the screen (it is what I expect) but in iOS they are at the top of the screen.
Do you know how I can put buttons in iOS at the same place as Android ?
import { Button } from 'react-native-elements';
...
<ImageBackground
key={`image${i}`}
source={{uri: image}}
style={{ width: deviceWidth, justifyContent:'center', alignItems: 'center', flex: 1 }}>
<View style={{flex: 1}}></View>
<Text style={{flex: 1}}> {textToDisplayEnglish[i]} </Text>
<Button
title={textA[i]}
style={{flex: 1}}
type={typeButton[i]}
onPress={() => this.triggerAction(i)}
/>
<View style={{flex: 1}}></View>
</ImageBackground>
you have too many flex:1. It'd be best to avoid using too many of them,unless you need to. try something like this:
import { Button } from 'react-native-elements';
...
<ImageBackground
key={`image${i}`}
source={{uri: image}}
style={{ width: deviceWidth, justifyContent:'center', alignItems: 'center', flex: 1 }}>
<Text> {textToDisplayEnglish[i]} </Text>
<Button
title={textA[i]}
type={typeButton[i]}
onPress={() => this.triggerAction(i)}
/>
</ImageBackground>
hope it helps!
I need this screen to show all the contents that is inside the scrollview, I've tried everything setting ScrollView's flexGrow to 1, parent view's flex to 100. The scrollview is scrolling down until iteration of Bark Central Dog Park & Cafe but it is cut off to half and can't scroll any further, also I noticed that the text HELP ME can not be found too. Thank you so much, as this problem has been bothering me and my progress in react native.
Please tell me what I should do and where I have gone wrong. Thank you again!
NotificationScreen.js
export default class NotificationScreen extends Component
{
static navigationOptions = ({ navigation }) => {
const { state } = navigation;
const {} = state;
return {
header: null,
};
}
render() {
return (
<View style={styles.parentContainer}>
<View style={{flexDirection: 'row', marginLeft: '5%', marginTop: '5%'}}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('JobFeedScreen')}>
<Entypo name="chevron-thin-left" color={Colors.red} size={30} />
</TouchableOpacity>
<View style={{marginLeft: 80,}}>
<Text style={{ fontFamily: 'CoreSansD65Heavy',color: Colors.semiGray, fontSize: 25,}}> Ty, Next</Text>
</View>
<TouchableOpacity onPress={()=> this.props.navigation.navigate('LaunchScreenStack')} style={{marginLeft: 87,marginRight: '5%',}}>
<SimpleLineIcons name='bubbles' color={Colors.red} size={30} />
</TouchableOpacity>
</View>
<View style={{marginLeft: '5%'}}>
<Text style={styles.notificationHeader}> Notifications</Text>
</View>
<ScrollView horizontal={false} overScrollMode={'auto'}>
<TouchableOpacity style={styles.notifPlace}>
<View style={styles.notifTextPlace}>
</View>
<Text style ={styles.text}>Anteriore, Inc.</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.notifPlace}>
<View style={styles.notifTextPlace}>
</View>
<Text style ={styles.text}>The Palace Manila</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.notifPlace}>
<View style={styles.notifTextPlace}>
</View>
<Text style ={styles.text}>Boozy.ph</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.notifPlace}>
<View style={styles.notifTextPlace}>
</View>
<Text style ={styles.text}>Pet warehouse PH</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.notifPlace}>
<View style={styles.notifTextPlace}>
</View>
<Text style ={styles.text}>Bark Central Dog Park & Cafe</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.notifPlace}>
<View style={styles.notifTextPlace}>
</View>
<Text style ={styles.text}>Pet warehouse PH</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.notifPlace}>
<View style={styles.notifTextPlace}>
</View>
<Text style ={styles.text}>Bark Central Dog Park & Cafe</Text>
</TouchableOpacity>
<Text> PLEASE HELP ME </Text>
<Text> PLEASE HELP ME </Text>
<Text> PLEASE HELP ME </Text>
<Text> PLEASE HELP ME </Text>
</ScrollView>
</View>
);
}
NotificationScreenStyles.js
import { StyleSheet } from 'react-native'
import { Metrics, ApplicationStyles, Colors } from '../../Themes/'
export default StyleSheet.create({
...ApplicationStyles.screen,
container: {
paddingBottom: Metrics.baseMargin
},
logo: {
marginTop: Metrics.doubleSection,
height: Metrics.images.logo,
width: Metrics.images.logo,
resizeMode: 'contain'
},
centered: {
alignItems: 'center'
},
parentContainer: {
flex:1,
backgroundColor: Colors.white
},
notificationHeader: {
justifyContent: 'flex-start',
fontFamily: 'CoreSansD45Medium',
marginTop: 40,
marginBottom: 20,
fontSize: 20,
color: Colors.gray,
textAlign: 'left',
},
notifPlace: {
flexGrow: 0,
flexDirection: 'row',
backgroundColor: Colors.white,
width: '100%',
height: '12%',
borderWidth: 0.5,
borderColor: Colors.buttonGray,
},
notifTextPlace: {
width:60,
height:60,
borderRadius: 60/2,
backgroundColor:Colors.buttonGray ,
alignSelf: 'center',
justifyContent: 'flex-start',
marginLeft: '5%',
marginRight: 10,
marginBottom: 20,
marginTop: 20,
},
text: {
fontFamily: 'CoreSansD45Medium',
fontSize: 15,
alignSelf: 'center',
color: Colors.gray,
marginBottom: 10,
},
text2: {
alignSelf: 'center',
fontFamily: 'CoreSansD35Regular',
fontSize: 15,
marginBottom: 10,
},
})
Screenshot 1:
SC1
Screenshot 2: ( it only scrolls up to here )
SC2
This is a known issue in scroll view of react native, use a paddingBottom : 100 in the styles of the scroll view.
The 100 can be set to any value according the content you have
Please provide your StyleSheet and screenshot of what you are seeing.
Test to add
height = Dimensions.get('window').height
to your parentContainer
Also try paddingBottom to your scrollview StyleSheet
Just ran into this problem and what finally fixed it for me was making sure my scrollview wasn't the last component in my layout. So I added an invisible component (with a set height to offset the amount of scrollview content I couldn't see) right after my scrollview.
In my case, I have added a height to the wrapped component of the ScrollView.It worked for me
eg:-
<View style={{ height: hp(500) }}>
<ScrollView showsVerticalScrollIndicator={false}>
{filteredItems.map((item) => <Text style={styles.listItemText}>{item.title}</Text>)}
</ScrollView>
</View>
What fixed it for me was adding contentContainerStyle={{flexGrow: 1,paddingRight:100}} to my scrollview.
Hope it helps someone too!!
just add like this :
<ScrollView contentContainerStyle={{ width:'100%',height:'500%'}}>
I am trying to display Text components wrapped inside View components inline. With inline, I mean that the text should be displayed next to each other at all time. This is the best "solution" that I have atm:
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
<View>
<Text>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</Text>
</View>
<View>
<Text style={{ fontWeight: 'bold' }}>b</Text>
</View>
<View>
<Text>cccccccccccccccccccccccccccccc</Text>
</View>
{/* Possibly an icon, or text with a different lineheight...*/}
</View>
But it doesn't work all the time! This is what it renders out:
It does work when all strings are only one line long though.
Now, I know what is going on, a View is always a rectangle, thus in my example, the view that contains the first string is as wide as the first line of the letters a and as high as the two rows of letters a.
I am looking for a way around this, while still using Views. So something like this:
<Text>
<Text>...</Text>
<Text>...</Text>
</Text>
is unfortunately not the answer. It will not work in my use-case because I need to have the ability to display superscript, which appears to only be possible by changing the line height, and I would like to be able to add some inline icons (using react-native-vector-icons).
I have been struggling with this seemingly easy issue for way too long now, so at last this cry for help. Anyone has an idea? (If there is a way to display inline superscript, that'd also work, then I can nest Text components but I guess there isn't)
you need to put text inside each other
<View style={{ flexDirection: 'row' }}>
<Text>aaaaaaaaaaaaaaaaaaaaaaaaaasdadasdadaaaaaaaaaaaaaaaaaaaaaaaa
<Text style={{ fontWeight: 'bold' }}>asdadasdab
<Text>cccccccccccccccccccccccccccccc</Text>
</Text>
</Text>
</View>
Try using display: inline-block; in the style section
Your code is missing the flex activator. This will do the trick:
<View style={{ flex: 1, flexDirection: 'row'}}>
<Text>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</Text>
<Text style={{ fontWeight: 'bold' }}>b</Text>
<Text>cccccccccccccccccccccccccccccc</Text>
</View>
You have to specify when you're working with FlexBox layouts.
Unfortunately, your question was not clear. But that's what I understood from your question
<View style={{ flex: 1}}>
<Text>aaaaaaaaaaaa</Text>
<View style={{ flexDirection: 'row', justifyContent: "flex-start"}}>
<Text style={{ fontWeight: 'bold' }}>b</Text>
<Text>ccccccccccccccccccc</Text>
</View>
</View>
I found out your solution with define multi-row.
export default class App extends React.Component {
render() {
return <View style={styles.container}>
<View ><Text >aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</Text></View>
<View ><Text style={{fontWeight: 'bold'}}>bbbbb</Text></View>
<View ><Text >ccccc</Text></View>
</View>;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column'
}
});
and you can hidden overflow text with below code
export default class App extends React.Component {
constructor(){
super()
this.state = {
mytextvar :'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
maxlimit:50
};
}
render() {
return <View style={styles.container}>
<View ><Text >{((this.state.mytextvar).length > this.state.maxlimit) ?
(((this.state.mytextvar).substring(0,this.state.maxlimit-3)) + '...') :
this.state.mytextvar}</Text></View>
<View ><Text style={{fontWeight: 'bold'}}>bbbbb</Text></View>
<View ><Text >ccccc</Text></View>
</View>;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column'
}
});