OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

scrolling is not happening on the screen

  • Thread starter Thread starter Snehal Murkute
  • Start date Start date
S

Snehal Murkute

Guest
import React, { useState } from 'react'; import { View, Text, TextInput, Button, ScrollView, StyleSheet, Alert } from 'react-native'; import axios from 'axios'; import AsyncStorage from '@react-native-async-storage/async-storage';

const itemsList = [ 'Vada Bhaji', 'Vada Premix', 'Sambar', 'Samosa', 'Buns', 'Misal', 'Upma', 'Sheera', 'Red Sukki chutney', 'Green chutney', 'Dosa Batter', 'Idli batter', 'Idli', 'Tambada Rassa', 'Pandhara Rassa', 'Kala Rassa', 'Indian Gravy', 'White coconut chutney for dosa', 'Gobi Manchurian Dry (Ready to Cook)', 'Puri Atta', 'Bhaji (of Puri Bhaji)', 'Bhaji (Of Bombay Pav Bhaji)', 'Veg Thali', 'Chopped Onion', 'Chopped Dhaniya', 'Peeled Garlic', 'Grated Green Chilly (G4)', 'Grated fried Chilly', 'Tomato sauce', 'Tomato Gravy (Indian)', 'Chapati Wheat', 'Bhakri Jowar', 'Bhakri Bajari', 'Patal Thali Bhaji', 'Sukki Thali Bhaji', 'Kachori', 'Puri (of Pani puri)', 'Imli sauce', 'Kacchi Dabeli Masala' ];

const ChefScreen = ({ navigation }) => {

Code:
const [orderItems, setOrderItems] = useState(itemsList.map(item => ({ name: item, quantity: 0 })));
const [statusItems, setStatusItems] = useState({});

const handleQuantityChange = (index, quantity) => {
    const newOrderItems = [...orderItems];
    newOrderItems[index].quantity = quantity;
    setOrderItems(newOrderItems);
};

const handleStatusChange = async (orderId, itemId, status) => {
    const token = await AsyncStorage.getItem('token');
    try {
        await axios.put('http://localhost:5000/api/orders/item-status', { orderId, itemId, status }, {
            headers: {
                'x-auth-token': token
            }
        });
        setStatusItems((prevStatusItems) => ({
            ...prevStatusItems,
            [itemId]: status
        }));
    } catch (err) {
        console.error(err);
        Alert.alert('Error', 'Failed to update item status');
    }
};

const handleSubmit = async () => {
    const token = await AsyncStorage.getItem('token');
    try {
        await axios.post('http://localhost:5000/api/orders/create', { items: orderItems }, {
            headers: {
                'x-auth-token': token
            }
        });
        navigation.navigate('OrderStatus');
    } catch (err) {
        console.error(err);
        Alert.alert('Error', 'Order creation failed');
    }
};

return (
    <ScrollView contentContainerStyle={styles.scrollContainer}>
        {orderItems.map((item, index) => (
            <View key={index} style={styles.itemContainer}>
                <Text style={styles.itemName}>{item.name}</Text>
                <TextInput
                    style={styles.input}
                    keyboardType="numeric"
                    onChangeText={(value) => handleQuantityChange(index, Number(value))}
                    value={String(item.quantity)}
                />
                {statusItems[item.name] === 'Checked and Received' ? (
                    <Text style={styles.statusText}>Status: Checked and Received</Text>
                ) : (
                    <Button
                        title="Check and Receive"
                        onPress={() => handleStatusChange(item.name, item.name, 'Checked and Received')}
                    />
                )}
            </View>
        ))}
        <View style={styles.buttonContainer}>
            <Button title="Proceed" onPress={handleSubmit} />
        </View>
    </ScrollView>
);

};

