I tried to load a custom font for my react-native app that i'm developing with expo but i don't know how to load a font in a simplier way for the whole screen container.
Currently i used the offical expo doc: Expo Custom Font Documentation
They said to use a Font.loadAsync() function and then use the
this.state.fontLoaded? like this:
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
{
this.state.fontLoaded ? (
<Text style={{ fontFamily: 'open-sans-bold', fontSize: 56 }}>
Hello, world!
</Text>
) : null
}
</View>
but did it exist a solution for applying the font on a container for example? I think it's not easy to e forced to surround EACH Text elements with the same function...
Currently the font is loading on ONE text element, but i would like to be able to easily use my font on a container, or many Text elements at once.
Here is my code:
state = {
fontLoaded: false,
};
async componentDidMount() {
await Font.loadAsync({
'ubuntu-medium': require('../assets/fonts/Ubuntu-Medium.ttf'),
});
this.setState({ fontLoaded: true });
}
render() {
return (
<View style={styles.main_container}>
<View style={styles.inner_main_container}>
<View style={styles.top_links_container}>
<View style={styles.profile_and_arrow_container}>
<Icon
name='arrow-back'
color='white'
style={styles.icon} />
{
this.state.fontLoaded ? (
<Text style={styles.top_links_profile}>Profil</Text>
) : null
}
</View>
<View style={styles.profile_edit_container}>
<Text style={styles.top_links_edit}>Editer</Text>
</View>
</View>
<View style={styles.profile_avatar_container}>
<Avatar
rounded
size='xlarge'
source={{ uri: 'https://randomuser.me/api/portraits/men/27.jpg' }}>
</Avatar>
</View>
<View style={styles.profile_infos_container}>
{
this.state.fontLoaded ? (
<Text style={styles.user_name}> Dupont Jean </Text>
) : null
}
<Text style={styles.user_title}> CSD - Product Owner </Text>
</View>
<View style={styles.subprofile_infos_container}>
<View style={styles.user_experience}>
<Text>Experience </Text>
<Text style={styles.user_experience_years}> 7ans</Text>
</View>
<View style={styles.user_grade}>
<Text>Grade </Text>
<Text style={styles.user_grade_letter}> D </Text>
</View>
</View>
<View numberOfLines={6}>
<Text style={styles.user_bio}> Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard…</Text>
</View>
<View>
<Text style={styles.user_bio_see_more_link}> Voir plus</Text>
</View>
<Divider style={styles.divider} />
<View style={styles.bottom_container}>
<View style={styles.bottom_cm_text_info_container}>
<Text style={styles.bottom_cm_text_info}>Carrière Manager d'Evelyne</Text>
<Text style={styles.bottom_cm_text_user_name}>Jerôme Durand</Text>
</View>
<View style={styles.bottom_cm_avatar}>
<Avatar
rounded
size='small'
source={{ uri: 'https://randomuser.me/api/portraits/men/27.jpg' }}
/>
<Icon
name='right'
type='antdesign'
color='grey'
onPress={() => console.log('hello button cm view')}
/>
</View>
</View>
</View>
</View>
);
}
}
Finally i found a nicely working solution.
I had to create a custom component like this one:
1. Create a custom component TextCustom.js for example and put this into:
import React from 'react'
import { Text, StyleSheet, View, ActivityIndicator } from 'react-native'
import * as Font from 'expo-font'
export default class TextCustom extends React.Component {
constructor(props) {
super(props)
this.state = {
loading: true,
}
}
async componentWillMount() {
await Font.loadAsync({
'Ubuntu': require('./../assets/fonts/Ubuntu-Medium.ttf')
})
this.setState({ loading: false })
}
render() {
if (this.state.loading) {
return <ActivityIndicator/>
}
return (
<View>
<Text style={[styles.defaultStyle, this.props.style]}>
{this.props.children}
</Text>
</View>
)
}
}
const styles = StyleSheet.create({
defaultStyle: {
fontFamily: 'Ubuntu'
},
})
Don't forget to import Font from Expo (for people using Expo)
2. in the component you want to use the custom font, simply import and use the newly created component:
import TextCustom from './TextCustom'
import TextBoldCustom from './TextBoldCustom' (if you want to use a Bold or italic font)
and use it:
<View>
<TextCustom style={styles.info_welcome}>Bonjour</TextCustom>
</View>
The documentation says there is no way to set the font across the entire app.
The recommended way to use consistent fonts and sizes across your application is to create a component MyAppText that includes them and use this component across your app. You can also use this component to make more specific components like MyAppHeaderText for other kinds of text.
More info and example on the Expo <Text> docs:
https://docs.expo.io/versions/latest/react-native/text/
--
As far as loading custom font files, I'd recommend using SplashScreen.preventAutoHide() to keep the splash screen visible while you load the fonts in a function via <AppLoading>. This provides a smooth loading experience, and ensures your fonts are available when the rest of your app is eventually rendered.
Related
I want to make a 2 by 2 table from the two given arrays. The table should look like this:
I have to use 'map' function from ES6. My code looks below.
import React, {Component} from 'react';
import {Text, View} from 'react-native';
const array1 = ['1','2'];
const array2 = ['X','Y']
class Table extends Component{
render() {
return (
<View style={{borderStyle : 'solid',justifyContent : 'center' }}>
{array1.map((arr1) => (
<View>
{array2.map((arr2) => (
<View>
<Text>
{arr2} {arr1}
</Text>
</View>
))}
</View>
))
}
</View>
);
}
}
export default Table;
At this moment I am getting a output like - X1 X2 Y1 Y2
I need to use flex. What do I do?
You are almost there. You just need to make sure that the last level of views are flex and have a direction of 'row'.
return (
<View style={{ borderStyle: 'solid', justifyContent: 'center' }}>
{array1.map((arr1) => (
<View style={{flexDirection: 'row'}}> {/* This is the main line you need to change */}
{array2.map((arr2) => (
<View style={{padding: 5, borderColor: 'black', borderWidth: 1}}>
<Text style={{color: 'red'}}>
{arr2}{arr1}
</Text>
</View>
))}
</View>
))}
</View>
);
You can look at a working snack example here.
I have a custom header view and I have call this inside my class but for some reason it is not showing.
export default class App extends Component<Props> {
customHeader(){
<View style={{height:80, width:'100%', backgroundColor: 'blue'}}>
<TouchableOpacity>
<Text>Header</Text>
</TouchableOpacity>
</View>
}
render() {
return (
<View style={styles.container}>
//Calling my custom header
{this.customHeader()}
</View>
);
}
}
I feel like my code is correct but the header is not showing. Any idea why?
Your customHeader function must return something. Right now it just runs jsx and returns nothing. Fix it like this for example:
customHeader(){
return (
<View style={{height:80, width:'100%', backgroundColor: 'blue'}}>
<TouchableOpacity>
<Text>Header</Text>
</TouchableOpacity>
</View>
)
}
I'm trying to create IndicatorViewPager with three parts.
the problem that I can't see the content of each page. Below my code.
export default class Reservations extends Component {
render() {
return (
<View style={{flex:1}}>
<IndicatorViewPager
style={{flex:1, paddingTop:20, backgroundColor:'white'}}
indicator={this._renderTitleIndicator()}
>
<View style={{backgroundColor:'cadetblue'}}>
<Text>page one</Text>
</View>
<View style={{backgroundColor:'cornflowerblue'}}>
<Text>page two</Text>
</View>
<View style={{backgroundColor:'#1AA094'}}>
<Text>page three</Text>
</View>
</IndicatorViewPager>
</View>
);
}
_renderTitleIndicator() {
return <PagerTitleIndicator titles={['one', 'two', 'three']} />;
}
I have the title for each part but the content is hidden. Thank you for your help.
I am trying to create a two column grid using flex. One column will be used to display a word or phrase and the second column will be used to translate the first column. Here is a link: http://imgur.com/nZGo8pb to give you a visual idea on what I am trying to achieve.
I am unable to get two columns side by side. I am only able to have my words appear on top of each other. This is best attempt. A huge failure.http://imgur.com/a/ICApr
My code is:
nent} from 'react';
import { Text, View,StyleSheet,Image,TextInput,ListView} from 'react-native';
class AddWords extends Component{
state = {words:['iku','konkai','kaikan'],
word:'',
EnglishWords:['go','this time','next time']
}
renderList(tasks){
return(
tasks.map((task) =>{
return(
<View key={task} style={styles.item}>
<Text>
{task}
</Text>
<Text>
</Text>
</View>
)
})
)
}
renderEnglishWords(english){
return(
english.map((english) =>{
return(
<View key={english} style={styles.item2}>
<Text>
{english}
</Text>
<Text>
</Text>
</View>
)
})
)
}
addWord(){
let words = this.state.words.concat([this.state.word]);
this.setState({words})
}
render(){
return(
<View style={styles.container}>
<TextInput
style={styles.input}
onChangeText={(word) => {
this.setState({word})
}}
onEndEditing={()=>this.addWord()}
/>
<View style={styles.wordContainer}>
{this.renderList(this.state.words)}
{this.renderEnglishWords(this.state.EnglishWords)}
<View style={styles.item2}>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,
borderWidth:3,
borderColor:'green',
flexDirection:'column',
paddingTop:10
},
wordContainer:{
flexDirection: 'column',
borderColor:'blue',
borderWidth:2
},
input:{
height:60,
borderWidth:1,
borderRadius:5,
borderColor:'black',
textAlign:'center',
margin:10,
paddingTop:20,
paddingBottom:10
},
item:{
borderColor:'red',
borderWidth:2
},
item2:{
borderColor:'black',
borderWidth:2,
flexDirection:'column',
}
})
export default AddWords;
Any help will be greatly appreciated.
Thanks.
You need to wrap both inner containers in another <View> with the following style:
<View style={styles.container}>
<TextInput
style={styles.input}
onChangeText={(word) => {
this.setState({ word })
}}
onEndEditing={this.addWord}
/>
<View style={{ flexDirection: 'row', flex: 1 }}>
<View style={styles.wordContainer}>
...
</View>
<View style={styles.item2}>
...
</View>
</View>
</View>
It's because the flexDirection in styles.wordContainer is set to 'column', it should be set to 'row'.
Check out this link on flex-direction examples.
I am wondering how I would go about inserting an image into this??
I am also wondering whether this is javascript implemented on css or css implemented in javascript?
It was automatically generated by React Native as a default app starter pack and we are just getting to grips with the basics...
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View
} from 'react-native';
class VLDB extends Component {
render() {
return (
<View style={styles.container}>
<Text style = {styles.welcome}>
VLDB SQL Cheat Sheet!
</Text>
<Text style={styles.welcome}>
Welcome to the SQL Cheat Sheet!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('VLDB', () => VLDB);
Cheers, Luke.
To add an image to this, you first need to import in the image component
import React, {
AppRegistry,
Component,
Image,
StyleSheet,
Text,
View
} from 'react-native';
Then you add the image as described in the documentation by either referencing a locally bundled image or a remote image like so...
class VLDB extends Component {
render() {
return (
<View style={styles.container}>
<Image
style={styles.icon}
source={require('./myIcon.png')}
/>
<Image
style={styles.logo}
source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
/>
<Text style = {styles.welcome}>
VLDB SQL Cheat Sheet!
</Text>
<Text style={styles.welcome}>
Welcome to the SQL Cheat Sheet!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}