CODEWITHSUNDEEP
react-native
Yellow Clock
Yellow Clock

Reputation: 465

React Native how to make an unread message function?

I need to make an unread message function with react native . The idea is : the "unread" will just appear one time ,and after the user click the view ,the "unread" will not appear more .. like as follow : enter image description here

I attach my code also ,please help me to take a look ,thank you so much !!!

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


function TryMessageScreen(props) {
    
    return (
        <View style={styles.container}>
           <View style={styles.second_container}>
               <Text>Unread</Text>
            </View>  
        </View>
    );
}

const styles = StyleSheet.create({
    container : {
        flex : 1,
        justifyContent : "center",
        alignItems : 'center',
    },
    second_container : {
        width : 200,
        height : 100,
        justifyContent : 'center',
        alignItems : 'center',
        borderWidth : 1,
        borderColor : "#000000",

    }
})
export default TryMessageScreen;

Upvotes: 0

Views: 1539

Answers (1)

Shivam Jha
Shivam Jha

Reputation: 4532

You can use useState() hook to keep track whether it is clicked. It it is not clicked yet(unRead is false), then show the button:

Update: You can use Async Storage to persist. So, first read from local storage, and then plan accordingly:

export default function Demo() {
  return (
    <>
      <TryMessageScreen />
    </>
  );
}

const getReadStatus = async () => {
  let isRead = null;
  try {
    isRead = await AsyncStorage.getItem('read');
  } catch (e) {
    console.log(e);
  }

  return isRead;
};

const setReadToFalse = async () => {
  try {
    await AsyncStorage.setItem('read', JSON.stringify(false));
  } catch (e) {
    console.log(e);
  }
};

function TryMessageScreen(props) {
  const [unRead, setUnRead] = useState(() => getReadStatus || false);

  return (
    <>
      {unRead && (
        <View style={styles.container}>
          <View style={styles.second_container}>
            <TouchableOpacity
              onPress={async () => {
                await setReadToFalse();
                setUnRead(false);
              }}
            >
              <Text>Unread</Text>
            </TouchableOpacity>
          </View>
        </View>
      )}
    </>
  );
}

Upvotes: 1

Related Questions