I need to display my data in a table format at the bottom of the screen, as shown in the screenshot below.
Here is an example of the top part code:
This code snippet is also used for movies.
<View>
<Text key={item.symbol}>{item.symbol}<Text>
<Text key={item.open}>{item.open}<Text>
<Text key={item.close}>{item.close}<Text>
</View>
Currently, my screen looks like this:
https://i.stack.imgur.com/DAmCZ.png
I want to create a layout similar to the one shown below:
https://i.stack.imgur.com/iH1PM.png
The additional data displayed next to 'close' and 'high' values are retrieved from a JSON API.
My current code snippet is as follows:
let movie = (
<View style={styles.bottomdata}>
<Text style={styles.text} key={item.name}>
{item.name}
</Text>
<Text style={styles.text} key={item.open}>
OPEN {item.open}
</Text>
<Text style={styles.text} key={item.close}>
CLOSE{item.close}
</Text>
<Text style={styles.text} key={item.volumes}>
VOLUME{item.volumes}
</Text>
<Text style={styles.text} key={item.low}>
LOW {item.low}
</Text>
<Text style={styles.text} key={item.high}>
HIGH{item.high}
</Text>
</View>
)
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.container}>
<View>{movie}</View>
</View>
</TouchableWithoutFeedback>
);
}
const styles = StyleSheet.create({
text: {
color: "black",
backgroundColor: "white",
},
bottomdata:
{
marginTop:400,
backgroundColor:"black",
}
});
The movie represents the data displayed on the screen. How can I design it to match the desired layout? The top section should show the symbol name, close value, and high value just like the bottom section. Any suggestions on how to achieve this interface design?