Flex.Item not working in Ant Design Mobile React Native

Question

I'm trying to use Flex feature of Ant Design Mobile to position the buttons with flex direction of column. It seems like the Flex and Flex.Item are not working. The buttons positions are stacked together.

App.js

import React from 'react';
import {Text, View, StyleSheet, Image, TouchableOpacity, SafeAreaView} from 'react-native';
import {Provider, Button, WhiteSpace, Flex} from '@ant-design/react-native';
import customTheme from './src/styles/customTheme';


const App = () => {
   return (
      <Provider theme={customTheme}>
         <SafeAreaView>
            <View>  
               <Flex direction='column'>
                  <Flex.Item>                                   
                     <TouchableOpacity style={styles.facebookLoginButton} activeOpacity={0.5}>                                
                        <Image 
                           source={require('./img/facebookLoginButton.png')}
                           style={styles.img}                            
                        />        
                     </TouchableOpacity>         
                  </Flex.Item>
                  <Flex.Item>                       
                     <TouchableOpacity style={styles.googleLoginButton} activeOpacity={0.5}>     
                        <Image 
                           source={require('./img/googleLoginButton.png')}                                    
                        />      
                     </TouchableOpacity>                        
                  </Flex.Item>               
               </Flex>               
            </View>
         </SafeAreaView>
      </Provider>
   );
};
export default App;

const styles = StyleSheet.create({  
   facebookLoginButton: {              
      width: 240,
      height: 40
   },
   googleLoginButton: {      
      borderColor: '#D3D3D3',
      borderWidth: 0.5,
      width: 240,
      height: 40
   }
});