CODEWITHSUNDEEP
androidreact-native
Hayder Ali
Hayder Ali

Reputation: 86

When I apply fonts in my Expo app it shows on web but doesn't applies on android or IOS

enter image description here

This Is MY Emulator and my fonts doesn't show here

MY Code is

import { StyleSheet, View , Text } from 'react-native';
import Main from './src/Components/MainInput';
import React, { useState } from 'react';
import { Scheme } from './src/Utils/ColorScheme';
import { Spacing } from './src/Utils/Spacing';
import GettingTime from './src/Components/GettingTime';
import { DancingScript_400Regular , useFonts } from '@expo-google-fonts/dancing-script';


export default function App() {
    const [ data, addData ] = useState(null);
    let [ fontsLoaded ] = useFonts({
       DancingScript_400Regular,
      });
   
      if (!fontsLoaded) {
        return null;
      }
      
    return (
        <View style={styles.container}>
            {data ? <GettingTime 
            
             givenData={data}
              addData={addData}
               /> : <Main adddata={addData}/>}
               <View style={styles.copy}>
                <Text style={styles.copyText}>This App is Created by &copy; Hayder Ali. All &copy; Copyrights and &trade; Trademarks are reserved</Text>
               </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Scheme.background,
        alignItems: 'center',
        paddingTop: Spacing.xxxxl
    },
    copy:{
        padding:Spacing.md,
        
        
    },
    copyText:{
        color:Scheme.Figures,
        textAlign:"justify",
     fontFamily:"normal"
    }
});

Can Anyone tell me what am I doing wrong?

Upvotes: 2

Views: 1437

Answers (2)

Sourav Sharma
Sourav Sharma

Reputation: 381

  1. Create assets Folder
  2. Create Fonts Folder
  3. Paste file in Fonts folder
  4. Add Fonts in Fonts folder
  5. Create react-native.config.js file
  6. Add this code in react-native.config.js file
module.exports = {
  assets: ['./src/assets/Fonts'],
};
  1. Run npx react-native link command

Upvotes: 1

Brimby
Brimby

Reputation: 912

For one I had to delete a fontWeight: 'bold' declaration I had made because that's actually not allowed. Secondly I had to restart my expo server. I tried adding the 'bold' declaration back afterward to test it and it indeed broke it again.

Upvotes: 5

Related Questions