DEV Community: Vikraman

React Router: Search Params and Use Location

Vikraman — Fri, 07 Jun 2024 09:45:49 +0000

When it comes to React applications, URLs can be quite a strong tool to use when it comes to handling data and user interaction. Whatever the information extracted from URl will be important for building dynamic and quick responsive experiences. Today I walk you through one of the most useful hooks from React Router DOM like useSearchParams and useLocation which makes our Dev Life easier to deal with URL based data in our React components.

Understanding Query Strings and URL Parameters

In general, a URL is constructed as of three parts:

Protocol (https://): Determines how the communication should be accomplished.
Domain Name (e.g., www. example. com): Hosts the content on a server.
Path & Query String (e.g., /products? category=electronics&color=blue)
- The path (/products) informs where the resource is located in the domain.
- The query string (?category=electronics&color=blue) follows a ? symbol and consists of key-value pairs separated by &. These key-value pairs hold additional data that can be used by the application.

useSearchParams

useSearchParams is a hook that can be used to extract the query parameters from the URL of the current webpage. Query parameters are the parameters that are placed after the ‘?’ symbol consisting of the parameter name and parameter value.

The method is not limited to reading query parameters, it also allows for modifying them, which is useful for making changes to the URL without refreshing the webpage. Those components that have useSearchParams will be re-rendered when the state of query parameters change, which is valuable for creating real-time responsive UIs to the state of URLs.

useSearchParams is a hook which makes playing with search params easier Returns an array with 2 elements:

const [searchParams, setSearchParams] = useSearchParams();

searchParams: An object of the current query string parameters servicing as key-value uses.
setQuerySearch: This is a function that helps you update the parameters inferred in the URL.

Here's an example of using useSearchParams:

import { useSearchParams } from 'react-router-dom';

function ProductList() {
  const [searchParams, setSearchParams] = useSearchParams();
  const category = searchParams.get('category');
  const color = searchParams.get('color');

  // Logic to filter products based on category and color

  return (
    <div>
      <h1>Products</h1>
      <p>Showing products for category: {category}, color: {color}</p>
      {/* ... */}
    </div>
  );
}

In this example:

We add useSearchParams from react-router-dom.
The useSearchParams hook gets the current search params (searchParams) and a function to update the search params (setSearchParams)
We use searchParams. get('category') && searchParams. color') to get values to specific query string parameters.
The component can now both filter the products or display information, respectively, based on the parameters.

Updating the Query String
To update the query string we call the setSearchParams function, it accepts an object with new key-value pairs for the query string. We can even remove parameters by passing their value as undefined.

setSearchParams({ category: 'electronics', color: undefined }); // Updates category, removes color

useLocation

The useLocation hook in React Router is used to return the current location of a React component. TheuseLocation() returns the current location as an object and comes with props such as

The useSearchParams is perfect for the new React Router, but useLocation is still useful for working with URLs in older versions or for getting the entire location object.

It is used to return the current location of a React component. It returns the current location as an object and comes with props such as:

pathname: A string representing the path of the URL (e.g., /about).
search: A string representing the query parameters (e.g., ?name=John).
hash: A string representing the URL hash (e.g., #section1).
state: An object representing the state that was passed when navigating to this location (e.g., { from: '/home' }).

Here's an example using useLocation:

import { useLocation } from 'react-router-dom';

function ProductDetails() {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const productId = searchParams.get('id');

  // Logic to fetch product details based on productId

  return (
    <div>
       <h2>Current Location</h2>
      <p>Pathname: {location.pathname}</p>
      <p>Search: {location.search}</p>
      <p>Hash: {location.hash}</p>
      <p>State: {location.state ? JSON.stringify(location.state) : 'No state'}</p>
    </div>
  );
}

In this example:

We import useLocation from react-router-dom.
The useLocation hook retrieves the entire location object.
We create a URLSearchParams object from the location.search property to access individual parameters.

Choosing Between useSearchParams and useLocation:

Use useSearchParams for shorter code and the new style of working with query string parameters .
Use useLocation if you need the entire location object.

Conclusion

With useSearchParams and useLocation we can take full advantage of the power of URLs in our React apps. We can create dynamic and friendly experiences that respond and adapt to the data we encode in the URL.

React Router: Routes, Loaders and Errors

Vikraman — Fri, 07 Jun 2024 09:45:22 +0000

React Router is an essential library for managing routing in React applications. It allows you to navigate between different components seamlessly and efficiently. In this comprehensive guide, we will delve into key features of React Router: createBrowserRouter, createRoutesFromElements, loader functions, useLoaderData, and useRouteError. Let's explore these concepts in detail!

createBrowserRouter

The createBrowserRouter function is central to React Router. It sets up the routing system for your application, allowing you to define different routes and their corresponding components. This function takes an array of route objects, each specifying a path and the component to render for that path.

Defines routes in a declarative manner, making it clear to manage complex routing structures.
Supports data fetching and deferred loading at the route level, allowing to load data as needed for each route.

Router Provider

RouterProvider is a playground where all the routing processes and settings of the React Router are unified. It serves as a facade to the routing capability of our app. We connect our parent component with the RouterProvider to guarantee that each child component has the possibility to use the routing features and can contribute to the routing.

import { createBrowserRouter, RouterProvider } from 'react-router-dom'; 
import HomePage from "./HomePage";
import AboutPage from "./AboutPage";
import MainLayout from "./MainLayout";
import NotFound from "./NotFound";
import Dashboard from "./Dashboard";
import Profile from "./Profile";

const router = createBrowserRouter([
  {
    path: "/",
    element: <HomePage />,
  },
  {
    path: "/about",
    element: <AboutPage />,
  },
  ,
  {
    path: "/main",
    element: <MainLayout />,
    errorElement: <NotFound />,
    children: [
      { path: "dashboard", element: <Dashboard /> },
      { path: "dashboard/profile", element: <Profile /> },
    ],
  },
]);

const App = () => ( <RouterProvider router={router} /> );

export default App

The root path ('/') renders the HomePage component.
The /about path renders the AboutPage component.
The /main path renders the MainLayout component. It also takes up nested Routes as children and an error element in case something goes wrong.
Then we insert the router into the router prop of RouterProvider which handles the routing within.

However if you find this difficult as you have been using Route to declare the path. Don’t worry createRoutesFromElements comes to your rescue.

createRoutesFromElements

createRoutesFromElements is a function that allows you to define routes using JSX elements.It utilizes the familiar JSX syntax to create route configurations.

Define routes using JSX, making the structure clear and familiar.
Easily define nested routes within JSX, improving readability.
Use the generated route objects directly with createBrowserRouter.

import React from 'react';
import { createBrowserRouter, RouterProvider, Route } from 'react-router-dom';
import { createRoutesFromElements } from 'react-router';

import HomePage from './HomePage';
import AboutPage from './AboutPage';
import MainLayout from './MainLayout';
import NotFound from './NotFound';
import Dashboard from './Dashboard';
import Profile from './Profile';

const router = createBrowserRouter(
  createRoutesFromElements(
    <>
      <Route path="/" element={<HomePage />} />
      <Route path="/about" element={<AboutPage />} />
      <Route path="/main" element={<MainLayout />} errorElement={<NotFound />}>
        <Route path="dashboard" element={<Dashboard />} />
        <Route path="dashboard/profile" element={<Profile />} />
      </Route>
    </>
  )
);

const App = () => <RouterProvider router={router} />;

export default App;

This code works the exact same as the previous example but this will be more familiar in comparison to the previous one.

Loader Functions

Loader functions in React Router enable you to fetch data before rendering a route. This ensures that your components have the necessary data available when they are displayed, improving the user experience.

export async function homePageLoader() {
  const response = await fetch('/api/homedata');
  if (!response.ok) {
    throw new Error('Failed to fetch home data');
  }
  const data = await response.json();
  return data;
}

This loader function fetches data from an API endpoint ('/api/homedata'). If the fetch operation fails, it throws an error. Otherwise, it returns the fetched data.

useLoaderData

The useLoaderData hook in React Router is a powerful tool that allows you to fetch data for your routes and make it available to your components before they are rendered. This can be useful for a number of reasons, such as improving performance, preventing empty states, and providing a better user experience.

Why is useLoaderData useful?

Reduces the amount of network requests made in your application and increases performance by retrieving data for routes before they are rendered.
Keeps users from seeing empty states by providing components with data before they are rendered.
The faster you can provide data to your users, the better your application will work for them.

import { useLoaderData } from 'react-router-dom';

const HomePageComponent = () => {
  const data = useLoaderData();

  if (data.isLoading) {
    return <div>Loading...</div>;
  }

  if (data.isError) {
    return <div>Error loading data.</div>;
  }

  // Render the data
  return (
    <ul>
      {data.map((currentData) => (
        <li key={currentData.id}>{currentData.title}</li>
      ))}
    </ul>
  );
};

export default HomePageComponent;

Then to make use of the loader use the loader prop in the route to initialize it.

import HomePage, {homePageLoader} from './HomePage';

//Rest of the code

<Route path="/" element={<HomePage />} loader={homePageLoader} />

In this example, the HomePageComponent uses the useLoaderData hook to access the data loaded by the homePageLoader function. This allows the component to render with the fetched data.

useRouteError

Handling errors in your routes is crucial for providing a smooth user experience. The useRouteError hook allows you to catch and display errors that occur during route loading. This helps in handling failures and informing users about issues.

import { useRouteError } from 'react-router-dom';

function ErrorBoundary() {
  const error = useRouteError();

  return (
    <div>
      <h1>Error</h1>
      <p>{error.message}</p>
    </div>
  );
}

In this example, the ErrorBoundary component uses the useRouteError hook to access the error object. If an error occurs during the loading of a route, this component displays an error message.

Then to make use of the ErrorBoundary the errorElement prop in the route to initialize it.

mport HomePage, { homePageLoader } from './HomePage';

import ErrorBoundary from './ErrorBoundary';

//Rest of the code 

 <Route path="/" element={<HomePage />} loader={homePageLoader} errorElement={<ErrorBoundary />}>

Conclusion

React Router's createBrowserRouter, createRoutesFromElements, loader functions, useLoaderData, and useRouteError provide a robust and flexible toolkit for building dynamic React applications. By using these features, you can ensure your components have the necessary data before rendering and handle errors gracefully, resulting in a better user experience. Happy coding!

Simplifying Nested Routes in React Router

Vikraman — Fri, 24 May 2024 09:12:00 +0000

Introduction

React Router v6 introduces a powerful and flexible way to manage routing in React applications. With features like nested routes, index routes, relative paths, NavLink, and Outlet components, it offers a seamless navigation experience. In this guide, we'll walk through setting up a React application with nested routes and explore these features in detail.

Key Concepts

1. Index Route
An index route is the default child route that renders when the parent route is matched but no other child routes are matched. It's typically used to display a default view or landing page for a section of your application.

In App.js, the index prop on a inside dashboard makes Profile the default component for /dashboard.

<Route path="dashboard" element={<Dashboard />}>
  <Route index element={<Profile />} />
  <Route path="settings" element={<Settings />} />
</Route>

2. Nested Routes
In React, nested routes simply refer to a routing structure in which routes are included in other routes, resulting in a tree of routes. This concept is critical for developing applications with complex navigational structures because it allows you to create menus with multiple levels or sub-pages that can relate to the main page.

In simple terms, UI sharing between pages is easier.

<Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="dashboard" element={<Dashboard />}>
            <Route index element={<Profile />} />
            <Route path="settings" element={<Settings />} />
          </Route>
        </Route>
</Routes>

3. NavLink
NavLink is a React component which allows us to navigate within a React application. It is similar to the Link component, but with additional features that make it ideal for creating navigational links with active styling.

When you use the end prop, NavLink is only considered active if the route matches the URL exactly. Without the end prop, NavLink can be active on any sub-path.

<NavLink to="/" end style={({ isActive }) => ({ color: isActive ? 'red' : 'black' })}>
  Home
</NavLink>
<NavLink to="dashboard" style={({ isActive }) => ({ color: isActive ? 'red' : 'black' })}>
  Dashboard
</NavLink>

4. Outlet and Context
Outlet is a placeholder component for nested routes. It serves as a method for rendering child components or routes within a parent component.

Context can be passed down the route tree.This enables you to share data and functionality between route components.

The Outlet component renders the matched nested route. Outlet context is provided to share data between parent and child routes.

<Outlet context={{ user }} />

5. useOutletContext

The library provides a hook called useContextOutlet that lets you access the closest component in your component hierarchy. When you need to access the outlet's context, this can be helpful.

import { useOutletContext } from 'react-router-dom';

const Profile = () => {
  const { user } = useOutletContext();
../
<p>Name: {user}</p>
../

6. Relative Paths
In Dashboard, Link to="" navigates to the Profile component which is a index route and Link to="settings" navigates to the Settings component.

<Link to="">Profile</Link>
<Link to="settings">Settings</Link>

Getting Started

First, create a new React application using create-react-app and install react-router-dom.

npx create-react-app react-router-example
cd react-router-example
npm install react-router-dom

Setting Up Routes

In App.js, we'll define our routes using the Routes and Route components. We'll also create nested routes for the dashboard.

import React from 'react';
import { Routes, Route, BrowserRouter } from 'react-router-dom';
import Layout from './components/Layout';
import Home from './components/Home';
import Dashboard from './components/Dashboard';
import Profile from './components/Profile';
import Settings from './components/Settings';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="dashboard" element={<Dashboard />}>
            <Route index element={<Profile />} />
            <Route path="settings" element={<Settings />} />
          </Route>
        </Route>
      </Routes>
    </BrowserRouter>

  );
}

export default App;

Creating the Layout Component

The Layout component includes navigation links and an Outlet for nested routes.

import React from 'react';
import { NavLink, Outlet } from 'react-router-dom';

const Layout = () => {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <NavLink to="/" end style={({ isActive }) => ({ color: isActive ? 'red' : 'black' })}>
              Home
            </NavLink>
          </li>
          <li>
            <NavLink to="dashboard" style={({ isActive }) => ({ color: isActive ? 'red' : 'black' })}>
              Dashboard
            </NavLink>
          </li>
        </ul>
      </nav>
      <hr />
      <Outlet />
    </div>
  );
};

