USER
fontFamily "Mirza" is not a system font and has not been loaded through expo-font.
fontFamily "Amiri" is not a system font and has not been loaded through expo-font.
fontFamily "NotoNaskhArabic" is not a system font and has not been loaded through expo-font.
fontFamily "NotoSansArabic" is not a system font and has not been loaded through expo-font.
fontFamily "Poppins" is not a system font and has not been loaded through expo-font.
bu sayfada bu hataları alıyoruz:
import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useThemeAndLanguage } from '../utils/ThemeAndLanguageContext'; // Path'i kendi yapınıza göre ayarlayın
const FontSettings = ({
fontSize,
increaseFontSize,
decreaseFontSize,
theme,
t,
}) => {
const {
setFontFamily,
currentFontFamily,
availableFontFamilies,
arabicFont
} = useThemeAndLanguage();
return (
<View style={styles.settingsContent}>
{/* Example Card */}
<View style={[styles.exampleCard, { backgroundColor: theme.cardBackground }]}>
<Text style={[
styles.exampleText,
{
fontSize: fontSize * 1.4,
fontFamily: arabicFont,
color: theme.textColor
}
]}>
(هذا مثال على الكتابة بالعربية)
</Text>
</View>
{/* Font Size Controls */}
<View style={styles.fontSizeControls}>
<TouchableOpacity onPress={increaseFontSize} style={styles.fontSizeButton}>
<Ionicons name="add-circle-outline" size={40} color={theme.primaryColor} />
<Text style={[styles.fontSizeButtonText, { color: theme.textColor }]}>
{t('increaseFontSize')}
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={decreaseFontSize} style={styles.fontSizeButton}>
<Ionicons name="remove-circle-outline" size={40} color={theme.primaryColor} />
<Text style={[styles.fontSizeButtonText, { color: theme.textColor }]}>
{t('decreaseFontSize')}
</Text>
</TouchableOpacity>
</View>
{/* Font Family Selection */}
<View style={styles.fontOptionsContainer}>
{availableFontFamilies.map((fontFamily) => (
<TouchableOpacity
key={fontFamily}
style={[
styles.fontOption,
{
backgroundColor: theme.cardBackground,
borderColor: currentFontFamily === fontFamily ? theme.primaryColor : 'transparent',
borderWidth: currentFontFamily === fontFamily ? 2 : 0,
}
]}
onPress={() => setFontFamily(fontFamily)}
>
<Text style={[styles.fontOptionText, { color: theme.textColor }]}>
{fontFamily}
</Text>
<Text style={[
styles.fontOptionSample,
{
fontFamily: fontFamily,
color: theme.textColor
}
]}>
(اقرأ العربية)
</Text>
</TouchableOpacity>
))}
</View>
</View>
);
};
const styles = StyleSheet.create({
settingsContent: {
flexGrow: 1,
},
exampleCard: {
backgroundColor: 'white',
borderRadius: 10,
padding: 15,
marginVertical: 20,
width: '90%',
alignSelf: 'center',
},
exampleText: {
textAlign: 'center',
},
fontSizeControls: {
flexDirection: 'row',
justifyContent: 'space-around',
width: '100%',
marginBottom: 20,
},
fontSizeButton: {
alignItems: 'center',
},
fontSizeButtonText: {
marginTop: 5,
fontSize: 12,
color: 'gray',
textAlign: 'center',
},
fontOptionsContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-around',
marginTop: 20,
alignSelf: 'center',
},
fontOption: {
width: '45%',
backgroundColor: 'white',
borderRadius: 10,
padding: 10,
marginBottom: 20,
alignItems: 'center',
},
fontOptionText: {
fontSize: 16,
marginBottom: 5,
textAlign: 'center',
},
fontOptionSample: {
fontSize: 18,
},
});
export default FontSettings;
ASSISTANT
The errors you're encountering are due to the use of custom fonts (`Mirza`, `Amiri`, `NotoNaskhArabic`, `NotoSansArabic`, and `Poppins`) that haven't been loaded into your React Native application. To resolve these errors, you need to load these custom fonts using `expo-font` before using them in your components.
Here's a step-by-step guide to help you properly load and use custom fonts in your Expo project:
### 1. **Install `expo-font`**
First, ensure that you have `expo-font` installed in your project. If you're using Expo SDK 33 or later, `expo-font` should already be included. If not, you can install it using:
```bash
expo install expo-font
```
### 2. **Add Font Files to Your Project**
You need to have the `.ttf` (TrueType Font) or `.otf` (OpenType Font) files for each of the custom fonts you wish to use. Here's how to add them:
1. **Create a Fonts Directory:**
Create a directory in your project's `assets` folder to store your fonts. For example:
```
your-project/
├── assets/
│ └── fonts/
│ ├── Mirza-Regular.ttf
│ ├── Amiri-Regular.ttf
│ ├── NotoNaskhArabic-Regular.ttf
│ ├── NotoSansArabic-Regular.ttf
│ └── Poppins-Regular.ttf
└── ...
```
2. **Download and Add Fonts:**
- **Mirza:** [Google Fonts - Mirza](https://fonts.google.com/specimen/Mirza)
- **Amiri:** [Google Fonts - Amiri](https://fonts.google.com/specimen/Amiri)
- **Noto Naskh Arabic:** [Google Fonts - Noto Naskh Arabic](https://fonts.google.com/specimen/Noto+Naskh+Arabic)
- **Noto Sans Arabic:** [Google Fonts - Noto Sans Arabic](https://fonts.google.com/specimen/Noto+Sans+Arabic)
- **Poppins:** [Google Fonts - Poppins](https://fonts.google.com/specimen/Poppins)
Download the desired font styles (e.g., Regular, Bold) and place them in the `assets/fonts/` directory.
### 3. **Load Fonts Using `expo-font`**
You need to load the fonts before your app renders any components that use them. This is typically done in your top-level component, such as `App.js`.
Here's how you can set it up:
**`App.js`**
```javascript
import React, { useState, useEffect } from 'react';
import AppLoading from 'expo-app-loading'; // Alternatively, use SplashScreen for newer Expo versions
import * as Font from 'expo-font';
import { ThemeAndLanguageProvider } from './utils/ThemeAndLanguageContext'; // Ensure you have this context set up
import FontSettings from './components/FontSettings'; // Adjust the path as needed
const fetchFonts = () => {
return Font.loadAsync({
Mirza: require('./assets/fonts/Mirza-Regular.ttf'),
Amiri: require('./assets/fonts/Amiri-Regular.ttf'),
NotoNaskhArabic: require('./assets/fonts/NotoNaskhArabic-Regular.ttf'),
NotoSansArabic: require('./assets/fonts/NotoSansArabic-Regular.ttf'),
Poppins: require('./assets/fonts/Poppins-Regular.ttf'),
// Add other font variants if needed (e.g., Poppins-Bold)
});
};
export default function App() {
const [fontsLoaded, setFontsLoaded] = useState(false);
// Load fonts before rendering the app
if (!fontsLoaded) {
return (
<AppLoading
startAsync={fetchFonts}
onFinish={() => setFontsLoaded(true)}
onError={(error) => console.warn(error)}
/>
);
}
return (
<ThemeAndLanguageProvider>
<FontSettings
// Pass necessary props here
/>
{/* Other components */}
</ThemeAndLanguageProvider>
);
}
```
**Note:** If you're using Expo SDK 45 or later, `AppLoading` is deprecated. Instead, you can use the `SplashScreen` API or handle the loading state yourself. Here's an example using `useFonts`:
```javascript
import React from 'react';
import { Text, View } from 'react-native';
import { ThemeAndLanguageProvider } from './utils/ThemeAndLanguageContext';
import FontSettings from './components/FontSettings';
import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';
export default function App() {
const [fontsLoaded] = useFonts({
Mirza: require('./assets/fonts/Mirza-Regular.ttf'),
Amiri: require('./assets/fonts/Amiri-Regular.ttf'),
NotoNaskhArabic: require('./assets/fonts/NotoNaskhArabic-Regular.ttf'),
NotoSansArabic: require('./assets/fonts/NotoSansArabic-Regular.ttf'),
Poppins: require('./assets/fonts/Poppins-Regular.ttf'),
});
React.useEffect(() => {
async function prepare() {
if (fontsLoaded) {
await SplashScreen.hideAsync();
}
}
prepare();
}, [fontsLoaded]);
if (!fontsLoaded) {
return null; // Alternatively, render a custom loading screen
}
return (
<ThemeAndLanguageProvider>
<FontSettings
// Pass necessary props here
/>
{/* Other components */}
</ThemeAndLanguageProvider>
);
}
```
### 4. **Update Your `ThemeAndLanguageContext`**
Ensure that your `ThemeAndLanguageContext` is aware of the loaded fonts. Here's an example of how you might set it up:
**`ThemeAndLanguageContext.js`**
```javascript
import React, { createContext, useContext, useState } from 'react';
const ThemeAndLanguageContext = createContext();
export const ThemeAndLanguageProvider = ({ children }) => {
const [currentFontFamily, setCurrentFontFamily] = useState('Poppins'); // Default font
const availableFontFamilies = ['Mirza', 'Amiri', 'NotoNaskhArabic', 'NotoSansArabic', 'Poppins'];
const arabicFont = currentFontFamily; // Assuming you want to use the same for Arabic
const setFontFamily = (font) => {
setCurrentFontFamily(font);
};
const theme = {
cardBackground: '#fff',
textColor: '#000',
primaryColor: '#6200ee',
// Add other theme properties as needed
};
const t = (key) => {
// Your translation function
return key;
};
return (
<ThemeAndLanguageContext.Provider
value={{
setFontFamily,
currentFontFamily,
availableFontFamilies,
arabicFont,
theme,
t,
// Add other context values as needed
}}
>
{children}
</ThemeAndLanguageContext.Provider>
);
};
export const useThemeAndLanguage = () => useContext(ThemeAndLanguageContext);
```
### 5. **Verify Font Usage in `FontSettings` Component**
Ensure that your `FontSettings` component is correctly using the `arabicFont` and other font families. From the code you provided, it looks correctly set up. Here's a quick checklist:
- **Font Family Names:**
Make sure the font family names used in your `ThemeAndLanguageContext` match exactly with the keys used in `Font.loadAsync`.
For example, if you loaded the font with the key `'Mirza'`, ensure you're referencing `'Mirza'` in your styles.
- **Correct Font File Paths:**
Ensure that the paths in `require()` are correct and point to the actual location of your font files.
- **Sample Text:**
The sample Arabic text `(هذا مثال على الكتابة بالعربية)` should display correctly once the fonts are loaded.
### 6. **Rebuild Your Project**
After setting everything up, rebuild your project to ensure that Expo picks up the new fonts.
```bash
expo start -c
```
The `-c` flag clears the cache, which helps prevent issues related to outdated cache data.
### 7. **Additional Tips**
- **Font Variants:**
If you plan to use different font weights (e.g., Bold, Light), you'll need to load each variant separately. For example:
```javascript
Mirza: require('./assets/fonts/Mirza-Regular.ttf'),
MirzaBold: require('./assets/fonts/Mirza-Bold.ttf'),
```
Then, use `fontFamily: 'MirzaBold'` where needed.
- **Fallback Fonts:**
It's good practice to specify fallback fonts in case a custom font fails to load. For example:
```javascript
fontFamily: currentFontFamily || 'System'
```
- **Performance Considerations:**
Loading many fonts can increase your app's bundle size. Only include the fonts you need and consider using only the required variants.
- **Testing on Devices:**
Sometimes, fonts may render differently on emulators vs. physical devices. Test on both to ensure consistency.
### 8. **Example `FontSettings` Integration**
Here's how your `FontSettings` component should function within the context of the loaded fonts:
**`FontSettings.js`**
```javascript
import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useThemeAndLanguage } from '../utils/ThemeAndLanguageContext';
const FontSettings = ({
fontSize,
increaseFontSize,
decreaseFontSize,
}) => {
const {
setFontFamily,
currentFontFamily,
availableFontFamilies,
arabicFont,
theme,
t,
} = useThemeAndLanguage();
return (
<View style={styles.settingsContent}>
{/* Example Card */}
<View style={[styles.exampleCard, { backgroundColor: theme.cardBackground }]}>
<Text style={[
styles.exampleText,
{
fontSize: fontSize * 1.4,
fontFamily: arabicFont,
color: theme.textColor
}
]}>
(هذا مثال على الكتابة بالعربية)
</Text>
</View>
{/* Font Size Controls */}
<View style={styles.fontSizeControls}>
<TouchableOpacity onPress={increaseFontSize} style={styles.fontSizeButton}>
<Ionicons name="add-circle-outline" size={40} color={theme.primaryColor} />
<Text style={[styles.fontSizeButtonText, { color: theme.textColor }]}>
{t('increaseFontSize')}
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={decreaseFontSize} style={styles.fontSizeButton}>
<Ionicons name="remove-circle-outline" size={40} color={theme.primaryColor} />
<Text style={[styles.fontSizeButtonText, { color: theme.textColor }]}>
{t('decreaseFontSize')}
</Text>
</TouchableOpacity>
</View>
{/* Font Family Selection */}
<View style={styles.fontOptionsContainer}>
{availableFontFamilies.map((fontFamily) => (
<TouchableOpacity
key={fontFamily}
style={[
styles.fontOption,
{
backgroundColor: theme.cardBackground,
borderColor: currentFontFamily === fontFamily ? theme.primaryColor : 'transparent',
borderWidth: currentFontFamily === fontFamily ? 2 : 0,
}
]}
onPress={() => setFontFamily(fontFamily)}
>
<Text style={[styles.fontOptionText, { color: theme.textColor }]}>
{fontFamily}
</Text>
<Text style={[
styles.fontOptionSample,
{
fontFamily: fontFamily,
color: theme.textColor
}
]}>
(اقرأ العربية)
</Text>
</TouchableOpacity>
))}
</View>
</View>
);
};
const styles = StyleSheet.create({
settingsContent: {
flexGrow: 1,
},
exampleCard: {
backgroundColor: 'white',
borderRadius: 10,
padding: 15,
marginVertical: 20,
width: '90%',
alignSelf: 'center',
},
exampleText: {
textAlign: 'center',
},
fontSizeControls: {
flexDirection: 'row',
justifyContent: 'space-around',
width: '100%',
marginBottom: 20,
},
fontSizeButton: {
alignItems: 'center',
},
fontSizeButtonText: {
marginTop: 5,
fontSize: 12,
color: 'gray',
textAlign: 'center',
},
fontOptionsContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-around',
marginTop: 20,
alignSelf: 'center',
},
fontOption: {
width: '45%',
backgroundColor: 'white',
borderRadius: 10,
padding: 10,
marginBottom: 20,
alignItems: 'center',
},
fontOptionText: {
fontSize: 16,
marginBottom: 5,
textAlign: 'center',
},
fontOptionSample: {
fontSize: 18,
},
});
export default FontSettings;
```
### 9. **Final Checklist**
- **Font Files are Present:** Ensure all custom font files are correctly placed in the `assets/fonts/` directory.
- **Font Loading is Implemented:** Confirm that all fonts are loaded using `expo-font` before rendering components that use them.
- **Context is Properly Set Up:** Ensure that `ThemeAndLanguageContext` correctly provides font-related states and functions.
- **Consistent Font Names:** Make sure that the font family names used in your styles match exactly with the keys used in `Font.loadAsync`.
- **Cache is Cleared:** After adding new assets or making significant changes, clear the cache using `expo start -c` to prevent stale data from causing issues.
By following these steps, your application should successfully load and utilize the custom fonts without throwing the errors you've encountered. If you continue to experience issues, double-check the font file paths, names, and ensure that the fonts are correctly referenced throughout your application.