DEV Community: Chibuzo Franklin Odigbo

Wrote an article for people who wanted to use plain JS to build React Native projects, and showed how to configure with expo to use its advantages

Chibuzo Franklin Odigbo — Tue, 02 Dec 2025 15:33:53 +0000

Chibuzo Franklin Odigbo

Dec 2 '25

Plain ReactNative-Expo setup with pure JavaScript

#reactnative #javascript #beginners #mobile

Comments

4 min read

Plain ReactNative-Expo setup with pure JavaScript

Chibuzo Franklin Odigbo — Tue, 02 Dec 2025 15:32:39 +0000

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 💻

Setting up twin.macro with Vite + React

Chibuzo Franklin Odigbo — Thu, 13 Jun 2024 14:34:16 +0000

Introduction

Recently, I encountered a project which worked with twin macro. My first thought was that Tailwind is already perfect, so why want more? Then I started to use twin.macro, and I have gotten addicted to it. Not only does it have massive flexibility in styling, but you can also use it with emotion, or styled-components, and it is very clean too, when combined with it’s vs code IntelliSense extension.

So, my goal was to go from having my tailwind looking like this

const SpanStyled = ({ active, children }) => (
  <span className={`px-9 py-2 font-bienvenido text-base cursor-pointer rounded-full 
    ${active ? 'bg-brown-600 text-white' : 'bg-transparent text-black'} 
    hover:bg-brown-200`}>
    {children}
  </span>
);

to this

const SpanStyled = styled.span(({ active }: { active: boolean }) => [
  tw`px-9 py-2 font-bienvenido text-base cursor-pointer rounded-full hocus:(bg-brown-20)`,
  active ? tw`bg-brown-600 text-white-900` : tw`bg-transparent text-black-900`
])

I do not need to tell you which would be easier to maintain.

The Setup

Starting with tailwind and dependency installs

Aight, let's jump into it. This is a step-by-step process, which would help you use and be able to set up twin.macro for your vite + react or any other project you bootstrap with vite (I think).

So you have to do the first things first, bootstrap your project as so;

npm create vite@latest

I used the typescript variant. So, you follow the prompt.
Then you install tailwind and its cohorts.

npm install @emotion/styled @emotion/css

npm install -D tailwindcss autoprefixer postcss twin.macro babel-plugin-macros vite-plugin-babel-macros @emotion/babel-plugin @emotion/babel-plugin-jsx-pragmatic @types/babel-plugin-macros @babel/plugin-transform-react-jsx

Aight, when you have installed all these, you would then need to initialise your tailwind with the postcss and autoprefixer, so you do;

npx tailwindcss init -p

Don't forget to add these

@tailwind base;
@tailwind components;
@tailwind utilities;

to your tailwindconfig.json, inside the content object,

 "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",

Folder and file configs for usage

Okay, we are all done with that. Now to the entire configurations.
Now, if you follow Ben Rogerson’s docs in his explanation, you will see the ability to add the babel field to your package.json, or to create a babel-plugin-macros.config.js file and add some code to it. I would suggest you rename it to .mjs, instead of .js
If you are adding to the package.json, you add;

"babelMacros": {
  "twin": {
    "preset": "emotion"
  }
},

Then, if you are creating the babel config, you add this;

module.exports = {
  twin: {
    preset: 'emotion',
  },
}

Alright, well done for coming this distance. All that remains for you to update is your vite.config, add your twin.d.ts, modify your tsconfig.json, and create and import your global styles. It is super easy.
For your vite.config.ts, or js for whichever, replace with this;

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import macrosPlugin from 'vite-plugin-babel-macros'

// https://vitejs.dev/config/
export default defineConfig({
  optimizeDeps: {
    esbuildOptions: {
      target: 'es2020',
    },
  },
  esbuild: {
    jsxFactory: 'jsx',
    jsxInject: 'import { jsx } from "@emotion/react"',
    logOverride: { 'this-is-undefined-in-esm': 'silent' },
  },
  plugins: [
    react({
      babel: {
        plugins: [
          'babel-plugin-macros',
          [
            '@emotion/babel-plugin-jsx-pragmatic',
            {
              export: 'jsx',
              import: '__cssprop',
              module: '@emotion/react',
            },
          ],
          [
            '@babel/plugin-transform-react-jsx',
            { pragma: '__cssprop' },
            'twin.macro',
          ],
        ],
      },
    }),
    macrosPlugin(),
  ],
  define: {
    'process.env': {},
  },
})