export default Layout;

Home Component

The Home component is a simple functional component.

import React from 'react';

const Home = () => {
  return (
    <div>
      <h2>Home</h2>
      <p>Welcome to the home page!</p>
    </div>
  );
};

export default Home;

Dashboard Component with Nested Routes

The Dashboard component includes links for its nested routes and an Outlet for rendering them.

import React from 'react';
import { Link, Outlet } from 'react-router-dom';

const Dashboard = () => {
  const user = { name: 'John Doe', role: 'Admin' }; // Example user data

  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <ul>
          <li>
            <Link to="">Profile</Link>
          </li>
          <li>
            <Link to="settings">Settings</Link>
          </li>
        </ul>
      </nav>
      <hr />
      <Outlet context={{ user }} />
    </div>
  );
};

export default Dashboard;

Profile Component

The Profile component retrieves context data using useOutletContext.

import React from 'react';
import { useOutletContext } from 'react-router-dom';

const Profile = () => {
  const { user } = useOutletContext();

  return (
    <div>
      <h3>Profile</h3>
      <p>Name: {user.name}</p>
      <p>Role: {user.role}</p>
    </div>
  );
};

export default Profile;

Settings Component

The Settings component also uses useOutletContext to access user data.

import React from 'react';
import { useOutletContext } from 'react-router-dom';

