Plain ReactNative-Expo setup with pure JavaScript

Hello guys, I am writing this article, for people like me, in case you want the do things plainly, and just have a working system with JavaScript, without the default typescript configuration that Expo usually bundles with.

Presets

• Bun: Package manager
• SDK: 54.0.25
• Language: JavaScript
• Command Interface: Bash integrated into terminal
• OS: Windows

For the sake of this article, I would be using bun, as my package manager, and will work with you along with some smooth fixes for a finish. It should not take long.

You can run this command to use the template directly with no overhead. Leave a star please, thank you 😉

degit https://github.com/Franklivania/expo-js-starter.git <your-project-name>

Creating the application.

Now, we want to initalise a new react-native/expo application to start work with. To install it bare, with no attachments or prior configurations, we would run

bun create expo –-template blank <project-name>

That would install a bare-bones project for you and give you directives to get into it. You then navigate to it and pop it up from your terminal.

NB: I am using bash on windows terminal, so I have access to Linux style commands. I recommend you do the same, as you will find it amazing, in my opinion. Mac users work with the same commands, as it is Unix styled.

cd <project-name> && cursor .

Cursor is my IDE of choice.

Once you have it open, you would want to start configuring the application to use expo proper, give you access to its robust libraries.

You would need to install a whole bunch of dependencies from scratch, but don’t worry, I have them all here, so you do not worry

bun install react-native-reanimated react-native-screens lucide-react-native expo-haptics expo-router expo-image expo-linking expo-font expo-constants expo-blur expo-system-ui react-native-web react-native-worklets react-native-safe-area-context @react-native-community/netinfo @react-native-async-storage/async-storage@next @react-navigation/bottom-tabs @react-navigation/elements @react-navigation/native expo-splash-screen react-dom react-native-svg 

Those are all the components you would need to install to get things working.

Now, it is time to dig into the config files to set it up properly.

The configuration.

Now, if you look at the bare bones application, you would only be served with some bare folders, which we would be modifying and adding to, to have a functional application that utilises expo properly.

Below is a before and after comparison

You can see the progressive difference between the two. The first one serves through index.js, while the second follows and server expo properly.

Setting Up jsconfig.json

First, to have dynamic calls withing your application, and not falling into the directory deep drive overhaul, you should set up your jsconfig.json file to declare your directory for relative paths. It should look like this

{ 

  "compilerOptions": { 

    "paths": { 

      "@/*": ["./src/*"], 

      "~/*": ["./assets/*"] 

    } 

  } 

}

This should configure your directories proper for use. This is optional.

Configuring Babel

Now, we configure our babel to recoginise and utilise various presets for the application. This helps in bundling and serving the heavy directives. Your babel.config.js should look like this

module.exports = function (api) { 

  api.cache(true); 

  return { 

    presets: ["babel-preset-expo"], 

    plugins: ["react-native-worklets/plugin"] 

  } 

} 

Once you are done, you move to your app.json. Configuring this setup for expo use is necessary, as it serves as a place for you to declare the entry point serve your application.

Setting up app.json

In here, you need to add the scheme to the top level of the application, add the plugins section to expose the “expo-router” and “expo-splash-screen”

You would add this inside your app.json

"plugins": [ 

      "expo-router", 

      [ 

        "expo-splash-screen", 

        { 

          "image": "./assets/images/splash-icon.png", 

          "imageWidth": 200, 

          "resizeMode": "contain", 

          "backgroundColor": "#ffffff", 

          "dark": { 

            "backgroundColor": "#000000" 

          } 

        } 

      ] 

    ] 

Once that is added, it just remains one last step, redeclaring your entry point from index.js to expo-router/entry. You will modify the main key at the top of your package.json. What that does, is to tell expo where it should serve your application from. Usually, your entry point would be located at /app/_layout.jsx, or /src/app/_layout.jsx. Expo automatically finds this, and serves it all up with no hassles. With this setup, you are good to go.

One more thing.

You want to make sure you are running compatible dependency versions with the current expo version. This is so that your application can be built with no issues when you deploy via EAS.

So, you run

bunx expo-doctor

That runs tests on your dependency array, and checks how fit your application is, like a normal doctor. If you encounter some outdated versions, or you need to set some versions to work properly, you simply run

bunx expo install -–check

That checks your dependencies, and updates them to the versions compatible with the expo SDK.

At this point, it is safe to delete your index.js and App.js files, as you have defined your entry points properly.

Alright guys, hope this helped you, and you can take it from here.

Cheers 🍻. And happy coding 💻