native-base#Text JavaScript Examples
The following examples show how to use
native-base#Text.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Header.js From react-native-expo-starter-kit with MIT License | 6 votes |
|
Header = ({ title, content }) => (
<View>
<Spacer size={25} />
<H1>{title}</H1>
{!!content && (
<View>
<Spacer size={10} />
<Text>{content}</Text>
</View>
)}
<Spacer size={25} />
</View>
)
Example #2
| Source File: ReportIntroScreen.js From pandoa with GNU General Public License v3.0 | 6 votes |
|
//import VirusImage from "../assets/images/infoSimple";
export default function ReportIntroScreen({ navigation }) {
return (
<View
style={styles.container}
contentContainerStyle={styles.contentContainer}
>
<View style={styles.introWrapper}>
<VirusImage width={220} style={styles.image} />
<Text style={styles.title}>No case reported</Text>
<Text style={styles.subTitle}>
None of your positions will be send to the internet until you report a
case.
</Text>
<Button primary onPress={() => navigation.push("ReportDetail")}>
<Text>Report infection</Text>
</Button>
</View>
</View>
);
}
Example #3
| Source File: SettingsScreen.js From pandoa with GNU General Public License v3.0 | 6 votes |
|
render() {
return (
<Container>
<Header>
<Body>
<Title>Settings</Title>
</Body>
</Header>
<Content>
<List>
<ListItem
first
onPress={() => this.props.navigation.navigate("Billing")}
>
<Text>Notifications</Text>
</ListItem>
<ListItem>
<Text>User Settings</Text>
</ListItem>
<ListItem>
<Text>Billing</Text>
</ListItem>
<ListItem onPress={this.logout}>
<Text style={styles.logout}>Logout</Text>
</ListItem>
</List>
</Content>
</Container>
);
}
Example #4
| Source File: index.js From pandoa with GNU General Public License v3.0 | 6 votes |
|
function HistoryList({ positions }) {
return (
<List>
{positions.map((e, i) => (
<ListItem key={i}>
<Text>{e.lat}</Text>
<Text>{e.lng}</Text>
</ListItem>
))}
</List>
);
}
Example #5
| Source File: WarningDetailScreen.js From pandoa with GNU General Public License v3.0 | 6 votes |
|
//import VirusImage from "../assets/images/infoSimple";
export default function WarningDetailScreen({ navigation }) {
return (
<View
style={styles.container}
contentContainerStyle={styles.contentContainer}
>
<View style={styles.introWrapper}>
<VirusImage width={220} style={styles.image} />
<Text style={styles.title}>No case reported</Text>
<Text style={styles.subTitle}>
None of your positions will be send to the internet until you report a
case.
</Text>
<Button primary onPress={() => navigation.push("ReportDetail")}>
<Text>Report infection</Text>
</Button>
</View>
</View>
);
}
Example #6
| Source File: _Text.js From WhatsApp-Clone with MIT License | 6 votes |
|
_Text = ({
style: propStyle,
title,
description,
children,
onLayout,
onPress,
numberOfLines,
}) => {
const {titleStyle, subtitleStyle, descriptionStyle} = styles;
let defaultStyle = subtitleStyle;
if (title) defaultStyle = titleStyle;
else if (description) defaultStyle = descriptionStyle;
return (
<Text
onPress={onPress}
onLayout={onLayout}
numberOfLines={numberOfLines}
ellipsizeMode="tail"
style={[defaultStyle, propStyle ? propStyle : null]}>
{children}
</Text>
);
}
Example #7
| Source File: Header.js From expo-ticket-app with MIT License | 6 votes |
|
Header = ({ title, content }) => (
<View>
<Spacer size={25}/>
<Text style={{ fontSize: 30, fontFamily: 'Montserrat', color: '#fff' }}>
{title}
</Text>
{!!content && (
<View>
<Spacer size={10}/>
<Text style={{ fontFamily: 'Montserrat', color: '#fff' }}>
{content}
</Text>
</View>
)}
<Spacer size={25}/>
</View>
)
Example #8
| Source File: index.js From discovery-mobile-ui with MIT License | 6 votes |
|
CategoryButton = ({
resourceType, label, isActive, selectResourceTypeAction, hasCollectionItems, hasHighlightedItems,
}) => (
<TouchableOpacity
style={[styles.button, isActive ? styles.selected : null]}
onPress={() => selectResourceTypeAction(resourceType)}
>
{hasHighlightedItems && <Text style={textStyles.hasHighlighted}>●</Text>}
{hasCollectionItems && <Text style={textStyles.hasCollection}>■</Text>}
<Text style={[textStyles.button, isActive ? textStyles.selected : null]}>{label}</Text>
</TouchableOpacity>
)
Example #9
| Source File: BLE.js From BLEServiceDiscovery with GNU General Public License v3.0 | 6 votes |
|
render() {
return (
<Container>
<Text>
Status: {this.props.status}
</Text>
{this.props.connectedDevice && <Text>Device: {this.props.connectedDevice.name}</Text>}
</Container>
);
}
Example #10
| Source File: Messages.js From react-native-expo-starter-kit with MIT License | 6 votes |
|
Messages = ({ message, type }) => (
<View
style={{
backgroundColor:
type === 'error' ? Colors.brandDanger : type === 'success' ? Colors.brandSuccess : Colors.brandInfo,
paddingVertical: 10,
paddingHorizontal: 5,
}}
>
<Text style={{ color: '#fff', textAlign: 'center' }}>{message}</Text>
</View>
)
Example #11
| Source File: Error.js From react-native-expo-starter-kit with MIT License | 6 votes |
|
Error = ({ title, content, tryAgain }) => (
<Container style={{ flex: 1 }}>
<View style={{ alignSelf: 'center' }}>
<Spacer size={20} />
<H3 style={{ textAlign: 'center' }}>{title}</H3>
<Text style={{ textAlign: 'center', marginBottom: 20 }}>{content}</Text>
{tryAgain && (
<Button block onPress={tryAgain}>
<Text>Try Again</Text>
</Button>
)}
<Spacer size={20} />
</View>
</Container>
)
Example #12
| Source File: DrawerScreen2.js From inventory-management-rn with MIT License | 6 votes |
|
MyHeader = ({ navigation }) => {
return (
<Header style={{ backgroundColor: '#4796BD', flexDirection: 'row' }}>
<Left>
<TouchableOpacity onPress={() => navigation.openDrawer()}>
<Icon name="menu" color="white" size={35} />
</TouchableOpacity>
</Left>
<Body>
<Text style={{ fontSize: 21, color: '#fff' }}>Drawer</Text>
</Body>
<Right>
<TouchableOpacity onPress={() => { }}>
<Icon name="user" color="white" size={35} />
</TouchableOpacity>
</Right>
</Header>
);
}
Example #13
| Source File: Wallets.js From web3-react-native with MIT License | 6 votes |
|
Wallets = ({ wallets, width, ...extraProps }) => {
const numWallets = wallets.toJS().length;
const hasWallets = numWallets > 0;
return (
<View
>
<H1
style={styles.text}
children={`Wallets (${numWallets})`}
/>
{(!hasWallets) && (
<Text
style={styles.text}
children="Add a wallet to get started."
/>
)}
{(!!hasWallets) && (
<Carousel
data={wallets.toJS()}
renderItem={({ item: wallet, index}) => (
<Wallet
key={index}
wallet={wallet}
/>
)}
sliderWidth={width}
itemWidth={width * 0.8}
/>
)}
</View>
);
}
Example #14
| Source File: Transactions.js From web3-react-native with MIT License | 6 votes |
|
Transactions = ({ transactions, width, ...extraProps }) => {
const numTransactions = transactions.toJS().length;
const hasTransactions = numTransactions > 0;
return (
<View
>
<H1
style={styles.text}
children={`Transactions (${numTransactions})`}
/>
{(!hasTransactions) && (
<Text
style={styles.text}
children="Your transactions will be listed here."
/>
)}
{(!!hasTransactions) && (
<Carousel
data={transactions.toJS()}
renderItem={({ item: transaction, index}) => (
<Transaction
key={index}
transaction={transaction}
/>
)}
sliderWidth={width}
itemWidth={width * 0.8}
/>
)}
</View>
);
}
Example #15
| Source File: About.js From react-native-expo-starter-kit with MIT License | 6 votes |
|
About = () => (
<Container>
<Content padder>
<Spacer size={30} />
<H1>Heading 1</H1>
<Spacer size={10} />
<Text>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus
commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
{' '}
</Text>
<Spacer size={30} />
<H2>Heading 2</H2>
<Spacer size={10} />
<Text>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus
commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
{' '}
</Text>
<Spacer size={30} />
<H3>Heading 3</H3>
<Spacer size={10} />
<Text>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus
commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
{' '}
</Text>
</Content>
</Container>
)
Example #16
| Source File: TextH2t.js From expo-ticket-app with MIT License | 5 votes |
|
TextH2t = (props) => {
return (
<Text onPress={props.onPress}
style={{ color: '#fff', textAlign: 'left', fontFamily: 'Montserrat', ...props.style }}>
{props.children}
</Text>
);
}
Example #17
| Source File: index.js From aws-appsync-refarch-offline with MIT No Attribution | 5 votes |
|
function Catalog(props) {
const [loading, setLoading] = useState(false);
const [products, setProducts] = useState([]);
const order = useSelector(state => state.order);
const dispatch = useDispatch();
useEffect(() => {
fetchProducts();
}, []);
async function fetchProducts() {
const data = await DataStore.query(Product);
setProducts(data);
};
function checkoutBtnHandler() {
return props.navigation.push('Checkout');
}
function addProductHandler(product) {
dispatch(addLineItem(product));
}
const productList = products.map(product => (
<ListItem thumbnail key={product.id}>
<Left>
<Thumbnail square source={{ uri: product.image }} />
</Left>
<Body>
<Text>{product.name}</Text>
<Text note numberOfLines={1}>${product.price}</Text>
</Body>
<Right>
<Button onPress={() => addProductHandler(product)}>
<Text>Add</Text>
</Button>
</Right>
</ListItem>
));
return (
<Container>
<Content refreshControl={
<RefreshControl
onRefresh={fetchProducts}
refreshing={loading}
/>
}>
<Button block info style={styles.checkoutBtn} onPress={checkoutBtnHandler}>
<Text style={styles.quantityText}>{order.totalQty}</Text>
<Text style={styles.subtotalTxt}>Subtotal ${order.subtotal.toFixed(2)}</Text>
</Button>
<List>
{productList}
</List>
</Content>
</Container>
);
}
Example #18
| Source File: index.js From pandoa with GNU General Public License v3.0 | 5 votes |
|
function WarningList({ navigation, setDetailTrigger, warnings }) {
const filteredWarnings = warnings.filter(
e => e.matches && e.matches.length >= 1
);
if (filteredWarnings.length === 0) {
return (
<View style={styles.introWrapper}>
<SoapImage width={220} style={styles.image} />
<Text style={styles.title}>No warning</Text>
<Text style={styles.subTitle}>
There is currently no contact reported.
</Text>
</View>
);
}
return (
<List>
{filteredWarnings.map((e, i) => {
const geocode =
e.position.geocode && e.position.geocode[0]
? e.position.geocode[0]
: {};
return (
<ListItem key={i} onPress={() => setDetailTrigger(e)}>
<Body>
<Text>{e.title}</Text>
<Text numberOfLines={1} style={styles.date}>
{new Date(e.position.time).toLocaleDateString("de-DE", options)}
</Text>
<Text note style={styles.location}>
{geocode.name}, {geocode.postalCode} {geocode.city}
</Text>
<Text note style={styles.time}>
{e.matches &&
e.matches.length >= 1 &&
contactLengthText(e.duration)}
</Text>
</Body>
<Right>
<Text
style={[
styles.right,
{
color:
e.duration > 10
? commonColor.brandDanger
: commonColor.brandWarning
}
]}
>
{e.matches &&
e.matches.length >= 1 &&
contactLengthText(e.duration, "short")}
</Text>
</Right>
</ListItem>
);
})}
</List>
);
}
Example #19
| Source File: index.js From aws-appsync-refarch-offline with MIT No Attribution | 5 votes |
|
OrderList = ({ orders, onSelectOrder }) => {
function onPress(orderId) {
if (onSelectOrder) {
onSelectOrder(orderId);
}
}
const ordersByDay = _.groupBy(orders, order => moment(order.createdAt).format('YYYY-MM-DD'));
const days = _.keys(ordersByDay);
const ordersByDayList = days.map(day => {
const sorted = ordersByDay[day].sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
const orderList = sorted.map(order => (
<ListItem thumbnail button key={order.id} onPress={() => onPress(order.id)}>
<Body>
<Text style={styles.orderTitle}>
{moment(order.createdAt).format('hh:mm A')}
</Text>
<Text note>{order.id}</Text>
</Body>
<Right>
<Text note>
${order.total.toFixed(2)}
</Text>
<Icon name="arrow-forward" />
</Right>
</ListItem>
));
const sectionTitle = (
<ListItem itemDivider key={day}>
<Text>{moment(day).format('MMM Do, YYYY')}</Text>
</ListItem>
);
return [sectionTitle, ...orderList];
});
return (
<List>
{ordersByDayList}
</List>
);
}
Example #20
| Source File: index.js From aws-appsync-refarch-offline with MIT No Attribution | 5 votes |
|
Receipt = ({ route }) => {
const { order } = route.params;
const lineItemList = order.lineItems.map(lineItem => (
<ListItem icon key={lineItem.id}>
<Left>
<Text>{lineItem.qty}</Text>
</Left>
<Body>
<Text>{lineItem.description}</Text>
</Body>
<Right>
<Text>${lineItem.total.toFixed(2)}</Text>
</Right>
</ListItem>
));
return (
<Container>
<Content>
<List>
<ListItem itemDivider>
<Text> </Text>
</ListItem>
<ListItem>
<Body>
<Text>Order Number</Text>
<Text note>{order.id}</Text>
</Body>
</ListItem>
<ListItem>
<Body>
<Text>Date</Text>
<Text note>{moment(order.createdAt).format('YYYY-MM-DD hh:mm A')}</Text>
</Body>
</ListItem>
<ListItem itemDivider>
<Text> </Text>
</ListItem>
{lineItemList}
<ListItem itemDivider>
<Text> </Text>
</ListItem>
<ListItem>
<Body>
<Text style={styles.subtotalsTxt}>Subtotal</Text>
</Body>
<Right>
<Text>${order.subtotal.toFixed(2)}</Text>
</Right>
</ListItem>
<ListItem>
<Body>
<Text style={styles.subtotalsTxt}>Tax</Text>
</Body>
<Right>
<Text>${order.tax.toFixed(2)}</Text>
</Right>
</ListItem>
<ListItem>
<Body>
<Text style={styles.subtotalsTxt}>Total</Text>
</Body>
<Right>
<Text>${order.total.toFixed(2)}</Text>
</Right>
</ListItem>
<ListItem itemDivider>
<Text> </Text>
</ListItem>
</List>
</Content>
</Container>
);
}
Example #21
| Source File: BottomSheetWarnings.js From pandoa with GNU General Public License v3.0 | 5 votes |
|
render() {
const { contentPosition, filteredWarnings, navigation } = this.props;
const renderInnerDetails = () => {
return (
<View style={styles.panelInner}>
<WarningList navigation={navigation} />
</View>
);
};
const renderInnerHeader = () => {
return (
<>
<View style={styles.headerShadow} />
<View style={styles.headerInner}>
<View style={styles.panelHeader}>
<View style={styles.panelHandle} />
</View>
<View style={styles.panelTitleWrapper}>
<Text style={styles.panelTitle}>
{filteredWarnings >= 1 ? filteredWarnings : "No"} Warnings
</Text>
<Button rounded small style={styles.buttonUpdate}>
<Ionicons
style={styles.buttonUpdateIcon}
name="md-refresh"
size={19}
color="#fff"
/>
<Text style={styles.buttonUpdateText}>Check overlap</Text>
</Button>
</View>
</View>
</>
);
};
return (
<BottomSheet
ref={this.bottomSheetRef}
contentPosition={contentPosition}
snapPoints={[65, 238, 600]}
renderContent={renderInnerDetails}
renderHeader={renderInnerHeader}
/>
);
}
Example #22
| Source File: index.js From aws-appsync-refarch-offline with MIT No Attribution | 5 votes |
|
Settings = (props) => {
async function createProducts() {
try {
await loadProducts();
Toast.show({
text: 'Products loaded, pull to refresh',
buttonText: "Ok",
duration: 3000
});
props.navigation.navigate('Checkout');
} catch(error) {
Toast.show({
text: error,
buttonText: "Ok",
duration: 3000
});
}
}
async function clearDataStore() {
await DataStore.clear();
Toast.show({
text: 'Storage cleared, pull to refresh',
buttonText: "Ok",
duration: 3000
});
props.navigation.navigate('Checkout');
}
return (
<Container>
<Content>
<Button block info style={styles.settingsBtn} onPress={createProducts}>
<Text>Create dummy products</Text>
</Button>
<Button block info style={styles.settingsBtn} onPress={clearDataStore}>
<Text>Clear local storage</Text>
</Button>
</Content>
</Container>
);
}
Example #23
| Source File: Welcome.js From expo-ticket-app with MIT License | 5 votes |
|
render() {
const { loading } = this.props;
return (<Container style={{ backgroundColor: commonColor.backgroundColor }}>
<StatusBar style="light"/>
<Content padder style={{ flex: 1 }}>
<Spacer size={60}/>
<Text style={{
flex: 1,
fontSize: 55,
fontWeight: '400',
fontFamily: 'Montserrat_Bold',
color: 'white',
textAlign: 'center',
}}>
{'Expo\nTicket App'}
</Text>
<LottieView
loop={true}
autoPlay
speed={1.5}
style={{ width: '100%' }}
source={require('../../../images/home')}
/>
{!loading && <View>
<Card style={{ backgroundColor: commonColor.brandStyle }}>
<ListItem onPress={Actions.login} icon first>
<Left>
<Icon name="log-in" style={{ color: 'white' }}/>
</Left>
<Body style={{ borderBottomWidth: 0 }}>
<TextI18n style={{
color: 'white',
fontSize: 20
}}>
login.connect
</TextI18n>
</Body>
</ListItem>
<ListItem onPress={Actions.signUp} icon>
<Left>
<Icon name="add-circle" style={{ color: 'white' }}/>
</Left>
<Body style={{ borderBottomWidth: 0 }}>
<TextI18n style={{
color: 'white',
fontSize: 20
}}>
login.signUp
</TextI18n>
</Body>
</ListItem>
</Card>
<TextI18n
onPress={Actions.tabbar}
style={{
flex: 1,
fontSize: 13,
fontWeight: '400',
fontFamily: 'Montserrat',
paddingTop: 10,
color: 'white',
textAlign: 'center',
textDecorationLine: 'underline',
}}>
login.withoutAccount
</TextI18n>
</View>}
{loading && <Loading/>}
</Content>
</Container>);
}
Example #24
| Source File: Scan.js From expo-ticket-app with MIT License | 5 votes |
|
Scan = ({ handleValidateTicket, loading }) => {
const [hasPermission, setHasPermission] = useState(null);
const [scanned, setScanned] = useState(false);
useEffect(() => {
(async () => {
const { status } = await BarCodeScanner.requestPermissionsAsync();
setHasPermission(status === 'granted');
})();
}, []);
const handleBarCodeScanned = ({ type, data }) => {
setScanned(true);
handleValidateTicket(data);
};
if (hasPermission === null) {
return <Text>Requesting for camera permission</Text>;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}
return (
<View
style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-end',
}}>
<StatusBar style="light"/>
<BarCodeScanner
onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
style={{
position: 'absolute',
top: 20,
left: 0,
bottom: 0,
right: 0,
}}
/>
{loading && <Loading/>}
{scanned && <Button title={'Tap to Scan Again'} onPress={() => setScanned(false)}/>}
</View>);
}
Example #25
| Source File: TabView.js From WhatsApp-Clone with MIT License | 5 votes |
|
TabView = ({navigation}) => (
<Container>
<Tabs
initialPage={0}
style={{elevation: 0, marginTop: -25}}
tabContainerStyle={{
elevation: 0,
height: '8%',
}}
tabBarUnderlineStyle={{
height: 2,
backgroundColor: WHITE,
}}>
{/* <Tab
heading={
<TabHeading style={styles.tabStyle}>
<Icon style={styles.tabTextStyle} name="camera" />
</TabHeading>
}>
<CameraComponent />
</Tab> */}
<Tab
heading={
<TabHeading style={styles.tabStyle}>
<Text uppercase style={styles.tabTextStyle}>
Chats
</Text>
</TabHeading>
}>
<ChatListView navigation={navigation} />
</Tab>
<Tab
heading={
<TabHeading style={styles.tabStyle}>
<Text uppercase style={styles.tabTextStyle}>
Status
</Text>
</TabHeading>
}>
<StatusView navigation={navigation} />
</Tab>
{/* <Tab
heading={
<TabHeading style={styles.tabStyle}>
<Text uppercase style={styles.tabTextStyle}>
Calls
</Text>
</TabHeading>
}>
<CallsView />
</Tab> */}
</Tabs>
</Container>
)
Example #26
| Source File: Transaction.js From web3-react-native with MIT License | 5 votes |
|
Transaction = ({ transaction, onRequestViewTransaction, ...extraProps }) => {
return (
<Card
>
<CardItem
header
bordered
>
<Text
children="Some Transaction Name"
/>
</CardItem>
<CardItem
bordered
>
<Icon active name="pricetag" />
<Text
style={styles.details}
children={transaction.transactionHash}
/>
</CardItem>
<CardItem
>
<Body
style={styles.buttons}
>
<View
style={styles.buttonContainer}
>
<Button
onPress={onRequestViewTransaction}
success
>
<Icon name="eye" />
<Text
children="View Transaction"
/>
</Button>
</View>
</Body>
</CardItem>
</Card>
);
}
Example #27
| Source File: BaseText.js From discovery-mobile-ui with MIT License | 5 votes |
|
BaseText = ({ variant, style, children }) => (
<Text style={[styles.base, styles[variant], style]}>{children}</Text>
)
Example #28
| Source File: Wallet.js From web3-react-native with MIT License | 5 votes |
|
Wallet = ({ wallet, onRequestAddFunds, onRequestMakeTransaction, ...extraProps }) => {
return (
<Card
>
<CardItem
header
bordered
>
<Text
children="Some Wallet Name"
/>
</CardItem>
<CardItem
bordered
>
<Icon active name="wallet" />
<Text
style={styles.details}
children={wallet.address}
/>
</CardItem>
<CardItem
>
<Body
style={styles.buttons}
>
<View
style={styles.buttonContainer}
>
<Button
onPress={onRequestAddFunds}
success
>
<Icon name="water" />
<Text
children="Faucet"
/>
</Button>
</View>
<View
style={styles.buttonContainer}
>
<Button
onPress={onRequestMakeTransaction}
primary
>
<Icon name="cash" />
<Text
children="Send"
/>
</Button>
</View>
</Body>
</CardItem>
</Card>
);
}
Example #29
| Source File: Single.js From react-native-expo-starter-kit with MIT License | 5 votes |
|
ArticlesSingle = ({
error, loading, article, reFetch,
}) => {
if (error) {
return <Error content={error} tryAgain={reFetch} />;
}
if (loading) {
return <Loading content={loading} />;
}
if (Object.keys(article).length < 1) {
return <Error content={errorMessages.articles404} />;
}
return (
<Container>
<Content padder>
{!!article.image && (
<Image
source={{ uri: article.image }}
style={{
height: 200, width: null, flex: 1, resizeMode: 'contain',
}}
/>
)}
<Spacer size={25} />
<H3>{article.name}</H3>
<Spacer size={15} />
{!!article.content && (
<Card>
<CardItem header bordered>
<Text>Content</Text>
</CardItem>
<CardItem>
<Body>
<Text>{article.content}</Text>
</Body>
</CardItem>
</Card>
)}
<Spacer size={20} />
</Content>
</Container>
);
}
