FERN Stack Part 1: Hello, Navigation!

01: Hello, Navigation!

Edit each file in order in this gist to complete the section!

a. ChannelsScreen.js

// create a list of mock channels with names and ID's
const mockChannels = [
  {
    id: 1,
    name: "#videogames",
  },
  {
    id: 2,
    name: "#viralvideos",
  },
  {
    id: 3,
    name: "#underwaterbasketweaving",
  },
  // can add more if you'd like
]

// use FlatList inside the component to display each channel
export default function ChannelsScreen({ navigation /* notice how we added this prop? comes for free from the navigator */ }) {
  return (
    <FlatList
      containerStyle={{
        flex: 1,
      }}
      data={mockChannels}
      keyExtractor={(item) => item.id.toString()}
      renderItem={({ item }) => /* given each item in the FlatList, define how to render it */ (
        <Pressable
          style={({ pressed }) => [{ opacity: pressed ? 0.5 : 1.0 }] /* touchable with opacity */}
          onPress={() => {
            // navigate to a chat with a specific friend
            navigation.navigate("Chat", { channelId: item.id });
          }}
        >
          <View
            style={{
              paddingHorizontal: 7,
              paddingVertical: 14,
              justifyContent: "center",
              alignItems: "center",
              backgroundColor: "white",
            }}
          >
            <Text style={{ fontSize: 18 }}>{item.name}</Text>
          </View>
        </Pressable>
      )}
      ItemSeparatorComponent={() => (
        <View
          style={{ width: "100%", height: 1, backgroundColor: "lightGray" }}
        />
      )}
    />
  );
}

b. ChatScreen.js

// Add the route param to the component (this also comes for free from the navigator)
export default function ChatScreen({ route }) { /* ... */ }
  
// inside the component, output the route's parameter's channel ID in a Text component, so we can tell which child screen we're on
<Text>{`Channel with id ${route.params.channelId}`}</Text>

// Also note that you'll need to create a route for ChatScreen in Storyboard.js

c. Storyboard.js

// Add a toolbar button to the Channels Stack.Screen component via the options prop

 options={({ navigation }) => ({
  headerRight: () => (
    <Pressable
      style={
        ({ pressed }) => [
          { opacity: pressed ? 0.5 : 1.0 },
        ] /* touchable with opaciity */
      }
      onPress={() => navigation.navigate("Settings")}
    >
      <Feather name="settings" size={18} />
    </Pressable>
  ),
})}

d. Storyboard.js

// Create a conditional to bypass the navigation stack in favor of just displaying the LoginScreen when the user is logged out
// (you can "simulate" this for now by toggling the variable true of false- we'll wire it to real data later)
const isLoggedIn = true;
if (!isLoggedIn) {
  return <LoginScreen />
}