As a beginner in react native, I am facing some challenges with the components I have created. Let me share them:
List of Playlists:
export default class Playlists extends Component {
playlists = [
...
];
render() {
const {navigation} = this.props.navigation;
return (
<FlatList
data={this.playlists}
renderItem={({item}) => (
<TouchableOpacity
style={styles.item}
onPress={() => navigation.navigate('PlaylistDetails', item)}>
<Text style={styles.text}>{item.name}</Text>
</TouchableOpacity>
)}
/>
);
}
}
View for Playlist Details:
export default class PlaylistDetails extends Component {
render() {
const {navigation} = this.props.navigation;
var songs: Song[] = navigation.getParam('songs');
return (
<View>
<Text>{navigation.getParam('name')}</Text>
<FlatList
data={songs}
renderItem={({item: song}) => <Text>{song.title}</Text>}
/>
</View>
);
}
}
Navigation setup:
const screens = {
Playlists: {
screen: Playlists,
},
PlaylistDetails: {
screen: PlaylistDetails,
},
};
const stack = createStackNavigator(screens);
export default createAppContainer(stack);
However, I encountered an error at
const { navigation } = this.props.navigation;Property 'navigation' does not exist on type ...To resolve this, I attempted to define an interface:
interface Props {
navigation: any
}
And then used it in the component as follows:
export default class PlaylistDetails extends Component<Props> {
...
}
Although this fixed the errors, I now face a new issue when running the application:
TypeError: undefined is not an object (evaluating 'navigation.navigate')Being new to react native, I am unsure how to address this problem. Any help or advice would be greatly appreciated.