CODEWITHSUNDEEP
javascriptreact-nativecomponents
Imdadul Haque
Imdadul Haque

Reputation: 1855

failed to pass the value from one to another component using React Native

I try to pass the value one to another component in react-native projects but I failed and there is not show any error but it totally shows a blank page!

NotificationData.js page, where store to required data as given below,

const NotificationData =[
    {
        title: "Covid Visa",
        statusDetails: "Your antibody is about to expire in a month ",
        time: "3:55PM  10 May 2021",
    },
    {
        title: "UTTPS",
        statusDetails: "Your vaccine shedule is activated. Please come to center at 12 May.",
        time: "10:15PM  5 May 2021",
    },
    {
        title: "Government",
        statusDetails: "Please follow the rules to avoid COVID spread. Stay home and stay safe. ",
        time: "3:55PM  1 May 2021",
    },
    {
        title: "Kuet Moitri Hospital",
        statusDetails: "Congratulations! Your  PCR result is negative. This result is valid for next 48 hours.",
        time: "12:30PM  20 May 2021",
    },
];

export default NotificationData;

Notification.js page where I have show the data,

import React from "react";
import {View, StyleSheet} from "react-native";
import { Card } from "react-native-paper";
import NotificationData from "./NotificationData";


const Notification = () => {

return (
<View style={styles.container}>
          {
                    NotificationData.map((val, ind) =>{
                    return <Card 
                              key={ind} 
                              title={val.title}
                              statusDetails={val.statusDetails}
                              time={val.time}
                              />
                    })
          }
</View>
);
};

const styles = StyleSheet.create({
container: {
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
height: "100%",
width: "100%",
},
});

export default Notification;

Note: It shows the blank page in the attatched file. Advanced thanks!

enter image description here

Upvotes: 0

Views: 68

Answers (1)

Tamoor Ashiq
Tamoor Ashiq

Reputation: 26

You can update your Notification.js like this

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Card, Title, Paragraph } from 'react-native-paper';
import NotificationData from './NotificationData';

const Notification = () => {
  return (
    <View style={styles.container}>
      {NotificationData.map((val, ind) => {
        return (
          <Card style={{ flex: 1 }}>
            <Card.Content>
              <Title>{val.title}</Title>
              <Paragraph>{val.statusDetails}</Paragraph>
            </Card.Content>
          </Card>
        );
      })}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100%',
    width: '100%',
  },
});

export default Notification;

Upvotes: 1

Related Questions