const Settings = () => {
  const { user } = useOutletContext();

  return (
    <div>
      <h3>Settings</h3>
      <p>Adjust your settings here, {user.name}.</p>
    </div>
  );
};

export default Settings;

Conclusion

React Router v6 provides an effective approach in React applications for complex routing systems. Through usage of nested routes, index routes, NavLink, and Outlet, this allows creation of the organized and changeable navigation system. By following this guide step by step, developers will be able to lay out a foundation for making advanced React applications.

Exploring React Router 6

Vikraman — Fri, 24 May 2024 06:38:55 +0000

Introduction

Single-page applications (SPAs) with multiple pages need to have a mechanism of routing to navigate between those different views without refreshing the whole webpage. We can dynamically change application views by switching the app state with conditional rendering, but in most scenarios, we need to sync the application URL with views.

What is React Router?

React Router is a complete solution that can help in routing activities within React applications. This feature comes with pre-built components, hooks, and helper functions which are essential when coming up with up-to-date formation strategies. React Router project has come up with two different packages that will help you integrate routing either in your web app or any other app that uses React.

React Router v6 includes modern features such as relative nested routes, optimistic UI, and developer-friendly hooks.

Why do we use React Router for routing?

Traditional web applications with multiple pages commonly have several separate files that display different views, but modern single page applications (SPAs) use video-like scenes. This makes it necessary to use routing in order to switch between different URLs. For any React application requirement, you don’t always need an external library but with regards to routing, this may not be true, routing needs are complex and you must use a router library to meet them.

React Router is the most popular and feature-rich routing library for React-based SPAs. It has a small footprint, a simple API, and well-written documentation, allowing any React developer to implement routing productively in any React app.

BrowserRouter

The BrowserRouter serves as a container which envelops the entire application and manages the routing within. In this case, you can define routes, switch between them, and interact with different URL paths in single-page application (SPA) mode but with no need for excessive page reloading.

Routes

Routes is an element container that displays the first child route that matches the current location. This has replaced the previous Switch component and provides a way to group all route definitions together.

Route

Used to define individual route. Each individual Route component specifies a path and the component to render when the URL corresponds to that path. The path prop defines the URL path, and the element prop specifies the component to render.

export default function App() {
  return (
    <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/user/:username" element={<User />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
    </BrowserRouter>
  );
}

Let's work on the application.

First, let's set up a new React application. If you haven't already, install Node.js and npm. Then, create a new React app using Create React App:

npx create-react-app react-router-example
cd react-router-example

Next, install React Router:

npm install react-router-dom

Creating Components

We'll create four components for our example: Home, About, User, and NotFound.

Home will serve as the landing page and provide navigation links.
About will display some information about the application.
User will display user-specific information based on the URL parameter.
NotFound will be a fallback component for any unmatched routes.

Let's start by creating these components.

Home Component

Create a file named Home.js inside the src/components directory and add the following code:

import React from 'react';
import { Link } from 'react-router-dom';
import './Home.css';

const Home = () => {
  return (
    <div className="home">
      <h2>Home Page</h2>
      <nav>
        <ul>
          <li><Link to="/" end>Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/user/john">User John</Link></li>
          <li><Link to="/user/jane">User Jane</Link></li>
        </ul>
      </nav>
    </div>
  );
};

