DEV Community: RamR

Programmer Etiquette

RamR — Fri, 07 Mar 2025 18:30:47 +0000

Want to share some of the tech person etiquette which I’m trying to follow, hope this may be useful to your personal and professional life.

It is all about how to start and end a day, how to deal with work, colleague and maintain good physical | mental health condition.

Early Wake Up

Early wakeup gives more energy, clean and clever mind and reduces laziness. It will create great impact in task completion and project delivery.

Exercise

Daily exercise is must/useful to maintain good physical and mental condition. It helps to erase last day unwanted thoughts. And most importantly it will refresh / reset the body and mind.

At Workstation

It is a good habit to keep the workstation / desk clean.

On Weekly basis, Clean the machine, clean the physical parts, Clean the software like deleting temp files, cache, unused files, unused applications, unwanted media files.

Organize the desktop and download directory.

Sitting properly in front of system is like giving respect to our profession.

It is always good that maintaining medium voice tone in the workplace.

Coding

It is not compulsory to immediately start coding when task assigned.

Before coding need to think about the task, output, estimated time and previous experiences related to the task. Plan the steps, Prepare prerequisites and start coding.

Document everything like project details, functionality requests, task progress, functionality modifications, task cancellations and task completion.

It is better to have a word or excel file for each project, there we can keep all the project related information and progress status.

On Error

A programmer can live without food but not without error.

On error, we rush ourselves to research and resolve it, after that not sure how 2 hours passed on it. Once the bug fixed we move on to next task immediately or feeling tired and leave the desk, thinking we are done for the day. Next day facing same error, doing same approach, spending hours, wasting time and energy and so on. This is happening again and again.

If you are this kind, try this approach

Once the error occurred, based on our experience just think about the issue and think about the output
Document | log the error in project document.
Search for answers in internet.
Try out the solutions one by one and resolve the error.
Save | Document the solution.
Give feedback to the answers like it worked, it didn't work.
If necessary share the solution in issue platforms like Stackoverflow, Github.
Take a tiny break.

By following this approach, if the same error popped up, we can easily remember the solution without referring any document. And we are avoiding the chances of repetitive errors.

Keep documenting the errors and solutions, one day it creates good impact in our professional life.

We grow when we document.

Colleague

Colleagues support always required. Colleagues give comfortable environment, they are supportive, they are helpful, they protect us, they are with us in all of our happiness and sorrows. Need to respect them and should not hesitate to help them.

Programmers may face ego issues with others, well this has to be avoided the most. We have to be polite and humble as much as possible. Issues with others will surely spoil the programming mood.

Human are important than program and ego, behave well with them.

Supervisor

Supervisor's age, knowledge, skills, experience have to be respected. Their time should be respected.

With supervisor, text communication is better than the phone calls and live meeting. Before speak / ask anything to them, need to check the right time and their mindset.

Our supervisor need just 2 lines of progress information, two words of status and one word of completion time. And Manager need one word of status and one word of due date time. They ask more info if they need. They find bunch of words and information are useless. Unnecessary explanations will reduce our value.

Shutdown

Whole day is not for programming. if planning to close the work hours after task completion then we may have to work till an aeon (billion years). So, try to shutdown on time and come out of programming mindset.

Before closing the day lets involve in other activities like sports, games, walking, exercise, shopping, restaurants etc.

Eye Rest

Daily cleaning the eyes with water is a healthy habit. It is advisable to not to use any electronic devices one hour before sleeping. Sleep on time, wake up on time.

Thankful

Be thankful to the universe since programming is a respectable job in society at present and we are on it.

Hope you like this, thank you.

Cascading Form React Native Advanced

RamR — Fri, 06 Dec 2024 09:57:20 +0000

I want to share my 3 approaches of handling cascading form fields.

First approach is general, using state variables.
Second is to use ordinary variables and one boolean state variable to trigger the state effect (refresh page).
Third is, dynamic form fields with ordinary variables.

This is 3rd approach and we are going to deal with dynamic form fields.

Note, it will be easier to understand this post if you take a look at the previous 2 approaches.

First approach, Cascade Form Basic
Second approach, Cascade form improved

Lets' begin,

Base Form
Form fields object
Dynamic field rendering
Sample Data
OnPage load
Load Country
OnChange
Load State
Load rest (City, Village, Street)
Validation
Reset Form

Base Form

This is static form page with 5 dropdown fields.

import React, { useState, useEffect } from "react";
import { ScrollView, View, Text, StyleSheet, TouchableOpacity } from "react-native";
import { Dropdown } from "react-native-element-dropdown";
import { Snackbar } from "react-native-paper";

var snackMsg = "";
export default function App() {
  const [refreshPage, setRefreshPage] = useState(false);
  const [visible, setVisible] = useState(false);

  const onToggleSnackBar = () => setVisible(!visible);
  const onDismissSnackBar = () => setVisible(false);

  const resetForm = () => {
  };

  return (
    <ScrollView style={styles.container}>
      <View>
        <Text>Country</Text>
        <ZDropDown
          data={[]}
          labelField=""
          valueField=""
          value={null}
          isFocus={false}
          onChange={null}
        />
        <Text>State</Text>
        <ZDropDown . . ./>
        <Text>City</Text>
        <ZDropDown . . ./>
        <Text>Village</Text>
        <ZDropDown . . ./>
        <Text>Street</Text>
        <ZDropDown . . ./>
      </View>
      <View>
        <Text>Selected Country</Text>
        <Text style={styles.selectedValue}>
          {formFields.country.selectedItem.name}
        </Text>
        <Text>Selected State</Text>
        <Text style={styles.selectedValue}>
          {formFields.state.selectedItem.name}
        </Text>
        <Text>Selected City</Text>
       {. . .}
        <Text>Selected Village</Text>
        {. . .}
        <Text>Selected Street</Text>
        {. . .}
      </View>
      <TouchableOpacity onPress={() => resetForm()} style={styles.clrBtn}>
        <Text style={styles.clrBtnTxt}>Reset</Text>
      </TouchableOpacity>
      <Snackbar duration={2000} visible={visible} onDismiss={onDismissSnackBar}>
        {snackMsg}
      </Snackbar>
    </ScrollView>
  );
}

const ZDropDown = ({
 data, labelField, valueField, value, onFocus, onBlur, onChange, isFocus,
}) => {
  return (
    <Dropdown
      mode={"auto"}
      style={[styles.dropdown, isFocus ? { borderColor: "dodgerblue" } : {}]}
      placeholderStyle={styles.placeholderStyle}
      selectedTextStyle={styles.selectedTextStyle}
      inputSearchStyle={styles.inputSearchStyle}
      iconStyle={styles.iconStyle}
      search={data.length > 5}
      maxHeight={300}
      searchPlaceholder="Search..."
      data={data}
      labelField={labelField}
      valueField={valueField}
      placeholder={!isFocus ? "Select item" : "..."}
      value={value}
      onFocus={onFocus}
      onBlur={onBlur}
      onChange={onChange}
    />
  );
};

const styles = StyleSheet.create({
  // style props
});

refreshPage state variable is used to refresh the page in all the situations.

Now, These fields are going to be converted as dynamic.

Form Field Object

Previously we had 3 separate objects for 3 different fields, but here all fields data placed under one form field object.

 . . .
const formFields = {
  country: {
    fieldId: "country",
    label: "Country",
    labelField: "name",
    valueField: "countryId",
    parents: [],
    list: [],
    selectedItem: {},
    selectedValue: null,
    onValueSelected: () => null,
  },
  state: {
    fieldId: "state",label: "State",labelField: "name",valueField: "stateId",
    parents: ["country"],list: [],selectedItem: {},selectedValue: null,
    onValueSelected: () => null,
  },
  city: {
    fieldId: "city",label: "City",labelField: "name",valueField: "cityId",
    parents: ["country", "state"],list: [],selectedItem: {},
    selectedValue: null,onValueSelected: () => null,
  },
  village: {
    fieldId: "village",label: "Village",labelField: "name",
    valueField: "villageId",
    parents: ["country", "state", "city"],
    list: [],selectedItem: {},selectedValue: null,
    onValueSelected: () => null,
  },
  street: {
    fieldId: "street",label: "Street",labelField: "name",
    valueField: "streetId",
    parents: ["country", "state", "city", "village"],
    list: [],selectedItem: {},selectedValue: null,onValueSelected: () => null,
  },
};

 . . .
export default function App() {
   . . .
}

All these properties of a field have benefits, will be useful to handle dynamic rendering.

fieldId ID of the field
label Diaplay name of the field
labelField denotes the dropdown label field in a dropdown list array
valueField denotes the dropdown value field
parents array of parent fields, will be used for validations
list dropdown list array
selectedItem whole selected item object of dropdown
selectedValue selected value
onValueSelected it is a function property, will be used/called when dropdown value selected/changed. Initially assigned as an empty method.

Dynamic Field rendering

By iterating the form field object keys we render dropdown fields dynamically, all the required properties are available in the form field object.

export default function App() {
  . . .
    return (
    <View style={styles.container}>
      <View>
      {Object.keys(formFields).map((ele, index) => {
          const fld = formFields[ele];
          return (
            <View key={"_formField_" + index}>
              <Text>{fld.label}</Text>
              <ZDropDown
                labelField={fld.labelField}
                valueField={fld.valueField}
                data={fld.list}
                value={fld.selectedValue}
                onChange={(item) => {}}
              />
            </View>
          );
        })}
      </View>
      . . .
    </View>
  );
}

