React native nested scroll view when horizontal not showing anything - react-native

Question

I have looked at most of the question related to mine but haven't found a solution, my code looks as follows:
<View style={{flex: 1}}>
<ScrollView style={{flexGrow: 1}}>
<Component />
<AnotherComponent />
<View style={{flex: 1}}>
<ScrollView
style={{}}
nestedScrollEnabled
horizontal={true}>
<Button />
<Button />
<Button />
</ScrollView>
</View>
</ScrollView>
</View>
When I remove the horizontal attribute and add a specific height to the nested ScrollView than the scroll will work vertically but the moment I set horizontal={true}, the Buttons disappear.
Drawing of the layout:

Answer 1

I created a Custom Buttom for design purpose which look like this
Check this Snack too
import * as React from 'react';
import {
Text,
View,
StyleSheet,
ScrollView,
Button as BTN,
Dimensions,
} from 'react-native';
function Button({ title, style = {} }) {
return (
<View style={{ ...style }}>
<BTN title={title} />
</View>
);
}
export default Button;
And then in the nested scrolls look like this
import Button from './components/Button';
// Watch out here I have imported my custom button and not the Button from "react-native"
<View style={{ flex: 1 }}>
<ScrollView style={{ flexGrow: 1 }}>
<View></View>
<View></View>
<View style={{ flex: 1 }}>
<ScrollView
style={{ flexDirection: 'row' }}
nestedScrollEnabled
horizontal={true}>
<Button title="TEST" style={{ width: 100, margin: 10 }} />
<Button title="TEST" style={{ width: 100, margin: 10 }} />
<Button title="TEST" style={{ width: 100, margin: 10 }} />
</ScrollView>
</View>
</ScrollView>
</View>