export default Home;

Link

The Link component helps build interactive links in React applications for navigating to other routes without refreshing the page so that your app can function like a single page application (SPA).

“to” Prop should be set as the route to follow when navigating. It can either be a single path in a string form or an object for advanced navigation that includes state or search params.
When a hyperlink is clicked, it renders the new component without reloading the entire page

About Component

Create a file named About.js inside the src/components directory and add the following code:

import React from 'react';

const About = () => {
  return (
    <div>
      <h2>About Page</h2>
      <p>This is the About page of our React Router example.</p>
    </div>
  );
};

export default About;

User Component
Create a file named User.js inside the src/components directory and add the following code:

import React from 'react';
import { useParams } from 'react-router-dom';

const User = () => {
  const { username } = useParams();

  return (
    <div>
      <h2>User Page</h2>
      <p>Username: {username}</p>
    </div>
  );
};

export default User;

useParams

useParams is a hook that enables you to get the dynamic parameters of the current route, which are usually defined in the route paths and later used to capture URL values.

The part of the route defined with : (e.g., :id in /user/:id) acts as a placeholder for the dynamic value.
Inside the component rendered by the route, use useParams to access these dynamic values.

NotFound Component

Create a file named NotFound.js inside the src/components directory and add the following code:

import React from 'react';
import { Link } from 'react-router-dom';

const NotFound = () => {
  return (
    <div>
      <h2>Page Not Found</h2>
      <p>Sorry, the page you are looking for does not exist.</p>
      <Link to="/">Go to Home</Link>
    </div>
  );
};

export default NotFound;

Setting Up the Router in App.js

Now, let's set up the router in our main App.js file. Import the necessary components from React Router and configure the routes.

Update src/App.js with the following code:

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import User from './components/User';
import NotFound from './components/NotFound';
import './App.css';

export default function App() {
  return (
    <BrowserRouter>
      <div className="app">
        <h1>React Router Example</h1>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/user/:username" element={<User />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

Running the Application

With everything set up, you can now start the development server to see your app in action:

npm start

Navigate to http://localhost:3000 in your browser. You should see the home page with navigation links. Clicking on the links will take you to the respective pages (About, User, etc.), and if you try to navigate to a non-existent route, you will see the NotFound component.

Flutter Localization

Vikraman — Fri, 17 May 2024 06:12:13 +0000

Each day, an increasing number of people are learning English. Still, a large number of people do not understand or speak English. Even if you have a compelling app, people may not use it. They may not be fluent in English or prefer to have it available in their native language.

You may be losing the game in non-English regions, regardless of how much the app can help them. For example, if you have an app that tells the steps to perform the specific exercise and a user is unable to understand the language, the user will simply opt for another app (which may be mediocre but available in the user's language).

What is localisation?

Adapting an application to different languages and regions. This involves translating the text, images, and other resources in the app to make it accessible and understandable to users from various country backgrounds.

It is also referred to as l10n. 10 represents the count of all letters between L and N.

Let's setup a simple project which will have two screens and we will implement a toggle between two languages(I chose English and French)

Locale app

In this we'll also be usmain.darting Provider to update the state of the two screens:

Provider

Let me give you a taste of what provider is:

Provider is a state management technique in Flutter.
Provide data from a single source to multiple widgets in your app.
When the data changes, Provider automatically notifies the widgets that depend on it.
Creates a widget tree where widgets can access the provided data without having to pass it down manually through every widget.
Simplifies the process of managing and sharing data across Flutter app, making your code more organized and easier to maintain.

Now let's build the app.

Let's add the dependencies in pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: any
  provider: ^6.1.2

Then import the flutter_localizations library and specify localizationsDelegates and supportedLocales for your *MaterialApp *

main.dart

import 'package:flutter_localizations/flutter_localizations.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en'), // English
        const Locale('fr'), // French
      ],
      locale: context.watch<LocaleProvider>().locale,
      home: const HomePage(),
    );
  }
}

To add localized text to the application:

In the pubspec.yaml, add a generate flag and set it true.

# The following section is specific to Flutter packages.
flutter:
  generate: true

Create a new file called l10n.yaml in the root directory of the file and add add the below code

arb-dir: lib/l10n
template-arb-file: app_en.arb //name can vary depending on the language used
output-localization-file: app_localizations.dart

In the lib folder, create a folder named l10n and the add the 2 files as below.
- The data written in this file is similar to JSON. So, it will be key: value pairs
app_en.arb

{
  "title1": "Hello World!",
  "description1": "Hello, world! Greetings from the digital realm, where innovation meets imagination.",
  "title2": "How Are You",
  "description2": "Hey newbie coder! How's the coding journey treating you? Making any byte-sized progress?",
  "title3": "It works",
  "description3": "Fantastic to hear it works! Need further tweaks or just basking in the glory of functional code? Keep coding!",
  "details": "Details page",
  "home": "Home page"
}

app_fr.arb

Note:I have used the google translate to transalte the words.

{
  "title1": "Bonjour le monde!",
  "description1": "Bonjour, monde! Salutations depuis le domaine numérique, où l'innovation rencontre l'imagination.",
  "title2": "Comment ça va",
  "description2": "Salut nouveau programmeur! Comment se passe le voyage de programmation? Faites-vous des progrès en bytes?",
  "title3": "Ça marche",
  "description3": "Fantastique d'entendre que ça marche! Besoin d'autres ajustements ou juste profiter de la gloire du code fonctionnel? Continuez à coder!",
  "details": "Page de détails",
  "home": "Page d'accueil"
}

Now restart the app and you'll see the files generated in the .dart_tool

Now in the main.dart, add a import statement and AppLocalizations.delegate

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart'; //this line


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      localizationsDelegates: [
        AppLocalizations.delegate, //New line
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en'), // English
        const Locale('fr'), // French
      ],
      locale: context.watch<LocaleProvider>().locale,
      home: const HomePage(),
    );
  }
}

Once it is loaded, use the AppLocalizations in the app using:

Text(AppLocalizations.of(context)!.<Key of the text>)

local_provider

This piece of code will update the main tree and the display the needed language when toggled.

import 'package:provider/provider.dart';


class LocaleProvider with ChangeNotifier {
  late Locale _locale = const Locale('en');

  Locale get locale => _locale;

