6 04 0
Card component use to create Header in react native. Now we will create a common folder for common design component . By Using props and children props we will get data in these design component. Create new folder src in your project folder Now create a new folder common in src folder So your folder […]
15 03 0
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 […]
5 03 0
Youtube video XML url : Part 5- So open youtube.com and open a play list Search a channel on youtube and open it. You will find a playlist tab . Open that tab and it will display playlist. Click on any play list and you will see url of play list https://www.youtube.com/watch?v=DPbnQFxdpPg&list=LLA34Z3lq8FozSQzDHsSLcmQ In this url […]
14 02 0
Design Video List Component : Part 6- Create a components folder in src folder and add VideoList.js file in it, open this file and start importing component import React, { Component } from ‘react’; import { View, Text } from ‘react-native’; import CardWrapper from ‘../common/CardWrapper’; import CardInner from ‘../common/CardInner’; class VideoList extends Component { render() { return ( <View> […]
4 02 0
Process To Get Data From Youtube – If you will see youtube video.xml url, there are many xml node. We need only all video id , thumbnail url to display image and Title to show on top of Card XML display data different way than Json. So first we parse xml data and use text […]
13 01 0
Process to call state values : Part 8 – To run all array as loop using our CardWrapper and CardInner, We will use map function . map() will run our design and place value of each array items untill it is null So it will not be a good idea to write a code in […]
3 01 0
To create a button component we will add new file in common folder of src. Button.js We will import React and Component from react and Text and TouchableOpacity from react-native Touchable opacity so some animation on press so we will use this and later we will call onPress funtion to navigate on another page to […]
12 12 0
Navigation in react native is based on many plateform which you can install and use from npm. I am going to use here react navigator So open terminal or command prompt and run this command npm install –save react-navigation If you want to read more about react navigation please go here https://facebook.github.io/react-native/docs/navigation.html When installation is complete. […]
2 12 0
Calling Screens In Stack Navigator- Here one need to notice. When we use navigation we should call all component through navigator props. If you will include direct then props from one component to another component will not go and we get error when navigate. So before video play we will change all component call using […]
11 11 0
Calling component by navigation props- So first open App.js . In this file we have called Index component so now we will call this using navigation here So make a function renderIndex before render() function and call it in return renderIndex() { this.props.navigation.navigate(‘Index’); } And in return () function after header component replace <Index /> with { this.renderIndex() } So now […]