How to align one component to left and other to right (end of page) react native?

user_8446381 0
Viewed 31933

I'm making an app in React Native and I want align a circle with the end of page.

I want to make this:

I want make this

But it's currently like this and only stays this way:

But only stay this way

The complete view:

[The complete view]

I already tried alignSelf, justifyContent and others but it doesn't work. I tested this: How to align 2 react native elements, 1 being in the center and 1 on the beginning

But it won't work.

My code:

const ListProductsHeader = () => (
<View>
    <View style={style.containerInfo}>
        <View style={style.circle} />
        <View>
            <Text style={style.unityName}>SUPERMERCADO MACCARTNEY</Text>
            <Text style={style.subInfo}>Categoria: Mercado</Text>
            <Text style={style.subInfo}>Pedido Nº: 1245</Text>
        </View>
    </View>
    <View style={style.containerProducts}>
        <Text style={style.productName}>1x 42 - Coca Cola 2L</Text>
        <View style={style.minus}></View>
    </View>


</View>
);

CSS:

containerProducts:{
paddingTop: 40,
paddingLeft: 15,
flexDirection: 'row',
 },
productName: {
  alignSelf: 'flex-start',
},
minus:{
  width: 20,
  height: 20,
  borderRadius: 20/2,
  backgroundColor: 'red',
},
containerInfo:{
  paddingTop:15,
  flexDirection:'row',
  paddingLeft: 15,
},
unityName:{
  fontWeight: 'bold',
  paddingLeft: 15,
},
subInfo:{
  color: 'gray',
  paddingLeft: 15,
},
circle: {
  width: 50,
  height: 50,
  borderRadius: 50/2,
  backgroundColor: 'red',
  justifyContent: 'flex-end',
},
flexbox react-native
2 Answers

Fully Customisable chat in React Native

import React, {Component} from 'react';
import {
  Text,
  StyleSheet,
  View,
  TextInput,
  TouchableOpacity,
  SafeAreaView,
  FlatList,
} from 'react-native';

export default class CustomChatScreen extends Component {
  state = {
    messages: [
      {
        msg: 'Heloo',
        id: Math.random(),
        token: '',
        email: '',
        type: 'server',
      },
      {
        msg: 'Server Message',
        id: Math.random(),
        token: '',
        email: '',
        type: 'server',
      },
    ],
    value: '',
  };

  sendMessageToServer = () => {
    if (this.state.value !== '') {
      let payload = {
        msg: this.state.value,
        id: Math.random(),
        token: '',
        email: '',
        type: 'client',
      };
      let mydata = this.state.messages;
      mydata.push(payload);
      this.setState({
        messages: mydata,
        value: '',
      });
    }
  };

  renderFlatListItem = rowData => {
    return (
      <View style={styles.flatListContainerStyle}>
        {rowData.item.type === 'client' ? (
          <View style={styles.clientMsgStyle}>
            <Text>{rowData.item.msg}</Text>
          </View>
        ) : (
          <View style={styles.serverMsgStyle}>
            <Text>{rowData.item.msg}</Text>
          </View>
        )}
      </View>
    );
  };

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <FlatList
          data={this.state.messages}
          keyExtractor={(item, index) => index.toString()}
          renderItem={this.renderFlatListItem}
        />
        <View style={styles.sendMessageConatinerStyle}>
          <TextInput
            style={styles.sendMsgTextInputStyle}
            value={this.state.value}
            placeholder = {"please type here!"}
            placeholderTextColor = {"#000"}
            onChangeText={val => this.setState({value: val})}></TextInput>
          <TouchableOpacity
            style={styles.sendMsgButtonStyle}
            onPress={this.sendMessageToServer}>
            <Text>Send Message</Text>
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  sendMessageConatinerStyle: {
    width: '100%',
    height: 60,
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'white',
    flexDirection: 'row',
  },
  sendMsgTextInputStyle: {
    backgroundColor: '#e0f2f1',
    flex: 0.8,
    borderTopLeftRadius: 62.5,
    borderBottomLeftRadius: 62.5,
    padding: 20,
  },
  sendMsgButtonStyle: {
    flex: 0.2,
    backgroundColor: '#80cbc4',
    borderBottomRightRadius: 62.5,
    borderTopRightRadius: 62.5,
    fontSize: 18,
    justifyContent: 'center',
    alignItems: 'center',
  },
  flatListContainerStyle: {
    backgroundColor: '#e0f7fa',
    marginTop: 10,
  },
  clientMsgStyle: {
    backgroundColor: '#ffab91',
    borderRadius: 20,
    padding: 15,
    alignSelf: 'flex-end',
  },
  serverMsgStyle: {
    backgroundColor: '#4fc3f7',
    borderRadius: 20,
    padding: 15,
    alignSelf: 'flex-start',
  },
});
user_86565830
Related