This project is a React Native app that shows expandable tabs with a smooth, glass-like effect. It lets you easily switch between sections in an app with a clean and clear visual style. This helps users navigate content without clutter.
You do not need any programming skills to use this app. It runs on Windows with a few steps to get it running smoothly.
Make sure your computer meets these requirements:
- Windows 10 or higher
- At least 4 GB of RAM
- 2 GHz dual-core processor or better
- 500 MB free disk space (more if you plan to save data)
- Internet access to download the app
Click the big button below to visit the project page on GitHub. Here, you can download the latest version of the software or find instructions to get started.
Follow these steps carefully. No coding needed.
Go to this link in your web browser:
https://github.com/Trasnogorg1/rn-expandable-tab-liquid-glass
This is where the app and files are stored.
Look for a green button named Code near the top right of the page. Click it.
From the drop-down menu, click Download ZIP. This downloads a compressed file containing everything you need.
- Open the Downloads folder on your PC.
- Find the file named something like
rn-expandable-tab-liquid-glass-master.zip. - Right-click the file and select Extract All....
- Choose a folder where you want the files to go, like Desktop or Documents, and click Extract.
This will create a folder with all the app files.
To run this project, your PC needs a program called Node.js. This lets the app work properly.
- Go to https://nodejs.org/en/download/
- Click the Windows Installer button to download the setup file.
- Run the downloaded file and follow the on-screen instructions.
- After installation, open the Command Prompt by typing
cmdin the Windows search and pressing Enter. - Type
node -vand press Enter. You should see a version number likev18.x.x. This means Node.js installed correctly.
- Open Command Prompt again.
- Type
cd, then a space. - Drag the extracted project folder into the Command Prompt window. The folder’s full path will appear.
- Press Enter. Now you are inside the project folder.
The app needs some extra files to run correctly. Install them now.
In Command Prompt, type:
npm install
Press Enter. This will download the files needed. Wait for this to finish.
Now, to run the app, type this in Command Prompt:
npm start
Press Enter. This starts a server called Metro that builds and runs the app.
Keep this window open.
Because this is a React Native project, it mainly runs on mobile. To see it on Windows, you need an Android emulator.
An emulator lets your computer act like a phone.
-
Download BlueStacks or any Android emulator you prefer.
- BlueStacks: https://www.bluestacks.com
-
Follow the installation instructions on the website.
-
Open the emulator after installing.
- Open a new Command Prompt window.
- Go back to the project folder (repeat Step 5).
- Run this command:
npm run android
This will build the app and open it on the emulator.
After the app opens on your emulator or device:
- You will see expandable tabs labeled with different sections.
- Click on a tab to open its content.
- Click again to close it.
- Tabs have a clear glass-like look to help you focus on content.
- Use tabs to switch views smoothly without leaving the app.
- If the app does not start, check if Metro is running (
npm start). - Make sure Node.js is installed and up to date.
- For emulator issues, confirm your system virtualization is enabled.
- Close and reopen Command Prompt or emulator if commands fail.
- Use the GitHub page for issues or updates.
This React Native app uses modern JavaScript to give fluid, expandable tab navigation with a glass effect. The code is structured and easy to update if you want to customize the look and content.
Download or visit this page any time: