How to add an object with Link styles (React Router)?

Question

JavaScript

app.js

import React from "react";
import { StyleSheet, Text, View, Platform, ScrollView, TouchableOpacity, Alert } from "react-native";
import { Router, Route, Link } from "./react-router";

const About = () => <Text>About</Text>;

const History = () => <Text>History</Text>;

const App = () => (
  <Router>
    <ScrollView contentContainerStyle={styles.container}>
      <Route exact path="/" component={About} />
      <Route path="/history" component={History} />
      <View style={styles.nav}>
        <Link to="/" style={styles.aboutBtn}>
          <TouchableOpacity
            onPress={() => Alert.alert('Button pressed')}
          >
            <Text style={styles.aboutBtnText}>About</Text>
          </TouchableOpacity>
        </Link>
        <Link to="/history" styles={styles.historyBtn}>
          <TouchableOpacity
            onPress={() => Alert.alert('Button pressed')}
          >
            <Text style={styles.aboutBtnHistory}>History</Text>
          </TouchableOpacity>
        </Link>
      </View>
    </ScrollView>
  </Router>
);

const styles = StyleSheet.create({
  container: {
    padding: 10,
    position: 'relative',
    display: 'flex',
    alignItems: 'center',
  },
  nav: {
    position: 'fixed',
    bottom: '2.4%',
    width: '91.3%',
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    backgroundColor: 'rgba(255, 255, 255, 1)',
    boxShadow: '0px 0px 2px rgba(77, 82, 85, 0.1), 0px 12px 20px rgba(77, 82, 85, 0.2), inset 0px 0px 2px rgba(240, 244, 247, 1)',
    borderRadius: 20,
    height: 64,
  },
  aboutBtn: {
    width: '50%',
    height: '100%',
  },
  historyBtn: {
    width: '50%',
    height: '100%',
  },
});

export default App;

When adding styles to an object: An error appears:
<Link to="/" style={styles.aboutBtn}>

Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

This option works:

<Link to="/" style={{width: '50%, height: '100%'}}>

Answer 1

Try adding code like this
const style = styles();
and already apply this to the link

Answer 2

Throw the styles above, or even create a function in the style park in which you do return {your styles},
And in the blocks you write style={function name. object name with style}
And by the way, why react router dom, and not react navigation?