CODEWITHSUNDEEP
javascriptreactjsreact-nativeflexbox
Khriz
Khriz

Reputation: 5998

React flexbox alignment for multi-component layout

Noob question here, but I'm kind of stuck here. If I want to create a layout like the one in the image with react's (react native to be precise) flexbox, does anyone know how to do that?

My approach for now has not been working:

<View style={{flex: 1, alignItems: 'stretch'}}>
  <View style={{flex: 1}}>
    <Text>Messages here</Text>
  </View>
  <View style={{alignSelf: 'flex-end'}}>
    <TextInput
      placeholder="Add your message"
      onChangeText={(text) => this.setState({text})} />
    <Button onPress={this.sendMessage}
      title="Send" />
    </View>
  </View>

Any help would be really appreciated.

Mockup

Upvotes: 0

Views: 119

Answers (1)

binchik
binchik

Reputation: 919

react-native uses flex-direction: 'column' by default. Try the following:

<View style={{flex: 1}}>
  <View style={{flex: 1}}>
    <Text>Messages here</Text>
  </View>
  <View style={{height: 55, flexDirection: 'row', paddingHorizontal: 10}}>
    <TextInput
      style={{height: 44, flex: 1}}
      placeholder="Add your message"
      onChangeText={(text) => this.setState({text})}
    />
    <Button
      title="Send"
      style={{padding: 4}}
      onPress={this.sendMessage}
    />
  </View>
</View>

Upvotes: 1

Related Questions