React Native – Card View

In this tutorial we are going to see how we can Card View using Card Component provided by the React Native elements. For this example, we are using Card component provided by react-native-elements

Run the following commands for installations.

npm install react-native-elements --save
npm install react-native-vector-icons --save

After that we have to link the dependency.

react-native link react-native-vector-icons

After that we have to write the below codes in App.js

App.js

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Card } from 'react-native-elements';
export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Card title="Card Component">
          <Text style={styles.paragraph}>
            This is a card from the react-native-elements
          </Text>
        </Card>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'flex-start',
    paddingTop: 40,
    backgroundColor: '#ccc',
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#34495e',
  },
});
5 1 vote
Article Rating

Learn React Native App available on play store Download Now.
Do you want to hire us for your Project Work? Then Contact US.
Spread the love
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x