handle focus / blur

var focusField = "";
export default function App() {
. . .

 const changeFocusField = (fld = "") => {
  focusField = fld;
  setRefreshPage(!refreshPage);
 };
. . .
}

<ZDropDown
. . .
  isFocus={focusField === ele}
  onFocus={() => {
    changeFocusField(ele);
  }}
  onBlur={() => changeFocusField("")}
  onChange={(item) => {}}
 />

Sample Data

Sample data for fields country, state, city, village and street .

const listCountry = [
  { countryId: "1", name: "india" },
  { countryId: "2", name: "uk" },
  { countryId: "3", name: "canada" },
  { countryId: "4", name: "us" },
];

const listSate = [
  { stateId: "1", countryId: "1", name: "state1_india" },
  { stateId: "4", countryId: "2", name: "state1_uk" },
  { stateId: "7", countryId: "3", name: "state1_canada" },
  { stateId: "10", countryId: "4", name: "state1_us" },
];

const listCity = [
  { cityId: "1", stateId: "1", countryId: "1", name: "city1_state1_country1" },
  { cityId: "5", stateId: "2", countryId: "1", name: "city5_state2_country1" },
  {
    cityId: "21",stateId: "7",countryId: "3",name:"city21_state7_country3",
  },
  {
    cityId: "26",stateId: "9",countryId: "3",name: "city26_state9_country3",
  },
];

const listVillage = [
  { cityId: "1", villageId: "1", name: "village 1  city 1" },
  { cityId: "2", villageId: "5", name: "village 5  city 2" },
  { cityId: "3", villageId: "9", name: "village 9  city 3" },
  { cityId: "4", villageId: "10", name: "village 10  city 4" },
];

const listStreet = [
  { villageId: "1", streetId: "1", name: "village 1 street 1" },
  { villageId: "1", streetId: "109", name: "village 1 street 109" },
  { villageId: "2", streetId: "2", name: "village 2 street 2" },
  { villageId: "2", streetId: "110", name: "village 2 street 110" },
];
 . . .
export default function App() {
  . . .
}
 . . .

OnPage Load

Firstly in the functionality side we have to setup some important things. Remember we assigned an empty method to the property onValueSelected, now it's time to assign the actual method. So we need to create 5 methods and assign them to the respective form field.

export default function App() {
  . . .
  const allValuesSelected = () => {
    console.log("All fields value selected");
  };

  const loadStreet = async () => {};

  const loadVillage = async () => {};

  const loadCity = async () => {};

  const loadState = async () => {};

  const loadCountry = async () => {};

  const loadPageData = () => {
    formFields.country.onValueSelected = loadState;
    formFields.state.onValueSelected = loadCity;
    formFields.city.onValueSelected = loadVillage;
    formFields.village.onValueSelected = loadStreet;
    formFields.street.onValueSelected = allValuesSelected;    
  };

  return (. . .);
}

When Country value selected, the STATE list has to be loaded, that's why here loadState method assigned to Country's onValueSelected. And likewise other methods assigned.

  useEffect(() => {
    loadPageData();
  }, []);

  return (. . .);

Load Country

load country list from sample data and call it on initial page load.

  const loadCountry = async () => {
    formFields.country.list = [...listCountry];
    setRefreshPage(!refreshPage);
  };

  const loadPageData = () => {
    formFields.country.onValueSelected = loadState;
    formFields.state.onValueSelected = loadCity;
    formFields.city.onValueSelected = loadVillage;
    formFields.village.onValueSelected = loadStreet;
    formFields.street.onValueSelected = allValuesSelected;

    loadCountry();
  };

OnChange

When dropdown field value selected, we need to setup the respective form field value, remove focus and load the next dropdown list.

return (
  . . .
  <ZDropDown
    // . . .
    onChange={(item) => {
      fld.selectedItem = item;
      fld.selectedValue = item[fld.valueField];
      focusField = "";
      fld.onValueSelected();
    }}
  />
  . . .
);

onValueSelected is useful right ?

Load State

When the first dropdown(country) changed, rest of the fields will be changed. So need to clear the list and data of all other form fields. For this we write a method which can clear the values from the given field to the end field.

const resetFields = (fld = "") => {
  var b = false;
  for (let kee in formFields) {
    if (b) {
      formFields[kee].list = [];
      formFields[kee].selectedItem = {};
      formFields[kee].selectedValue = null;
    } else {
      if (kee === fld) {
        b = true;
        formFields[kee] = {
          ...formFields[kee],list: [],selectedItem: {},selectedValue: null,
        };
      }
    }
  }
};

This method can be used for all other dropdown fields and page resetting purpose.

const loadState = async () => {
  resetFields("state");
  const arr = listSate.filter(
    (ele) => ele.countryId === formFields.country.selectedValue
  );
  if (arr.length) {
    formFields.state.list = arr;
  }
  setRefreshPage(!refreshPage);
};

State dropdown list is now perfectly loaded.

Load the rest (City, Village, Street)

As like before we load data for rest of the fields.

const loadCity = async () => {
  resetFields("city");
  const arr = listCity.filter(
    (ele) => ele.stateId === formFields.state.selectedValue
  );
  if (arr.length) formFields.city.list = arr;
  setRefreshPage(!refreshPage);
};

const loadVillage = async () => {
  resetFields("village");
  const arr = listVillage.filter(
    (ele) => ele.cityId === formFields.city.selectedValue
  );
  if (arr.length) formFields.village.list = arr;
  setRefreshPage(!refreshPage);
};

const loadStreet = async () => {
  resetFields("street");
  const arr = listStreet.filter(
    (ele) => ele.villageId === formFields.village.selectedValue
  );
  if (arr.length) formFields.street.list = arr;
  setRefreshPage(!refreshPage);
};

good, all the dropdowns populated with respective list.

Validation

Before showing the dropdown list we need to validate its parent field. So we are going to get the parent fields from the form field object. Then iterate them one by one, validate its value and show warning if necessary.

return (
  . . .
  <ZDropDown
    . . .
    onFocus={() => {
      changeFocusField(ele);
      const parents = fld.parents;
      for (let pr of parents) {
        if (!formFields[pr].selectedValue) {
          snackMsg = "Select " + formFields[pr].label;
          focusField = pr;
          onToggleSnackBar();
          break;
        }
      }
    }}
  />
  . . .
);

Reset Form

Finally, we provide option to reset the form fields.

 const resetForm = () => {
  resetFields("country");
  focusField = "";
  loadCountry();
};

All Done. Now we saw how to deal with dynamic form fields, rendering fields, loading data and validating them.

These are the 3 approaches of mine to handle cascading form fields.

Hope this post/series has some useful stuffs which you like. Thank you.

Full code here

Tags: #react #javascript #mobile #ios #android #reactnative #react-native #forms #dropdown #cascade #programming

[Boost]

RamR — Wed, 04 Dec 2024 10:18:55 +0000

Basic Cascading Form React Native

RamR ・ Nov 28

#javascript #react #android #ios

Cascading Form React Native Improved

RamR — Sat, 30 Nov 2024 13:13:24 +0000

I want to share my 3 approaches of handling cascading form fields.

First one is general common approach, using state variables.
Second is to use ordinary variables and one boolean state variable to trigger the state effect (refresh page).
Third is, dynamic form fields with ordinary variables.

First Approach, using state variables

Here in this post we see the second approach, using ordinary variables to handle cascading form fields based on country, state, city data.

Packages

react-native-element-dropdown
react-native-paper

we are using react-native-element-dropdown for drop down fields

Base Page

import React, { useState, useEffect } from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import { Dropdown } from "react-native-element-dropdown";

export default function App() {
  return (
    <View style={styles.container}>
      <View>
        <Text>Country</Text>
        <ZDropDown
          data={[]}
          labelField=""
          valueField=""
          value={null}
          isFocus={false}
          onChange={null}
        />
        <Text>State</Text>        
        <ZDropDown
          data={[]}
          labelField=""
          valueField=""
          value={null}
          isFocus={false}
          onChange={null}      
        />
        <Text>City</Text>
        <ZDropDown
          data={[]}
          labelField=""
          valueField=""
          value={null}
          isFocus={false}
          onChange={null}      
        />
      </View>
      <View>
        <Text>Selected Country</Text>
        <Text style={styles.selectedValue}>{country.selectedCountry.name}</Text>
        <Text>Selected State</Text>
        <Text style={styles.selectedValue}>{state.selectedState.name}</Text>
        <Text>Selected City</Text>
        <Text style={styles.selectedValue}>{city.selectedCity.name}</Text>
      </View>
      <TouchableOpacity onPress={null} style={styles.clrBtn}>
        <Text style={styles.clrBtnTxt}>Reset</Text>
      </TouchableOpacity>
    </View>
  );
}