When you are done with that, you then create a types folder at the root of your project and create a twin.d.ts or js, dependent, and add this

import 'twin.macro'
import { css as cssImport } from '@emotion/react'
import styledImport from '@emotion/styled'
import { CSSInterpolation } from '@emotion/serialize'

declare module 'twin.macro' {
  // The styled and css imports
  const styled: typeof styledImport
  const css: typeof cssImport
}

declare module 'react' {
  // The tw and css prop
  interface DOMAttributes<T> {
    tw?: string
    css?: CSSInterpolation
  }
}

In my case, I also created a .babelrc.js, and then added this to it _this is not necessary!_

module.exports = {
  presets: [
    [
      "next/babel",
      {
        "preset-react": {
          runtime: "automatic",
          importSource: "@emotion/react",
        },
      },
    ],
  ],
  plugins: ["@emotion/babel-plugin", "babel-plugin-macros"],
};

The only places we need to modify in our tsconfig.json, are;

"skipLibCheck": true,
"jsxImportSource": "@emotion/react",

and


"include": ["src", "types"],

Here, you would just add “types”, to the already existing src that is there, and you are good to go.
Then, you create a styles folder inside your src folder and create a GlobalStyles.tsx inside it. Then you would place this code inside it

import React from 'react'
import { Global } from '@emotion/react'
import tw, { css, theme, GlobalStyles as BaseStyles } from 'twin.macro'

const customStyles = css({
  body: {
    WebkitTapHighlightColor: theme`colors.purple.500`,
    ...tw`antialiased`,
  },
})

const GlobalStyles = () => (
  <>
    <BaseStyles />
    <Global styles={customStyles} />
  </>
)

export default GlobalStyles

after you would then import it to your main.tsx, so it affects your application globally. Then, you are good to use twin.macro to start styling your components.

Conclusion.

So, when you are done setting it up, you should be able to edit your code optimally, and use the tw, instead of the className. Also note you have to import tw at the head of each document as you start to work on it.

So, from this

we have this...

If you want access to the file itself, and see how it was done, this is the repository here

https://github.com/Franklivania/vite-twin.gitv

Cheers and happy coding 🍻&💖

Front-end development: The world in it

Chibuzo Franklin Odigbo — Sun, 11 Feb 2024 13:26:19 +0000

The warm-up

It is no fluke there is a plethora of front-end developers in the tech space, and there are many more who aspire to walk down that part. It is just HTML and CSS, isn’t it? This is the mindset people would use to approach the space. Now, in the space, they discover all the issues that come with frontend development, and they come to the realization of it, then, the hassle starts.

What is frontend development?

I can define this by posting what research has said, and what some other article has said about the subject, but my job is to bake cakes on the internet, so why don’t I give you a slice of what I have baked 😉.

It is necessary to understand what exactly you are doing. Take this instance. You go up to order a meal from your popular meal vendor, and no one comes to answer you, instead, you go to the kitchen, and would have to locate all the ingredients to make the food, and then, you start to prepare. There is no sort of interaction which has kept the meal for you, and you waste time trying to get your meal as you have to prepare it.

Or, imagine you have to get an item from the store, and they are all in boxes. Then you have to search through each box to get what you need. All the hassle and time wasted getting you what you need.

This is where front-end developers come in. They are the waiters who come to take your order, and the store-men who place your items on the rack and tag their prices, so you can access your products easily, and save all your time and energy trying to understand and comprehend how to locate your stuff.

Front-end development as a practice.

