🐛 Fix rendering events again

src/Navigation.js

@@ -5,10 +5,10 @@ import React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
-// import EventListScreen from './screens/EventListScreen';
-// import AboutScreen from './screens/AboutScreen';
-// import EventDetailScreen from './screens/EventDetailScreen';
-// import LoginScreen from './screens/LoginScreen';
+import EventListScreen from './screens/EventListScreen';
+import AboutScreen from './screens/AboutScreen';
+import EventDetailScreen from './screens/EventDetailScreen';
+import LoginScreen from './screens/LoginScreen';
 import MembershipScreen from './screens/MembershipScreen';
 // import UserRegisterScreen from './screens/UserRegisterScreen';
 
@@ -84,11 +84,18 @@ const Stack = createNativeStackNavigator();
 
 const DuskenNavigation = () => (
   <NavigationContainer>
-    <Stack.Navigator>
-      {/* <Stack.Screen name="About" component={AboutScreen} /> */}
-      {/* <Stack.Screen name="Login" component={LoginScreen} /> */}
+    <Stack.Navigator initialRouteName="EventList">
+      <Stack.Screen name="About" component={AboutScreen} />
       <Stack.Screen name="Membership" component={MembershipScreen} />
-      {/* <Stack.Screen name="EventList" component={EventListScreen} /> */}
+      <Stack.Screen name="EventList" component={EventListScreen} />
+      <Stack.Screen
+        name="EventDetail"
+        component={EventDetailScreen}
+        options={({ route }) => ({
+          title: route.params.item.title.decoded,
+        })}
+      />
+      <Stack.Screen name="Login" component={LoginScreen} />
     </Stack.Navigator>
   </NavigationContainer>
 );

src/modules/events/EventList.js

@@ -1,46 +1,51 @@
-import { StyleSheet, View, Platform } from 'react-native';
-import { SectionList } from 'react-navigation';
-import { Card, ListItem, CardItem, Body, Text, Right, Icon, Button, Content, Spinner } from 'native-base';
-import React, { Component } from 'react';
+import { StyleSheet, View, Platform, SectionList, TouchableHighlight } from 'react-native';
+import { Card, Text, Icon, Button, Spinner } from 'native-base';
+import React from 'react';
 import moment from 'moment';
 import 'moment/locale/nb';
+
 import theme from '../../theme';
 
 moment.locale('nb');
 
