Autor: Joel Heil Escobar

Was genau?

In diesem kleinen Beitrag teile ich meinen Fortschritt beim lernen mit dem React Native Framework und Expo während dem Bau einer App für ein Festival. Es ist ein Nebenprojekt, welches nicht immer vorangehen kann, da ich auf Inhalte vieler verschiedener Quellen angewiesen bin und nicht immer aktiv weiter arbeiten kann 🙂

18.3.2021:
Dem HLS Player habe ich zudem noch einige Eigenschaften gegeben, womit ich ihn drehen kann und dieser dann in den Fullscreen geht

const LivestreamScreen = () => {
  const videoRef = useRef(null);
  useEffect(() => {
    ScreenOrientation.unlockAsync();
    ScreenOrientation.addOrientationChangeListener(({ orientationInfo }) => {
      if (
        orientationInfo.orientation === 3 ||
        orientationInfo.orientation === 4
      ) {
        videoRef.current.presentFullscreenPlayer();
      } else {
        videoRef.current.dismissFullscreenPlayer();
      }
    });

    return () => {
      ScreenOrientation.lockAsync(ScreenOrientation.Orientation.LANDSCAPE_LEFT);
    };
  }, []);
  return (
    <View style={{ flex: 1 }}>
      <Video
        source={{
          uri:
            "https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8",
        }}
        rate={1.0}
        volume={1.0}
        isMuted={false}
        resizeMode={Video.RESIZE_MODE_CONTAIN}
        shouldPlay
        isLooping={false}
        style={{ height: "100%", width: "100%" }}
        useNativeControls
        // onLoad={() => this.setState({ loading: false })}
        onError={console.log}
        ref={videoRef}
      />
    </View>
  );
};

9.10.2020:
Mit dem folgenden Code kann man, wenn man oben schon
import { Video } from "expo-av";
import { Dimensions } from "react-native";
importiert. Dann hat bei mir folgender Code geholfen, um einen HLS Player einzubinden, welchen ich für den Stream nutzen kann.

const LivestreamScreen = () => {
  const videoRef = useRef(null);
  useEffect(() => {
    ScreenOrientation.unlockAsync();
    ScreenOrientation.addOrientationChangeListener(({ orientationInfo }) => {
      if (
        orientationInfo.orientation === 3 ||
        orientationInfo.orientation === 4
      ) {
        videoRef.current.presentFullscreenPlayer();
      } else {
        videoRef.current.dismissFullscreenPlayer();
      }
    });

    return () => {
      ScreenOrientation.lockAsync(ScreenOrientation.Orientation.LANDSCAPE_LEFT);
    };
  }, []);
  return (
    <View style={{ flex: 1 }}>
      <Video
        source={{
          uri:
            "https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8", //ein Beispiel hsl Stream
        }}
        rate={1.0}
        volume={1.0}
        isMuted={false}
        resizeMode={Video.RESIZE_MODE_CONTAIN}
        shouldPlay
        isLooping={false}
        style={{ height: "100%", width: "100%" }}
        useNativeControls
        // onLoad={() => this.setState({ loading: false })}
        onError={console.log}
        ref={videoRef}
      />
    </View>
  );
};

13.09.2020:
Nach einer längeren Pause mit weiteren Projekte habe ich ein Workaround gefunden für ein altes Problem. Dadurch, dass ich einen Stack-Navigator innerhalb eines Bottom Tab Navigators hatte, wurden wir 2 Header angezeigt.
Ich hatte vergessen in die Optionen zum Stack Navigator anstatt nur beim Bottom Tab Navigator, also konnte dieses Problem sehr einfach folgendermaßen gelöst werden

<HomeStack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerShown: false,
          header: null,
        }}
      />

25.05.2020:
Bei der MapView habe ich nun Custom Icons bei den Markern und auch Polygon eingefügt. Zu Polygon gibt es hier ein gutes Tutorial und zu den Custom Marker hier. Bei den Custom Markern habe ich einfach die Icons in eine png file konvertiert und in meinen Asset Ordner gepackt:

