sfm-uikit-react-native/src/style/EnxChatScreenStyle.js

It is a react native component for SmartFloMeet users.

import { StyleSheet,Dimensions } from 'react-native';

const { width } = Dimensions.get('window');
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 0,
    backgroundColor: '#F5F5F5',
  },
  messageContainer: {
    maxWidth: width * 0.85, // Main container takes up 85% of screen width
    minWidth : width * 0.58,
    marginVertical: 8,
    padding: 10,
  },
  senderContainer: {
    alignSelf: 'flex-end', // Align right for sender
  },
  receiverContainer: {
    alignSelf: 'flex-start', // Align left for receiver
  },
  firstRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 5,
  },
  senderFirstRow: {
    flexDirection: 'row-reverse', // Right-to-left layout for sender
    justifyContent: 'flex-end', // Ensure the items are aligned to the right
  },
  receiverFirstRow: {
    justifyContent: 'flex-start', // Left-to-right layout for receiver
  },
  firstLetterContainer: {
    width: 40,
    height: 40,
    borderRadius: 20,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 10, // Space between first letter and name/date
  },
  senderFirstLetter: {
    backgroundColor: '#007BFF',
    marginRight: 0, // Override to remove spacing on right
    marginLeft: 10, // Add spacing for right-to-left layout
  },
  receiverFirstLetter: {
    backgroundColor: '#FF5733',
  },
  firstLetterText: {
    color: 'white',
    fontSize: 20,
    fontWeight: 'bold',
  },
  nameDateContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    flex: 1, // Take up remaining space for name and date
  },
  nameText: {
    fontWeight: 'bold',
    fontSize: 16,
  },
  dateText: {
    fontSize: 12,
    color: 'gray',
    marginLeft: 10, // Add space between name and date for receiver
    marginRight: 10, // Add space between name and date for sender
  },
  secondRow: {
    flexDirection: 'row',
  },
  senderSecondRow: {
    justifyContent: 'flex-end', // Align message to the right for sender
  },
  messageBubble: {
    padding: 10,
    borderRadius: 10,
    maxWidth: '100%',
  },
  senderBubble: {
    backgroundColor: '#90aae9',
    alignSelf: 'flex-end',
  },
  receiverBubble: {
    backgroundColor: '#a7a5a4',
    alignSelf: 'flex-start',
  },
  messageText: {
    fontSize: 16,
    color: '#fff', // White text for sent messages
  },
  inputContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 10, // Only vertical padding
    borderRadius: 12,
    backgroundColor: '#fff',
    width: width > 400 ? 400 : width,  // Fixed width up to 400px, centered
    alignSelf: 'center',               // Center the input container on the screen
  },
  input: {
    flex: 3.5,                           // Ensures the input field takes up the remaining space
    height: 40,
    borderColor: '#ddd',
    borderWidth: 1,
    borderRadius: 20,
    paddingHorizontal: 10,             // Adds 10px padding inside the input field (left and right)                  // Space between input and send button
    marginLeft: 10,                    // Adds space to the left so the input doesn't touch the container's edge
  },
  sendButton: {
    flex: 0.1,
    paddingHorizontal: 15,
    paddingVertical: 8,
    marginRight: 10,                   // Adjust space on the right side of the button to balance layout
    alignItems: 'center',
  },
  itemImage: {
    width: 30,
    height: 30,
    marginRight: 10,
    marginLeft :10
  },
  placeholder: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
},
linkPreviewContainer: {
  marginTop: 5,
},
linkPreviewTextContainer: {
  flexDirection: 'row',
 
},
normalText: {
  color: '#fff', // Normal text color
},
linkText: {
  color: 'blue', // Link color
},
  });

export { styles }