const ZDropDown = ({
  data,
  labelField,
  valueField,
  value,
  onFocus,
  onBlur,
  onChange,
  isFocus,
}) => {
  return (
    <Dropdown
      mode={"auto"}
      style={[styles.dropdown, isFocus ? { borderColor: "dodgerblue" } : {}]}
      placeholderStyle={styles.placeholderStyle}
      selectedTextStyle={styles.selectedTextStyle}
      inputSearchStyle={styles.inputSearchStyle}
      iconStyle={styles.iconStyle}
      search={data.length > 5}
      maxHeight={300}
      searchPlaceholder="Search..."
      data={data}
      labelField={labelField}
      valueField={valueField}
      placeholder={!isFocus ? "Select item" : "..."}
      value={value}
      onFocus={onFocus}
      onBlur={onBlur}
      onChange={onChange}
    />
  );
};

const styles = StyleSheet.create({
// style props
});

ZDropDown is a custom component.

Sample data

const listCountry = [
  { countryId: "1", name: "india" },
  { countryId: "2", name: "uk" },
  { countryId: "3", name: "canada" },
  { countryId: "4", name: "us" },
];

const listSate = [
  { stateId: "1", countryId: "1", name: "state1_india" },
  { stateId: "4", countryId: "2", name: "state1_uk" },
  { stateId: "7", countryId: "3", name: "state1_canada" },
  { stateId: "10", countryId: "4", name: "state1_us" },
];

const listCity = [
  {
    cityId: "1",
    stateId: "1",
    countryId: "1",
    name: "city1_state1_country1",
  },
   {
    cityId: "6",
    stateId: "2",
    countryId: "1",
    name: "city6_state2_country1",
  },
  {
    cityId: "7",
    stateId: "3",
    countryId: "1",
    name: "city7_state3_country1",
  }, 
  {
    cityId: "23",
    stateId: "8",
    countryId: "3",
    name: "city23_state8_country3",
  }, 
  {
    cityId: "30",
    stateId: "10",
    countryId: "4",
    name: "city30_state10_country4",
  }, 
  {
    cityId: "35",
    stateId: "12",
    countryId: "4",
    name: "city35_state12_country4",
  },
  {
    cityId: "36",
    stateId: "12",
    countryId: "4",
    name: "city36_state12_country4",
  },
];

Form Variables

In the first approach we used 4 state variables but here we use 4 ordinary variables (3 for dropdown, 1 for focus field) and a state variable which is used to switch and trigger the state effect (refresh page).

var country = {
  list: [],
  selectedCountry: {},
  selectedValue: null,
};

var state = {
  list: [],
  selectedState: {},
  selectedValue: null,
};

var city = {
  list: [],
  selectedCity: {},
  selectedValue: null,
};

var focusField = '';

export default function App() {
 const [refreshPage, setRefreshPage] = useState(false);

  return (
    <View style={styles.container}>
      <View>
        <Text>Country</Text>
        <ZDropDown
          data={country.list}
          labelField="name"
          valueField="countryId"
          value={country.selectedValue}
          isFocus={focusField === 'country'}
          onChange={null}
        />
        <Text>State</Text>
        <ZDropDown
          data={state.list}
          labelField="name"
          valueField="stateId"
          value={state.selectedValue}
          isFocus={focusField === 'state'}
          onChange={null}
        />
        <Text>City</Text>
        <ZDropDown
          data={city.list}
          labelField="name"
          valueField="cityId"
          value={city.selectedValue}
          isFocus={focusField === 'city'}
          onChange={null}
        />
      </View>
      . . .
    </View>
  );
}

Focus and Blur events get triggered more than onChange event so it is better to maintain a separate variable to represent the focus field and avoid data mess up situations.

Load Country

Load country dropdown from the sample data. (you can use api call)

