Added Checkboxes

App.js

@@ -1,6 +1,6 @@
 import 'react-native-gesture-handler';
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet } from 'react-native';
 import {NavigationContainer} from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

components/HomeScreen.js

@@ -1,16 +1,16 @@
 import React, { Component } from 'react';
-import { Button, View, Text, Image, TouchableOpacity } from 'react-native';
+import { Button, View, Image, TouchableOpacity } from 'react-native';
 
 export default class Homescreen extends Component {
   render() {
     return (
-      <View style={{ flex: 1, justifyContent: 'top' }}>
+      <View style={{ flex: 1 }}>
         <TouchableOpacity onPress={() => this.props.navigation.navigate('Recipe1')}>
         <Image style={{width: 420, height: 220}}
          source={require('../images/recipe1.png')} />
          </TouchableOpacity>
           <Button
-          title="Go to Recipe Screen"
+          title="CURRIED POTATO, KALE AND ONION HASH WITH POACHED EGGS"
           onPress={() => this.props.navigation.navigate('Recipe1')}
 />
       </View>

components/Recipe1.js

@@ -1,13 +1,27 @@
 import React, { Component } from 'react';
-import { Button, View, Text, Image, ScrollView, Linking, StyleSheet } from 'react-native';
+import { Button, View, Text, Image, ScrollView, Linking } from 'react-native';
+import SelectMultiple from 'react-native-select-multiple'
+
+const steps = ['1 - Preheat oven to 200°c (fan)', 
+               '2 - Add the potato, onion, olive oil, curry powder, turmeric and cumin to a roasting tray, and mix to combine so that the vegetables are evenly coated with oil and seasoning', 
+               '3 - Roast the potatoes for 15 minutes, then remove, stir, and add the kale with another drizzle of olive oil if needed',
+               '4 - Return to the oven for 10 more minutes',
+               '5 - When the potatoes are almost ready, poach your eggs in a pan of boiling, salted water',
+               '6 - Plate up the potato hash and serve with the poached eggs, topped with a pinch of salt and pepper',
+              ]
 
 export default class Recipe1 extends Component {
+  state = { selectedSteps: [] }
+  onSelectionsChange = (selectedSteps) => {
+    // selectedFruits is array of { label, value }
+    this.setState({ selectedSteps })
+  }
   render() {
     return (
-      <View style={{ flex: 1, justifyContent: 'top', padding:10 }}>
+      <View style={{ flex: 1, padding:10 }}>
         <Image style={{width: 395, height: 280}}
          source={require('../images/recipe1.png')} />
-        <Text style={{fontWeight: "bold", textAlign: 'center',fontSize: 18}}>{"\n"}Recipe Name {"\n"}</Text>
+        <Text style={{fontWeight: "bold", textAlign: 'center',fontSize: 18}}>{"\n"}CURRIED POTATO, KALE AND ONION HASH WITH POACHED EGGS {"\n"}</Text>
 
         <ScrollView>
           <Text style={{fontSize: 14}}>Preparation Time: 20 - 30 Minutes {"\n"}
@@ -27,12 +41,17 @@ export default class Recipe1 extends Component {
             Sea salt and black pepper to taste{"\n"}
             </Text>
 
-           <Text style={{fontWeight: "bold", fontSize: 18}}>Steps {"\n"}</Text>
-
+           <Text style={{fontWeight: "bold", fontSize: 18}}>Steps</Text>
+           <View style={{ padding: 10, width: 400}}>
+           <SelectMultiple
+          items={steps}
+          selectedItems={this.state.selectedSteps}
+          onSelectionsChange={this.onSelectionsChange} />
+        </View>
 
             <Text style={{fontSize: 14}}>{"\n"}By: Jane Cook</Text>
-          <View style={{alignItems:'left'}}>
-          <Button title= "IN: LOVE FOOD HATE WASTE" onPress={ ()=>{ Linking.openURL('https://www.lovefoodhatewaste.com/recipe/curried-potato-kale-and-onion-hash-poached-eggs')}} ></Button>
+          <View style={{textAlign: 'center'}}>
+          <Button title= "In: Love Food hate waste" onPress={ ()=>{ Linking.openURL('https://www.lovefoodhatewaste.com/recipe/curried-potato-kale-and-onion-hash-poached-eggs')}} ></Button>
           </View>
       </ScrollView>
       </View>

package.json

@@ -24,6 +24,7 @@
     "react-native-reanimated": "~1.13.0",
     "react-native-screen": "^1.0.1",
     "react-native-screens": "~2.15.2",
+    "react-native-select-multiple": "^2.1.0",
     "react-native-web": "~0.13.12",
     "react-navigation": "^4.4.4",
     "react-navigation-stack": "^2.10.4",

yarn.lock

@@ -5488,6 +5488,13 @@ react-native-screens@~2.15.2:
   resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.15.2.tgz#a449700e895b462937211ec72ed6f09652758f06"
   integrity sha512-CagNf2APXkVoRlF3Mugr264FbKbrBg9eXUkqhIPVeZB8EsdS8XPrnt99yj/pzmT+yJMBY0dGrjXT8+68WYh6YQ==
 
+react-native-select-multiple@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-native-select-multiple/-/react-native-select-multiple-2.1.0.tgz#1cc9b3c2a694d85ab5861d035f2252c20b943a08"
+  integrity sha512-sJepp/RNeLorR+/bEUVuWnVEX5klpyf0MHWKy0SN1MIty4vcKhL9ZhPM6Zydm5p6qHeFcvA7Q87FzO1JTdaqkw==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-native-size-matters@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/react-native-size-matters/-/react-native-size-matters-0.3.1.tgz#24d0cfc335a2c730f6d58bd7b43ea5a41be4b49f"