How to send Selected Custom Checkbox data to next page in react native?

Question

Here I have created toggle custom checkboxes and those are rendered within FlatList with Name.

Now which checkboxes are checked i want to send those names into next screen using navigation.

So how can i implement that functionality, if anyone knows then please help me for the same.

/**Code For custom checkbox:**/

import React from "react";
import {
  TouchableOpacity,
  Image,
  View,
  SafeAreaView,
  Text,
} from "react-native";
import { useState } from "react";
import IconAntDesign from "react-native-vector-icons/AntDesign";

export function CheckBoxCustom() {
  const [count, setCount] = useState(0);
  return (
    <SafeAreaView>
      <TouchableOpacity
        style={{
          backgroundColor: "white",
          width: 20,
          height: 20,
          borderWidth: 2,
          borderColor: "#ddd",
        }}
        onPress={() => setCount(!count)}
      >
        {count ? (
          <IconAntDesign name="check" size={15} color={"black"} />
        ) : null}
      </TouchableOpacity>
    </SafeAreaView>
  );
}

/**Code for FlatList:**/
import React, {useState} from 'react';
import {
  SafeAreaView,
  Text,
  View,
  TouchableOpacity,
  Image,
  StyleSheet,
  FlatList,
  Dimensions,
  useWindowDimensions,
  ScrollView,
  Button,
} from 'react-native';
import Header from '../CustomComponents/RestaurentUI/Header';
import {CheckBoxCustom} from '../CustomComponents/RestaurentUI/Checkbox';
import {TextInput} from 'react-native-gesture-handler';
import {TabView, SceneMap, TabBar} from 'react-native-tab-view';
import {NavigationContainer, useNavigation} from '@react-navigation/native';
import GetCheckBoxData from './GetCheckBoxData';
const data = [
  {
    name: 'Lumlère brûlée',
    status: 'Problems',
  },
  {
    name: 'Aucune eau chaude',
    status: 'Problems',
  },
  {
    name: 'Lumlère brûlée',
    status: 'Problems',
  },
  {
    name: 'Service de ménage',
    status: 'Problems',
  },
  {
    name: 'AC non-fonctionnel',
    status: 'Problems',
  },
  {
    name: 'WIFI non-fonctionnel',
    status: 'Problems',
  },
  {
    name: 'Four non-fonctionnel',
    status: 'Problems',
  },
];
const renderItem = ({item, index}) => {
  return (
    <View>
      <View style={{flexDirection: 'row'}}>
        <CheckBoxCustom />
        <Text style={{marginLeft: 10}}>{item.name} </Text>
      </View>
    </View>
  );
};
const separator = () => {
  return (
    <View
      style={{
        height: 1,
        backgroundColor: '#f1f1f1',
        marginBottom: 12,
        marginTop: 12,
      }}
    />
  );
};
const FirstRoute = () => (
  <FlatList
    style={{marginTop: 20}}
    data={data}
    keyExtractor={(e, i) => i.toString()}
    renderItem={renderItem}
    ItemSeparatorComponent={separator}
  />
);

const SecondRoute = () => (
  <View style={[styles.scene, {backgroundColor: 'white'}]} />
);

const initialLayout = {width: Dimensions.get('window').width};

const renderScene = SceneMap({
  first: FirstRoute,
  second: SecondRoute,
});

const ReportScreen = ({navigation}) => {
  const nav = useNavigation();
  const layout = useWindowDimensions();
  const [index, setIndex] = useState(0);
  const [routes] = useState([
    {key: 'first', title: 'Problemes'},
    {key: 'second', title: 'Besoins complémentaitaires'},
  ]);

  const goToScreen = () => {
    navigation.navigate('GetCheckBoxData', {title: 'Hii all'});
  };
  const [checked, setChecked] = useState({});

  const checkToggle = id => {
    setChecked(checked => ({
      ...checked,
      [id]: !checked[id],
    }));
  };
  return (
    <SafeAreaView style={styles.safearea}>
      <Header title="Report" />
      <ScrollView showsVerticalScrollIndicator={false} bounces={false}>
        <View style={{flexDirection: 'row', marginTop: 20}}>
          <View style={{flex: 1, height: 1, backgroundColor: '#ccc'}} />
        </View>
        <View style={styles.cardView}>
          <View style={styles.subView}>
            <Image
              style={styles.image}
              source={require('../Assets/UIPracticeImage/H1.jpg')}
            />
            <View style={styles.internalSubView}>
              <View style={styles.nameView}>
                <Text style={styles.nameText}>Pine Hill Green Caban</Text>
              </View>
              <View style={styles.dateView}>
                <Text style={styles.dateText}>May 22-27</Text>
              </View>
            </View>
          </View>
        </View>
        <View style={{flexDirection: 'row'}}>
          <View style={{flex: 1, height: 1, backgroundColor: '#ccc'}} />
        </View>
        <View
          style={{
            // backgroundColor: 'lime',
            flex: 1,
            height: 385,
            width: '100%',
          }}>
          <TabView
            navigationState={{index, routes}}
            renderScene={renderScene}
            onIndexChange={setIndex}
            initialLayout={initialLayout}
            style={styles.container}
           
            renderTabBar={props => (
              <TabBar
                tabStyle={{alignItems: 'flex-start', width: 'auto'}}
                {...props}
                renderLabel={({route, color}) => (
                  <Text style={{color: 'black'}}>{route.title}</Text>
                )}
                style={{backgroundColor: 'white'}}
              />
            )}
          />
        </View>

        <Button title="Click me" onPress={goToScreen} />
      </ScrollView>
    </SafeAreaView>
  );
};