<Marker
        coordinate={{
          latitude: LÄNGENGRAD,
          longitude: BREITENGRAD,
        }}
        description={"This is a marker in React Natve"}
      >
        <Image
          source={require("./assets/icons/food.png")}
          style={{ height: 35, width: 35 }}
        />
      </Marker>

Hier noch mein Code für den Polygon:

<Polygon
        fillColor="#52AE32, rgba(82,174,50,0.2)"
        coordinates={locations}
        strokeColor="rgba(82,174,50,0.4)"
        strokeWidth="3"
      />

24.05.2020:
Das Problem mit meinem Spotify Playlist Player habe ich gelöst, indem ich einfach eine WebView genommen habe. Dazu musste man erstmal npm install react-native-webview
und npm install react-native link laufen lassen, sowie oben im Code
import { WebView } from "react-native-webview";
einfügen, um es zu importieren.

Mein Code:

<View style={{ flex: 1, height: "100%", width: "100%" }}>
      <WebView
        source={{
          html:
            '<iframe src="https://open.spotify.com/embed/playlist/YOUR_PLAYLIST_LINK" 
                width="100%" height="100%" frameborder="0" allowtransparency="true" 
                allow="encrypted-media">
              </iframe>',
        }}
        style={{ marginTop: 20 }}
      />
    </View>

Spotify gibt einem sogar schon den fertigen iframe, indem man einfach in der Desktop Anwendung auf die Playlist rechts klickt und „Code zum einbetten kopieren“ wählt. Wenn man das gemacht hat, ist der iframe Code in der Zwischenablage und man kann es einfach in den Code kopieren.

23.05.2020:
Ich habe den HomeScreen nun fast fertig. Den Gäste und Folgen Screen habe ich schon fertig, jedoch funktioniert der Spotify Player leider noch nicht ganz.

Gäste Screen mit Icon:

<ImageBackground
        style={styles.FolgeUnsImages}
        source={require("./assets/FolgeUns.png")}
      >
        <AntDesign
          style={{ flex: 1, marginLeft: "23%", marginTop: "42%" }}
          name={"instagram"}
          size={41}
          color={"white"}
          onPress={() => {
            Linking.openURL("https://www.instagram.com/");
          }}
        />
      </ImageBackground>
    </View>

Viel Zeit habe ich vor allem damit verbracht, eine MapView zu machen. Hier gibt es ein sehr gutes Tutorial dazu.

MapView:

const ParkplanScreen = ({ navigation }) => {
  return (
    <MapView
      style={{ flex: 1, height: "100%" }}
      region={{
        latitude: LÄNGENGRAD,
        longitude: BREITENGRAD,
        latitudeDelta: 0.0035, //eine Art Zoom Faktor
        longitudeDelta: 0.0035,
      }}
      showsUserLocation={true}
      mapType="satellite">
    </MapView>
  );
};

Nächste Funktionen in der MapView, welche bis jetzt noch nicht ganz funktionieren und ich demnächst einbauen will sind vor allem:

1. Polygon

Die Lilafarbene Fläche kann man auch sehr gut benutzen, um es im ParkPlanScreen zu benutzen, da man in der Google Maps Anzeige die genaue Fläche des Festivals anzeigen.

2. Karussell für Marker

Eine Karusell Funktion wäre eine coole Ergänzung, da man so schnell durch die ganzen Marker, wie z.B. Essen, Bühne, Liegen, usw. scrollen kann.

Zu guter Letzt ist mir ein großer Bug aufgefallen, welchen ich jedoch nur auf meinem Huawei Mate 20 Pro habe und nicht auf dem PC in Web und dieser war in meinem Spotify Player verborgen:

Leider habe ich noch keine Lösung für dieses Problem gefunden oder ich steige auf eine Webview um, wo einfach Spotify im Web gezeigt wird.

