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>
        );
    }
}

results matching ""

    No results matching ""