Align multiple textboxes in a row react native

I'm very much new to react native currently i'm building small app for just getting an idea about this. I'm facing an issue in aligning two textboxes and a button in a same row. Also i'm not much familiar with flex also. But i've tried using flex-row as the direction to align contents in a row and it succeeded but with a fixed width to the items. When i tried to use width as 100% design got breaked. This is what i tried yet. Also i'm using react-native-paper as the ui library.

    import React, { useState } from 'react'
import { TouchableOpacity, StyleSheet, View, ScrollView, Text } from 'react-native'
import Background from '../components/Background'
import Header from '../components/Header'
import { Appbar, DataTable, Button } from 'react-native-paper'
import FlashMessage, { showMessage, hideMessage } from "react-native-flash-message";
import { theme } from '../core/theme'
import TextInput from '../components/TextInput'

const Dashboard = ({ navigation }) => {

  return (
    <Background>
      <Appbar style={styles.top}>
      <Appbar.Action
        icon="plus"
        onPress={() => navigation.navigate('SaveDataScreen')}
      />
      <Appbar.Action
      style={styles.appbariconfloat}
        icon="power"
        onPress={() => navigation.navigate('LoginScreen')}
      />
    </Appbar>
    <Header style={styles.headermargin}>Welcome back. </Header>
    <DataTable style={styles.datatable}>
      <DataTable.Header>
        <DataTable.Title>Dessert</DataTable.Title>
        <DataTable.Title numeric>Calories</DataTable.Title>
        <DataTable.Title numeric>Fat</DataTable.Title>
      </DataTable.Header>
      <ScrollView>
      <DataTable.Row>
        <DataTable.Cell>Frozen yogurt</DataTable.Cell>
        <DataTable.Cell numeric>159</DataTable.Cell>
        <DataTable.Cell numeric>6.0</DataTable.Cell>
      </DataTable.Row>
      </ScrollView>
    </DataTable>
    <View style={{ flexDirection: 'row' }}>
        <View style={{ width: 100, height: 50, backgroundColor: 'powderblue' }} >  
        <TextInput
          label="Password"
        />
        </View>
        <View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} >  
        <TextInput
          label="Password"
        />
        </View>
        <View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} >  
        <Button mode="contained">
          Login
        </Button>
        </View>
      </View>
    <FlashMessage position="top" />
    </Background>
  )
}

export default Dashboard

const styles = StyleSheet.create({
  top: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
  },
  headermargin: {
    marginTop: 40,
    fontSize: 21,
    color: theme.colors.primary,
    fontWeight: 'bold',
    paddingVertical: 12,
  },
  card: {
    width: '100%',
    marginTop: 15,
    backgroundColor:'rgba(56, 172, 236, 1)',
    borderWidth:0,
  },
  customView: {
    width: '100%',
    marginTop: 37
  },
  appbariconfloat:{
    marginLeft: "auto",
  },
  datatable:{
    backgroundColor:'white'
  },
  
})

I need the design to be like this

This is the output for what i tried