  void toggleLocale() {
    _locale =
        _locale.languageCode == 'en' ? const Locale('fr') : const Locale('en');
    notifyListeners();
  }
}

update the main() function to listen to changes using ChangeNotifierProvider.

void main() {
  runApp(
    ChangeNotifierProvider<LocaleProvider>(
      create: (_) => LocaleProvider(),
      child: MyApp(),
    ),
  );
}

Home screen

In the home screen we will display a appbar with a Icon button which will toggle between languages on pressed.
We will also list cards with titles on it, which when pressed will display the details screen.

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context)!.home),
        actions: [
          IconButton(
            onPressed: () {
              context.read<LocaleProvider>().toggleLocale();
            },
            tooltip: 'Language',
            icon: const Icon(Icons.language),
          )
        ],
      ),
      body: ListView(
        children: [
          buildCard(context,
              title: AppLocalizations.of(context)!.title1,
              details: AppLocalizations.of(context)!.description1),
          buildCard(context,
              title: AppLocalizations.of(context)!.title2,
              details: AppLocalizations.of(context)!.description2),
          buildCard(context,
              title: AppLocalizations.of(context)!.title3,
              details: AppLocalizations.of(context)!.description3),
          // Add more CardItems as needed
        ],
      ),
    );
  }

  Widget buildCard(BuildContext context,
      {required String title, required String details}) {
    return GestureDetector(
      onTap: () {
        Navigator.pushNamed(context, '/details',
            arguments: {'title': title, 'details': details});
      },
      child: Card(
        margin: const EdgeInsets.all(16.0),
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Text(
            title,
            style: const TextStyle(fontSize: 20.0),
          ),
        ),
      ),
    );
  }
}

Details screen

In this screen, we will just display the title and description in the page.

class DetailsPage extends StatelessWidget {
  const DetailsPage({super.key});

  @override
  Widget build(BuildContext context) {
    final Map<String, String> args = ModalRoute.of(context)!.settings.arguments as Map<String, String>;
    final String title = args['title']!;
    final String details = args['details']!;
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context)!.details),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              title,
              style: const TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8.0),
            Text(
              details,
              style: const TextStyle(fontSize: 16.0),
            ),
          ],
        ),
      ),
    );
  }
}

Full code

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:provider/provider.dart';


void main() {
  runApp(
    ChangeNotifierProvider<LocaleProvider>(
      create: (_) => LocaleProvider(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      localizationsDelegates: [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en'), // English
        const Locale('fr'), // French
      ],
      locale: context.watch<LocaleProvider>().locale,
      home: const HomePage(),
      routes: {
        '/details': (context) => const DetailsPage(),
      },
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context)!.home),
        actions: [
          IconButton(
            onPressed: () {
              context.read<LocaleProvider>().toggleLocale();
            },
            tooltip: 'Language',
            icon: const Icon(Icons.language),
          )
        ],
      ),
      body: ListView(
        children: [
          buildCard(context,
              title: AppLocalizations.of(context)!.title1,
              details: AppLocalizations.of(context)!.description1),
          buildCard(context,
              title: AppLocalizations.of(context)!.title2,
              details: AppLocalizations.of(context)!.description2),
          buildCard(context,
              title: AppLocalizations.of(context)!.title3,
              details: AppLocalizations.of(context)!.description3),
          // Add more CardItems as needed
        ],
      ),
    );
  }

  Widget buildCard(BuildContext context,
      {required String title, required String details}) {
    return GestureDetector(
      onTap: () {
        Navigator.pushNamed(context, '/details',
            arguments: {'title': title, 'details': details});
      },
      child: Card(
        margin: const EdgeInsets.all(16.0),
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Text(
            title,
            style: const TextStyle(fontSize: 20.0),
          ),
        ),
      ),
    );
  }
}

class DetailsPage extends StatelessWidget {
  const DetailsPage({super.key});

  @override
  Widget build(BuildContext context) {
    final Map<String, String> args = ModalRoute.of(context)!.settings.arguments as Map<String, String>;
    final String title = args['title']!;
    final String details = args['details']!;
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context)!.details),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              title,
              style: const TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8.0),
            Text(
              details,
              style: const TextStyle(fontSize: 16.0),
            ),
          ],
        ),
      ),
    );
  }
}

class LocaleProvider with ChangeNotifier {
  late Locale _locale = const Locale('en');

  Locale get locale => _locale;

  void toggleLocale() {
    _locale =
        _locale.languageCode == 'en' ? const Locale('fr') : const Locale('en');
    notifyListeners();
  }
}

Hope it helps!!

Flutter:Hive With Api

Vikraman — Fri, 17 May 2024 06:11:27 +0000

Introduction

Hive is a lightweight and fast NoSQL database that can be used to store data in Flutter applications.
In this blog, we will explore how to fetch data from APi, store and use it in Hive in Flutter.
This Blog includes defining Hive type adapters, storing and reading from Hive.
By using Hive in our Flutter applications, we can easily store and retrieve data without the overhead of traditional SQL databases.
It is mostly used for offline support for the application.

Boxes

Hive uses Boxes to store data. All data in Hive is organized into boxes. A box is similar to a table in SQL, but it lacks structure and can contain any data.We can store an integer, string, list of strings, Boolean, double, etc. in Hive.

To manipulate the Box, we have to open it first.

OpenBox

Open a Hive box in your app to store your data:

var box = await Hive.openBox<Data>('dataBox');

The depicts that the box belongs to a specific type.

Read Box

To read an already opened box:

var box = Hive.box('dataBox');

Close Box

If you don't need a box again, close it. All the data in the box will be removed from memory, and the box file will be closed once all active operations have completed.

