add countrypicker component to select countries

App.js

@@ -1,4 +1,3 @@
 import App from './app/index';
-import {AppRegistry} from 'react-native';
 
 export default App;

app/components/countryPicker/countryPicker.js

@@ -0,0 +1,58 @@
+import React, {Component} from 'react';
+import SimplePicker from 'react-native-simple-picker';
+import {Text, TouchableOpacity, View, Keyboard} from "react-native";
+import {Button, FormInput} from 'react-native-elements'
+import Icon from "react-native-elements/src/icons/Icon";
+
+class CountryPicker extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            selectedOption: '',
+        };
+    }
+
+    state = {country: ""};
+
+    options = this.props.pickerData.map((item) => item.value);
+    labels = this.props.pickerData.map((item) => item.name);
+
+    render() {
+        return (
+            <View>
+                <TouchableOpacity>
+                    <View>
+                        <FormInput
+                            ref={(ref) => { this.selectInput = ref; }}
+                            editable={true}
+                            placeholder={this.props.placeholder}
+                            clearButtonMode="always"
+                            onFocus={() => {
+                                Keyboard.dismiss();
+                                this.refs.picker.show();
+                                this.selectInput.blur();
+                            }}
+                            value={
+                                this.props.pickerData.find(element => element.value === this.state.selectedOption) ?
+                                this.props.pickerData.find(element => element.value === this.state.selectedOption).name : ""
+                            }
+                        />
+                    </View>
+                </TouchableOpacity>
+                <SimplePicker
+                    ref={'picker'}
+                    options={this.options}
+                    labels={this.labels}
+                    onSubmit={(option) => {
+                        this.setState({
+                            selectedOption: option,
+                        });
+                    }}
+                />
+            </View>
+        )
+    }
+}
+
+export default CountryPicker

app/components/header/header.js

@@ -9,9 +9,7 @@ class HeaderComponent extends React.Component {
     render() {
         return (
             <Header
-                leftComponent={{ icon: 'menu', color: '#fff' }}
-                centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
-                rightComponent={{ icon: 'home', color: '#fff' }}
+                centerComponent={{ text: 'Wine Vintage', style: { color: '#fff' } }}
             />
         )
     }

app/components/mainpart/mainpart.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import {ScrollView, View, Picker} from "react-native";
+import CountryPicker from "../countryPicker/countryPicker";
+
+class MainPartComponent extends React.Component {
+    constructor() {
+        super();
+    }
+
+    countries = [
+        {name: "Italien", value: 0},
+        {name: "Spanien", value: 1}
+    ];
+
+
+    render() {
+        return (
+            <CountryPicker placeholder={"Land auswählen"} pickerData={this.countries}/>
+        )
+    }
+}
+
+
+export default MainPartComponent;

app/index.js

@@ -2,6 +2,8 @@ import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import HeaderComponent from "./components/header/header";
 import styled from "styled-components";
+import CountryPicker from "./components/countryPicker/countryPicker";
+import MainPartComponent from "./components/mainpart/mainpart";
 
 const TextContainer = styled.View`
     flex: 1;
@@ -11,6 +13,7 @@ export default class App extends React.Component {
     return (
       <View>
         <HeaderComponent />
+        <MainPartComponent />
         <TextContainer>
             <Text>Open up App.js to start working on your app!</Text>
             <Text>Changes you make will automatically reload.</Text>

package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
-    "react-native-scripts": "1.11.1",
     "jest-expo": "25.0.0",
+    "react-native-scripts": "1.11.1",
     "react-test-renderer": "16.2.0"
   },
   "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
@@ -23,6 +23,7 @@
     "react": "16.2.0",
     "react-native": "0.52.0",
     "react-native-elements": "^0.19.0",
+    "react-native-simple-picker": "^1.4.3",
     "styled-components": "^3.2.3"
   }
 }