export default function App() {
. . .
  const loadCountry = () => {
    // load data from api call
    country.list = [...listCountry];
    // switching value will refresh the ui
    setRefreshPage(!refreshPage);
  };

  useEffect(() => {
    loadCountry();
  }, []);

return (
. . .
)

Focus / Blur

We're using a function to set the focus field and refresh the page by switching the state variable(refreshPage)

  const changeFocusField = (fld = '') => {
    focusField = fld;
    setRefreshPage(!refreshPage);
  };

        <Text>Country</Text>
        <ZDropDown
          . . .
          isFocus={focusField === 'country'}
          onFocus={() => changeFocusField('country')}
          onBlur={() => changeFocusField('')}
          onChange={null}
        />
        <Text>State</Text>
        <ZDropDown
        . . .
          isFocus={focusField === 'state'}
          onFocus={() => changeFocusField('state')}
          onBlur={() => changeFocusField('')}
          onChange={null}
        />
        <Text>City</Text>
        <ZDropDown        
        . . .
          isFocus={focusField === 'city'}
          onFocus={() => changeFocusField('city')}
          onBlur={() => changeFocusField('')}
          onChange={null}       
        />

We are half way done now.

Load State STATE

On country selected, we need to load the respective ~~states~~ STATES based on the country selection.

Update country field, focus off country and load STATES based on country.

  <Text>Country</Text>
  <ZDropDown
    . . .
    onChange={(item) => {
      country.selectedCountry = item;
      country.selectedValue = item.countryId;
      focusField = '';
      loadState();
    }}
  />

Did you see the difference in the first approach? Previously there were 3 state variables updated but here only one state variable gets updated.

When country changed, both states and cities will be changed. So before setting up the new value we need to clear the existing data.

 const loadState = async () => {
   state = { list: [], selectedState: {}, selectedValue: null };
   city = { list: [], selectedCity: {}, selectedValue: null };
   const arr = listSate.filter(
     (ele) => ele.countryId === country.selectedValue
   );
   if (arr.length) {
     state.list = arr;
   }
   refreshPage(!refreshPage);
 };

Load City

And load city field based on country and state.

    <Text>State</Text>
    <ZDropDown
      . . .
      onChange={(item) => {
        state.selectedValue = item.stateId;
        state.selectedState = item;
        changeFocusField('');
        loadCity();
      }}
     />

  const loadCity = async () => {
    city = { list: [], selectedCity: {}, selectedValue: null };
    const arr = listCity.filter((ele) => ele.stateId === state.selectedValue);
    if (arr.length) city.list = arr;
    setRefreshPage(!refreshPage);
  };

All set, the form fields are working properly now.

2 more additional features, one is resetting the page and the other one is show warning.

Reset page

Form variables and focus variable should be cleared.

. . .
  const resetForm = () => {
    country = {list: [...listCountry],selectedCountry: {}, selectedValue: null};
    state = { list: [], selectedState: {}, selectedValue: null };
    city = { list: [], selectedCity: {}, selectedValue: null };
    focusField = '';
    setRefreshPage(!refreshPage);
  };
. . .

  <TouchableOpacity onPress={() => resetForm()} style={styles.clrBtn}>
    <Text style={styles.clrBtnTxt}>Reset</Text>
  </TouchableOpacity>
. . .

Warning

We have to show a warning msg if the parent field value is null. For that we are using SnackBar component from paper.

import { Snackbar } from "react-native-paper";
. . .
var snackMsg = '';
export default function App() {
  . . .
  const [visible, setVisible] = useState(false);

  const onToggleSnackBar = () => setVisible(!visible);
  const onDismissSnackBar = () => setVisible(false);
  . . .

  return (
    <View style={styles.container}>
    . . .
      <Snackbar duration={2000} visible={visible} onDismiss={onDismissSnackBar}>
        {snackMsg}
      </Snackbar>
    </View>
  );
}

We moved snackMsg to ordinary variable from state variable.

Since State and City fields have parent field, they have to be validated.

        <Text>State</Text>
        <ZDropDown          
          onFocus={() => {
            focusField('state');
            if (!country.selectedValue) {
              snackMsg = 'Select country';
              onToggleSnackBar();
              changeFocusField('country');
            }
          }}
          . . .
        />
        <Text>City</Text>
        <ZDropDown          
          onFocus={() => {
            focusField('city');
            if (!country.selectedValue) {
              snackMsg = 'Select country';
              onToggleSnackBar();
              changeFocusField('country');
            } else if (!state.selectedValue) {
              snackMsg = 'Select state';
              onToggleSnackBar();
              changeFocusField('state');
            }
          }}
          . . .
        />

Done.

Thank you.

Full code reference here

Cascading Form React Native Basic

RamR — Thu, 28 Nov 2024 09:03:21 +0000

I want to share my 3 approaches of handling cascading form fields.

First approach is general, using state variables.
Second is to use ordinary variables and one boolean state variable to trigger the state effect (refresh page).
Third is, dynamic form fields with ordinary variables.

Here in this post we see the first approach, usual common way of handling cascading form fields based on country, state, city data.

Packages

react-native-element-dropdown
react-native-paper

we are using react-native-element-dropdown for drop down fields

Base Page

import React, { useState, useEffect } from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import { Dropdown } from "react-native-element-dropdown";

export default function App() {
  return (
    <View style={styles.container}>
      <View>
        <Text>Country</Text>
        <ZDropDown
          data={[]}
          labelField=""
          valueField=""
          value={null}
          isFocus={false}
          onChange={null}
        />
        <Text>State</Text>        
        <ZDropDown
          data={[]}
          labelField=""
          valueField=""
          value={null}
          isFocus={false}
          onChange={null}      
        />
        <Text>City</Text>
        <ZDropDown
          data={[]}
          labelField=""
          valueField=""
          value={null}
          isFocus={false}
          onChange={null}      
        />
      </View>
      <View>
        <Text>Selected Country</Text>
        <Text style={styles.selectedValue}>{country.selectedCountry.name}</Text>
        <Text>Selected State</Text>
        <Text style={styles.selectedValue}>{state.selectedState.name}</Text>
        <Text>Selected City</Text>
        <Text style={styles.selectedValue}>{city.selectedCity.name}</Text>
      </View>
      <TouchableOpacity onPress={null} style={styles.clrBtn}>
        <Text style={styles.clrBtnTxt}>Reset</Text>
      </TouchableOpacity>
    </View>
  );
}

const ZDropDown = ({
  data,
  labelField,
  valueField,
  value,
  onFocus,
  onBlur,
  onChange,
  isFocus,
}) => {
  return (
    <Dropdown
      mode={"auto"}
      style={[styles.dropdown, isFocus ? { borderColor: "dodgerblue" } : {}]}
      placeholderStyle={styles.placeholderStyle}
      selectedTextStyle={styles.selectedTextStyle}
      inputSearchStyle={styles.inputSearchStyle}
      iconStyle={styles.iconStyle}
      search={data.length > 5}
      maxHeight={300}
      searchPlaceholder="Search..."
      data={data}
      labelField={labelField}
      valueField={valueField}
      placeholder={!isFocus ? "Select item" : "..."}
      value={value}
      onFocus={onFocus}
      onBlur={onBlur}
      onChange={onChange}
    />
  );
};

const styles = StyleSheet.create({
// style props
});

ZDropDown is a custom component.

Sample data

const listCountry = [
  { countryId: "1", name: "india" },
  { countryId: "2", name: "uk" },
  { countryId: "3", name: "canada" },
  { countryId: "4", name: "us" },
];

const listSate = [
  { stateId: "1", countryId: "1", name: "state1_india" },
  { stateId: "4", countryId: "2", name: "state1_uk" },
  { stateId: "7", countryId: "3", name: "state1_canada" },
  { stateId: "10", countryId: "4", name: "state1_us" },
];

const listCity = [
  {
    cityId: "1",
    stateId: "1",
    countryId: "1",
    name: "city1_state1_country1",
  },
   {
    cityId: "6",
    stateId: "2",
    countryId: "1",
    name: "city6_state2_country1",
  },
  {
    cityId: "7",
    stateId: "3",
    countryId: "1",
    name: "city7_state3_country1",
  }, 
  {
    cityId: "23",
    stateId: "8",
    countryId: "3",
    name: "city23_state8_country3",
  }, 
  {
    cityId: "30",
    stateId: "10",
    countryId: "4",
    name: "city30_state10_country4",
  }, 
  {
    cityId: "35",
    stateId: "12",
    countryId: "4",
    name: "city35_state12_country4",
  },
  {
    cityId: "36",
    stateId: "12",
    countryId: "4",
    name: "city36_state12_country4",
  },
];

Form Variables

We use 4 state variables, 3 for the form fields and the remaining one to trigger the focus effect.

export default function App() {
  const [country, setCountry] = useState({
    data: [],
    selectedCountry: {},
    value: null,
  });
  const [state, setState] = useState({
    data: [],
    selectedState: {},
    value: null,
  });
  const [city, setCity] = useState({ data: [], selectedCity: {}, value: null });

  const [ddfocus, setDdfocus] = useState({
    country: false,
    state: false,
    city: false,
  });

  return (
    <View style={styles.container}>
      <View>
        <Text>Country</Text>
        <ZDropDown
          data={country.data}
          labelField="name"
          valueField="countryId"
          value={country.value}
          isFocus={ddfocus.country}
          onChange={null}
        />
        <Text>State</Text>
        <ZDropDown
          data={state.data}
          labelField="name"
          valueField="stateId"
          value={state.value}
          isFocus={ddfocus.state}
          onChange={null}
        />
        <Text>City</Text>
        <ZDropDown
          data={city.data}
          labelField="name"
          valueField="cityId"
          value={city.value}
          isFocus={ddfocus.city}
          onChange={null}
        />
      </View>
      . . .
    </View>
  );
}

Focus and Blur events get triggered more than the onChange event so for focus changes, here a separate state variable is used to not to mess up with drop down data changes.

Load Country

Load country dropdown from the sample data. (you can use api call)

export default function App() {
. . .
  const loadCountry = () => {
    // load data from api call
    setCountry({ data: [...listCountry], selectedCountry: {}, value: null });
  };

  useEffect(() => {
    loadCountry();
  }, []);

return (
. . .
)

Focus / Blur

When one drop down is selected, that field has to be focused and the remaining fields should be blurred. We're using a function to handle this.

  const focusField = (fld = '') => {
    const obj = { country: false, state: false, city: false };
    if (fld) obj[fld] = true;
    setDdfocus(obj);
  };

        <Text>Country</Text>
        <ZDropDown
          . . .
          isFocus={ddfocus.country}
          onFocus={() => focusField('country')}
          onBlur={() => focusField('')}
          onChange={null}
        />
        <Text>State</Text>
        <ZDropDown
        . . .
          isFocus={ddfocus.state}
          onFocus={() => focusField('state')}
          onBlur={() => focusField('')}
          onChange={null}
        />
        <Text>City</Text>
        <ZDropDown        
        . . .
          isFocus={ddfocus.city}
          onFocus={() => focusField('city')}
          onBlur={() => focusField('')}
          onChange={null}       
        />

We are half way done now.

Load State STATE

On country selected, we need to load the respective ~~states~~ STATES based on the country selection.

Update country field, load STATES based on country selection and focus off country.

  <Text>Country</Text>
  <ZDropDown
    . . .
    onChange={(item) => {
      setCountry({
        ...country,
        selectedCountry: item,
        value: item.countryId,
      });
      loadState(item.countryId);
      focusField("");
    }}
  />

When country changed, both states and cities will be changed. So before setting up the new value we need to clear the existing data.

const loadState = async (cntId) => {
  // load data from api call
  setState({ data: [], selectedState: {}, value: null });
  setCity({ data: [], selectedCity: {}, value: null });
  const arr = listSate.filter((ele) => ele.countryId === cntId);
  setState({ ...state, data: [...arr] });
  console.log("respective states ", arr);
};

Load City

And load city field based on the selection.

    <Text>State</Text>
    <ZDropDown
      . . .
      onChange={(item) => {
        setState({ ...state, selectedState: item, value: item.stateId });
        loadCity(item.stateId);
        focusField("");
      }}
     />

const loadCity = async (stId) => {
  // load data from api call
  setCity({ data: [], selectedCity: {}, value: null });
  const arr = listCity.filter((ele) => ele.stateId === stId);
  setCity({ ...city, data: [...arr] });
};

All set, the form fields are working properly now.

If we handle 2 more additional features, we are done. One is restting the page and the other one is to validate form and show warning.

Reset page

Form variables and focus variable should be cleared.

. . .
const resetForm = () => {
  focusField("");
  setCountry({ data: [...listCountry], selectedCountry: {}, value: null });
  setState({ data: [], selectedState: {}, value: null });
  setCity({ data: [], selectedCity: {}, value: null });
};
. . .

  <TouchableOpacity onPress={() => resetForm()} style={styles.clrBtn}>
    <Text style={styles.clrBtnTxt}>Reset</Text>
  </TouchableOpacity>
. . .

Warning

We have to show a warning msg if the parent field value is null. For that we are using SnackBar component from paper.

import { Snackbar } from "react-native-paper";

export default function App() {
  . . .
  const [visible, setVisible] = useState(false);
  const [snackMsg, setSnackMsg] = useState("");

  const onToggleSnackBar = () => setVisible(!visible);
  const onDismissSnackBar = () => setVisible(false);
  . . .

  return (
    <View style={styles.container}>
    . . .
      <Snackbar duration={2000} visible={visible} onDismiss={onDismissSnackBar}>
        {snackMsg}
      </Snackbar>
    </View>
  );
}

Since State and City fields have parent field, they have to be validated.

        <Text>State</Text>
        <ZDropDown          
          onFocus={() => {
            focusField('state');
            if (!country.value) {
              setSnackMsg('Select country');
              onToggleSnackBar();
              focusField('country');
            }
          }}
          . . .
        />
        <Text>City</Text>
        <ZDropDown          
          onFocus={() => {
            focusField('city');
            if (!country.value) {
              setSnackMsg('Select country');
              onToggleSnackBar();
              focusField('country');
            } else if (!state.value) {
              setSnackMsg('Select state');
              onToggleSnackBar();
              focusField('state');
            }
          }}
          . . .
        />

Yeah thats it! We are done.

Thank you.

Full code reference here

Kaprekar constant 6174 JavaScript

RamR — Fri, 27 Sep 2024 04:34:13 +0000

Just curious to know is there any other alternative way to achieve this Kaprekar constant program.

var num = 4455, n1, n2, i = 0;
for (i; num > 999 && num < 10000 && num !== 6174; i++) {
  n1 = +(("" + num).split("").sort((a, b) => a - b).join(""))
  n2 = +(("" + num).split("").sort((a, b) => b - a).join(""))
  num = n2 - n1;
  console.log(n2, "-", n1, "=", num);
}
console.log(i, "steps")

expanded

var num = 4455;
var arr, arr1, arr2;
var n1, n2, result;
var i;
for (i = 0; num !== 6174 && num > 999 && num < 10000; i++) {
  arr = ("" + num).split("")
  arr1 = [...arr].sort((a, b) => a - b)
  arr2 = [...arr].sort((a, b) => b - a)
  //console.log(arr1);
  //console.log(arr2);
  n1 = Number(arr1.join(""))
  n2 = Number(arr2.join(""))
  result = n2 - n1;
  num = result;  
  console.log(n2, "-", n1, "=", result);
}
console.log(i, "steps");

React Native WiFi Connect

RamR — Fri, 20 Sep 2024 11:29:46 +0000

Establish WiFi connection in a React native application.

Packages

react-native-permissions config
@react-native-community/geolocation config
react-native-wifi-reborn config
@react-native-tethering/wifi config

Note, we need location permission to connect wifi.

Front Page



import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  PermissionsAndroid,
  Platform,
} from 'react-native';

import { TextInput, Button } from 'react-native-paper';

export default function App() {
  const [ssid, setSsid] = useState('');
  const [password, setPassword] = useState('');

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Connect to Network</Text>
      <TextInput
        style={styles.input}
        label="SSID"
        value={ssid}
        onChangeText={(text) => setSsid(text)}
      />
      <TextInput
        style={styles.input}
        label="Password"
        value={password}
        onChangeText={(text) => setPassword(text)}
      />
      <Button
        icon="wifi"
        mode="contained"
        style={{ marginTop: 20 }}
        onPress={() => ()}>
        Connect
      </Button>
    </View>
  );
}