22.05.2020:
Eine Funktion, welche ich heute eingebaut habe war die eines Spotify Playlist Players, um die passende Playlist für das Festival sich anzuhören und auch in seinem eigenen Spotify zu öffnen. Du kannst dir hier bei npms.com den „React-Spotify-Player“ anschauen. Der Code, welchen man braucht ist sehr simpel. Man installiert das Widget mit npm install react-spotify-player und importiert es anschließend mit
import SpotifyPlayer from 'react-spotify-player';
in die richtige Datei.
So sah mein Code am Ende aus:

const SpotifyScreenSize = {
  width: "100%",
  height: "100%",
};

const SpotifyPlaylistScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <SpotifyPlayer
        uri="HIER KOMMT DEINE SPOTIFY PLALIST URI REIN"
        size={SpotifyScreenSize}
        view={"list"}
        theme={"white"}
      />
    </View>
  );
};

Um übersichtlich die Bands zu zeigen, welche bei dem Festival auftreten habe ich es in Cards anzeigen lassen.
npm install --save react-native-cards
und dann habe ich nur noch das nötigste genommen, da ich keine Buttons und Titel brauchte

      <ScrollView>
        <Card>
          <CardImage
            source={{
              uri: "BILD URI HIER EINFÜGEN",
            }}
          />
          <CardContent style={{ justifyContent: "center" }}>
            <Text>HIER TEXT EINFÜGEN</Text>
          </CardContent>
          <CardAction separator={true} inColumn={false}></CardAction>
        </Card>
      </ScrollView>

21.05.2020:
Heute hatte ich bei dem Eingeben von expo start in der Kommandozeile folgende Fehlermeldung:
TypeError: Cannot read property 'Provider' of undefined
welche ich jedoch lösen konnte, nachdem ich mich durch verschiedene GitHub Foren geklickt habe und anschließend gesehen habe, dass man es lösen kann durch Eingabe von
npm install @react-navigation/native
anschließend konnte ich meinen Code im Webbrowser ausgeben, da es anscheinend einfach nur eine Aktualisierung brauchte

20.5.2020:
Nachdem ich in letzter Zeit sehr viel Arbeit hier zuhause hatte habe ich mal wieder angefangen weiter an diesem Projekt zu arbeiten. Ich habe den alten Navigator über Bord geworfen und mit React Navigation 5 einen neuen gemacht bzw. mit Hilfe eines Tutorials. Das Tutorial findest Du hier. Ich habe nun erstmal alles in eine App.js Datei reingemacht, welche jetzt leider 340 Zeilen Code hat. In nächster Zeit muss ich nun diese File in verschiedene aufteilen und weitere Funktionen hinzufügen. Ich habe angefangen mit den Code aus Githhub, welches in dem Video benutzt wurde zu kopieren. Ich musste einige Feinheiten ändern, da z.B. NavigationNativeContainer zu NavigationContainer umbennant werden musste.
Der Plan war einen StackNavigator in meinen schon bestehenden BottomTabNavigator einzufügen bzw. zu „nesten“:

Home
–> Screen 1
–> Screen 2
Programm
Parkplan
Fotos
Tickets

Anschließend habe ich angefangen, meinen HomeScreen rüber zu kopieren und im HomeStackNavigator anzugleichen und einzustellen:

const HomeStackNavigator = ({ navigation, route }) => {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Home" component={HomeScreen} />
      <HomeStack.Screen
        name="Gaeste2020Screen"
        component={Gaeste2020Screen}
        options={{ title: "Gäste" }}
      />
      <HomeStack.Screen
        name="FolgeUnsScreen"
        component={FolgeUnsScreen}
        options={{ title: "Folge Uns :)" }}
      />
      <HomeStack.Screen
        name="SpotifyPlaylistScreen"
        component={SpotifyPlaylistScreen}
        options={{ title: "Spotify Playlist" }}
      />
    </HomeStack.Navigator>
  );
};

Anschließend habe ich angefangen, die einzelnen Screens rüber zu kopieren

const ProgrammScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>ProgrammScreen </Text>
    </View>
  );
};

Im HomeScreen habe ich anschließend noch die Bilder abwechselnd mit einem Platzhalter eingefügt

Bild:

