Created
September 4, 2020 07:29
-
-
Save akulsr0/570bb72afe45d82ca4d2b8420ed163c0 to your computer and use it in GitHub Desktop.
React Native UI App - Cards
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import { | |
StyleSheet, | |
Text, | |
View, | |
TouchableOpacity, | |
} from 'react-native'; | |
// npm i native-base | |
import { Card, CardItem } from 'native-base'; | |
// npm i react-native-elements | |
import { Icon } from 'react-native-elements'; | |
export default function App() { | |
return ( | |
<View> | |
<Card style={{ marginTop: 10 }}> | |
<CardItem header bordered style={styles.cardHeader}> | |
<Text style={styles.subheading}>Card Title</Text> | |
</CardItem> | |
<CardItem> | |
<View> | |
<Text | |
style={{ fontSize: 18, fontWeight: 'bold', marginBottom: 10 }} | |
> | |
Card Content | |
</Text> | |
<Text> | |
Lorem ipsum dolor sit amet consectetur, adipisicing elit. | |
Quaerat autem labore voluptas repudiandae voluptatem veniam | |
tenetur facere neque omnis aperiam, nam deserunt minima ullam | |
dolore iste eius assumenda consectetur a! | |
</Text> | |
</View> | |
</CardItem> | |
<CardItem footer bordered> | |
<View style={styles.footer}> | |
<TouchableOpacity> | |
<Text>Footer</Text> | |
</TouchableOpacity> | |
<View style={{ flexDirection: 'row' }}> | |
<TouchableOpacity style={{ marginLeft: 10 }}> | |
<Icon name='google' type='font-awesome' /> | |
</TouchableOpacity> | |
<TouchableOpacity style={{ marginLeft: 10 }}> | |
<Icon name='instagram' type='font-awesome' /> | |
</TouchableOpacity> | |
<TouchableOpacity style={{ marginLeft: 10 }}> | |
<Icon name='twitter' type='font-awesome' /> | |
</TouchableOpacity> | |
</View> | |
</View> | |
</CardItem> | |
</Card> | |
</View> | |
) | |
} | |
const styles = StyleSheet.create({ | |
subheading: { | |
fontSize: 20, | |
fontWeight: '900', | |
color: '#fff', | |
}, | |
cardHeader: { | |
backgroundColor: '#6a90eb', | |
}, | |
footer: { | |
width: '100%', | |
paddingVertical: 4, | |
flexDirection: 'row', | |
alignItems: 'center', | |
justifyContent: 'space-between', | |
}, | |
}) |
Hey @ayebaishmo, make sure you have installed native-base in your project directory.
For more details, you can check following link:
https://docs.nativebase.io/Components.html#card-def-headref
You can't comment at this time — your comment can't be blank.
You can't comment at this time — your comment can't be blank.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I cannot seem to import native base dependencies whats the problem