In this article, I will show, how to create a CardView in React Native, Which will work perfectly in android and iOS both. So let’s started.

Objectives

Basically, the purpose of the example is to design and CardView component in React Native and use it whenever we need it. Why it should component? The reason is we can use this CardView in other parts of the application. We might have a different item that we want to present in CardView.

Let suppose you’re building an app, how have to show products inside the card on the main screen. Now avoid repeating cardview style definition agin and again. We can create a separate component. Let create a new react native project.

Create a react native application

let move to IDE, create a new react native project and create separate package named is components. Here I’m creating a new file here name it Card.js. The name is up to you

import React from 'react';
import { View, StyleSheet } from 'react-native';

const Card = props => {};

export default Card;
 

So here I simply created a function component named is Card.js and export as default. Now it’s all about presentation here, So let style this card view

import React from 'react';
import { View, StyleSheet } from 'react-native';

const Card = props => {
  return (
    <View style={{ ...styles.card, ...props.style }}>{props.children}</View>
  );
};

const styles = StyleSheet.create({
  card: {
    shadowColor: 'black',
    shadowOffset: { width: 0, height: 2 },
    shadowRadius: 6,
    shadowOpacity: 0.26,
    elevation: 8,
    backgroundColor: 'white',
    padding: 20,
    borderRadius: 10
  }
});

export default Card;
  

That all, our components is ready for use. Let import this component in main app

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';
import Card from './src/components/Card';

const App: () => React$Node = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={styles.container}>
        <Card style={styles.card}>
          <Text style={styles.sectionTitle}>Basic CardView Example</Text>
        </Card>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    margin: 16,
    alignItems: 'center', // Centered horizontally
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.white,
  },
  card: {
    height: 200,
    width: '100%',
    backgroundColor: '#f18484',
    justifyContent: 'center', //Centered vertically
    alignItems: 'center', // Centered horizontally
  },
});

export default App;