It is common nowadays to see a large flux of developers move from frontend development to another practice because of the “complexities” which follow the craft once they see it is not all about HTML and CSS. Even in these two, massive complexities are faced trying to master them. The usual issues usually arise when you have an alignment issue from your design, and you try to rectify them, and you create more issues than the one you have supposedly solved! Terrifying right 🥶🤧. Yes, and this causes a lot of issues when it comes to CSS. Another fundamental example is when you fail to describe the accurate class name or id for your HTML element, and you are done with your CSS styling which is supposed to reflect, and nothing happens. You start to debug, even to the extent of deleting the entire file. Yes, it is very draining. But this is my field.

Nowadays, frontend development has taken a wide innovation spectrum, from clickable buttons to interactive 3D game-like modes, which enable users to be able to interact with the website. There is now a plethora of frameworks which are available for use to create and generate intuitive web pages. This is where the entire hassle comes in, mastering these frameworks, and being able to use them for your fundamental development patterns.

Now, there is an adage that goes

Jack of all trades, but a master of none.

This may or may not be true, considering the entire need for the use of these frameworks. The main thing is moderation. You need to know what you need to use to achieve what you want to achieve; this means that you should be able to understand whichever method you are using and understand how to make maximum use of it to bring interactivity to the users.

The current state of front-end development.

Now, there are a lot of ways frontend developers bring interactivity to the web, and how they incorporate it. It may include subtle but captivating animations, which enthral users, the effects that happen when you are on a particular item, or the arrangement of colours and placement of items on the screen. Fonts and typefaces also play a huge part in what affects users and how they use their websites. They are used to display a particular feel, and they play a huge part in how users would view a particular website, and what it entails.

Front-end development remains what it always has been, providing an easy and understandable means for users to be able to understand and interact with whatever you have placed in store for them. For advanced cases, frontend development also entails the methods used to hold users captivated on their website, so they can generate more traction, and amass those digital footprints. Some others, a minute other have decided that frontend development is a place to express their artistry to the maximum limits! They would use any methods, complex and others like it to ensure they are able to express themselves artistically in their works, and it elucidates their creative passions and what exactly they define as frontend development. This has made them stand out in their fields. Independent creatives like Aristide Benoist, whose work I admire is one of those whose finesse is always portrayed in whatever he does.

Frameworks and libraries for front-end development

Initially, I intended this piece to just be my view on front-end development, and why it should be embraced as more than just something to jump into. But, to give more guidance to individuals who would need it, I will explain and give some resources to what I use in front-end development, that I find useful (you will not see ChatGPT).

Now, to add a dynamic effect to webpages, you use JavaScript. Hence, all the frameworks and libraries I will be mentioning dwell on JavaScript. They have been developed over the years by developers who have seen the increasing demand for web interactivity and have provided means to work on this.

Now, to start with some UI libraries I find intuitive for development, we have;

Framer: Now, Framer is not just a library, as it has evolved into a framework for building low-code/no-code interactive web pages. The part used by developers to incorporate interactivity in webpages is framer-motion. It is a very intuitive and easy-to-learn interface.

UIverse: this is a library where you can copy and incorporate any form of UI element animations into your website. The code is there and just requires you to copy and paste. It ranges from Form elements to social media buttons.

Clippy: For those who love to draw shapes. You can use this to generate shapes using the clip-path tool CSS provides, to be able to draw shapes. It is a very intuitive tool.

Animate.css: This is an intuitive library which allows you to add animations to your HTML elements without the need to write those long and boring CSS keyframes rules to animate your element. It is attached to the class of your HTML element, and it works like magic.

Neumorphism.io: it is an intuitive design tool, which helps to provide the perfect box shadow element you need to create a neumorphic event for your webpage.

Favicon Generator: If you have been searching for ways to be able to generate favicons for your project, this is a resourceful tool which would help you to convert those images to favicons for your use.

Font Joy: have you been looking for the perfect font combinations for your website, this tool is very intuitive, as it generates font matches with the click of a button

Coolors.co: This website offers intuitive combinations of colours you could use for your next project. It is highly customizable and helps save time in looking for the perfect colour combinations for your project.

I could go on listing all that I have in my arsenal which aids me in developing intuitive web pages, but, It would be a whole hassle. You can reach me if you need any guidance. Ever happy to help.

Frameworks used in frontend development are vast, and each are good with its individual qualities. Some examples are; Remix.run, Svelte, Angular, Next.js, Vue.js. these are intuitive frameworks which can be used for frontend development and have heavy SEO optimization support.