<TouchableOpacity
          onPress={() => navigation.navigate("Gaeste2020Screen")}
        >
          <Image
            style={styles.HomeScreenImages}
            source={require("./assets/2.png")}
          />
        </TouchableOpacity>

Platzhalter:

<View //Platzhalter
          style={{
            borderBottomColor: "#FFF",
            borderBottomWidth: 5,
          }}
        />

Die letzte Aufgabe war nun noch die Screens alle richtig anzupassen und schließlich habe ich meinen alten BottomTabNavigator eingefügt. Ich habe nur noch keine Lösung gefunden, wie man die Textfarbe richtig ändert.

13.04.2020:
Heute hatte ich das Problem, dass durch einen Fehler ziemlich lange Probleme hatte:
TypeError: Super expression must either be null or a function
Durch eine Änderung in
export default class HomeScreen extends Component {
zu
export default class HomeScreen extends React.Component {

Das habe ich geändert, da ich es bei Stack Overflow und Medium gelesen hatte.
Da ich nun auch die Bilder klickbar machen will, muss ich sie nun Touchable machen. Die Frage ist nun, welches der Touchables ich benutzen soll bei meinem Projekt.

Auszug aus einem Stack Overflow Beitrag:

• TouchableNativeFeedback is Android only and „replaces the View with another instance of RCTView“
• TouchableHighlight „adds a view to the view hierarchy“
• TouchableOpacity works „without changing the view hierarchy“

Quelle: https://stackoverflow.com/questions/39123357/when-to-use-touchablenativefeedback-touchablehighlight-or-touchableopacity

Ich werde jetzt erstmal TouchableHighlight arbeiten. Mal schauen ob es sich doch noch ändern wird

12.04.2020:
Ich habe fürs erste jetzt erstmal Shared Elements über Bord geworfen und mache es jetzt mit einfachen Bildern, auf welche man klicken kann. Zwischen den Bildern habe ich Platzhalter:

<View
     style={{
         borderBottomColor: "#FFF",
         borderBottomWidth: 5,
     }}
/>

Diese erfüllen gut Ihren zweck und die Bilder habe ich einfach als style.images:

images: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    height: 200,
    width: 340,
    borderRadius: 60 / 2,
  },

Für das navigieren zwischen den Screens hat React Navigation einen guten Beitrag.

11.4.2020:
Durch viele weitere Projekte kam ich in letzter Zeit wenig dazu mich an die App zu setzen. Ich habe einige Videos zu Shared Elements angeschaut und mir auch nochmal einige Artikel dazu durchgelesen. Leider war ein sehr gutes Tutorial in TypeScript, weswegen ich weiter nach JavaScript Tutorials gesucht habe.
Ich werde mich in den nächsten Tagen mal weiter durch React Native libarys forsten und schauen ob ich etwas finde, was ich gut verwenden kann, damit der HomeScreen möglichst cool aussieht. Wahrscheinlich wird das aber nicht die größte Herrausforderung sein, da der Parkplan doch noch sehr aufwendig werden kann.

20.03.2020:
Heute habe ich nochmal meinen HomeScreen und Shared Elements überarbeitet bzw. es ist aktuell noch in arbeit. Als grobe Hilfe habe ich mir dieses Tutorial mal angeschaut, welches gut erklärt ist und mir weiter geholfen hat. Nun muss ich noch die Sachen für mich und für die App passend konfigurieren.

19.3.2020:
Ich habe heute mein Projekt in Gitlab hochgeladen, welches zuerst nicht gut funktioniert hat, da „–force“ im Befehl fehlte. Anschließend habe ich das Layout des Programm Screens von einer Tabelle in einfache Abschnitte, welche mit Hilfe von

<View
            style={{
              borderBottomColor: "#e2e5e9",
              borderBottomWidth: 3,
              width: 370
            }}
          />

einfachen Strichen gut getrennt werden. Damit kann ich wahrscheinlich die nächste Funktion besser umsetzen. Die Idee war immer den aktuellen Programmpunkt zu highlighten und zu zentrieren, welcher gerade auf dem Festival im Gange ist.

18.03.2020:
Da ich immer noch keine gute Lösung für mein Problem der gestrigen Tage gefunden habe, habe ich mich dazu entschieden, nochmal zu meiner Version 12 zu gehen, wo noch alles in einer einzigen App.js Datei war. Ich habe den Ordner kopiert und zu V13 umbennant. Da ich glaube, dass der Fehler darin lag, dass ich App.js und AppNavigator.js hatte und es nicht richtig verbunden habe, habe ich meine AppNavigator.js zu App.js umbennant. Anschließend habe ich meine Screens in verschiedene Dateien gemacht und die StyleSheets und die Importe für jeden Screen fertig gemacht. Ich habe einfach in jeden Screen alle Importe kopiert. Die Importe die benutzt werden, werden gehighlighted, weswegen es sehr einfach war, die Importe, welche ich nicht benötige zu löschen. Bei den StyleSheet hatte ich alles so bennant, dass man es gut zuordnen kann (z.B. containerProgrammScreen), weswegen dass Trennen auch sehr einfach war.
Nachdem ich noch die Versionen der verschieden Packages, welche falsch installiert waren neu installiert habe. Funktionierte es auf meinem Huawei Mate 10 Pro, welches ein Android Device ist, mit Hilfe der Expo App sehr gut und ohne Fehler, jedoch nicht in der Expo Web App.

17.03.2020:
Den „fail to compile“ Fehler habe ich leider immer noch nicht lösen können und werde mal weiter im Internet recherchieren, ob es eine gute Möglichkeit gibt, es zu lösen.

16.03.2020:
Heute habe ich den Abschnitt mit dem Programm fertig gemacht und optimiert. Jetzt muss ich das Layout nur noch etwas schöner machen (1:2 Größe der Spalte) und bin damit nun auch fertig. Den HomeScreen mit den Cards habe ich nun fertig gemacht und mit Hilfe eines Tutorials auch animiert. Hier finden Sie dieses Tutorial. Es ist sehr hilfreich und ich konnte damit ein sehr schönes Ergebnis erzielen. Ich habe nur die ScrollView rausgenommen, da man nicht Scrollen soll. Morgen füge ich noch die richtigen Texte bzw. Unterfunktionen und Fotos ein, wovon ich noch welche in Adobe Photoshop bearbeiten muss. Zu letzt habe ich wieder ein mal versucht die Screens usw. in verschiedene Dateien zu bringen, jedoch ist das an einem „Fail to compile“ Fehler gescheitert (Module not found: Can't resolve 'react-navigation'), welchen ich versuche bis morgen zu beheben, damit ich anschließend weiter arbeiten kann

15.03.2020:
Nun widme ich mich der nächsten Funktion bzw. dem nächsten Screen: dem HomeScreen. Er soll wenn er fertig ist 4 Abschnitte enthalten, welche bei klicken größer und zu einem Bild mit Text werden. Die Teile sind von oben nach unten einmal der Header mit dem Bild des Festivals und Count Down, darunter ein Abschnitt mit den Künstlern, welche 2020 auftreten, anschließend noch eine Einbettung der offiziellen Spotify Playlist des Festivals und darunter eine kleine Seite, welche zu den Social Media Profilen verlinkt.

Die verschiedenen Abschnitte werde ich in „Cards“ einteilen, welche angeklickt werden können und anschließend größer erscheinen. Hier gibt es ein gutes Tutorial dazu. Ich bin damit noch nicht ganz fertig geworden und morgen werde ich die Cards fertig machen mit Bildern und anschließend noch die Funktionen einfügen.

14.03.2020:
Heut habe ich mal eine neue Seite fertig gestellt: Das Programm. Dort kann man direkt sehen, welche Programmpunkte auf dem Plan stehen. Die List ist scrollbar, weswegen sie um so praktischer ist. Für die Zukunft ist geplant, dass diese Funktion den jeweiligen Programmpunkt, welcher gerade zeitlich dran ist farbig hervorhebt. Die Tabelle habe ich ganz einfach mit Hilfe von der React Native Table Component, welche man mit Hilfe von npm install react-native-table-component installieren kann. Anschließend habe ich die Tabelle so angepasst, dass sie gut aussieht und einen möglichst großen nutzen hat.

Hier ist zudem eine nützliche Auflistung aller von Haus auf verfügbarer Schriftarten in React-Native.

25.02.2020:
Da ich in den letzten Tagen viel rumprobiert habe, um den Bug zu fixen und es nicht funktioniert habe, bin ich zurück zu der Version gewechselt, welche nur die App.js hat, um schon mal die Screens langsam zu machen, da ich sonst zu viel Zeit verliere. Es wird wahrscheinlich schnell unübersichtlich, jedoch habe ich gerade keine bessere Idee wie es funktionieren würde.
TypeError: StyleSheet.create is not a function ist ein Fehler, welchen ich einfach damit behoben habe import {  StyleSheet } from "react-native"; in die App.js einzufügen, was ich davor vergessen hatte.

22.02.2020:
Ich habe trotz langem rumprobieren den Bug immer noch nicht gefixt
TypeError: Super expression must either be null or a function, not undefined

20.02.2020:
Heute habe ich angefangen die Screens usw. in verschiedene Files zu packen. Ich habe jetzt App.js, AppNavigator.js und werde auch noch die Screens die noch in AppNavigator sind in verschiedene Files und einen eigenen Screen Ordner machen. Ich hatte Probleme, da ich einen Bug in App.js hatte:
TypeError: Super expression must either be null or a function, not undefined
mit diesem Beitrag habe ich es gelöst. Anschließend habe ich
npm i --save-dev enzyme@latest laufen lassen, wonach ich im Ordner ./node_modules\@types im Ordner „node“ in „.node.DELETE“ umbennenen musste. Danach habe ich npm i --save-dev enzyme@latest nochmal laufen lassen und es hat funktioniert. Hier noch mal ein Expo Snack von einer Preview. !Es ist nicht die aktuelle Version, jedoch sieht sie genau so aus und man kann die App ausprobieren!

App.js:

import * as React from "react";
import { Text, View, Component } from "react-native";

import AppNavigator from "./App Navigator";

export default class App extends Component {
  render() {
    const { navigate } = this.props.navigation;
    return <View style={styles.container}></View>;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

AppNavigator.js:

import * as React from "react";
import { Text, View } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";

import { MaterialCommunityIcons } from "react-native-vector-icons";
import { Ionicons } from "react-native-vector-icons";
import { Entypo } from "react-native-vector-icons";
import { MaterialIcons } from "react-native-vector-icons";
import { SimpleLineIcons } from "react-native-vector-icons";
import { AntDesign } from "react-native-vector-icons";

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Home!</Text>
    </View>
  );
}

function ProgrammScreen() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Programm!</Text>
    </View>
  );
}

