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

react native modal inside FlatList not working

…i’m getting issues inreact native modal click change flatlist text.

i want when i click on modal ok button accept text in flatlist changes to pending

here is my code …

…i’m getting issues inreact native modal click change flatlist button color.

i want when i click on modal ok button accept text in flatlist changes to pending

here is my code …

…
im new to react native i try it many times to solve but fail please help…

  import React from 'react';
import { SafeAreaView, View, FlatList,Pressable, StyleSheet, Text, StatusBar } from 'react-native';

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];



const App = () => {
   const [active, setactive] = useState(false);

  const renderItem = ({ item }) => (
    <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
   <Pressable  onPress={() => setactive(!active)}>
        <Text>accept</Text>
   </Pressable>

  </View>
  );

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
 <Modal
        animationType="slide"
        transparent={true}
        visible={active}
        onRequestClose={() => {
          setDetails(null)
          console.warn("closed");
        }}>
    <Pressable  onPress={() => [handleListing(), setactive(!active)]}>
         <Text>ok</Text>
         </Pressable>
   </>Modal
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default App;
Tags:

3

Answers


  1. 0

    I didn’t get exactly but as far as i understand you’re trying to do this;

    Change accept text with this line:

     <Text>{modalOkPressed ? "Pending" : "accept"}</Text>

    then add this usestate below "active-setactive"

    const [modalOkPressed, setModalOkPressed] = useState(false)

    then replace pressable line which contains "ok" with this line;

    <Pressable onPress={() => [setactive(!active), setModalOkPressed(true)]}>

    now when u press to "Ok", "modalOkPressed will be equal to true and text will be "pending" instead of "accept".

    You may use if else statement in one line like this:

    {modalOkPressed ? "Pending" : "accept"}
    Login or Signup to reply.
  2. 0

    Here is my result: I think the @Emre özcan’s result is correct. The current code is working with maintaining your original code as much as possible.
    I only arranged them.

    import React from 'react';
import { SafeAreaView, View, FlatList,Pressable, StyleSheet, Text, StatusBar } from 'react-native';

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];

const App = () => {
   const [active, setactive] = useState(false);
   const [modalOkPressed, setModalOkPressed] = useState(false);

  const renderItem = ({ item }) => (
    <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
    <Pressable onPress={() => {
        setactive(!active);
    }}>
        <Text>
           {modalOkPressed ? "Pending" : "accept"}
        </Text>
   </Pressable>

  </View>
  );

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
      <Modal
        animationType="slide"
        transparent={true}
        visible={active}
        onRequestClose={() => {
          setDetails(null)
          console.warn("closed");
        }}>
      <Pressable  onPress={() => {
        handleListing();
        setactive(!active);
        setModalOkPressed(true);
      }}>
         <Text>ok</Text>
         </Pressable>
      </Modal>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default App;
    Login or Signup to reply.
  3. 0

    I guess I understood, you can add extradata to flatlist;

    create a state called selectedIndex (or whatever u want) and set the value of selectedIndex with onPress Function,

    We have unique id’s in data so we can set selectedIndex(item.id) then create single line if else statement to check if our selected(pressed) id is equal to selectedIndex and then return text according to it

    Can you try this code now ?

    const App = () => {
const [active, setactive] = useState(false);
const [selectedIndex, setSelectedIndex] = useState(null)

const renderItem = ({ item }) => (
    <View style={styles.item}>
        <Text style={styles.title}>{item.title}</Text>
        <Pressable onPress={() => {
            setactive(!active);
            setSelectedIndex(item.id);
        }}>
            <Text>
                {selectedIndex === item.id ? "Pending" : "Accept"}
            </Text>
        </Pressable>

    </View>
);
return (
    <SafeAreaView style={styles.container}>
        <FlatList
            data={DATA}
            renderItem={renderItem}
            keyExtractor={item => item.id}
            extraData={selectedIndex}    // add extra data to flatlist
        />
        <Modal
            style={styles.modal}
            animationType="slide"
            transparent={true}
            visible={active}
            onRequestClose={() => {
                setDetails(null)
                console.warn("closed");
            }}>
            <Pressable onPress={() => {
                handleListing();
                setactive(!active);
            }}>
                <Text>Ok</Text>
            </Pressable>
        </Modal>
    </SafeAreaView>
);}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search