export default ReportScreen;
const styles = StyleSheet.create({
  safearea: {
    marginHorizontal: 20,
  },
  cardView: {
    borderRadius: 10,
    marginVertical: 10,
    paddingVertical: 8,
  },
  subView: {
    flexDirection: 'row',
  },
  image: {
    height: 80,
    width: 110,
    borderRadius: 10,
  },
  internalSubView: {
    justifyContent: 'space-between',
    flex: 1,
  },
  nameView: {
    justifyContent: 'space-between',
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: 10,
  },
  nameText: {
    fontWeight: 'bold',
    width: '45%',
    fontSize: 15,
  },
  dateView: {
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: 10,
    justifyContent: 'space-between',
  },
  dateText: {
    width: 80,
  },
  listTab: {
    flexDirection: 'row',
    marginBottom: 20,
    marginTop: 20,
  },
  btnTab: {
    borderWidth: 3,
    borderColor: 'white',
    flexDirection: 'row',
    marginRight: 10,
  },
  btnTabActive: {
    borderWidth: 3,
    borderBottomColor: '#fdd83d',
    borderColor: 'white',
  },
  scheduleButton: {
    backgroundColor: '#fdd83d',
    alignItems: 'center',
    paddingVertical: 15,
    borderRadius: 10,
    marginTop: 15,
  },
  container: {
    marginTop: 20,
  },
  scene: {
    flex: 1,
  },
});
[![UI image][1]][1]


  [1]: https://i.stack.imgur.com/AuLT8.png

Drew Reese · Accepted Answer · 2022-07-27T14:59:57.123

You may want to lift the checkbox state to the parent component, i.e. make the checkboxes controlled, and collect the checked checkbox values. For this I'm assuming your data items have an id property, but any unique item property will suffice.

Example:

export function CheckBoxCustom({ checked, onPress }) {
  return (
    <SafeAreaView>
      <TouchableOpacity
        style={{
          backgroundColor: "white",
          width: 20,
          height: 20,
          borderWidth: 2,
          borderColor: "#ddd",
        }}
        onPress={onPress}
      >
        {checked ?? <IconAntDesign name="check" size={15} color={"black"} />}
      </TouchableOpacity>
    </SafeAreaView>
  );
}

...

const [checked, setChecked] = useState({});

const checkToggle = id => {
  setChecked(checked => ({
    ...checked,
    [id]: !checked[id],
  }));
};

const renderItem = ({ item, index }) => {
  return (
    <View>
      <View style={{ flexDirection: "row" }}>
        <CheckBoxCustom
          checked={checked[item.id]}
          onPress={() => checkToggle(item.id)}
        />
        <Text style={{ marginLeft: 10 }}>{item.name}</Text>
      </View>
    </View>
  );
};

<FlatList
  data={dataList}
  keyExtractor={(e, i) => i.toString()}
  renderItem={renderItem}
  ItemSeparatorComponent={separator}
/>;

If your data hasn't any good GUID candidates then I suggest augmenting your data to include good GUIDs.

To pass the checked/selected items filter the dataList array.

Example:

const selected = dataList.filter(
  item => checked[item.id]
);
// pass selected in navigation action

Hello sir, thank you for help. but can you please share that how can we pass array to next screen which contain checked items only ? — Dhyana Dave, Jul 26 '22 at 10:16
@DhyanaDave Use the`checked` state to filter the `dataList` array. I've updated my answer to include an example. — Drew Reese, Jul 27 '22 at 15:01

How to send Selected Custom Checkbox data to next page in react native?

1 Answers1