How to read EAS build Secrets and Environment Variables in a expo project. Getting undefined?

This is my code in a Sample-Expo-Project. I am not able to add environment variable using process.env and also in EAS Secrets. I have added secrets in EAS but cannot read while building. In both cases I am getting undefined. Please spot where I am doing wrong, I am trying from multiple days.

App.js

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";

export default function App() {
  console.log(process.env); // Getting {"NODE_ENV": "development"}
  console.log(process.env.HELLO); // Getting undefined

  return (
    <View style={styles.container}>
      <Text>From Env {process.env?.HELLO}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Babel Config

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["transform-inline-environment-variables"],
  };
};

Env File

HELLO=HelloEveryone

Package.json

{
  "name": "sample-expo-app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~48.0.15",
    "expo-status-bar": "~1.4.4",
    "react": "18.2.0",
    "react-native": "0.71.7"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "babel-plugin-transform-inline-environment-variables": "^0.4.4"
  },
  "private": true
}

I was also struggling with this and here is the solution that works best for me:

I set my environment variables in a .env file and on the expo.dev website under the configuration of my project.
https://expo.dev/accounts/[your_username]/projects/[your_project]/secrets

In my coding I'm using react-native-dotenv.
https://www.npmjs.com/package/react-native-dotenv

It is very easy to set up and they have a good documentation.

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [["module:react-native-dotenv"]],
  };
};

env.d.tsx

declare module "@env" {
  export const HELLO: string;
}

App.tsx

import { HELLO } from "@env";

export default function App() {

  return (
    <View>
      <Text>From Env {HELLO}</Text>
    </View>
  );
}

If you're not using typescript you can skip the env.d.tsx part.

I'm now able to access my secrets in development and in my EAS builds without problems. I just uploaded a new version to Internal Testing on Android and it works fine.

Hope I could help someone.

Cheers,
Thomas