function ParkplanScreen() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Parkplan!</Text>
    </View>
  );
}

function FotosScreen() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Foto!</Text>
    </View>
  );
}

function TicketsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Tickets!</Text>
    </View>
  );
}

const Tab = createMaterialBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      activeColor="#52AE31"
      inactiveColor="#636363"
      barStyle={{ backgroundColor: "#ffffff" }}
      labelStyle={{ fontSize: 12 }}
      style={{ backgroundColor: "#ffffff" }}
    >
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarLabel: "Home",
          tabBarIcon: ({ color, focused }) => (
            <MaterialCommunityIcons
              name={focused ? "home" : "home-outline"}
              size={24}
              color={color}
            />
          )
        }}
      />
      <Tab.Screen
        name="Programm"
        component={ProgrammScreen}
        options={{
          tabBarLabel: "Programm",
          tabBarIcon: ({ color, focused }) => (
            <Ionicons
              name={focused ? "ios-list-box" : "ios-list"}
              size={24}
              color={color}
            />
          )
        }}
      />
      <Tab.Screen
        name="Parkplan"
        component={ParkplanScreen}
        options={{
          tabBarLabel: "Parkplan",
          tabBarIcon: ({ color, focused }) => (
            <SimpleLineIcons
              name={focused ? "directions" : "directions"}
              size={24}
              color={color}
            />
          )
        }}
      />
      <Tab.Screen
        name="Fotos"
        component={FotosScreen}
        options={{
          tabBarIcon: ({ color, focused }) => (
            <AntDesign
              name={focused ? "camera" : "camerao"}
              size={24}
              color={color}
            />
          )
        }}
      />
      <Tab.Screen
        name="Tickets"
        component={TicketsScreen}
        options={{
          tabBarLabel: "Tickets",
          tabBarIcon: ({ color, focused }) => (
            <MaterialCommunityIcons
              name={focused ? "ticket-confirmation" : "ticket-outline"}
              size={24}
              color={color}
            />
          )
        }}
      />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

