react-native-notes

introduction

SDK : to access and use native components like

• gallery
• camera
• sensors and more

e.g to select images using the systems UI.

pnpx expo install expo-image-picker

🦅 Over view

• layout for shared views carry across from nextjs

• index.tsx is always the / route

• view is the div equivalent of the web

• entry is app/_layout.tsx

• <Stack> can be thougts of as a book

  • a page(screen) in this is <Stack.screen name="index">
  • the name prop points to a page(screen)
  • also has an option prop which are like settings for the screen ()
  • (tabs)/ is a special dir inside app/ used to create mobile navigation tabs
  • it also takes a _layout.tsx
  • unlike app/_layout.tsx which has the <Stack> ...
  • the app/(tabs)/_layout.tsx has <Tab> which houses all the tabs
  • each <Tab.Screen> also takes a name prop which points to the files in (tabs)/ as well as other properties similar to what the Stack.Screen does

  examples

  app/_layout.tsx

import { Stack } from "expo-router";

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      <Stack.Screen name="+not-found" />
    </Stack>
  );
}

app/(tabs)/_layout.tsx

import { Ionicons } from "@expo/vector-icons";
import { Tabs } from "expo-router";

export default function TabLayout() {
  return (
    <Tabs
      screenOptions={{
        headerShadowVisible: false,
        headerTintColor: "#fff",
        headerStyle: {
          backgroundColor: "#25292e",
        },
        tabBarActiveTintColor: "#ffd33d",
        tabBarStyle: {
          backgroundColor: "#25292e",
        },
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: "Home",
          tabBarIcon: ({ focused, color }) => (
            <Ionicons
              size={24}
              color={color}
              name={focused ? "home-sharp" : "home-outline"}
            />
          ),
        }}
      />
    </Tabs>
  );
}

Components and API's

react native just like the web has it's api's and components which can be directly accessed such as

• the <View> components which is one of the common ones
• a <Button> which is what expo go wraps as <Pressable>
• StyleSheet object which is standard for css abstraction | nice touch 😘

  not sure if it's supports sass tho, will find out in future development sessions

some of which has been wrapped and made available throught the expo SDK

components & apis