Notification component

[victorstein]

The notification component needs to render the following component:

Requirements:

• [ ] The component should take 4 parameters (photo URL, title, date, redirect)
• [ ] The component should have read and unread state
• [ ] The component should be able to redirect to another screen using the redirect param
• [ ] The component should be able to persist data based on whether the notification has been seen or not

[victorstein]

Current questions: What happens when they touch the notification bell @GustavoGomez092 ?

[GustavoGomez092]

(Figma updated) This is a notifications screen where we can store notifications sent via OneSignal every time there is a published post on WordPress

[GustavoGomez092]

This section can also be generated via a WordPress Endpoint and we can leave the Push functionality for a later version.

[carloslenondavis]

Hi guys

What is de meaning of the border color for each card in the notification list?

Its mean status value which a color is assigned to?

[victorstein]

Hi guys

What is de meaning of the border color for each card in the notification list?

Its mean status value which a color is assigned to?

That is used to determine read and unread notifications

[carloslenondavis]

Hi guys What is de meaning of the border color for each card in the notification list? Its mean status value which a color is assigned to?

That is used to determine read and unread notifications

Thanks for the answer

[carloslenondavis]

Hi guys,

Which is the term of Notification, its mean the unit card or means the Notification View with the list of card So, this feature is related to the card view component of the View with all the list of cards including the "Notificaciones" Title?

I'll appreciate your clarification.

@victorstein

[victorstein]

Hi guys,

Which is the term of Notification, its mean the unit card or means the Notification View with the list of card So, this feature is related to the card view component of the View with all the list of cards including the "Notificaciones" Title?

I'll appreciate your clarification.

@victorstein

Just the notification component. As shown in the picture.

[carloslenondavis]

Which type will be used for "date" prop? string or it'll be a date object?.

[victorstein]

That is a good question. For now, let's leave it as a date string. @GustavoGomez092 can you confirm the data type coming from the API.

[carloslenondavis]

Id d'nt find any example in the code for the way how the type should be declared for each component prop.

So, in order to follow alignments:

1. We should use type aliases or interface?
2. In which place this type/interface should be declared? inside the .tsx file or in whith other file
3. The naming convention for the type or interface

You can see in the above screenshot how currently I have it using type aliases

[victorstein]

1. We should use type aliases or interface? Interfaces are always preferred over types to declare props
2. In which place this type/interface should be declared? inside the .tsx file or in whith other file in its own component-name.types.ts file
3. The naming convention for the type or interface IinterfaceName notice the capital I before the interface name. Which will be the component name ideally.

[carloslenondavis]

Hi guys,

I seeing that in the app we're using light and dark color scheme.

So, this dark schema will be added to the Notification component?,

-if yes- Which should be the color pallete for its when the dark color schema activated?.

@victorstein

[carloslenondavis]

For common styles, specificaly for colors, font color, font size, etc.. Should we use a common constant file, or each component will be responsible for they own styles, even if those are repeated? Do we using any theme pallete set or some contstant styles?

[victorstein]

Hi guys,

I seeing that in the app we're using light and dark color scheme.

So, this dark schema will be added to the Notification component?

The notification component has a dark variant which you can see in the figma file.

-if yes- Which should be the color pallete for its when the dark color schema activated?.

check the figma file for reference. The dark variants are below the light variants.

@victorstein

[victorstein]

For common styles, specificaly for colors, font color, font size, etc.. Should we use a common constant file, or each component will be responsible for they own styles, even if those are repeated? Do we using any theme pallete set or some contstant styles?

The tailwind theme specifies the colors. Feel free to add any missing color. Regarding how to use the dark variant, notice the dark: styles in the already built components. For more information on how Tailwind's dark theme works refer to the docs.

[carloslenondavis]

I having an issue with the title text, The content is overpasing the container. I tried to fix it setting the flexWrap: 'wrap' and the flexShrink style prop. But its till not working.

Do you have any idea how to fix this, maybe I missing something.

These are the tsx structre of the component

[victorstein]

I having an issue with the title text, The content is overpasing the container. I tried to fix it setting the flexWrap: 'wrap' and the flexShrink style prop. But its till not working.

Do you have any idea how to fix this, maybe I missing something.

These are the tsx structre of the component

Please migrate this to tailwind classes. The component seems to be structured well but I don't know what styles you are using once migrated to tailwind classes I will be able to tell the problem a little better.

Please refrain from using the stylesheet api unless absolutely necessary. This will ensure we keep the components consistent.

[carloslenondavis]

Thanks for the info,

[carloslenondavis]

Hi guys, I still having an issue with the content overpassing the text container. I already follow the nativewind styles using the flex-wrap prop. I try diff options but its sitll not working.

I do not know if I may missing something. I'll appreaciate your help.

[victorstein]

Try making the container flex.

[victorstein]

Will check on this tomorrow

[carloslenondavis]

Try making the container flex.

I already did that, and its still overpassing

[carloslenondavis]

Will check on this tomorrow

Perfect. See you later

[GustavoGomez092]

Try using a StyledView instead of a view:

import { styled } from 'nativewind';

const StyledView = styled(View)
const StyledText = styled(Text)

const Component = () => {
  return (
    <StyledView className="flex">
      <StyledText className="text-slate-800">
        Try editing me
      </StyledText>
    </StyledView>
  );
}```

[carloslenondavis]

Thanks for the info @GustavoGomez092, In fact I was reading about styledView. I'll check with that change