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 (

{this.props.story.title} {this.props.story.author} {this.props.story.description} 12k 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 ) } >

  );
}

} } 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