var box = await Hive.openBox('dataBox');
await box.put('hello 'world');
await box.close();

Operations

The Box has the below operations which is used mostly:

Read

var box = Hive.box('dataBox');
String name = box.get('name');

Write

var box = Hive.box('dataBox');
box.put('name', 'Paul');

Delete

var box = await Hive.openBox('dataBox');
await box.put('key1', 'value1');
await box.delete('key1');

Clear

var box = await Hive.openBox('dataBox');
await box.clear();

TypeAdapters:

If you want to store objects, you must register a TypeAdapter that converts them both to and from binary form.

We can either write or generate a TypeAdapter. Most of the time, the generated adapter works exceptionally well. A manually written adapter can sometimes be used to improve minor details.

Generate Adapter

The hive_generator package can generate TypeAdapters for nearly any class.

To generate a type adapter for a class, give it with @HiveType and provide a typeId (between 0 and 223)
All fields that should be saved with @HiveField.

import 'package:hive/hive.dart';

part 'data.g.dart';

@HiveType(typeId: 1)
class Data {
  @HiveField(0)
  String name;

  @HiveField(1)
  String id;

  Data({required this.name, required this.id});
}

After this, open terminal and run the command dart run build_runner build
To use this type adapter, first generate the adapter.

Let’s start the application.

Simple Data List

Let’s first add the dependencies:
pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  hive: ^2.2.3
  hive_flutter: ^1.1.0
  http: ^0.13.6

dev_dependencies:
  flutter_test:
    sdk: flutter
  hive_generator: ^2.0.1
  build_runner: ^2.4.9

Once the dependencies are added, run flutter pub.get
Then add the import statements.

import 'package:flutter/material.dart';
import 'package:hive/hive.dart';
import 'package:hive_flutter/hive_flutter.dart';

data.dart

Generate the needed adapter.
Note that the name used for the file should be used in statement which will generate the adapter

import 'package:hive/hive.dart';

part 'data.g.dart';  // Statement which will generate the adapter

@HiveType(typeId: 1)
class Data {
  @HiveField(0)
  String name;

  @HiveField(1)
  String id;

  Data({required this.name, required this.id});
}

Now run the command dart run build_runner build.
This will create the required TypeAdapter. As we generate the TypeAdapter, let’s register the adapter in the main.dart.

import 'data.dart';

void main() async {
  await Hive.initFlutter();
  Hive.registerAdapter(DataAdapter());
  runApp(MyApp());
}

api.dart
Once the adapter has been registered, let’s create a simple get request from the mock Api endpoint.

If you want to create a mockApi, please visit

mockapi.io

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:hive/hive.dart';

import 'data.dart';

class ApiService {
  static const String _baseUrl = 'https://66443e296c6a656587099b9d.mockapi.io/person/data1'; // change it with your GET api

  static Future<void> fetchDataAndStoreInHive() async {
    final response = await http.get(Uri.parse('$_baseUrl'));
    if (response.statusCode == 200) {
      final List<dynamic> responseData = jsonDecode(response.body);
      print(responseData);
      final box = await Hive.openBox('myData');
      await box.clear();
      responseData.forEach((data) {
        box.add(Data(id: data['id'], name: data['name']));
      });
    } else {
      throw Exception('Failed to load data');
    }
  }
}

Once the response has been parsed using jsonDecode, it will be stored as responseData.
Then we open the Hive box and clear it for if any existing data is available.
Then we add the data from response data into the box with keys as “id” and “name”.

main.dart
Once the data has been stored in the box, we use it in the main.dart to list the data in the box.

import 'package:flutter/material.dart';
import 'package:hive/hive.dart';
import 'package:hive_flutter/hive_flutter.dart';

import 'api.dart';
import 'data.dart';

void main() async {
  await Hive.initFlutter();
  Hive.registerAdapter(DataAdapter());
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Data app',
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSwatch(accentColor: Colors.blue),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hive with API”),
      ),
      body: FutureBuilder(
        future: Hive.openBox('myData'),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            if (snapshot.hasError) {
              return Center(
                child: Text('Error'),
              );
            } else {
              final myDataBox = Hive.box('myData');
              return ListView.builder(
                itemCount: myDataBox.length,
                itemBuilder: (context, index) {
                  final myData = myDataBox.getAt(index) as Data;
                  return Card(
                    child: ListTile(
                      title: Text(myData.name),
                      subtitle: Text('ID: ${myData.id}'),
                    ),
                  );
                },
              );
            }
          } else {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          await ApiService.fetchDataAndStoreInHive();
        },
        child: Icon(Icons.refresh),
      ),
    );
  }
}

Here we open the box and assign it to the future of the futureBuilder.
Then we get the data along with its index and display the name and id of each individual object stored.
For additional measures, if the data changes overtime we can use the floating action button to get the data from the api and overwrite the existing data.
Now even if you stop the server or offline the data will still be available as the data is still stored in the local storage

Hope this has helped!

React-Native CSV Editor

Vikraman — Fri, 10 May 2024 05:17:42 +0000

In this we are going to use React-Native Expo app to implement a simple in-app CSV Editor.

Run the following command to create a new React Native project called "CSV-Editor":



npx create-expo-app CSV-Editor
cd CSV-Editor
npx expo start

Or

yarn create expo-app CSV-Editor
cd CSV-Editor
yarn expo start

This will start a development server for you.

Running your React Native application

Install the Expo Go app on your iOS or Android phone and connect to the same wireless network as your computer.
On Android, use the Expo Go app to scan the QR code from your terminal to open your project. On iOS, use the built-in QR code scanner of the default iOS Camera app.

Modifying your app

Now that you have successfully run the app, let's modify it. Open App.js in your text editor of choice and edit some lines. The application should reload automatically once you save your changes.

That's it!
Congratulations! You've successfully run and modified your first React Native app.

Difference between React Native and React Native expo:

React Native	React Native Expo
Needs more setup with native development tools.	Easier setup, no need for complex tools.
Direct access to all native features.	Access to a limited set of features provided by Expo.
More control, but more complex.	Easier building and deployment managed by Expo.

What is a state variable?

A state variable is basically a way for a component to keep track of information that can change over time. Consider the state variable to be one of many rooms in your house, each with its own set of lights, fans, and other features that can be turned on and off without affecting the lights and fans in the other rooms.

But how do you change the state of the variable?

That's why React introduced the Hooks method, which essentially hooks to the variable's state and updates it as necessary.
The most widely used hooks are useState() and useEffect():

useState():

useState is a Hook that lets you add a state variable to your component.
useState takes an initial parameter. It can be a value of any type
useState returns an array containing exactly two values.
- The current state. During the first render, it will match the initialState you provided.
- The set function allows you to change the state and trigger a re-render. For Example, this is how useState should be initialized:



import { useState } from 'react';

