Closed SanaJamm closed 8 months ago
To implement the requested changes in your React Native CollectiveCard
component, you need to adjust the paragraph (description) styles for font size and weight, limit the text to three lines with truncation, enable expansion on click, and ensure the text stays within the card boundaries. Here's how you can modify the code to achieve this:
Update Description Style:
Change the description
style to have a font size of 16px, regular weight, and limit it to 3 lines with truncation.
description: {
fontSize: 16,
lineHeight: 24, // Adjust line height for better readability
color: Colors.black,
...InterRegular, // Use regular font weight
flexShrink: 1,
numberOfLines: 3, // Limit to 3 lines
ellipsizeMode: 'tail', // Automatic text truncation with ellipsis
},
Add State for Expanded Text: Introduce a new state variable to manage whether the description is expanded or not.
const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);
Modify Description Text Component:
Update the Text
component for the description to change the numberOfLines
property based on whether the description is expanded or not. Also, add an onPress
event to toggle the expansion.
<Text
style={styles.description}
numberOfLines={isDescriptionExpanded ? undefined : 3}
onPress={() => setIsDescriptionExpanded(!isDescriptionExpanded)}
>
{description}
</Text>
Ensure Text Inside Card:
To keep the text inside the card, ensure that the cardDescription
style provides adequate padding and margin to contain the text. This seems to be already handled in your existing cardContainer
style, but you can adjust the padding or margin if needed.
Adjust Styles for Flexbox Layout:
Make sure the flexbox layout is correctly set up to handle the text expansion within the card. You might need to adjust flex
properties in the styles to ensure the layout works as expected.
Test the Component: Finally, test the component to ensure that the text truncation, expansion on click, and character limit work as expected, and that the layout adjusts accordingly without breaking the card's design.
These changes will allow the paragraph in your CollectiveCard
component to have a smaller, regular-weight font, truncate after three lines, expand when clicked, and adhere to a character limit, all while ensuring the text remains within the boundaries of the card.
Implementing the described changes in the React Native CollectiveCard
component involves adjusting text styles, handling state for text expansion, and ensuring responsive layout within the component.
Update Description Style (1 hour):
description
style to adjust the font size, line height, color, and weight.flexShrink
, numberOfLines
, and ellipsizeMode
for text truncation.Add State for Expanded Text (1 hour):
isDescriptionExpanded
) to manage the expanded/collapsed state of the description.Modify Description Text Component (1-2 hours):
Text
component to dynamically change the numberOfLines
property based on the expansion state.onPress
event to toggle the expansion state.Ensure Text Stays Inside Card (1 hour):
cardDescription
style for padding and margin to ensure text containment within the card.Adjust Styles for Flexbox Layout (1-2 hours):
flex
properties to maintain a responsive and coherent layout.Test the Component (2-3 hours):
Review and Refinement (1 hour):
Adding these up, the total estimated time could be around 8-11 hours. This estimate assumes that the developer is proficient with React Native and has a good understanding of state management and responsive design principles.
@benefacto I believe today you have the elipsses styling option instead of slice
@SanaJamm could you take a look here - https://good-collective-72ntzd8nf-gooddollarteam.vercel.app/ ?
for me its looks fine
Paragraph font size should be 16px with Regular weight, now it’s set to 18 and it looks like medium or bold. Let’s set paragraph up to 3 lines and add text truncation, when clicking the paragraph it expands. and let’s set character limit to 230.
Keep the text inside the card, right now the paragraph is outside the card.
Devs:
Design: