Impossible to display centered svg as react component in AppBar of react-native-paper on Android

Question

I am building a react-native application with expo SDK36.

It use react-native-svg@9.13.3 to render svg.

With it, It is possible tu import the .svg directly as a react component, or rewrite the SVG with their svg components.

I have tried both, and on android it doesn't display if I center the title on AppBar:

Current behaviour

Svg import doesn't work in AppBar on android device.

Expected behaviour

To display SVG on all devices

Code sample

<svg width="100%" height="100%" viewBox="0 0 76 39" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g clip-path="url(#clip0)">
        <path d="M10.19 25.75L3.81 17.3H0V38.1C0 38.1 3.9 38.44 3.9 33.62C3.9 28.8 3.9 23.97 3.9 23.97L10.2 31.93L16.37 24V38.1H20.27V17.31H16.46L10.19 25.75Z" fill="white"/>
    </g>
    <defs>
        <clipPath id="clip0">
            <rect width="75.93" height="38.33" fill="white"/>
        </clipPath>
    </defs>
</svg>

Written using their svg components:

import React from 'react';
import {
  G,
  Path,
  Svg,
  Defs,
  ClipPath,
  Rect,
} from 'react-native-svg';
export default function Logo(props) {
  return (
    <Svg width="100%" height="100%" viewBox="0 0 76 39" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
      <G clip-path="url(#clip0)">
        <Path d="M10.19 25.75L3.81 17.3H0V38.1C0 38.1 3.9 38.44 3.9 33.62C3.9 28.8 3.9 23.97 3.9 23.97L10.2 31.93L16.37 24V38.1H20.27V17.31H16.46L10.19 25.75Z"/>
      </G>
      <Defs>
        <ClipPath id="clip0">
          <Rect width="75.93" height="38.33" fill="red"/>
        </ClipPath>
      </Defs>
    </Svg>
  );
}

textAlign: centered never render on Android, I use it within the AppBar of react-native-paper like this:

import React from 'react';
import { Appbar as AppBarDefault } from 'react-native-paper';
import ConnectedPaperProvider from '../../components/ui/ConnectedPaperProvider';
import Logo from '../Logo';
const {
  Header,
  BackAction,
  Content,
  Action,
} = AppBarDefault;
/* eslint-disable */
export default class AppBar extends React.Component {
  _goBack = () => console.log('Went back');

  // _handleSearch = () => console.log('Searching');

  _handleMore = () => console.log('Shown more');

  render() {
    return (
      <ConnectedPaperProvider>
        <Header>
          <BackAction
            onPress={this._goBack}
          />
          <Content
            titleStyle={{
              textAlign: 'center',
            }}
            title={<Logo fill="red" />}
          />
          {/* <Action icon="magnify" onPress={this._handleSearch} /> */}
          <Action icon="dots-vertical" onPress={this._handleMore} />
        </Header>
      </ConnectedPaperProvider>
    );
  }
}

If I remove the textAlign: center, it get wrongly centered but it is then displaying.

Your Environment

| software              | version
| --------------------- | -------
| ios or android        | android
| react-native          | 0.61.4
| react-native-paper    | 3.4.0
| node                  | v13.5.0
| npm           | 6.13.4
| expo sdk              | 36

Any Idea what I can do to fix it?