Turn on Location



import { request, PERMISSIONS, RESULTS } from 'react-native-permissions';
import Geolocation from '@react-native-community/geolocation';

const isAndroid = Platform.OS === 'android';
export default function App() {
. . .
  const requestLocationPermission = async () => {
    var given = false;
    if (isAndroid) {
      try {
        const granted = await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
          {
            title: 'Location Permission',
            message:
              'This app needs access to your location to manage wifi networks',
            buttonNeutral: 'Ask Me Later',
            buttonNegative: 'Cancel',
            buttonPositive: 'OK',
          }
        );
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
          console.log('GRANTED Location permission granted');
          given = true;
        } else {
          console.log('Location permission denied');
        }
      } catch (err) {
        console.warn(err);
      }
    } else {
      const result = await request(PERMISSIONS.IOS.LOCATION_WHEN_IN_USE);
      if (result === RESULTS.GRANTED) {
        console.log('IOS GRANTED Location permission granted');
        given = true;
      } else {
        Alert.alert('Location permission denied');
      }
    }
    return given;
  };

  const turnOnLocation = async () => {
    var permit = await requestLocationPermission();
    if (!permit) return false;
    var result = await new Promise((resolve, reject) => {
      Geolocation.getCurrentPosition(
        (position) => {
          console.log(position);
          resolve(true);
        },
        (error) => {
          console.log(error.code, error.message);
          resolve(false);
        },
        { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
      );
    });
    console.log('turnOnLocation result', result);
    return result;
  };
. . .

Connect WiFi

Based on my experience, I figured out TetheringManager will do the job for android and WifiManager for iOS.

But while using TetheringManager the iOS app getting crashed. So I'm going to have 2 different files separately for android and iOS.

Let's rename the file as wificonnect.android.js and duplicate this file as wificonnect.ios.js.

wificonnect.android.js



import TetheringManager from "@react-native-tethering/wifi";

export default function App() {
. . .
  const requestLocationPermission = async () => {. . .};

  const turnOnLocation = async () => {. . .};

  const connectWifi = async () => {
    try {
      const granted = await turnOnLocation();
      if (granted) {
        const wifiEnabled = await TetheringManager.isWifiEnabled();

        if (!wifiEnabled) {
          await TetheringManager.setWifiEnabled();
          connectWifi();
          return;
        }

        await TetheringManager.connectToNetwork({
          ssid: ssid,
          password: password,
          isHidden: true,
        })
          .then(
            () => {
              console.log("wifi Connected successfully!");
              alert(" wifi network connected.");
            },
            (error) => {
              console.log("Connection failed! ", error);
              alert("unable to connect wifi\n\n" + error);
            }
          )
          .catch((err) => {
            console.log("Connection failed! ", err);
            alert("unable to connect wifi\n\n" + err);
          });
      } else {
        console.log(
          "unable to connect wifi\n\n" +
            "Location service is turned off or Location permission denied"
        );
        alert(
          "unable to connect wifi\n\n" +
            "Location service is turned off or Location permission denied"
        );
      }
    } catch (err1) {
      alert("unable to connect wifi\n\n" + err1);
    }
  };

  return (
. . .
    <Button
      icon="wifi"
      mode="contained"
      style={{ marginTop: 20 }}
      onPress={() => connectWifi()}
    >
      Connect
    </Button>
. . .
  );
}

wificonnect.ios.js



import WifiManager from "react-native-wifi-reborn";
. . .
const connectWifi = async () => {
  try {
    const granted = await turnOnLocation();
    if (granted) {
      /**
         WifiManager.connectToProtectedSSID(ssid, password, try with both 'true' and 'false')
         */
      WifiManager.connectToProtectedSSID(ssid, password, true)
        .then(
          () => {
            console.log("wifi Connected successfully!");
            alert("wifi network connected.");
          },
          (error) => {
            console.log("Connection failed! ", error);
            alert("unable to connect wifi\n\n" + error);
          }
        )
        .catch((err) => {
          console.log("Connection failed! ", err);
          alert("unable to connect wifi\n\n" + err);
        });
    } else {
      console.log(
        "unable to connect wifi\n\n" +
          "Location service is turned off or Location permission denied"
      );
      alert(
        "unable to connect wifi\n\n" +
          "Location service is turned off or Location permission denied"
      );
    }
  } catch (err1) {
    alert("unable to connect wifi\n\n" + err1);
  }
};

App.js



import WifiConnect from "./wificonnect"

export default function App() {
  return <WifiConnect />;
}

Full code here

Thank You.

React Native QR Code Reader / QR Code Scanner July 2024

RamR — Fri, 12 Jul 2024 14:30:24 +0000

I tired a different way to implement qr code reading functionality and I want to share it with you. Since the general approach of using react-native-qrcode-scanner, this package not updated recently or not maintained. So I went to try out this react-native-vision-camera package.

Package

yarn add react-native-vector-icons
yarn add react-native-vision-camera

Configuration

iOS


cd ios && pod install

info.plist

<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) needs access to your Camera.</string>

Android

AndroidManifest.xml

<uses-permission android:name="android.permission.CAMERA" />

gradle.properties

VisionCamera_enableCodeScanner=true

HomePage

import React, { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Dimensions,
} from "react-native";
import Ionicons from "react-native-vector-icons/Ionicons";
import QRScanner from "./qrScanner";
const dWidth = Dimensions.get("window").width;

const clr1 = "mediumseagreen";

const ScanQRPage = () => {
  const [showQR, setShowQR] = useState(false);
  const [qrCode, setQrCode] = useState("");

  const openQRscanner = () => {
    setShowQR(true);
  };

  const onQrRead = (qrtext) => {
    setQrCode(qrtext);
    setShowQR(false);
  };

  return (
    <View style={styles.page}>
      {qrCode ? (
        <Text style={{ fontSize: 16, color: "black" }}>
          {"QR Value \n" + qrCode}
        </Text>
      ) : null}
      <Ionicons
        name={"scan-circle-outline"}
        size={qrCode ? dWidth * 0.4 : dWidth * 0.75}
        color={clr1}
      />
      <TouchableOpacity onPress={() => openQRscanner()} style={styles.btn}>
        <Text style={{ color: clr1 }}>Scan QR</Text>
      </TouchableOpacity>
      {showQR ? <QRScanner onRead={onQrRead} /> : null}
    </View>
  );
};

export default ScanQRPage;

const styles = StyleSheet.create({
  page: {
    flex: 1,
    backgroundColor: "white",
    alignItems: "center",
    justifyContent: "space-evenly",
  },
  btn: {
    backgroundColor: "transparent",
    alignItems: "center",
    borderRadius: 10,
    paddingVertical: "3%",
    width: "50%",
    borderWidth: 2,
    borderColor: clr1,
  },
  btnText: {
    color: clr1,
  },
});

QR Scanner / Reader Component

import React, { useState, useEffect } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import {
  Camera,
  useCameraDevice,
  useCodeScanner,
} from "react-native-vision-camera";
import Ionicons from "react-native-vector-icons/Ionicons";

