Get Username and Password from locally created .json file in React Native

Question

I have created a basic login page with username, password input fields and a button. Also created a .json file which contains username and password. Now when I open login page, instead of typing username and password manually in the fields, those input fields should read from locally created .json file. How can I solve this?

Please help me get this answer. Thanks in Advance!

If you are trying to implement the "Remember me?" functionality, I encourage you to use a library like "react-native-keychain", which allows you to store credentials in a secure way. — Muhammed B. Aydemir, Aug 18 '20 at 12:44
But if you insist on a json file, you will most likely need to use react-native-fs https://github.com/itinance/react-native-fs — Muhammed B. Aydemir, Aug 18 '20 at 12:47
@MuhammedB.Aydemir Thanks for response. No, am using a plain login page with username, password and login button. That username and password fields should read inputs from local .json file. — Venkat Sai, Aug 18 '20 at 12:48
Let me explain the scenario. I created a react native project. In this, I just created a login page with username, password fields and a button. And I created a .json file which consists username and password. Now in login page, instead of typing username and password, I need those fields get read from .json file. — Venkat Sai, Aug 18 '20 at 12:59
I see, please check https://stackoverflow.com/questions/10011011/using-node-js-how-do-i-read-a-json-file-into-server-memory The answer from Travis Tidwell is pretty staright forward — Muhammed B. Aydemir, Aug 18 '20 at 13:11
@VenkatSai You could import your json file like this `"import json from '../../file.json";` and use that username and password while initializing the state. Something like this :- `const [email, setEmail] = React.useState(json.user.email);` — Prateek Thapa, Aug 18 '20 at 13:11

score 0 · Accepted Answer · answered Aug 18 '20 at 17:54

// login.json
{
    "username": "testing",
    "password": "testing"
}


// UserTextInput.js
import * as loginData from './login.json';
import React, { Component } from 'react';
import { TextInput } from 'react-native';

const UserTextInput = () => {
  const [username, onUserNameChangeText] = React.useState(loginData.username);
const [password, onPasswordChangeText] = React.useState(loginData.password);


  return (
<>
    <TextInput
      style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
      onChangeText={text => onUserNameChangeText(text)}
      value={username}
    />
<TextInput
      style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
      onChangeText={text => onPasswordChangeText(text)}
      value={password}
    />
</>
  );
}

Get Username and Password from locally created .json file in React Native

1 Answers1