Выровняйте несколько текстовых полей в ряд, реагируя на родной

Я очень новичок в том, чтобы реагировать на родные, в настоящее время я создаю небольшое приложение, чтобы просто получить представление об этом. Я столкнулся с проблемой выравнивания двух текстовых полей и кнопки в одной строке. Также я не очень хорошо знаком с flex. Но я попытался использовать flex-row в качестве направления для выравнивания содержимого в строке, и это удалось, но с фиксированной шириной элементов. Когда я попытался использовать ширину, поскольку 100% дизайн сломался. Это то, что я еще пробовал. Также я использую реактивную бумагу в качестве библиотеки пользовательского интерфейса.

    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'
  },
  
})

Мне нужен такой дизайн

Это результат того, что я пробовал