In this particular scenario, I attempted to showcase two distinct elements within a list item.
However, I encountered a challenge in figuring out how to display the "item.date" on the left side of the line, and the string "Click to show." on the right side of the line.
For a potential solution involving spacing, you can refer to the image provided here.
Below is the code snippet extracted from the image:
<Text style={styles.textline}>{"\n"+item.date}<Text style={styles.continuetext}>{Array(22).fill('\t').join('')}Click to show.</Text></Text>
Although I managed to achieve the desired layout by adding multiple tabs to the string, I acknowledge that this is not an optimal solution as it may vary based on screen size.
I also attempted wrapping the text elements within a view component and setting the flex:1 property for the view, followed by attempting to align the text on the right using alignSelf: 'flex-end', but this approach did not yield the desired outcome.
Edit: Trying to wrap the texts inside a view as suggested in the comments did not yield the desired result.
You can view the complete code snippet below:
return( <ListItem thumbnail key={i}>
<Thumbnail square source={{ uri: 'url' }} />
<Body>
<TouchableScale transparent onPress={()=>{ Linking.openURL(item.url)}}
Component={TouchableScale}
friction={90}
tension={100}
activeScale={0.95}>
<Text>{item.head+"\n"}</Text>
<Text note numberOfLines={2}>{item.details}</Text>
<View style={{ flex:1,justifyContent: 'space-between', flexDirection: 'row' }}>
<Text style={{ fontSize:12,color: 'gray'}}>{"\n"+item.date}</Text>
<Text style={{ fontSize:12,color: '#143f90'}}>Click to show.</Text>
</View>
</TouchableScale>
</Body>
</ListItem>);
Given my limited experience with React Native, any assistance or insights would be highly appreciated.