Impulse Response Enterprises Ltd

New instructions for React Native SDK 55

1. Log in to Expo

Go to expo.dev. Create an account and log in to Expo

Click on "Create Project" and give it a name. Once you create your project, you will see a list of commands to run. Copy these credentials

npm install --global eas-cli

npx create-expo-app macrozone

cd macrozone

eas init --id 

2. Create a Project

In VS Code, to open the terminal window press Ctrl + `. That is .

Create a project with this command 
npx create-expo-app@latest ./ --template default@sdk-55

Key points

• ./ means “use the current directory.”

• --template default@sdk-55 pins the project to SDK 55.

• If you omit @sdk-55, it will use the latest SDK (currently SDK 57).

• If you provide a folder name instead of ./, it will create a new folder with that name.

3. Initialize The EAS Project

Run the command that it gives you after creating the project to initialize the EAS project. 

The command will be something like this

npm install --global eas-cli; npx create-expo-app yourappname; cd yourappname; eas init --id xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

Note, package.json will list the dependencies. It will use react 19.2.0.
It also includes

"expo-router": "~55.0.17",

"react-dom": "19.2.0",

 "react-native": "0.83.10",

 "react-native-web": "~0.21.0"

React native web allows us to create a web app with react native.

In the source folder src, there will be an app folder. There will be an index.tsx file also. There is also a _layout.tsx and an explore.tsx in the app folder.

4. Running the App

Run the following command to start the Expo development server:

npm start (or `expo start`)

this will produce a QR code. You can scan the QR code if you are testing on your phone. Or you can use Android Studio.

Note, Android Studio must be installed to use Android Studio. I am using Android Studio with Pixel 6 emulator. Android Studio must be opened, or you will get an error.

Press a in the terminal window to use Android Studio. In the terminal window, it will tell you that it will install the correct files to make the SDK version compatible with Android Studio. Type y in the terminal window for yes.

Note, if you want to display the app on the web, you can press w, and it will open in an internet browser.

Note, the default code for the index.tsx file will be the following. 

import { Text, View, StyleSheet } from "react-native";

export default function Index() {

  return (

    <View style={styles.container}>

      <Text>Edit src/app/index.tsx to edit this screen.</Text>

    </View>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    alignItems: "center",

    justifyContent: "center",

  },

});

5. Resetting the Project

Clear out the boilerplate code:

npm run reset-project

6. Live Reloading

Open src/app/index.tsx and change the text to "Hello World":

 <View style={styles.container}>

<Text>Hello World</Text>

  </View>

Save and you should see the changes immediately in the simulator or web browser.

Go to src then app, and edit the index.tsx file.

You can add inline styling if you put styles in your .tsx files. That is where you put a style by each line. However, the bigger your app becomes, the more messy it becomes.

The better approach would be to use a stylesheet. That is where you write your styles once, put the styles in a sheet. Then make reference to the stylesheet to call the styles.

7. Changing Header Text

To change the text of the header, you can use the options prop on the Stack.Screen component in the _layout.tsx file:

import { Stack } from 'expo-router';

export default function RootLayout() {

  return (

    <Stack

      screenOptions={{

        headerTitle: 'MacroZone',

      }}

    />

  );

}

8. Remove The Header

If you want to remove the header entirely (which I do), you can set headerShown to false in the screenOptions:

import { Stack } from "expo-router";

export default function RootLayout() {

  return <Stack screenOptions={{ headerShown: false }} />;

}

SDK 55 will create a _layout.tsx file. To remove the header, go to the _layout.tsx file and after Stack type the following command

screenOptions={{ headerShown: false }}

9. Global Styles

Create a file at src/styles/global.ts for this example.

So for this SDK 55 example, the file with your styles should be a .ts file, and create a styles folder insider the src folder.

10. Home Header

Let's create a header component for the home screen. Create a component at src/components/HomeHeader.tsx for this example.

In the src folder, create a folder called components, and put your components in that folder. The components will be .tsx files.

Note: React Native is moving away from SafeAreaView. The recommended replacement is using SafeAreaProvider + SafeAreaView from react-native-safe-area-context (which is what Expo already includes).

So I have to use the following

import { SafeAreaView } from "react-native-safe-area-context";

11. Add Screen to Stack (this is optional)

Then, open src/app/_layout.tsx and add the new screen to the stack:

import { Stack } from "expo-router";

export default function RootLayout() {

  return (

<Stack

   screenOptions={{

     headerShown: false,

   }}

>

   <Stack.Screen name="index" />

   <Stack.Screen name="meals" />

</Stack>

  );

}

When using SDK 55, since it has a _layout.tsx file, you should add the code to stack the screens.

Install if missing:

bash

npx expo install react-native-safe-area-context

Note, to play youtube videos I had to install this

npm install react-native-youtube-iframe --legacy-peer-deps

To uninstall a package type

npm uninstall the-package-name

for example

npm uninstall react-native-youtube

For organizations, policymakers, or researchers seeking expert guidance on policy analysis, resilience planning, or development finance, visit Impulse Response Enterprises Ltd https://www.impulseresponseenterprises.cc. We offer comprehensive policy research services tailored to small island developing states and emerging economies.

Let us help you create data-driven roadmaps for resilient futures.