Update title and/or buttons in navbar from within component with react-router-native & react-router-navigation

Question

I am using react-router-navigation in my app. Let's say we have a login page where user have to enter his username and this username should appear in navbar as user is typing.

Given that routing is defined elsewhere from the actual component and component does not have callbacks to change route props: is it possible at all to achieve this? Perhaps some smart HOC? Ideas?

Hacks like passing the username all the way around with redux or similar are not the option. To be more specific I wish to be able to override any property specified in Card (right button, title, anything) from within component. Is it possible?

Please find sample code below, Thanks

class Login extends Component {
    render() {
        return (
            <View
                style={{
                    flex: 1,
                    flexDirection: 'column',
                    alignItems: 'center',
                }}>
                <Text>
                    Username
                </Text>
                <TextInput style={{
                    height: 60,
                    width: 200,
                }}
                autoFocus
                onChangeText={(value) => {console.log('NAME: ', value)}}/>
            </View>
        )
    }
}

const App = () => (
    <NativeRouter>
        <Navigation>
            <Card path="/"
            title="Login"
            exact
            component={Login}
        />
        </Navigation>
    </NativeRouter>
)