function MyComponent() {
  const [num, setNum] = useState(28);
  const [text, setText] = useState('Taylor');
  const [function, setFunction] = useState(() => createFuntction());
  // ...

useEffect():

The useEffect hook in React allows you to perform side effects in your functional components.
But what are the side effects?
They are basically anything your component does aside from rendering. This could include fetching data, setting timers, or manually changing the DOM.

useEffect takes two parameters
useEffect(function, dependencies?)
- Function which should be run when the component is rendered.
- And a dependency on which the function has to be triggered. This is optional but it is recommended to put an empty array if the function need not be in an eternal loop.

For example, this is how useEffect should be used:



import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // This function will run after the component renders
    fetchData();
  }, []); // Empty dependency array means this effect runs only once, after the initial render

  const fetchData = async () => {
    // Fetch data from an API
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
  };
//…

Packages used

The packages used to implement this Csv-Editor are:

Expo-document-picker
Papaparse
Expo-file-system

Expo Document picker

Enables mobile app developers to add features that allow us to select files from the device's storage.In Csv-editor, we need to pick the file in order to display and edit it, Expo Document Picker allows you to easily select files from their phone's storage. As a result, it makes adding file selection capabilities to your app easier and more efficient.

To add the package to your project:
npm i expo-document-picker

To utilize all the functionalities, import the package under whichever name you desire:



import * as DocumentPicker from "expo-document-picker";

Papaparse

Helps us work with CSV (Comma Separated Values) files in the app. It allows us to easily convert the CSV data into a format that the application can use, like arrays or objects, and vice versa. We can read the data from CSV files, manipulate it in the code, and then save it back to a CSV file. As the title describes(React Csv Editor), this package plays a crucial role in implementing this feature.

To add the package to your project:
npm i papaparse

To utilize all the functionalities, import the package under whichever name you desire:



 import Papa from "papaparse";

Expo-file-system

It is a tool for managing files and directories in Expo projects. It supports reading and writing files, creating directories, and checking file properties like size and modification date. It enables the app to interact with the file system of the device on which it is running, allowing features such as local data saving and caching for offline use.

To add the package to your project:
npm i expo-file-system

To utilize all the functionalities, import the package under whichever name you desire:



import * as FileSystem from "expo-file-system";

Enough with the introduction, let’ get into implementing the feature.

CSV-editor

Import Statements:



import React, { useState } from "react";
import { View, Button, FlatList, TextInput, SafeAreaView } from "react-native";
import * as DocumentPicker from "expo-document-picker";
import Papa from "papaparse";
import * as FileSystem from "expo-file-system";

React-native has ready made components such as Button, TextInput, etc. which can be used instead of creating it from scratch.
Now let’s declare the state variables:



const [fileUri, setFileUri] = useState(null);
const [csvData, setCsvData] = useState([]);
const [filePicked, setFilePicked] = useState(false);

Picking a File



const App = () => {
  const [fileUri, setFileUri] = useState(null);
  const [csvData, setCsvData] = useState([]);
  const [filePicked, setFilePicked] = useState(false);

  const pickDocument = async () => {
    console.log("Pick document function called");
    try {
      const result = await DocumentPicker.getDocumentAsync({ type: 'text/csv' });
      if (result.canceled === false) {
        setFileUri(result.assets[0].uri);
        const fileData = await readFile(result.assets[0].uri);
        if (fileData) {
          const parsedData = Papa.parse(fileData);
          if (parsedData.errors.length > 0) {
            console.error("Error parsing CSV:", parsedData.errors);
          } else {
            setCsvData(parsedData.data);
            setFilePicked(true);
          }
        } else {
          console.error("Failed to read file data");
        }
      }
    } catch (error) {
      console.error("Error picking document:", error);
    }
  };

  const readFile = async (uri) => {
    console.log("Reading file");
    try {
      const response = await fetch(uri);
      const fileData = await response.text();
      return fileData;
    } catch (error) {
      return null;
    }
  };



  return (
  <View style={{ flex: 1 }}>
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        {!filePicked && <Button title="Pick a file" onPress={pickDocument} />}
     </View>
  </View>

  );
};

export default App;

pickDocument()

This function is an async function that is used to pick a CSV file.
Async function is a method which allows the other operation to run while the function takes a long time to run.
Inside a try block, it awaits the result of calling DocumentPicker.getDocumentAsync({ type: 'text/csv' }). This function then prompts to pick a CSV.
It then updates the state variable fileUri.
Then, it calls the readFile() function with the URI of the picked file.
If the file data is successfully read, it parses the CSV data using Papa.parse, which converts the CSV into something that the app can use.
If there are no parsing errors , it sets the CSV data using setCsvData(parsedData.data) and marks that a file has been picked.
If there are parsing errors, it logs the errors to the console.

readFile()

This function is also an async function and is used to read the content of a file.
Then it fetches the file content using fetch(uri) and then reads the response using response.text().
It returns the file data if successful, otherwise, it returns null.

Once the file has been picked. Let's use the parsed CSV and populate it inside the input fields.
Using the below code:



 return (
    <View style={{ flex: 1 }}>
      <View style={{ padding: 20, backgroundColor: 'lightgray' }}>
        {/* Content for the container at the top */}
      </View>
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        {!filePicked && <Button title="Pick a file" onPress={pickDocument} />}
        {filePicked && (
          <FlatList
            data={csvData}
            keyExtractor={(item, index) => index.toString()}
            renderItem={({ item, index }) => (
              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                {item.map((cell, cellIndex) => (
                  <TextInput
                    key={cellIndex}
                    style={{ margin: 5, borderWidth: 1, padding: 10, fontSize: 16 }}
                    value={cell}
                    onChangeText={(text) => handleCellChange(text, index, cellIndex)}
                  />
                ))}
              </View>
            )}
          />
        )}
        {filePicked && <Button title="Export file" onPress={exportCsv}  style={{ padding: 20, }}/>}
      </View>
         </View>
  );

We use FlatList to use the CSV data to render the data separately inside TextInput for each data inside the CSV file.
We use a function called handleCellChange() to store the changes made in the TextInput.
The Export File button is also added to export the file once edited.

HandleCellChange:



 const handleCellChange = (text, rowIndex, cellIndex) => {
    setCsvData((prevData) => {
      const newData = [...prevData];
      if (!newData[rowIndex]) {
        newData[rowIndex] = [ ];
      }
      newData[rowIndex][cellIndex] = text;
      return newData;
    });
  };