19.02.2020:
Ich habe mich nach ca. 2h versuchten Bugfix noch mal dazu entschieden, zu meiner alten Version zurückzukehren, um dort alles fertig zu konfigurieren. Es abzuspeichern als …V1-5 und es nochmal kopieren und es dann nochmal versuchen, den AppNavigator und Screens in verschiedene Files zu packen.
Ich habe auch meine Icons im MaterialBottomTabNavigator überarbeitet. Mit Hilfe von einigen Posts (hier zugehöriger Code) habe ich jetzt eingeführt, dass wenn der jeweilige Screen nicht ausgewählt ist, das Icon nur in einer Outline angezeigt wird:

<Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarLabel: "Home",
          tabBarIcon: ({ color, focused }) => (
            <MaterialCommunityIcons
              name={focused ? "home" : "home-outline"}
              size={24}
              color={color}
            />
          )
        }}
      />

Anschließend habe ich noch die zugehörigen Icons ausgewählt und in meinen Code eingefügt und die Screens fertig gemacht.

18.02.2020:
Heute habe ich die Screens weiter auf verschiedene Dateien gelegt, um eine bessere Struktur zu haben. Die Extension „Code Spell Checker“ ist bei mir jedoch eher zum Problem geworden, da ich meine Screens Deutsch benannt habe mit z.B. ProgrammScreen, usw. Dadurch ist viel in meinem Code unterstrichen und ich habe aktuell ca. 25 Sachen in meiner „Problems“ Sektion. Leider habe ich bis jetzt noch keine Lösung für das Problem, da es noch verbuggt ist

