1. Platform specific
Following this guide for more information about the folder structure to custom the component for each platform: http:\/\/facebook.github.io\/react-native\/docs\/platform-specific-code.html#content
2. Basic syntax
Every page from your app should be consider a component and following the format
// import from React & React Native component
import React, {Component} from "react";
import {View, TouchableOpacity, ScrollView} from "react-native";
// import stylesheet
import payment from "./../Styles/payment";
// import action that use for routing to other page
import {Actions} from "react-native-router-flux";
export default class Payment extends Component {
render() {
return (
<View style={shipping.layout}>
<ScrollView>
<View style={shipping.cardContainer}>
<TouchableOpacity>
<Image source={require('../../images/card-1.png')} style={shipping.bankImage}></Image>
</TouchableOpacity>
<TouchableOpacity>
<Image source={require('../../images/card-2.png')} style={shipping.bankImage}></Image>
</TouchableOpacity>
<TouchableOpacity>
<Image source={require('../../images/card-3.png')} style={shipping.bankImage}></Image>
</TouchableOpacity>
</View>
<View style={shipping.card}>
<TextInput style={shipping.input} placeholder={'Cardholder Name'}/>
<TextInput style={shipping.input} placeholder={'Card Number'}/>
<View style={{flex: 1, flexDirection: 'column'}}>
<TextInput style={shipping.input} placeholder={'MM'}/>
<TextInput style={shipping.input} placeholder={'YY'}/>
<TextInput style={shipping.input} placeholder={'CVV'}/>
</View>
</View>
</ScrollView>
</View>
);
}
}