const styles = StyleSheet.create({ scrollContainer: { flexGrow: 1, padding: 20, backgroundColor: '#ffffff', justifyContent: 'space-between', }, itemContainer: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: '#ccc', }, itemName: { flex: 1, fontSize: 16, }, input: { width: '20%', height: 40, borderColor: 'gray', borderWidth: 1, paddingHorizontal: 10, }, statusText: { fontStyle: 'italic', color: 'green', }, buttonContainer: { alignSelf: 'center', marginVertical: 20, marginBottom: 40, // Adjust marginBottom to give space for the button }, });

export default ChefScreen;

i wanted to see all the items and also the proceed button which is at the bottom of the screen

<p>import React, { useState } from 'react';
import { View, Text, TextInput, Button, ScrollView, StyleSheet, Alert } from 'react-native';
import axios from 'axios';
import AsyncStorage from '@react-native-async-storage/async-storage';</p>
<p>const itemsList = [
'Vada Bhaji', 'Vada Premix', 'Sambar', 'Samosa', 'Buns',
'Misal', 'Upma', 'Sheera', 'Red Sukki chutney', 'Green chutney',
'Dosa Batter', 'Idli batter', 'Idli', 'Tambada Rassa', 'Pandhara Rassa',
'Kala Rassa', 'Indian Gravy', 'White coconut chutney for dosa', 'Gobi Manchurian Dry (Ready to Cook)', 'Puri Atta',
'Bhaji (of Puri Bhaji)', 'Bhaji (Of Bombay Pav Bhaji)', 'Veg Thali', 'Chopped Onion', 'Chopped Dhaniya',
'Peeled Garlic', 'Grated Green Chilly (G4)', 'Grated fried Chilly', 'Tomato sauce', 'Tomato Gravy (Indian)',
'Chapati Wheat', 'Bhakri Jowar', 'Bhakri Bajari', 'Patal Thali Bhaji', 'Sukki Thali Bhaji',
'Kachori', 'Puri (of Pani puri)', 'Imli sauce', 'Kacchi Dabeli Masala'
];</p>
<p>const ChefScreen = ({ navigation }) => {</p>
<pre><code>const [orderItems, setOrderItems] = useState(itemsList.map(item => ({ name: item, quantity: 0 })));
const [statusItems, setStatusItems] = useState({});

const handleQuantityChange = (index, quantity) => {
const newOrderItems = [...orderItems];
newOrderItems[index].quantity = quantity;
setOrderItems(newOrderItems);
};

const handleStatusChange = async (orderId, itemId, status) => {
const token = await AsyncStorage.getItem('token');
try {
await axios.put('http://localhost:5000/api/orders/item-status', { orderId, itemId, status }, {
headers: {
'x-auth-token': token
}
});
setStatusItems((prevStatusItems) => ({
...prevStatusItems,
[itemId]: status
}));
} catch (err) {
console.error(err);
Alert.alert('Error', 'Failed to update item status');
}
};

const handleSubmit = async () => {
const token = await AsyncStorage.getItem('token');
try {
await axios.post('http://localhost:5000/api/orders/create', { items: orderItems }, {
headers: {
'x-auth-token': token
}
});
navigation.navigate('OrderStatus');
} catch (err) {
console.error(err);
Alert.alert('Error', 'Order creation failed');
}
};

return (
<ScrollView contentContainerStyle={styles.scrollContainer}>
{orderItems.map((item, index) => (
<View key={index} style={styles.itemContainer}>
<Text style={styles.itemName}>{item.name}</Text>
<TextInput
style={styles.input}
keyboardType="numeric"
onChangeText={(value) => handleQuantityChange(index, Number(value))}
value={String(item.quantity)}
/>
{statusItems[item.name] === 'Checked and Received' ? (
<Text style={styles.statusText}>Status: Checked and Received</Text>
) : (
<Button
title="Check and Receive"
onPress={() => handleStatusChange(item.name, item.name, 'Checked and Received')}
/>
)}
</View>
))}
<View style={styles.buttonContainer}>
<Button title="Proceed" onPress={handleSubmit} />
</View>
</ScrollView>
);
</code></pre>
<p>};</p>
<p>const styles = StyleSheet.create({
scrollContainer: {
flexGrow: 1,
padding: 20,
backgroundColor: '#ffffff',
justifyContent: 'space-between',
},
itemContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingVertical: 10,
borderBottomWidth: 1,
borderBottomColor: '#ccc',
},
itemName: {
flex: 1,
fontSize: 16,
},
input: {
width: '20%',
height: 40,
borderColor: 'gray',
borderWidth: 1,
paddingHorizontal: 10,
},
statusText: {
fontStyle: 'italic',
color: 'green',
},
buttonContainer: {
alignSelf: 'center',
marginVertical: 20,
marginBottom: 40, // Adjust marginBottom to give space for the button
},
});</p>
<p>export default ChefScreen;</p>
<p>i wanted to see all the items and also the proceed button which is at the bottom of the screen</p>
 
Top