Search code examples
react-nativeexporeact-navigationreact-navigation-v5

React Navigation v5 stack navigator stopped working after working fine before with expo

I had a previously working project using react navigation's stack navigator but all of a sudden it has stopped working after working perfectly about a day ago. The error is

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s, undefined, You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

All my imports are correct, I have tested them and the code was functioning yesterday. Here is a sample of code:

    class PreviousQuestions extends React.Component {
    
    firebaseRef
    constructor(props){
        super(props)
        this.state = {
            dataArrayDisplay : [],
            
        }
        this.firebaseRef = Firebase.database().ref(
            `/UserToQuestion/${Firebase.auth().currentUser.uid}`
            );

    
    }
    async componentDidMount() {
      // grab the data from the server and call this.onFirebaseValueChanged every time it changes
    this.firebaseRef.orderByValue().on("value", this.onFirebaseValueChanged);
      await Font.loadAsync({
        Roboto: require('native-base/Fonts/Roboto.ttf'),
        Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
        ...Ionicons.font,
      });
      this.setState({ isReady: true });
      this._notificationSubscription = Notifications.addListener(this._handleNotification)
    }
    _handleNotification = notification => {
    Vibration.vibrate();
    console.log(notification);
    
  };
    componentWillUnmount() {
        // detach all listeners to this reference when component unmounts (very important!)
        console.log('unmounting previosu questions')
        this.firebaseRef.off();
      }
    
    onFirebaseValueChanged = snapshot => {
      ....
      };
    
      
      renderItem = ({item}) =>{
        
        
              
          return(
            
            <Card >
            <CardItem >
            <Body>
              <Text>{item.title}</Text>
              </Body>
            <Right>
              <NativeBaseButton transparent
                
                  onPress={() => {this.props.navigation.navigate('Question', { 
                          ...})} }>
                <Text>View Q</Text>
                <Icon active name="arrow-forward" />
                
              </NativeBaseButton>
            </Right>
            </CardItem>
          </Card>
          )
        
      }
      
    render(){
       
        if(!this.state.isReady){
          return <AppLoading/>
        }
        else{
          return (
          <Container>
            
            
            <Content padder>
              
                
                <FlatList
            style={styles.container}
            data={this.state.dataArrayDisplay}
            renderItem={this.renderItem}
            
          />
            </Content>
          </Container>
        );
        }
    }
    
}

const styles = StyleSheet.create({
  container:{
    flex:1
  },
})
withNavigation(PreviousQuestions)
function openLink(link){
  WebBrowser.openBrowserAsync(link).catch(error => {console.log(error),Alert.alert(error)
    
  })
}
function displayURL(URL){
  if(URL != '' && URL != null && URL != undefined){
    return(
      <CardItem>
        
          <NativeBaseButton transparent textStyle={{color: '#87838B'}} 
          onPress ={() => openLink(URL)}>
           
            <Text>Click for helpful website</Text>
          </NativeBaseButton>
        
      </CardItem>
    )
  }else{
    return(
      null
    )
  }
}


function PreviousQuestionNav({navigation}){
    
  const Stack = createStackNavigator()
  console.log('your squestionnav running')
  return(
      
      <Stack.Navigator initialRouteName="Your Questions">
          <Stack.Screen name="Your Questions" component={PreviousQuestions} 
          
          options={{
      
              headerLeft: () => (
                <IconButton
                  icon="menu"
                  color={Colors.orange500}
                  size={30}
                  onPress={() => navigation.openDrawer()}
                />
              )
              
              }}/>
          
          <Stack.Screen name="Question" component={Question} />
      </Stack.Navigator>
  )
}


export default PreviousQuestionNav

function Question({route,navigation}){
  
  
  return (
        
    <Container>
    
    <Content>
      <Card style={{flex: 0}}>
        
        <CardItem>
          <Body>
            
            <Text>
              sometext
            </Text>
            <Text>some text</Text>
          </Body>
        </CardItem>
        {displayURL(someURL)}
        
        <CardItem>
          
            
          
        </CardItem>
      </Card>
      
    </Content>
  </Container>
  )
}

The main issue is:

onPress={() => {this.props.navigation.navigate('Question', { ...})} }>

That seems to trigger the error but it was working fine until now. Was there some breaking change that I unknowingly updated or is my code incorrect somehow? Thank you

Here is the errorenter image description here

Solution

  • I ran

    expo start -c

    and everything starting working properly again. Apparently it was a cache issue. I got that from the react navigation troubleshooting guide. https://reactnavigation.org/docs/troubleshooting/#im-getting-an-error-unable-to-resolve-module-after-updating-to-the-latest-version