Cannot read properties of undefined (reading 'create')

[RI1626]

import React, {Component} from "react"
import {View, Text, StyleSheet, SafeAreaView,Platform,StatusBar,Image,ScrollView, Dimensions,TouchableOpacity } from "react_native"
import Ionicons from "react-native-vector-icons/Ionicons";
import { RFValue } from "react-native-responsive-fontsize";
import * as Font from "expo-font";
import * as SplashScreen from 'expo-splash-screen';

SplashScreen.preventAutoHideAsync();

let customFonts = {
"Bubblegum-Sans": require("../assets/fonts/BubblegumSans-Regular.ttf")
};

export default class PostScreen extends Component {
constructor(props) {
super(props);
this.state = {
fontsLoaded: false
};
}
async loadFontsAsync() {
await font.loadAsync(customFonts);
this.setState({ fontsLoaded: true });
}
componentDidMount() {
this.loadFontsAsync();
}
render() {
if (this.state.fontsLoaded) {
SplashScreen.hideAsync();
return (


<Image
source={require("../assets/image_1.jpg")}
style={styles.storyImage}
>

        <View style={styles.titleContainer}>
          <Text style={styles.storyTitleText}>
            {this.props.story.title}
          </Text>
          <Text style={styles.storyAuthorText}>
            {this.props.story.author}
          </Text>
          <Text style={styles.descriptionText}>
            {this.props.story.description}
          </Text>
        </View>
        <View style={styles.actionContainer}>
          <View style={styles.likeButton}>
            <Ionicons name={"heart"} size={RFValue(30)} color={"white"} />
            <Text style={styles.likeText}>12k</Text>
          </View>
        </View>
      </View>
      <TouchableOpacity
     onPress={() =>
     this.initiateTTS(
     this.props.route.params.story.title,
     this.props.route.params.story.author,
     this.props.route.params.story.story,
     this.props.route.params.story.moral
     )
     }
     >
    </TouchableOpacity>
    </View>
  );
}

}
}
const styles = StyleSheet.create({
container:{
flex: 1
},
cardContainer: {
margin: RFValue(13),
backgroundColor: "#2f345d",
borderRadius: RFValue(20)
},
storyImage: {
resizeMode: "contain",
width: "95%",
alignSelf: "center",
height: RFValue(250)
},
titleContainer: {
paddingLeft: RFValue(20),
justifyContent: "center"
},
storyTitleText: {
fontSize: RFValue(25),
fontFamily: "Bubblegum-Sans",
color: "white"
},
storyAuthorText: {
fontSize: RFValue(18),
fontFamily: "Bubblegum-Sans",
color: "white"
},
descriptionText: {
fontFamily: "Bubblegum-Sans",
fontSize: 13,
color: "white",
paddingTop: RFValue(10)
},
actionContainer: {
justifyContent: "center",
alignItems: "center",
padding: RFValue(10)
},
likeButton: {
width: RFValue(160),
height: RFValue(40),
justifyContent: "center",
alignItems: "center",
flexDirection: "row",
backgroundColor: "#eb3948",
borderRadius: RFValue(30)
},
likeText: {
color: "white",
fontFamily: "Bubblegum-Sans",
fontSize: RFValue(25),
marginLeft: RFValue(5)
}
});

[pranshu05]

I guess the err is because of the font is undefined!
Importing font should solve the problem

await Font.loadAsync(customFonts);

and this should solve the problem

if (this.state.fontsLoaded) {
  SplashScreen.hideAsync();
  return (
    <Image
      source={require("../assets/image_1.jpg")}
      style={styles.storyImage}
    />
  );
} else {
  return null;
}

[eps1lon]

Support requests filed as GitHub issues often go unanswered. We want you to find the answer you're looking for, so we suggest the following alternatives:

Coding Questions
If you have a coding question related to React and React DOM, it might be better suited for Stack Overflow. It's a great place to browse through frequent questions about using React, as well as ask for help with specific questions.

https://stackoverflow.com/questions/tagged/react

Talk to other React developers
There are many online forums which are a great place for discussion about best practices and application architecture as well as the future of React.

https://reactjs.org/community/support.html