Blog

Card Design with Props and Children : Part 4

March 15, 2019/ Javascript frameworks, Reactnative / 0 comments

Card Design is just like to create a boxes to hold Video Title, Video Image and Click button. By Adding some shades border by styling we will add a good design view for all listing. These are common component which we can use many places in app

Now we will create Cards Wrapper and CardsInner so for this we will create new files

CardWrapper.js and CardsInner.js in common folder of src folder

Creating CardWrapper

Open CardWrapper.js file and start importing components from react and react native

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

class CardWrapper extends Component {
  render() {
  return (
  <View>
      {this.props.children}
  </View>
  );
 }
}

Here i have added this.props.children this will call the component which we will add inside CardWrapper 

For example if we import CardWrapper and call it like

<CardWrapper>
<View>

<Text>Something here to write</Text>

</View>
</CardWrapper>

So this.props.children will return all code inside <CardWrapper></CardWrapper>
component as children props. I will show you its use further in below code. It will be more clear for you

Styling Card Wrapper

Now we will add some styling to Card Wrapper. So create WrapperStyle

const Styles = {
    WrapperStyle: {
      borderWidth: 1,
      borderRadius: 2,
      borderColor: '#ddd',
      borderBottomWidth: 0,
      shadowColor: '#000',
      shadowRadius: 2,
      elevation: 5,
      marginLeft: 5,
      marginRight: 5,
      marginTop: 10
    }
};

Now we will add this style to CardWrapper component. So add this code in CardWrapper View

<View style={Styles.WrapperStyle}>
{this.props.children}
</View>

So final code will look like this

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

class CardWrapper extends Component {
 render() {
  return (
   <View style={Styles.WrapperStyle}>
    {this.props.children}
  </View>
  );
 }
}
const Styles = {
    WrapperStyle: {
      borderWidth: 1,
      borderRadius: 2,
      borderColor: '#ddd',
      borderBottomWidth: 0,
      shadowColor: '#000',
      shadowRadius: 2,
      elevation: 5,
      marginLeft: 5,
      marginRight: 5,
      marginTop: 10
    }
};

export default CardWrapper;

Creating Card Inner

Now open CardInner.js and start import component from react and react-native

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

class CardInner extends Component {
render() {
     return (
      <View>
      {this.props.children}
      </View>
    );
}
}

export default CardInner;

Now add style in same way as added for Cardinner component. So now add CardStyles

So now add CardStyles

Now we will add Style to CardInner component View

1. <View style={Styles.CardStyles}>
2. {this.props.children}
3. </View>

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

class CardInner extends Component {
  render() {
    return (
    <View style={Styles.CardStyles}>
       {this.props.children}
    </View>
    );
  }
}
const Styles = {
  CardStyles: {
    borderBottomWidth: 1,
    padding: 5,
    backgroundColor: '#FFF',
    justifyContent: 'flex-start',
    flexDirection: 'row',
    borderColor: '#ddd',
    position: 'relative'
  }
};
export default CardInner;

If you are eager  to check how this long CardWrapper and CardInner will look. So just import both in App.js file and this line for test

import CardWrapper from ‘./src/common/CardWrapper’;
import CardInner from ‘./src/common/CardInner’;

And add this test code inside view tag

<CardWrapper>

         <CardInner><Text>Title</Text></CardInner>

         <CardInner><Text>Image</Text></CardInner>

         <CardInner><Text>Play Button</Text></CardInner>

</CardWrapper>

Now refresh Simulator by pressing r button two times and it will show result

If it is working please remove recent code of import and CardWrapper and CardInner. We will use these designs later in listing

So it was a long Code but hope you understand following things

– How create component

– How Import other component

– How design a component

So our design is ready now we will use these cards to list youtube videos. So first we will select a playlist