const QRScanner = (props) => {
  const [hasPermission, setHasPermission] = useState(false);
  const [refresh, setRefresh] = useState(false);
  const device = useCameraDevice("back");
  const codeScanner = useCodeScanner({
    codeTypes: ["qr"],
    onCodeScanned: (codes) => {
      console.log(`onCodeScanned `, codes);
      console.log(`onCodeScanned value`, codes[0].value);
      props.onRead(codes[0].value);
    },
  });

  useEffect(() => {
    // exception case
    setRefresh(!refresh);
  }, [device, hasPermission]);

  useEffect(() => {
    const requestCameraPermission = async () => {
      const permission = await Camera.requestCameraPermission();
      console.log("Camera.requestCameraPermission ", permission);
      setHasPermission(permission === "granted");
    };

    requestCameraPermission();

    //if it is idle for 15 secs, it will be closed
    setTimeout(() => {
      props.onRead(null);
    }, 15 * 1000);
  }, []);

  if (device == null || !hasPermission) {
    return (
      <View style={styles.page2}>
        <Text style={{ backgroundColor: "white" }}>
          Camera not available or not permitted
        </Text>
      </View>
    );
  }

  return (
    <View style={styles.page2}>
      <Camera
        codeScanner={codeScanner}
        style={StyleSheet.absoluteFill}
        device={device}
        isActive={true}
      />
      <View style={styles.backHeader}>
        <TouchableOpacity
          style={{ padding: 10 }}
          onPress={() => {
            props.onRead(null);
          }}
        >
          <Ionicons name={"arrow-back-outline"} size={25} color={"snow"} />
        </TouchableOpacity>
      </View>
      <View style={styles.footer}>
        <TouchableOpacity
          style={{
            paddingVertical: 8,
            paddingHorizontal: 10,
            borderWidth: 1,
            borderRadius: 5,
            borderColor: "snow",
            alignItems: "center",
          }}
          onPress={() => {
            props.onRead(null);
          }}
        >
          <Text style={{ color: "snow", fontSize: 14 }}>Close</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default QRScanner;

const styles = StyleSheet.create({
  page2: {
    flex: 1,
    position: "absolute",
    top: 0,
    width: 0,
    height: "100%",
    width: "100%",
    alignItems: "center",
    justifyContent: "center",
  },
  backHeader: {
    backgroundColor: "#00000090",
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    padding: "2%",
    height: "5%",
    width: "100%",
    alignItems: "flex-start",
    justifyContent: "center",
  },
  footer: {
    backgroundColor: "#00000090",
    position: "absolute",
    bottom: 0,
    left: 0,
    right: 0,
    padding: "10%",
    height: "20%",
    width: "100%",
    alignItems: "center",
    justifyContent: "center",
  },
});

On Success

Thank you.

Source code here

Tags: #javascript, #react, #react-native, #android, #ios, #qrcode, #qrscan, #qrread, #mobile

Shopping cart Quantity Component

RamR — Sat, 25 May 2024 18:14:11 +0000

Note, This post is for beginners

In this post we see how to design a e-commerce shopping app quantity / qty component with regex validation.

This is the basic page and basic functions, hope you know them already.




import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  TouchableOpacity,
} from 'react-native';

export default function App() {
  const [qty, setQty] = useState(0);

  return (
    <View style={styles.container}>
      <View style={styles.qtyLine}>
        <TouchableOpacity
          onPress={() => qty < 100 && setQty(qty + 1)}
          style={styles.btn}>
          <Text style={styles.btnText}>{'+'}</Text>
        </TouchableOpacity>
        <TextInput
          keyboardType={'number-pad'}
          maxLength={3}
          style={styles.qtyInput}
          value={'' + qty}
          onChangeText={(txt) => {
            let num = Number(txt);
            if (!isNaN(num) && num > 0 && num < 101) {
              setQty(num);
            } else setQty(0);
          }}
        />
        <TouchableOpacity
          onPress={() => qty > 0 && setQty(qty - 1)}
          style={styles.btn}>
          <Text style={styles.btnText}>{'-'}</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => setQty(0)}
          style={[styles.btn, { marginLeft: 5 }]}>
          <Text style={styles.btnText}>{'x'}</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'snow',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 10,
    paddingTop: 20,
  },
  qtyLine: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  qtyInput: {
    marginHorizontal: 10,
    borderWidth: 0.5,
    borderColor: 'dodgerblue',
    padding: 5,
    textAlign: 'center',
    width: '20%',
  },
  btn: {
    backgroundColor: 'dodgerblue',
    paddingVertical: 5,
    paddingHorizontal: 10,
    borderRadius: 3,
  },
  btnText: {
    color: 'white',
  },
});



Number(txt)
// also converts empty string and blank space(s) as 0

At present in TextInput onChangeText event we are checking 3 conditions. Checking a text is a number, number is > 0 and number is < 101. But this can be simplified in one step by using regex validation.

Lets touch the TextInput component. In onChangeText event we are using regex to validate the given string is a number and the value is between 1 to 100.

TextInput with RegEx pattern



const qtyRgPtn = /^([0-9][0-9]?|100)$/;
. . .
<TextInput onChangeText={txt => 
qtyRgPtn.test(txt) && setQty(Number(txt))} />

so simple isn't it?

Now in addition to that we are showing a warning message for short time when the user inputs invalid qty.



const qtyRgPtn = /^([0-9][0-9]?|100)$/;
export default function App() {
  const [qty, setQty] = useState(0);
  const [qtyError, setQtyError] = useState('');
. . .

  <TextInput 
   onChangeText={(txt) => {
            /*
            let num = Number(txt);
            if (!isNaN(num) && num > 0 && num < 101) {
              setQty(num);
            } else {
              setQty(0);
            }
            */
            if (qtyRgPtn.test(txt)) setQty(Number(txt));
            else {
              setQty(0);
              if (!txt || !txt.trim().length) {
                setQtyError('Qty should be in between 1-100');
                setTimeout(() => setQtyError(''), 2000);
              }
            }
          }}
  />
. . . 
{/* final child of container */}
      {qtyError ? (
        <Text style={{ color: 'salmon', fontSize: 12, marginTop: 5 }}>
          {qtyError}
        </Text>
      ) : null}

Good! we are done :)

Hope this post will be useful. Source code here. Thank you.

React Native Payfort | Amazon Payment Service Integration

RamR — Wed, 17 Apr 2024 10:45:15 +0000

Several months back I was struggling to integrate payfort payment gateway into my React Native application, even after I found some posts regarding that I couldn't achieve it.

After multiple attempts finally I was able to complete that integration.

I had been thinking to share this for long time but now only I got the time.

Shall we start ?

Test account
Packages & Configurations
Base Page
Device id
SDK Token
Transaction Object
Checkout Component
OnSuccess OnFailure
Show Payfort
Thats it

Test Account

First we need a test account to simulate the process. For this, contact merchantsupport-ps@amazon.com and get our test account. Once we got and logged in into our account we need to collect this information from security settings.

Merchant Identifier
Access Code
Request Phrase

Reference > https://paymentservices-reference.payfort.com/docs/api/build/index.html#before-starting-your-integration-follow-these-steps

Packages & Configuration

Coming to the application, create a simple basic react native project and install these packages.

axios (for network call)
crypto-js (for encryption)
rn-amazon-payment-services (for payfort)

for rn-amazon-payment-services we need to do some platform oriented configurations.

Android
In android\build.gradle

allprojects {
  repositories {
    ...
    maven { url 'https://android-sdk.payfort.com' }
  }
}

In AndroidManifest.xml add 2 permissions

  < uses-permission android:name="android.permission.INTERNET" />
  < uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

iOS
In Podfile (inside the target section)

pod 'PayFortSDK'

In Podfile (at bottom)

 post_install do |installer|
      installer.pods_project.targets.each do |target|
        if ['PayFortSDK'].include? target.name
          target.build_configurations.each do |config|
              config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
          end
        end
      end
    end

pod install

Reference > https://paymentservices-reference.payfort.com/docs/api/build/index.html#installing-the-mobile-sdk155

Base Page

All set, lets start touching the front page. Create a simple page with one button at the center which shows the payfort payment page.

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.btn}>
        <Text style={styles.text}>Proceed to Pay</Text>
      </TouchableOpacity>     
    </View>
  );
}

To perform a payfort transaction we need to form a transaction object which has the transaction details and an SDK token. For each and every transaction we need a unique SDK token. To generate an SDK token we need device id on which this application runs.

So we have to perform these 5 steps,

Get Device Id
Generate SDK Token
Form Transaction Object
Configure Checkout Component
Process Payfort Transaction

Step 1 - Get Device Id

For this we have to call a method from amazon package called getDeviceId and set the value on page load.

import { getDeviceId } from 'rn-amazon-payment-services';

var deviceId = '';
export default function App() {
. . .
  const setupDeviceId = async () => {
    deviceId = await getDeviceId();
  };

  const loadPageData = async () => {
    await setupDeviceId();    
  };

  useEffect(() => {
    loadPageData();
  }, []);

  return (
    <View style={styles.container}>
    . . .
  )
}

Step 2 - Generate SDK Token

This is quite tricky.

To get the SDK token, we have to call an API with a request object. This request object should contain properties device_id, language, merchant_identifier, access_code, service_command and signature. Among these properties the signature property value has to be generated from other property values.

Shall we start forming the request object? Lets go one by one.

Define payfort field values of Merchant Identifier, Access code, Request Phrase which we collected from the portal.

// testing environment payfort field values, production values are different
const payfortFields = {
  merchant_identifier: 'PQRstuv',
  access_code: '123axisCode123',
  request_phrase: 'abcd1234$',
};

