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

Bilesen1 = () => {
  return (
    <View style={Stil.Kutu1}>
    </View>
  )
}

const Stil = StyleSheet.create({
  Kutu1: {
    width:'20%',
    height:'10%',
    backgroundColor:'yellow',
    margin:10,
    borderColor:'grey',
    borderWidth:4,
  }
});

export default Bilesen1;

import { Text, View, StyleSheet } from 'react-native';
import Bilesen1 from './components/Bilesen1';

export default function App() {
  return (
    <View style={styles.container}>
     <Bilesen1 />
      <Bilesen1 />
      <Bilesen1 />
      <Bilesen1 />
      <Bilesen1 />
      <Bilesen1 />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:'column',
    justifyContent: 'space-around',
    alignItems:'center',
    backgroundColor: 'blue',
    padding:18,
    border:10,
    borderColor:'yellow',
    margin:10
  }
});

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

import Toptext  from './components/Toptext';
import NameInput  from './components/NameInput';
import Card  from './components/Card';
import RowBlock from './components/RowBlock';
import RowBlock2 from './components/RowBlock2';
import RowBlock3 from './components/RowBlock3';
import Message from './components/Message';

export default function App() {
  return (
    <View style={eren.container}>
     
      <Toptext/>

      <NameInput/>

      <Card/>

      <RowBlock/>

      <RowBlock2/>

      <Message/>

       <RowBlock3/>
       
    </View>
  );
}

const eren = StyleSheet.create({
  container: {
    padding: 20,
    justifyContent: 'center',
  }
});

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


export default function Toptext() {
  return (
     <Text style={eren.title}>Payment Form Example</Text>
  );
}
const eren = StyleSheet.create({
 title: {
    fontSize: 22,
    fontWeight: 'bold',
    textAlign: 'center',
    backgroundColor:'lightgray',
    height:'25%',
  },
});

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


export default function NameInput() {
  return (
  <View>
      <Text style={eren.label}>Name</Text>
      <TextInput
        style={eren.input}
        placeholder="Example: Cem Yılmaz"
      />
  </View>
  );
}
const eren = StyleSheet.create({
 label: {
    fontSize: 16,
    marginBottom: 4,
    marginTop: 16
  },
  input: {
    borderWidth: 1,
    borderColor: '#999',
    borderRadius: 8,
    padding: 10,
    fontSize: 16,
    backgroundColor: '#f0f0f0'
  }
});

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

export default function Message() {
  return (
    <View>
  <Text style={eren.label}>Message</Text>
      <TextInput
        style={[eren.input, eren.messageBox]}
        multiline
      />
       </View>
  );
}
const eren = StyleSheet.create({
 label: {
    fontSize: 16,
    marginBottom: 4,
    marginTop: 16
  },
  input: {
    borderWidth: 1,
    borderColor: '#999',
    borderRadius: 8,
    padding: 10,
    fontSize: 16,
    backgroundColor: '#f0f0f0'
  },
  messageBox: {
    height: 150,
    textAlignVertical: 'top',
  }
});

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


export default function RowBlock3() {
    return (
            <View style={eren.row3}>
                <TouchableOpacity style={eren.button}>
                    <Text style={eren.buttonText}>Cancel</Text>
                </TouchableOpacity>
                <TouchableOpacity style={eren.button2}>
                    <Text style={eren.buttonText}>Send</Text>
                </TouchableOpacity>
            </View>
            );
}
const eren = StyleSheet.create({
    row3: {
        height: '12%',
        marginTop: 10,
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
        backgroundColor: 'lightgray',
    },
    button: {

        backgroundColor: '#aaa',
        paddingVertical: 8,
        marginHorizontal: 1,
        borderRadius: 8,
        alignItems: 'center',
        backgroundColor: 'black',
        width: '25%',
    },
    button2: {

        backgroundColor: '#aaa',
        paddingVertical: 8,
        marginHorizontal: 1,
        borderRadius: 8,
        alignItems: 'center',
        backgroundColor: 'blue',
        width: '25%',
    },
    buttonText: {
        color: 'white',
        fontSize: 18
    }
});