ScrollView In React Native Not Scrolling x1000 - react-native

Question

I am only able to see a part of my app in React Native despite the fact that I have wrapped the app in a ScrollView component.
I have tried a number of solutions but none of them have worked:
Failed attempts:
Setting flexGrow to 1
Setting padding to 10
Setting flex to 1
None of these do anything.
How do you configure ScrollView so that all of its children are visible?
Here is the app:
import { StyleSheet, Text, View, TextInput, Pressable, ScrollView } from 'react-native';
import {useState, useEffect} from 'react'
import axios from 'axios'
import SelectDropdown from 'react-native-select-dropdown'
import { Formik } from 'formik'
export default function App() {
const [price, setPrice] = useState();
const options = ["ARS", "ARD", "BRL", "CAD", "CHF", "CLP", "CNY", "CZK", "DKK", "EUR", "GBP", "HKD", "HRK", "HUF", "INR", "ISK", "JPK", "KRW", "NZD", "PLN", "RON", "RUB", "SEK", "SGD", "THB", "TRY", "TWD", "USD"]
const [selected, setSelected] = useState(options[0])
const [amount, setAmount] = useState('')
const [calculatedAmount, setCalculatedAmount] = useState()
useEffect(() => {
axios.get('https://blockchain.info/ticker')
.then(data => {
setPrice(data)
})
}, [])
const fetchData = () => {
axios.get(`https://blockhain.info/tobtc?currency=${selected}&value=${amount}`)
.then(data => {
setCalculatedAmount(data.data)
console.log(calculatedAmount)
})
}
const handleSubmit = (e) => {
e.preventDefault()
fetchData()
}
const handleAmountChange = (e) => {
e.preventDefault()
setAmount(e.target.value)
}
if (!price || price === undefined ) {
return null
}
const Form = ({ onSubmit }) => {
<View>
<Text className="py-10 text-xl">Enter value: <TextInput className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" id="amount" placeholder="Enter value in selected currency" value={amount} onChange={handleAmountChange} data-cy="amount"></TextInput></Text>
<Text className="text-center"><Pressable className="p-5 mb-2 mr-2 overflow-hidden text-2xl text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white text-black font-bold focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800" id="convert-button" type="submit"><Text>Calculate!</Text></Pressable></Text>
<Text id="#calculatedamount" className="text-xl py-8 bg-gray-100 px-2 font-bold rounded-md" data-cy="submit">Value: {calculatedAmount} BTC</Text>
</View>
}
return (
<ScrollView className=" h-screen bg-blue-100" contentContainerStyle={{ flexGrow: 1}}>
<View className="py-10">
<Text className="text-xl text-center m-auto text-black font-bold">Current Prices</Text>
</View>
<View className="md:flex justify-around h-full">
<View className="text-center text-2xl m-auto bg-gray-100 p-20 rounded-md shadow-2xl max-w-[75%]">
<Text className="text-md font-bold">(£) {price.data.GBP.symbol} {price.data.GBP.last} BTC</Text>
</View>
<View className="text-center text-2xl m-auto bg-gray-100 p-20 rounded-md shadow-2xl max-w-[75%]">
<Text className="text-md font-bold">(€) {price.data.EUR.symbol} {price.data.EUR.last} BTC</Text>
</View>
<View className="text-center text-2xl m-auto bg-gray-100 p-20 rounded-md shadow-2xl max-w-[75%]">
<Text className="text-md font-bold">($) {price.data.USD.symbol} {price.data.USD.last} BTC</Text>
</View>
</View>
<View className="h-screen flex ">
<View className="m-auto bg-blue-300 p-20 rounded-md shadow-2xl">
<Text className="text-3xl font-bold py-10">Convert Currency into BTC</Text>
<Text className="text-xl"> Select a currency: <SelectDropdown className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
id='currency'
value={selected}
data-cy="select"
onChange={(e) => setSelected(e.target.value)}>
{options.map((value) => (<Text>
<Text value={value} key={value}>
<Text> {value}</Text>
</Text>
</Text>))}
</SelectDropdown></Text>
<Formik initialValues={{ amount: '' }} onSubmit={handleSubmit}>
{({ handleSubmit }) => <Form onSubmit={handleSubmit} />}
</Formik>
</View>
</View>
</ScrollView>
);
}

Answer 1

ScrollView has two styling props: style and contentContainerStyle.
The style prop is used for the styling of the ScrollView parent
element.
The contentContainerStyle prop is a scrollable container inside the
parent ScrollView
So to set the correct lay-outing for the ScrollView we need update the props: style like this,
< ScrollView style = {
styles.scrollView
} >
//... childrens
<
/ScrollView>
const styles = StyleSheet.create({
scrollView: {
flex: 1,
backgroundColor: 'pink',
marginHorizontal: 20,
}
});
Please refer this blog for more details