Question 33549 in React native Question posted in
The official React Native documentation can be found here.

How to set Switch component separately for each item that comes From API in React native

I have an API and I need to set the switch button separately for each
item. I read different answers but didn’t solve my problem as I tried
all of the answers.

const results = [
   {
            Id: "IySO9wUrt8",
            Name: "Los Stand",
            Category: "Mexican",
            Status: true,
        },
    {
            Id: "IySO9wUrt8",
            Name: "Los Stand 2",
            Category: "Burger",
            Status: true,
        },
     {
            Id: "IySO9wUrt8",
            Name: "Los Stand 3",
            Category: "BBq",
            Status: true,
        },
      ];

in the above code I need to set the Status in switch . If status is
true then the switch will be ON

for all the code I share the link of expo for live editing

Expo Link for Editing

Tags:

2

Answers


  1. 0

    You need to create a component that receives the item information, and inside the component update the state individually for each switch, otherwise the state is shared among the number of items you have.
    The link for Expo is here

    Login or Signup to reply.
  2. 0

    If you turn your results into a state you can do it link:

    import React, { useEffect, useState } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Image,
  ScrollView,
  FlatList,
  SafeAreaView,
  Switch,
  RefreshControl,
  Vibration,
  ActivityIndicator,
} from 'react-native';
import { Card, TextInput, RadioButton } from 'react-native-paper';

const results = [
  {
    Id: 'IySO9wUrt8',
    Name: 'Los Stand',
    Category: 'Mexican',
    Status: true,
  },
  {
    Id: 'IySO9wUrt8',
    Name: 'Los Stand 2',
    Category: 'Burger',
    Status: true,
  },
  {
    Id: 'IySO9wUrt8',
    Name: 'Los Stand 3',
    Category: 'BBq',
    Status: true,
  },
];

export default function App() {
  const [data, setData] = useState(results);
  const updateItem = (newItem, index) => {
    // when an array is used with useState it should be treated immutable
    // if the array have  nested objects/arrays then you will need
    // a different cloning technique
    const dataClone = [...data];
    const currentItem = dataClone[index];
    dataClone[index] = { ...currentItem, ...newItem };
    setData(dataClone);
  };
  const renderItem = ({ item, index }) => {
    let items = [];

    return (
      <>
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            width: 280,
          }}>
          <Text>{item.Name}</Text>
          <Switch
            key={item.Id}
            style={{ alignSelf: 'center' }}
            trackColor={{ false: '#767577', true: '#81b0ff' }}
            thumbColor={item.Status ? '#f5dd4b' : '#f4f3f4'}
            ios_backgroundColor="#3e3e3e"
            onValueChange={(val) => updateItem({Status: val }, index)}
            value={item.Status}
          />
        </View>
      </>
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        style={styles.container}
        data={data}
        renderItem={renderItem}
        keyExtractor={(item, index) => index.toString()}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 2,
    backgroundColor: 'white',
  },

  textStyle: {
    marginHorizontal: 20,
    marginTop: 10,
    color: 'black',
    fontWeight: '600',
  },
  singleRadioButtonContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginRight: 10,
  },
});

    If converting result into state is not desireable then you can move renderItem into its own file so that it can have state of its own link:

    import React, { useState } from 'react';
import { View, Switch, Text } from 'react-native';

export default function Item({ item, index }) {
  const [enabled, setEnabled] = useState(item.Status)
  return (
    <>
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          width: 280,
        }}>
        <Text>{item.Name}</Text>
        <Switch
          key={item.Id}
          style={{ alignSelf: 'center' }}
          trackColor={{ false: '#767577', true: '#81b0ff' }}
          thumbColor={enabled ? '#f5dd4b' : '#f4f3f4'}
          ios_backgroundColor="#3e3e3e"
          onValueChange={setEnabled}
          value={enabled}
        />
      </View>
    </>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search