-export default class EventList extends Component {
-  _renderItem = ({ item }) => (
-    <ListItem
-      button
+const _formatTime = (time) => {
+  return moment(time).format('llll');
+};
+
+const EventList = ({ eventsSectioned, refreshing, handleRefresh, handleLoadMore, showEvent, error, loading }) => {
+  const _renderItem = ({ item }) => (
+    <TouchableHighlight
       onPress={() => {
-        this._onPressItem(item);
+        showEvent(item);
       }}
       style={styles.listItem}
     >
-      <Body style={{ flex: 5 }}>
-        <Text style={styles.listItemTitle} numberOfLines={1}>
-          {item.title.decoded}
-        </Text>
-        <Text style={styles.listItemTime}>{this._formatTime(item.start_time)}</Text>
-      </Body>
-      <Right style={{ flex: 1 }}>
-        <Icon name="arrow-forward" />
-      </Right>
-    </ListItem>
+      <View>
+        <View style={{ flex: 5 }}>
+          <Text style={styles.listItemTitle} numberOfLines={1}>
+            {item.title.decoded}
+          </Text>
+          <Text style={styles.listItemTime}>{_formatTime(item.start_time)}</Text>
+        </View>
+        <View style={{ flex: 1 }}>
+          <Icon name="arrow-forward" />
+        </View>
+      </View>
+    </TouchableHighlight>
   );
 
-  _renderSectionHeader = ({ section }) => {
+  const _renderSectionHeader = ({ section }) => {
     return (
-      <ListItem style={styles.sectionHeader}>
-        <Body>
+      <View style={styles.sectionHeader}>
+        <View>
           <Text style={styles.sectionTitle}>{section.title}</Text>
-        </Body>
-      </ListItem>
+        </View>
+      </View>
     );
   };
 
-  _renderFooter = () => {
-    if (!this.props.loading) {
+  const _renderFooter = () => {
+    if (!loading) {
       return null;
     }
 
@@ -51,52 +56,43 @@ export default class EventList extends Component {
     );
   };
 
-  _onPressItem = (item) => {
-    this.props.showEvent(item);
-  };
-
-  _formatTime(time) {
-    return moment(time).format('llll');
-  }
-
-  render() {
-    if (this.props.error) {
-      return (
-        <Content>
-          <Card style={{ margin: 4 }}>
-            <CardItem>
-              <Text style={styles.loadingText}>Kunne ikke hente programmet...</Text>
-            </CardItem>
-            <CardItem>
-              <Button onPress={this.props.handleRefresh}>
-                <Text>Prøv igjen</Text>
-              </Button>
-            </CardItem>
-          </Card>
-        </Content>
-      );
-    }
-
+  if (error) {
     return (
-      <SectionList
-        sections={this.props.eventsSectioned}
-        renderItem={this._renderItem}
-        renderSectionHeader={this._renderSectionHeader}
-        keyExtractor={(item) => item.id}
-        refreshing={this.props.refreshing}
-        onRefresh={this.props.handleRefresh}
-        onEndReached={this.props.handleLoadMore}
-        onEndReachedThreshould={10}
-        initialNumToRender={10}
-        ListFooterComponent={this._renderFooter}
-        style={[styles.card, styles.list]}
-        ListHeaderComponent={() => {
-          return <View style={styles.listHeader} />;
-        }}
-      />
+      <View>
+        <Card style={{ margin: 4 }}>
+          <View>
+            <Text style={styles.loadingText}>Kunne ikke hente programmet...</Text>
+          </View>
+          <View>
+            <Button onPress={handleRefresh}>
+              <Text>Prøv igjen</Text>
+            </Button>
+          </View>
+        </Card>
+      </View>
     );
   }
-}
+
+  return (
+    <SectionList
+      sections={eventsSectioned}
+      renderItem={_renderItem}
+      renderSectionHeader={_renderSectionHeader}
+      keyExtractor={(item) => item.id}
+      refreshing={refreshing}
+      onRefresh={handleRefresh}
+      onEndReached={handleLoadMore}
+      onEndReachedThreshould={10}
+      initialNumToRender={10}
+      ListFooterComponent={_renderFooter}
+      style={[styles.card, styles.list]}
+      ListHeaderComponent={() => {
+        return <View style={styles.listHeader} />;
+      }}
+    />
+  );
+};
+export default EventList;
 
 const styles = StyleSheet.create({
   listItem: {

src/screens/EventDetailScreen.js

@@ -1,21 +1,7 @@
 import React from 'react';
-import { StyleProvider } from 'native-base';
-import { useNavigationState } from '@react-navigation/native';
 
 import EventDetail from '../modules/events/EventDetail';
-import getTheme from '../../native-base-theme/components';
 
-const EventDetailScreen = () => {
-  const item = useNavigationState((state) => state.item);
-
-  return (
-    <StyleProvider style={getTheme()}>
-      <EventDetail item={item} />
-    </StyleProvider>
-  );
-};
-EventDetailScreen.navigationOptions = ({ navigation }) => ({
-  title: navigation.state.params.item.title.decoded,
-});
+const EventDetailScreen = ({ route }) => <EventDetail item={route.params.item} />;
 
 export default EventDetailScreen;

src/screens/EventListScreen.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Icon from 'react-native-vector-icons/SimpleLineIcons';
-import { StyleProvider } from 'native-base';
 import { useNavigation } from '@react-navigation/native';
+
 import EventListContainer from '../modules/events/EventListContainer';
 // FIXME: theme
 // https://docs.nativebase.io/setup-provider#add-custom-theme-optional
@@ -10,13 +10,11 @@ import EventListContainer from '../modules/events/EventListContainer';
 const EventsScreen = () => {
   const { navigate } = useNavigation();
   return (
-    <StyleProvider>
-      <EventListContainer
-        showEvent={(item) => {
-          navigate('EventDetail', { item });
-        }}
-      />
-    </StyleProvider>
+    <EventListContainer
+      showEvent={(item) => {
+        navigate('EventDetail', { item });
+      }}
+    />
   );
 };