CODEWITHSUNDEEP
cssreact-nativeflexbox
sooraj s pillai
sooraj s pillai

Reputation: 916

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

enter image description here

This is the output for what i tried

enter image description here

Upvotes: 1

Views: 1192

Answers (2)

Sagar Shakya
Sagar Shakya

Reputation: 654

Try this:

<View style={{flexDirection: 'row'}}>
    <View style={{flex: 1, marginRight: 10, height: 50, backgroundColor: 'powderblue'}}>
        <TextInput label="Password" />
    </View>
    <View style={{flex: 1, marginRight: 10, height: 50, backgroundColor: 'powderblue'}}>
        <TextInput label="Password" />
    </View>
    <View style={{flex: 1, height: 50, backgroundColor: 'powderblue'}}>
        <Button mode="contained">Login</Button>
    </View>
</View>;

Upvotes: 1

Magic Dev
Magic Dev

Reputation: 309

Please try this. That is a CSS problem. Give some margins to button view.

      <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
        <View style={{ margin: 5, width: 100, height: 50, backgroundColor: 'powderblue' }} >  
        <TextInput
          label="Password"
        />
        </View>
        <View style={{ margin: 5, width: 50, height: 50, backgroundColor: 'powderblue' }} >  
        <TextInput
          label="Password"
        />
        </View>
        <View style={{ margin: 5, width: 50, height: 50, backgroundColor: 'powderblue' }} >  
        <Button mode="contained">
          Login
        </Button>
        </View>
      </View>

Upvotes: 0

Related Questions