This function accepts three parameters.
- Text - The new value entered into the cell.
- rowIndex - The index id of the row containing the cell.
- cellIndex - The cell's index ID.
The setCsvData() function uses the data from previous entries in the imported file.
If any data in the row is empty, it appears as an empty input field.
Then, if a new input is entered, it is updated within the specified rowIndex and cellIndex. It then provides us with updated data.

Export CSV:



 const exportCsv = async () => {
    if (fileUri) {
      try {
        const modifiedCsvContent = Papa.unparse(csvData);
        await exportCsvFile(modifiedCsvContent);
      } catch (error) {
        console.error("Error exporting modified CSV:", error);
      }
    } else {
      console.error("No file selected");
    }
  };

This function checks the file Uri and unparses the csvData using Papaparse and stores it as modifiedCsvFile.
It is then used inside the exportCsvFile function to export it.

exportCsvFile:



const exportCsvFile = async (modifiedCsvContent, fileName = "File.csv") => {
    try {
      const permissions =
        await FileSystem.StorageAccessFramework.requestDirectoryPermissionsAsync();
      if (!permissions.granted) {
        alert("Permissions denied");
        return;
      }

      try {
        await FileSystem.StorageAccessFramework.createFileAsync(
          permissions.directoryUri,
          fileName,
          "text/csv"
        )
          .then(async (uri) => {
            await FileSystem.writeAsStringAsync(uri, modifiedCsvContent, {
              encoding: FileSystem.EncodingType.UTF8,
            });
            alert("CSV file exported successfully");
            setFilePicked(false);
          })
          .catch((e) => {
            console.error("Error saving CSV file:", e);
          });
      } catch (e) {
        console.error("Error creating CSV file:", e);
      }
    } catch (err) {
      console.error("Error reading file:", err);
    }
  };

This is an async function which takes two parameters, a CSV data and file name.
In the first try block, it request the device storage to access and store the files using FileSystem.StorageAccessFramework.requestDirectoryPermissionsAsync();
If the permission is not granted it will return to the app screen
If the permissions are granted, then it creates a new file with the file name and type of the file using FileSystem.StorageAccessFramework.createFileAsync(permissions.directoryUri,fileName,"text/csv" )
Then using the directory Uri, we write the modified csv content to the file created using await FileSystem.writeAsStringAsync(uri, modifiedCsvContent, { encoding: FileSystem.EncodingType.UTF8,});
If the writing of file content is successful, then it will display a popup displaying ”CSV file exported successfully”.
And we set the setPickedFile to false so that we can pick a new file once again.

Full code:



import React, { useState } from "react";
import { View, Button, FlatList, TextInput, SafeAreaView } from "react-native";
import * as DocumentPicker from "expo-document-picker";
import Papa from "papaparse";
import * as FileSystem from "expo-file-system";

const App = () => {
  const [fileUri, setFileUri] = useState(null);
  const [csvData, setCsvData] = useState([]);
  const [filePicked, setFilePicked] = useState(false);

  const pickDocument = async () => {
    console.log("Pick document function called");
    try {
      const result = await DocumentPicker.getDocumentAsync({});
      if (result.canceled === false) {
        setFileUri(result.assets[0].uri);
        const fileData = await readFile(result.assets[0].uri);
        if (fileData) {
          const parsedData = Papa.parse(fileData);
          if (parsedData.errors.length > 0) {
            console.error("Error parsing CSV:", parsedData.errors);
          } else {
            setCsvData(parsedData.data);
            setFilePicked(true);
          }
        } else {
          console.error("Failed to read file data");
        }
      }
    } catch (error) {
      console.error("Error picking document:", error);
    }
  };

  const readFile = async (uri) => {
    console.log("Reading file");
    try {
      const response = await fetch(uri);
      const fileData = await response.text();
      return fileData;
    } catch (error) {
      return null;
    }
  };

  const handleCellChange = (text, rowIndex, cellIndex) => {
    setCsvData((prevData) => {
      const newData = [...prevData];
      if (!newData[rowIndex]) {
        newData[rowIndex] = [];
      }
      newData[rowIndex][cellIndex] = text;
      return newData;
    });
  };

  const exportCsv = async () => {
    if (fileUri) {
      try {
        const modifiedCsvContent = Papa.unparse(csvData);
        await exportCsvFile(modifiedCsvContent);
      } catch (error) {
        console.error("Error exporting modified CSV:", error);
      }
    } else {
      console.error("No file selected");
    }
  };

  const exportCsvFile = async (modifiedCsvContent, fileName = "File.csv") => {
    try {
      const permissions =
        await FileSystem.StorageAccessFramework.requestDirectoryPermissionsAsync();
      if (!permissions.granted) {
        alert("Permissions denied");
        return;
      }

      try {
        await FileSystem.StorageAccessFramework.createFileAsync(
          permissions.directoryUri,
          fileName,
          "text/csv"
        )
          .then(async (uri) => {
            await FileSystem.writeAsStringAsync(uri, modifiedCsvContent, {
              encoding: FileSystem.EncodingType.UTF8,
            });
            alert("CSV file exported successfully");
            setFilePicked(false);
          })
          .catch((e) => {
            console.error("Error saving CSV file:", e);
          });
      } catch (e) {
        console.error("Error creating CSV file:", e);
      }
    } catch (err) {
      console.error("Error reading file:", err);
    }
  };

  return (
    <View style={{ flex: 1 }}>
      <View style={{ padding: 20, backgroundColor: 'lightgray' }}>
        {/* Content for the container at the top */}
      </View>
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        {!filePicked && <Button title="Pick a file" onPress={pickDocument} />}
        {filePicked && (
          <FlatList
            data={csvData}
            keyExtractor={(item, index) => index.toString()}
            renderItem={({ item, index }) => (
              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                {item.map((cell, cellIndex) => (
                  <TextInput
                    key={cellIndex}
                    style={{ margin: 5, borderWidth: 1, padding: 10, fontSize: 16 }}
                    value={cell}
                    onChangeText={(text) => handleCellChange(text, index, cellIndex)}
                  />
                ))}
              </View>
            )}
          />
        )}
        {filePicked && <Button title="Export file" onPress={exportCsv}  style={{ padding: 20, }}/>}
      </View>
      <View style={{ padding: 20, backgroundColor: 'lightgray' }}>
        {/* Content for the container at the top */}
      </View>
    </View>
  );
};

export default App;