var deviceId = '';
export default function App() {

Now in SDK token request object, assign initial properties like this.

export default function App() {
const [token, setToken] = useState('');
. . .

const getSDKToken = async () => {
    const sdkTokenObj = {
      device_id: deviceId,
      merchant_identifier: payfortFields.merchant_identifier,
      access_code: payfortFields.access_code,
      language: 'en',
      service_command: 'SDK_TOKEN',
    };
}
. . .
}

Now in this object we need to add the signature property value which is an encrypted value of a string pattern. To create that string pattern we need to follow 4 steps.

Step 1, sort the request object property keys in ascending alphabetical order.

    const sortedKeys = Object.keys(sdkTokenObj).sort((a, b) =>
      a.localeCompare(b)
    );

Step 2, concatenate the request object properties as string in ascending order. Property separator null and Key Value separator =.

  let concatenatedString = '';
    sortedKeys.forEach((ele) => {
      concatenatedString += ele + '=' + sdkTokenObj[ele];
    });

At this point, the concatenatedString value will be like this

// concatenatedString = 'access_code=SILgpo7pWbmzuURp2qridevice_id=aAbC123zZfF56700language=enmerchant_identifier=MxvOupuGservice_command=SDK_TOKEN'

Step 3, Add the PASS_PHRASE or REQUEST_PHRASE at the beginning and the end of the concatenated string.

    concatenatedString =
      payfortFields.request_phrase +
      concatenatedString +
      payfortFields.request_phrase;
console.log('concatenated string', concatenatedString )
// concatenatedString = 'abcd1234$access_code=SILgpo7pWbmzuURp2qridevice_id=aAbC123zZfF56700language=enmerchant_identifier=MxvOupuGservice_command=SDK_TOKENabcd1234$'

Step 4, now generate hash value from the concatenated string using a method in crypto-js package

import CryptoJS, { SHA256 } from 'crypto-js'
. . .
  const getSDKToken = async () => {
. . .
   const hash = SHA256(concatenatedString);
   console.log('hash', hash)

After following these 4 steps we prepared the string pattern. Lets encrypt this value.

const sign = hash.toString(CryptoJS.enc.Hex);
console.log('sign', sign )
// sample output
// sign = 94C38AFC7BDAE0114FC8C740EDF12416F22998241CE4B4EA70D5521233A2C882

Now we generated the required encrypted signature value. Lets setup the request object with the signature property.

sdkTokenObj.signature = sign;

The request object for the API call is ready, its time to call the API and get the SDK token. Note, the API url is different for TESTING and PRODUCTION.

import axios from 'axios'
. . .
  const getSDKToken = async () => {
. . .
    const headers = { 'Content-type': 'application/json' };
    // const productionUrl = 'https://paymentservices.payfort.com/FortAPI/paymentApi';
    const testUrl = 'https://sbpaymentservices.payfort.com/FortAPI/paymentApi';
    const response = await axios.post(testUrl, sdkTokenObj, { headers });

    if (response?.data?.sdk_token) {
      /**
       response object
       {
        access_code: '***HDZRe****P4$$$$',
        device_id: 'e34abc-123-abcdf-742-d987b67957',
        language: 'en',
        merchant_identifier: 'PQRstuv',
        response_code: '22000',
        response_message: 'Success',
        sdk_token: 'abcd1234AFGHTYUI00bnmghjklpo',
        service_command: 'SDK_TOKEN',
        signature: '660288c0e0cabcd$5e06c57bb19126e181185291195ad6ef33006191aa741604218',
        status: '22',
      }
       */
      setToken(response.data.sdk_token);
    }

Yeah, we have successfully got the SDK token and updated the state. So far all fine? If you missed anything the whole getSDKToken method FYR.

  const getSDKToken = async () => {
    const sdkTokenObj = {
      device_id: deviceId,
      language: 'en',
      merchant_identifier: payfortFields.merchant_identifier,
      access_code: payfortFields.access_code,
      service_command: 'SDK_TOKEN',
    };

    const sortedKeys = Object.keys(sdkTokenObj).sort((a, b) =>
      a.localeCompare(b)
    );

    let concatenatedString = '';
    sortedKeys.forEach((ele) => {
      concatenatedString += ele + '=' + sdkTokenObj[ele];
    });
    concatenatedString =
      payfortFields.request_phrase +
      concatenatedString +
      payfortFields.request_phrase;
    console.log('concatenated string', concatenatedString);

    const hash = SHA256(concatenatedString);
    console.log('hash', hash);
    const sign = hash.toString(CryptoJS.enc.Hex);
    console.log('sign', sign);

    sdkTokenObj.signature = sign;

    const headers = { 'Content-type': 'application/json' };
    // const productionUrl  = 'https://paymentservices.payfort.com/FortAPI/paymentApi';
    const testUrl = 'https://sbpaymentservices.payfort.com/FortAPI/paymentApi';
    const response = await axios.post(testUrl, sdkTokenObj, { headers });

    if (response?.data?.sdk_token) {
      setToken(response.data.sdk_token);
    }
  };

Calling this method in useEffect for the first transaction.


  const loadPageData = async () => {
    await setupDeviceId();
    await getSDKToken();
  };

  useEffect(() => {
    loadPageData();
  }, []);

Step 3 - Transaction Object

Form transaction object with the SDK token value and the transaction information.

  const paymentObject = {
    command: 'PURCHASE',
    merchant_reference: 'companyName' + Date.now().toString(),
    amount: 100, // use state variable
    currency: 'USD',
    language: 'en',
    customer_email: 'custemail@email.com',
    sdk_token: token,
  };

Here in this sample we are making a purchase transaction for the amount of $100. You can use a state variable which holds the amount information like cartTotal or totalPrice.

Step 4 - Checkout Component

In the UI part, we are using the payfort checkout component and define the values for the respective properties.

import { getDeviceId, StandardCheckout } from 'rn-amazon-payment-services';
. . .
  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.btn}>
        <Text style={styles.text}>Proceed to Pay</Text>
      </TouchableOpacity>
      <StandardCheckout
        showStandardCheckoutPage={showStandardCheckout}
        environment={'TEST'} // TEST or PRODUCTION
        requestCode={1}
        showLoading={true}
        showResponsePage={true}
        requestObject={paymentObject}
        onSuccess={onSuccess}
        onFailure={onFailure}
        onCancel={onCancel}
      />
    </View>
  );

Here showStandardCheckout state variable will be used to show/hide the payfort payment page.

Step 5 - OnSuccess OnFailure

As we defined in the component, need to write methods for onSuccess and onFailure props.

export default function App() {
  const [token, setToken] = useState('');
  const [showStandardCheckout, setShowStandardCheckout] = useState(false);
. . .

   const onSuccess = (response) => {
    console.log('payfort success', response);
    /**
     success response object
     {
      amount: '100',
      authorization_code: '4567891230',
      card_holder_name: 'my cust name',
      card_number: '12345******0001',
      command: 'PURCHASE',
      currency: 'USD',
      customer_email: 'custemail@email.com',
      customer_ip: '123.456.789.01',
      eci: 'ECOMMERCE',
      expiry_date: '2505',
      fort_id: '16900000098',
      language: 'en',
      merchant_reference: 'companyName202404158789',
      payment_option: 'VISA',
      response_code: '14000',
      response_message: 'Success',
      sdk_token: 'bb39b7a54abcdffghjklpoiuytrewq12',
      status: '14',
      token_name: 'abcdfghty6a84100112233440377cecfghtyuer',
    }
     */
    setToken('');
    setShowStandardCheckout(false);
  };

  const onFailure = (response) => {
    console.log('payfort failure', response);
    setToken('');
    setShowStandardCheckout(false);
  };

  const onCancel = (response) => {
    console.log('payfort cancel', response);
    setToken('');
    setShowStandardCheckout(false);
  };

We have to clear the SDK token on each attempt ends.

Step 6 - Show Payfort

After setting up the device id, SDK token, transaction object and checkout component its time to show the payfort payment page. In the onPress of the button

  const openPayfort = async () => {
    if (!token) {
      await get_sdk_token();
    }
    setShowStandardCheckout(true);
  };

. . .

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={() => openPayfort()} style={styles.btn}>
        <Text style={styles.text}>Proceed to Pay</Text>
      </TouchableOpacity>
. . .

Note, We have to generate the SDK token for each and every attempts.

That's It

When we click the ProceedToPay button we will be redirected to payfort payment page.

Yes finally we achieved on successfully integrating the Amazon Payment Service | Payfort into our application.

Full source code available here

Thank you !

Tags: #javascript, #react, #react-native, #android, #ios, #mobile, #payment-gateway, #payfort, #amazon-payfort, programming

Rename iOS project React Native

RamR — Fri, 29 Mar 2024 13:31:15 +0000

This post will be helpful if you want to rename or duplcaite an existing project.

Places to change

package.json
app.json
info.plist
AppDelegate
XCode - General
XCode - Signing & Capabilities
XCode - Build Settings

package.json

app.json

info.plist, edit CFBundleDisplayName

AppDelegate, rootView value

XCode-General, Diaplay Name

XCode-Signing & Capabilities, Bundle Identifier

XCode-Build Settings, Product Name

That's it, now you have successfully changed the name of the React Native iOS project.

ios #xcode #objectivec #javascript #hybrid #mobile

Search Filter or Search In List React Native

RamR — Thu, 01 Feb 2024 13:25:20 +0000

This post is about how to perform search operations in a list of items with color highlight in a simple approach. This approach is using a string method indexOf.

Contents

Sample Search component
Basic page structure
Search in post Title
Lowercase
Search in post Description
Optimization

Sample SEARCH component

First, we are going to design a sample search component for basic understanding. In a search component there are 3 parts. Left side text, keyword part and the right side text. For this we need to use nested Text component.



export default function App() {

  const SearchResultSampleComp = () => {
    return (
      <Text>
        This is left side <Text style={{backgroundColor:"#FFC04C"}} >searchKeyword</Text>
        <Text> and this is right side</Text>
      </Text>
    );
  };


  return (
    <View style={styles.container}>
        <SearchResultSampleComp/>
    </View>
  );
}

Yes, this is what we need to know.

The keyword index is 18 this is important to note and it is highlighted with color. Shall we start now?

Basic page structure

Lets start constructing the basic page with sample data. In this page we have search input and the post list using flatlist component.

sample data



// sample data
const list_post = [
  {
    id: '1',
    description:
      'JavaScript is a single-threaded, non-blocking, and asynchronous programming language. This means that it has only one execution thread, but it can handle asynchronous operations efficiently without blocking the execution of the entire program. This is achieved through a mechanism called the event loop.',
    title:
      'JavaScript s Single-Threaded Bliss: Because Who Needs Multithreading Anyway',
  },
  {
    id: '2',
    description:
      'In our working time, sometimes we need to create some simple, light, quick components to render to any technology stacks. For example we build a screen loader component before js bundle back to expect users waiting',
    title: 'Light weight (5k) JS framework to create Web Components',
  },
  {
    id: '3',
    description:
      'Today i will be showing the easiest way to send push notifications to yourself using Cronus Monitoring and Alerting.We ll be using the npm package cronus-alert to send an alert for an event. We’ll then receive this alert on our mobile device by using the Cronus Mobile App.',
    title: 'The easiest way to send mobile push notifications for developers',
  },
  {
    id: '4',
    description:
      'In the vast landscape of frontend development, navigating the intricacies of state management can often feel like deciphering a complex narrative. Enter Redux, a steadfast storyteller in our coding adventures, unraveling the tale of centralised state management. ',
    title: 'Navigating the React Redux toolkit as a Frontend developer',
  },
  {
    id: '5',
    description:
      'In the world we live in today, data is like the puzzle pieces that fit together to reveal the bigger picture of success for businesses. Its the key ingredient, the secret sauce that companies use to make informed decisions and navigate the complexities of the digital era. Now, imagine you re in Hyderabad, a bustling city known for its tech scene, where the demand for skilled individuals in the field of data engineering is soaring high.',
    title: 'Starting the Data Journey: Learning Azure Data Engineering',
  },
];

the page



export default function App() {
  const [searchText, setSearchText] = useState('');

  const renderItem = ({ item }) => {
    return (
      <View style={styles.postItem}>
        <Text numberOfLines={2} style={styles.title}>
          {item.title}
        </Text>
        <Text numberOfLines={4} style={styles.desc}>
          {item.description}
        </Text>
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.searchInput}
        placeholder={'Search'}
        value={searchText}
        onChangeText={setSearchText}
      />
      <FlatList
        data={list_post}
        renderItem={renderItem}
        keyExtractor={(item, index) => '_listItem_' + index}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#eeffff',
    paddingVertical: 10,
    paddingHorizontal: 3,
  },
  searchInput: {
    alignSelf: 'center',
    width: '80%',
    borderWidth: 0.5,
    borderColor: 'grey',
    marginBottom: 10,
    paddingVertical: 7,
    paddingHorizontal: 5,
    borderRadius: 5,
  },
  desc: {
    fontSize: 14,
    color: '#303030',
  },
  title: {
    color: 'black',
    fontWeight: 'bold',
    fontSize: 16,
    marginBottom: 3,
  },
  postItem: {
    marginTop: 5,
  },
});

Search in post Title

We are using string indexOf method to search in post title. Based on the index, the left side, the keyword and the right side parts can be separated.



  const renderItem = ({ item }) => {
    const indx = item.title.indexOf(searchText);
    const length = searchText.length;

    return (
      <View style={styles.postItem}>
        <Text numberOfLines={2} style={styles.title}>
          {item.title.substr(0, indx)}
          <Text style={{ backgroundColor: '#FFC04C' }}>
            {item.title.substr(indx, length)}
          </Text>
          <Text>{item.title.substr(indx + length)}</Text>
        </Text>
        <Text numberOfLines={4} style={styles.desc}>
          {item.description}
        </Text>
      </View>
    );
  };

here we're getting the index of search text and the length of it. By using string substr method we can easily cut out the side parts and keyword separately. 0 to indx -> left side, indx to length -> keyword and indx+length to end -> right side.

Got it? additionally we have to add few if conditions as well.



  const renderItem = ({ item }) => {
    if (!searchText || searchText.trim().length < 1) {
      return (
        <View style={styles.postItem}>
          <Text numberOfLines={2} style={styles.title}>
            {item.title}
          </Text>
          <Text numberOfLines={4} style={styles.desc}>
            {item.description}
          </Text>
        </View>
      );
    }

    const indx = item.title.indexOf(searchText);
    const length = searchText.length;

    if (indx < 0) return null;

    return (
      <View style={styles.postItem}>
        <Text numberOfLines={2} style={styles.title}>
          {item.title.substr(0, indx)}
          <Text style={{ backgroundColor: '#FFC04C' }}>
            {item.title.substr(indx, length)}
          </Text>
          <Text>{item.title.substr(indx + length)}</Text>
        </Text>
        <Text numberOfLines={4} style={styles.desc}>
          {item.description}
        </Text>
      </View>
    );
  };

Good, it is working fine.

Lowercase

Lets try searching one more time with the word React.

Wait, what? There is no item.

Did you get the point? javascript is case sensitive. So we have to change the case of both title and search keyword into lowercase since mostly users type in lowercase.



const renderItem = ({ item }) => {
. . .
const indx = item.title.toLowerCase().indexOf(searchText.toLowerCase());   
. . .
};

Perfect.

Search in post Description

We're applying the same concept which we did before with few conditional rendering.



  const renderItem = ({ item }) => {
    if (!searchText || searchText.trim().length < 1) {
      return (
        <View style={styles.postItem}>
          <Text numberOfLines={2} style={styles.title}>
            {item.title}
          </Text>
          <Text numberOfLines={4} style={styles.desc}>
            {item.description}
          </Text>
        </View>
      );
    }

    const indx = item.title.toLowerCase().indexOf(searchText.toLowerCase());
    const indx2 = item.description
      .toLowerCase()
      .indexOf(searchText.toLowerCase());
    const length = searchText.length;

    if (indx < 0 && indx2 < 0) return null;

    return (
      <View style={styles.postItem}>
        {indx < 0 ? (
          <Text numberOfLines={2} style={styles.title}>
            {item.title}
          </Text>
        ) : (
          <Text numberOfLines={2} style={styles.title}>
            {item.title.substr(0, indx)}
            <Text style={{ backgroundColor: '#FFC04C' }}>
              {item.title.substr(indx, length)}
            </Text>
            <Text>{item.title.substr(indx + length)}</Text>
          </Text>
        )}
        {indx2 < 0 ? (
          <Text numberOfLines={4} style={styles.desc}>
            {item.description}
          </Text>
        ) : (
          <Text numberOfLines={4} style={styles.desc}>
            {item.description.substr(0, indx2)}
            <Text style={{ backgroundColor: '#FFC04C' }}>
              {item.description.substr(indx2, length)}
            </Text>
            <Text>{item.description.substr(indx2 + length)}</Text>
          </Text>
        )}
      </View>
    );
  };

Optimization

As of now it is working correctly but whenever user types a character the renderItem will be triggered and the lowercase method will be called for fields title,description and searchKeyword each and every time.

With few modifications we can bring the better than before version. Shall we move for optimizing?

The plan is, we are duplicating the fields title, description of array items and going to use a variable for searchKeyword.



var searchText2 = '';
export default function App() {
const [listPost2, setListPost2] = useState([]);
. . .

useEffect(() => {
    const arr = list_post.map((ele) => ({
      ...ele,
      title2: ele.title.toLowerCase(),
      description2: ele.description.toLowerCase(),
    }));
    setListPost2(arr);
  }, []);


 const renderItem = ({ item }) => {
. . . 
    const indx = item.title2.indexOf(searchText2);
    const indx2 = item.description2.indexOf(searchText2);
    const length = searchText2.length;   
. . . 
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.searchInput}
        placeholder={'Search'}
        value={searchText}
        onChangeText={(txt) => {
          searchText2 = txt.toLowerCase();
          setSearchText(txt);
        }}
      />
      <FlatList
        data={listPost2}
        renderItem={renderItem}
        keyExtractor={(item, index) => '_listItem_' + index}
      />
    </View>
  );
 . . .

Here we are forming new array, with 2 new duplicate fields with lowercase. Since this is inside useEffect it will be triggered only one time. And also for searchKeyword we are using an ordinary variable which holds lowercase value of the searchKeyword.

Done, hope this works fast and better than before.

Yes we made it, did we?

I hope, this post has some useful stuffs which will be helpful to you. Thank you for reading this, thank you for everything.

Full source code available here on GitHub

Tags: #react, #react-native, #javascript, #android, #ios, #web, #search-in-list, #array-filter