import React, {useEffect, useState} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import * as Font from 'expo-font';
export default function App() {
const [isFontReady,
setFontReady] = useState(false)
useEffect(() => {
async function loadFont() {
return await Font.loadAsync({sans: require('./assets/fonts/sans.ttf')});
}
loadFont().then(() => {
setFontReady(true)
});
}, []);
return (
<View>
{isFontReady && <Text style={{
fontFamily: 'sans'
}}>
Silence is Golden.
</Text>}
</View>
);
}
Drives me crazy; I can't find the reason why fontFamily style ex: Tahoma has got no effect on a font?
The code looks OK and I even restarted the project by typing >'expo start -c' and reinstalled the packages but no change!
Related
An extension tells me that it costs 130.8k, so I feel like importing tw in every component makes the performance of my app slow or it doesn't have a significant effect on the app?.
Sample code:
import React from "react";
import { AntDesign } from "#expo/vector-icons";
import { COLOR } from "../../assets/variables";
import tw from "twrnc";
import { Text, View } from "react-native";
export const CreatePostBtn = () => {
return (
<View
style={tw.style(
"absolute",
"bottom-10",
"right-3",
"rounded-full",
"p-5",
"bg-gray-400",
)}
>
<AntDesign name="plus" size={24} color={COLOR.white} />
</View>
);
};
I followed all instructions to install #tensorflow/tfjs-react-native given at
https://www.npmjs.com/package/#tensorflow/tfjs-react-native/v/0.3.0
this is my app.js file:
import React, { useState, useEffect } from 'react';
import * as tf from '#tensorflow/tfjs';
import '#tensorflow/tfjs-react-native';
import {
SafeAreaView,
StatusBar,
StyleSheet,
Text,
View,
} from 'react-native';
export default () => {
const [ready, setReady] = useState(false)
useEffect(() => {
const load = async () => {
await tf.ready()
setReady(true)
}
load()
})
return (
<SafeAreaView style={{ backgroundColor: '#fff', flex: 1 }}>
<StatusBar barStyle={'dark-content'} />
<View>
<Text>hello</Text>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
});
App crashes when tf.ready() is called. no error is logged in console.
If i comment tf.ready() everything works fine. am i doing something wrong?
This is my package.json file
image of package.json file
How do i test if this package is installed correctly?
any help from your side will be appreciated.
I had this issue when running my app with expo on an android device, what solved it for me was setting the backend with :
await tf.setBackend('cpu');
before
tf.ready();
It might solve your problem as well
I'm doing a project in react native but i have an issue with my expo google font. I'm pretty new to expo so I have basically no idea on how to fix this bug. The bug only appears on IOS (don't know about android) and works fine on web. The bug appears to be inside useFonts.js which is a file that's part of the expo-google-font.
One of my files using expo-google-font.
import React from "react";
import { Text, TouchableOpacity, Image, StyleSheet } from "react-native";
import { useFonts, Inter_300Light } from "#expo-google-fonts/inter";
import { DefaultWidth } from "./DefaultWidth";
export default function AppleButton() {
let [fontsLoaded] = useFonts({ Inter_300Light });
if (!fontsLoaded) {
return null;
}
return (
<TouchableOpacity style={styles.appleBtnWrapper}>
<Image
style={styles.appleBtnImage}
source={require("../../../assets/third-party-icon/apple.png")}
/>
<Text style={styles.appleBtnText}>Fortsæt med Apple</Text>
</TouchableOpacity>
);
}
const styles = StyleSheet.create({
appleBtnText: {
color: "#fff",
fontWeight: "bold",
textAlign: "center",
fontFamily: "Inter_300Light",
fontSize: 16,
},
});
The useFonts.js use useEffect. These are the bugs I'm getting:
Here is the useFonts.js
import { useEffect, useState } from 'react';
import { loadAsync } from 'expo-font';
/**
* Load a map of custom fonts to use in textual elements.
* The map keys are used as font names, and can be used with `fontFamily: <name>;`.
* It returns a boolean describing if all fonts are loaded.
*
* Note, the fonts are not "reloaded" when you dynamically change the font map.
*
* #see https://docs.expo.io/versions/latest/sdk/font/
* #example const [loaded, error] = useFonts(...);
*/
export function useFonts(map) {
let [loaded, setLoaded] = useState(false);
let [error, setError] = useState(null);
useEffect(() => {
loadAsync(map)
.then(() => setLoaded(true))
.catch(setError);
}, []);
return [loaded, error];
}
Here is my App.tsx
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import {registerRootComponent} from 'expo'
import Navigation from './routes'
export default function App() {
return (
<Navigation/>
);
}
registerRootComponent(App);
Firstly install expo-app-loading from here
Then For your fonts create a folder called hooks where your App.js is located and inside that create a file useFonts.js
In useFonts.js write like this -
import * as Font from 'expo-font';
import { Inter_300Light } from '#expo-google-fonts/inter';
export default useFonts = async () => {
await Font.loadAsync({
Inter_300Light: Inter_300Light,
});
};
Your App.tsx should look like this
import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { registerRootComponent } from 'expo';
import AppLoading from 'expo-app-loading';
import useFonts from './hooks/useFonts';
import Navigation from './routes';
export default function App() {
const [IsReady, SetIsReady] = useState(false);
const FontLoading = async () => {
await useFonts(); // Font is being loaded here
};
if (!IsReady) {
return (
<AppLoading
startAsync={FontLoading}
onFinish={() => SetIsReady(true)}
onError={() => {}}
/>
);
}
return <Navigation />;
}
registerRootComponent(App);
Now if you want to use these fonts in any files then just simply write the name of the font. You don't need to Import font in every page
For example, your page which uses fonts should look like this
import React from 'react';
import { Text, TouchableOpacity, Image, StyleSheet } from 'react-native';
import { DefaultWidth } from './DefaultWidth';
export default function AppleButton() {
return (
<TouchableOpacity style={styles.appleBtnWrapper}>
<Image
style={styles.appleBtnImage}
source={require('../../../assets/third-party-icon/apple.png')}
/>
<Text style={styles.appleBtnText}>Fortsæt med Apple</Text>
</TouchableOpacity>
);
}
const styles = StyleSheet.create({
appleBtnText: {
color: '#fff',
fontWeight: 'bold',
textAlign: 'center',
fontFamily: 'Inter_300Light', // Name of the font..Simple
fontSize: 16,
},
});
I am building a react-native app with a screen home.js file in screens/home.js folder by importing
with import Home from ./screens/home.js; in App.js
iam using expo cli
when i run expo start --web
error occurs cannot resolve ./screens/home.js. iam sure with the path and file name. what can be the problem
App.js
import React ,{useState}from 'react';
//import { View, Text } from 'react-native';
import Home from './screens/home';
import * as font from 'expo-font';
import {AppLoaded} from 'expo';
const getFonts=()=>{
return Font.loadASync({
'nunito-regular':require('./assets/fonts/Nunito-Regular.ttf'),
'nunito-bold':require('./assets/fonts/Nunito-Bold.ttf'),
})
}
export default function App() {
const [fontsLoaded,setFontsLoaded]=useState(false);
if(fontsLoaded){
return(
<Home/>
);
}
else{
return(
< AppLoaded
startASync={getFonts}
onFinish={()=>setFontsLoaded(true)}
/>
)
}
}
screens/home.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { render } from 'react-dom';
export default function Home() {
render(){
return (
<View style={styles.container}>
<Text style={styles.titleText}>Home Screen</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
padding:24,
},
titleText:{
fontFamily:'nunito-bold',
fontSize:18,
}
});
Remove render method from the home screen made some changes to your code try to do some thing like this:
import React ,{useState}from 'react';
import Home from './screens/Home';
import * as font from 'expo-font';
import {AppLoaded} from 'expo';
export default function App() {
return(
<Home/>
)
}
And home.js to
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function Home() {
return (
<View style={{justifyContent:"center",alignItems:"center",flex:1}}>
<Text >Home Screen</Text>
</View>
);
}
I am having a problem solving this error. Do I need to render using class components only? or is there a way to use the function method?
Help me if you can.
What would be my best solution?
I have attached code below
EstesGuideNavigator.js
import {createStackNavigator} from 'react-navigation-stack';
import {createAppContainer} from 'react-navigation';
import CategoriesScreen from '../screens/CategoriesScreen';
import PlaceScreen from '../screens/PlacesScreen';
import PlacesDetailScreen from '../screens/PlacesDetailScreen';
const EstesGuideNavigator= createStackNavigator({
Categories: CategoriesScreen, //mapping CategoriesScreen to Categories which makes easier to navigate
Places: {
screen: PlaceScreen
},
PlacesDetail:PlacesDetailScreen
});
export default createAppContainer(EstesGuideNavigator);
Below would be App.js
import React, {useState}from 'react';
import { StyleSheet, Text, View } from 'react-native';
import *as Font from 'expo-font';
import {Apploading} from 'expo';
import EstesGuideNavigator from './navigation/EstesGuideNavigator';
const fetchFonts = () => { //fetching costum fonts for my app using Async
Font.loadAsync({
'raleway-blackItalic' : require('./assets/fonts/Raleway-BlackItalic.ttf'),
'raleway-bold' : require('./assets/fonts/Raleway-Bold.ttf'),
'raleway-regular' : require('./assets/fonts/Raleway-Regular.ttf'),
'raleway-thin' : require('./assets/fonts/Raleway-Thin.ttf')
});
};
export default function App() {
const [fontLoaded, setFontLoaded] = useState(false); //initially it's false because app hasn't been loaded
if (!fontLoaded) {
return(
<Apploading
startAsync = {fetchFonts}
onFinish = {() => setFontLoaded(true) }
/> //if assets(fonts here) is not loaded we display loading screen and load assets for app
);
}
return <EstesGuideNavigator/>;
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
}
});
CategoriesScreen.js
import React from'react-native';
import {View, Text, StyleSheet} from 'react-native';
const CategoriesScreen = props =>{
return(
<View style ={styles.screen}>
<Text> Categories Screen! Dummy </Text>
</View>
);
};
const styles = StyleSheet.create({
screen:{
flex:1,
justifyContent:'center',
alignItems:'center'
}
});
export default CategoriesScreen;
This is just a dummy screen that i wanted to create.
It was a wrong import that react native automatically changed in my CategoriesScreen.js.