You can choose to learn one, two or all of them. What matters most is what you can use it to achieve. Cheers to your learning experience.

Conclusion

To cap it up, frontend development is more than just aligning divs, and rendering the appropriate colour, or translating a figma design to interactive code. There is a lot that goes into fundamentally creating a website which would be able to portray yourself as a front-end developer, including accessibility for screen readers and those with aids to be able to navigate your application with ease. These are the fundamental parts that need to be embraced in front-end development.

So, when next your friend wants to venture into front-end development, as they assume it is easy, quietly make them known to these facts and plausibility that surround the concept of frontend development and ensure they understand the nitty-gritty before getting their hands wet.

You can send me mails to understand more, and I am active on Twitter and LinkedIn.
Check out my website too.

Ciao🍻

Build a theme toggle with REACT-TS, TailwindCSS and ContextAPI

Chibuzo Franklin Odigbo — Thu, 30 Nov 2023 13:05:16 +0000

Introduction

Writing this solution, is because I scoured the ends of the earth to find something that works, and using knowledge obtained from my research, and a YouTube video I watched, I was able to achieve this effect, and I am making this available for us to draw insight from… may be;
Well, we all know the drill, first things first, we prompt our app, using vite. So, here we go!

PS: I’ll be using npm. For yarn or others, you can see the Vite docs

Let us begin

Then, we install the proper dependencies as follows, look at the Tailwind docs for more guidance
As I am using the bash terminal, I am provided with some kind linux flow, so, I do;

It would create it. So, your code panel would look like this;

You will see we have our postcss.config.js and tailwind.config.js files ready for us.
This is how the initial screen looks like

Moving forward, as we are using Vite, we make some specific prompts which enable us to configure Tailwind properly for us to use. You will then add this to your tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Then you add this to your index.css, after clearing it of everything;

@tailwind base;
@tailwind components;
@tailwind utilities;

Your index.css should then look like this

This is the icon library I would be using, check it at Iconify. Then, I would install it as a dev dependency

You should also clear all the stuff in your App.css, and add the initial css prompts to remove the default browser stylings. It should look like this

That is for the initial CSS stuff.

Initalizing your fonts

It is time to cook our stuff. As a bonus, I would also be adding fonts to the project. The place where I get my fonts is CDNFonts. It is a very prolific place, without the constraints of Google... Well, you know the drill.
So, I’ll be using the Varuna font, copy and paste in your index.css, and make these modifications to your tailwind.config.js

@import url('https://fonts.cdnfonts.com/css/varuna');

When you do, you should have;

Getting Started with the Theme Changer

In your src folder, create a context folder, and create a ThemeContext.tsx file to it.

When you do, you should have a starter code like this

You have created a Theme type to store the types, then the interface to use those types to perform whatever function you would need.
Then, create a ThemeContext to store the states in a context

After that, create an arrow function, which would contain all the parameters you would need to execute the theme change. I will call it ThemeProvider

In this ThemeProvider, I would use the useState hook to toggle the state based on which theme, then create a function to handle it’s toggle. The code should look like this

Merging those code together, we should have;

We then create a function to be able to use the Theme, and set an error boundary, so we would be able to know if there is an issue using it

When you are done, you would write parameters to export the ThemeProvider and the useTheme. When that is done, you should have your full code like this…

Now, let us use it to toggle our theme. The colors I used, are generated from coolors.co[link], check it out. We would also initialize the darkMode in tailwind.config.js, and add the class to the index.html. Ensure it is written className, not class. You should have this;

Do not forget to wrap your App in your main.tsx with the ThemeProvider.
Now, let us write the code to test the theme, and change it. I would be using the initial boilerplate code with the modifications to change the theme

With the stylings and all, you should have this;

Special:

To make the theme persist reload, you have to save it to local storage. So, your code would be modified as such;

And that’s all folks. Hope you worked with this, and it potentially solved your problem.

Catch you next time. Thank you!
You can reach by mail here Chibuzo Odigbo, Twitter, LinkedIn, Github, My Website

Cheers🍻