My aim with the following code snippet is to achieve two objectives:
- Apply a margin of 20 units to each card
- Display all four cards in a single row, allowing users to swipe horizontally
Unfortunately, I have not been successful in achieving either of these goals, despite my best efforts.
Feel free to experiment with the code on this playground: bit.ly/2V3KbKo
Below is the code snippet (which can also be copied and pasted into the link above):
import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
export default class App extends React.Component {
render() {
return (
<ScrollView style={stylesApp.cardContainer}>
<MyCard index="514" black text="These are the news of Monday." style={stylesApp.myCard} />
<MyCard index="514" black text="These are the news of Tuesday." style={stylesApp.myCard} />
<MyCard index="514" black text="These are the news of Wednesday." style={stylesApp.myCard} />
<MyCard index="514" black text="These are the news of Thursday." style={stylesApp.myCard} />
</ScrollView>
);
}
}
const stylesApp = StyleSheet.create({
cardContainer: {
flexDirection: 'row',
flexWrap: 'nowrap',
overflow: 'scroll',
},
myCard: {
margin: 20,
},
});
//------
class MyCard extends React.Component {
constructor(props) {
super(props);
this.state = {
text: props.text,
};
}
render() {
return (
<View style={stylesMyCard.container}>
<Text style={stylesMyCard.text}>{this.state.text}</Text>
</View>
);
}
}
const stylesMyCard = StyleSheet.create({
container: {
width: 80,
minHeight: 40,
padding: 10,
backgroundColor: '#000',
alignItems: 'center',
},
text: {
color: '#fff',
fontSize: 10,
}
});
If you have any suggestions on how to achieve the desired functionalities, please share your working source code.
Thank you!