diff --git a/src/components/MessageSimple/MessageContent.js b/src/components/MessageSimple/MessageContent.js
index 1bccfdc500..6c38c6d46c 100644
--- a/src/components/MessageSimple/MessageContent.js
+++ b/src/components/MessageSimple/MessageContent.js
@@ -33,14 +33,16 @@ const Container = styled.TouchableOpacity`
: theme.colors.transparent};
border-bottom-left-radius: ${({ alignment, theme }) =>
alignment === 'left'
- ? theme.message.text.borderRadiusS
- : theme.message.text.borderRadiusL};
+ ? theme.message.content.container.borderRadiusS
+ : theme.message.content.container.borderRadiusL};
border-bottom-right-radius: ${({ alignment, theme }) =>
alignment === 'left'
- ? theme.message.text.borderRadiusL
- : theme.message.text.borderRadiusS};
- border-top-left-radius: ${({ theme }) => theme.message.text.borderRadiusL};
- border-top-right-radius: ${({ theme }) => theme.message.text.borderRadiusL};
+ ? theme.message.content.container.borderRadiusL
+ : theme.message.content.container.borderRadiusS};
+ border-top-left-radius: ${({ theme }) =>
+ theme.message.content.container.borderRadiusL};
+ border-top-right-radius: ${({ theme }) =>
+ theme.message.content.container.borderRadiusL};
${({ theme }) => theme.message.content.container.css};
`;
diff --git a/src/components/MessageSimple/MessageTextContainer.js b/src/components/MessageSimple/MessageTextContainer.js
index 80e1242475..3c9dd89af6 100644
--- a/src/components/MessageSimple/MessageTextContainer.js
+++ b/src/components/MessageSimple/MessageTextContainer.js
@@ -1,25 +1,25 @@
import React from 'react';
-import styled from '@stream-io/styled-components';
+import styled, { withTheme } from '@stream-io/styled-components';
import { renderText, capitalize } from '../../utils';
const TextContainer = styled.View`
border-bottom-left-radius: ${({ theme, groupStyle }) =>
groupStyle.indexOf('left') !== -1
- ? theme.message.text.borderRadiusS
- : theme.message.text.borderRadiusL};
+ ? theme.message.content.textContainer.borderRadiusS
+ : theme.message.content.textContainer.borderRadiusL};
border-bottom-right-radius: ${({ theme, groupStyle }) =>
groupStyle.indexOf('right') !== -1
- ? theme.message.text.borderRadiusS
- : theme.message.text.borderRadiusL};
+ ? theme.message.content.textContainer.borderRadiusS
+ : theme.message.content.textContainer.borderRadiusL};
border-top-left-radius: ${({ theme, groupStyle }) =>
groupStyle === 'leftBottom' || groupStyle === 'leftMiddle'
- ? theme.message.text.borderRadiusS
- : theme.message.text.borderRadiusL};
+ ? theme.message.content.textContainer.borderRadiusS
+ : theme.message.content.textContainer.borderRadiusL};
border-top-right-radius: ${({ theme, groupStyle }) =>
groupStyle === 'rightBottom' || groupStyle === 'rightMiddle'
- ? theme.message.text.borderRadiusS
- : theme.message.text.borderRadiusL};
+ ? theme.message.content.textContainer.borderRadiusS
+ : theme.message.content.textContainer.borderRadiusL};
margin-top: 2;
padding: 5px;
padding-left: 8;
@@ -28,20 +28,20 @@ const TextContainer = styled.View`
alignment === 'left' ? 'flex-start' : 'flex-end'};
border-width: ${({ theme, alignment }) =>
alignment === 'left'
- ? theme.message.text.leftBorderWidth
- : theme.message.text.rightBorderWidth};
+ ? theme.message.content.textContainer.leftBorderWidth
+ : theme.message.content.textContainer.rightBorderWidth};
border-color: ${({ theme, alignment }) =>
alignment === 'left'
- ? theme.message.text.leftBorderColor
- : theme.message.text.rightBorderColor};
+ ? theme.message.content.textContainer.leftBorderColor
+ : theme.message.content.textContainer.rightBorderColor};
background-color: ${({ theme, alignment, type, status }) =>
alignment === 'left' || type === 'error' || status === 'failed'
? theme.colors.transparent
: theme.colors.light};
- ${({ theme }) => theme.message.text.css}
+ ${({ theme }) => theme.message.content.textContainer.css}
`;
-export const MessageTextContainer = (props) => {
+export const MessageTextContainer = withTheme((props) => {
const {
message,
groupStyles = ['bottom'],
@@ -56,7 +56,9 @@ export const MessageTextContainer = (props) => {
capitalize(hasAttachment ? 'bottom' : groupStyles[0]);
if (!message.text) return false;
-
+ const markdownStyles = props.theme
+ ? props.theme.message.content.markdown
+ : {};
return (
{
type={message.type}
>
{!MessageText ? (
- renderText(message)
+ renderText(message, markdownStyles)
) : (
)}
);
-};
+});
diff --git a/src/components/docs/MessageSimple.md b/src/components/docs/MessageSimple.md
index e9e8618d5d..93393fb2d2 100644
--- a/src/components/docs/MessageSimple.md
+++ b/src/components/docs/MessageSimple.md
@@ -53,3 +53,31 @@ const data = require('./data');
{...data.channelContext}
/>;
```
+
+We use [markdown](https://github.com/CharlesMangwa/react-native-simple-markdown) to render the text in message.
+
+You can customize the styles of message text by providing custom styles in theme object:
+
+Available options for customization are: https://github.com/CharlesMangwa/react-native-simple-markdown/tree/next#styles-1
+
+```json
+const theme = {
+ message: {
+ content: {
+ markdown: {
+ text: {
+ fontFamily: 'AppleSDGothicNeo-Bold'
+ },
+ link: {
+ color: 'pink'
+ }
+ }
+ }
+ }
+}
+
+...
+
+ ...
+
+```
diff --git a/src/styles/theme.js b/src/styles/theme.js
index 2e7eac38fb..929671ab06 100644
--- a/src/styles/theme.js
+++ b/src/styles/theme.js
@@ -58,7 +58,10 @@ export const defaultTheme = {
message: {
container: {},
content: {
- container: {},
+ container: {
+ borderRadiusL: 16,
+ borderRadiusS: 2,
+ },
containerInner: {},
metaContainer: {},
metaText: {},
@@ -67,6 +70,16 @@ export const defaultTheme = {
},
deletedContainer: {},
deletedText: {},
+ textContainer: {
+ borderRadiusL: 16,
+ borderRadiusS: 2,
+ leftBorderWidth: 0.5,
+ leftBorderColor: 'rgba(0,0,0,0.08)',
+ rightBorderWidth: 0,
+ rightBorderColor: 'transparent',
+ },
+ // Available options for styling text: https://github.com/CharlesMangwa/react-native-simple-markdown/tree/next#styles-1
+ markdown: {},
},
status: {
spacer: {},
@@ -87,14 +100,6 @@ export const defaultTheme = {
messageRepliesText: {},
image: {},
},
- text: {
- borderRadiusL: 16,
- borderRadiusS: 2,
- leftBorderWidth: 0.5,
- leftBorderColor: 'rgba(0,0,0,0.08)',
- rightBorderWidth: 0,
- rightBorderColor: 'transparent',
- },
file: {
container: {},
details: {},
diff --git a/src/utils.js b/src/utils.js
index 98c40b2369..a82356fc1a 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -6,7 +6,7 @@ import { CommandsItem } from './components/CommandsItem';
import Markdown from '@stream-io/react-native-simple-markdown';
-export const renderText = (message) => {
+export const renderText = (message, styles) => {
// take the @ mentions and turn them into markdown?
// translate links
let { text } = message;
@@ -38,11 +38,15 @@ export const renderText = (message) => {
}
newText = newText.replace(/[<&"'>]/g, '\\$&');
+ const markdownStyles = {
+ ...defaultMarkdownStyles,
+ ...styles,
+ };
return {newText};
};
-const markdownStyles = {
+const defaultMarkdownStyles = {
link: {
color: 'blue',
textDecorationLine: 'underline',