React native nested scroll view when horizontal not showing anything

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>