15.02.2020:
Heute habe ich mal ein neues Ordnungssystem für meinen Projekt Ordner gemacht. Ich habe einen generellen Ordner erstellt und in diesen habe ich mein Projekt gemacht. Jedes Mal, wenn ich in dem Projekt eine neue Funktion Funktion erstelle, kopiere ich den alten Ordner (z.B. FestivalAppV1-2) und ändere den Namen des kopierten Ordners in FestivalAppV1-3. Somit habe ich immer ein Backup des Projektes und kann immer darauf zurückgreifen.
Zudem habe ich angefangen, den Code der aktuell nur in App.js ist in verschiedene Files aufzuteilen, damit App.js besser sortiert ist

14.02.2020:
Heute habe ich unter anderem für Visual Studio Code verschiedene Extensions installiert:
1. Prettier
-in „Extensions“ suchen und installieren
– "editor.formatOnSave": true bei settings.json hinzufügen, damit es sich immer neu formatiert, wenn es gespeichert wird

2. Material Theme
-verändert Farben von Visual Studio
-mein Favorit: „Material Theme Darker“
-Icons Pack für Visual Studio Code: „Material Icon Theme „

3. Color Highlight:
-zeigt bei Hex-Farbcodes direkt die Farbe an, welche es ist
(z.B. bei #FF0000 wird „#FF0000“ rot makiert und hinterlegt)
-Settings (Strg + , ) –> Extensions –> Color Highlight bei MarkerType am besten „dot-before“, da dann die Farbe vor dem Hex-Farbcode angezeigt wird

4. Bracket Pair Colorizer 2
-markiert Klammern farbig
-verbindet zusammengehörige Klammern mit einer farbigen Linie
-Settings (Strg + , ) –> Extensions –> Bracket Pair Colorizer 2 –> Colors „Edit in settings.json“, wo man die Farbeinstellungen ändern kann

5. ES7/Redux/GraphQL/React-Native snippets
-man kann verkürzte Befehle benutzen, um lange Befehle, wie importieren von etwas, auszuführen
(Bsp.: „imrc“ +Tab wird zu import from React, { Component } from 'react)

7. Auto Rename Tag
-verändert die jeweils andere Klammer bzw. das andere Tag direkt mit wenn man eines davon ändert
(Bsp.: <View> <View> <– dort muss man nur eins bearbeiten, da es automatisch gleich ist)
8. Code Spell Checker
-bei Fehlern in der Rechtschreibung einer Funktion bzw. eines Wortes wird jeweiliges Wort in der Sektion „Problems“ in Visual Studio Code angezeigt
-beachtet auch CamelCase Rechtschreibung

9. TODO Highlight
-Befehle, wie „//TODO: …“ und „//FIXME: …“ haben im Hintergrund eine helle Farbe damit man es sieht
-mit Strg+Shift+P Befehlsleiste öffnen und „TODO Highlight…“ auswählen und anschließend auf „ALL“ gehen, um alle offenen Todo’s und Fixme’s zu sehen

Diese ganzen Extensions werde ich versuchen, in nächster Zeit häufiger in meinen täglichen Gebrauch mit Visual Studio Code einzubinden, da sie einem schon echt das leben und die Arbeit mit dem Programm erleichtern können.

13.02.2020:
Heute habe ich es endlich geschafft, dass es von Expo angezeigt wird:
-Ich habe erst expo mit expo init [Projektname] Projekt erstellt
-expo mit npm install -g expo-cli aktualisiert
-React-Navigation mit npm install @react-navigation/native und expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view installiert
-Material Bottoms Tabs mit npm install @react-navigation/material-bottom-tabs react-native-paper installiert
–Demo-Code hineinkopiert
Anscheinend habe ich einen Fehler in meinen alten Code gebaut, da dieser Demo-Code nun funktioniert. In den nächsten Tagen werde ich diesen noch mit meinen Icons und Tabs ergänzen. Anschließend werde ich die verschiedenen Tabs konfigurieren

12.2.2020:
Module not found: Can't resolve '@react-navigation/material-bottom-tabs'
Das ist die Fehlermeldung welche ich habe, versuche auf verschiedenen Wegen es zu importieren funktionierren nicht und es gibt nur „npm ERR!“, also einen Fehler.
Habe Ordner neu aufgesetzt, Expo aktualisiert und auch react-navigation und react-navigation-material-bottom-tab-navigator installiert.
Außerdem kann ich Fehlermeldung nicht beheben da sich die betroffenen Dateien nicht in meinem Ordner befinden 🙂

10.2.2020:
Aktuell habe ich Probleme React Navigation zu implementieren, da bei mir noch verschiedenste Fehlermeldungen aufkommen und auch bei dem Emulator gibt es diverse Fehlermeldungen, von Dateien in denen ich nichts verändert habe. Heute lösche ich den Ordner nochmal und versuche es mit Hilfe eines anderen Tutorials, mein BottomTabsNavigator zu erstellen. Ich habe den Fehler behoben, in dem ich NodeJS deinstalliert habe und anschließend nochmal installiert habe. Dann habe ich React Navigation noch in der Kommandozeile installiert:
npm install react-navigation

Icons importieren (ohne npm install…):
import { MaterialIcons } from '@expo/vector-icons';
(MaterialIcons kann durch jedes andere Expo Icon Package ersetzt werden und hier gibt es eine Übersicht von allen Icons)

Bsp: <MaterialIcons name='delete' size={18} color='#333' />

Alles funktioniert, bis auf die Implementation von
npm install @react-navigation/material-bottom-tabs react-native-paper
denn es gibt einen Fehler beim Compilen im Emulator

9.02.2020:
Grundkonzept:
App für Festival mit MaterialBottomTabNavigator:
Startseite | Programm | Lageplan | Fotogalerie | Tickets