diff --git a/src/components/AnchorForCommentsOnly/index.js b/src/components/AnchorForCommentsOnly/index.js
index 6e70e859cf96..3edda2184b8c 100644
--- a/src/components/AnchorForCommentsOnly/index.js
+++ b/src/components/AnchorForCommentsOnly/index.js
@@ -1,5 +1,5 @@
import React from 'react';
-import {StyleSheet} from 'react-native';
+import {StyleSheet, Text} from 'react-native';
import anchorForCommentsOnlyPropTypes from './anchorForCommentsOnlyPropTypes';
const defaultProps = {
@@ -18,8 +18,9 @@ const AnchorForCommentsOnly = ({
style,
...props
}) => (
-
{children}
-
+
);
AnchorForCommentsOnly.propTypes = anchorForCommentsOnlyPropTypes;
diff --git a/src/components/InlineCodeBlock/WrappedText.js b/src/components/InlineCodeBlock/WrappedText.js
new file mode 100644
index 000000000000..e42a93c79ec8
--- /dev/null
+++ b/src/components/InlineCodeBlock/WrappedText.js
@@ -0,0 +1,76 @@
+import _ from 'underscore';
+import React, {Fragment} from 'react';
+import {Text, View} from 'react-native';
+import PropTypes from 'prop-types';
+import styles from '../../styles/styles';
+
+/**
+ * Breaks the text into matrix
+ * for eg: My Name is Rajat
+ * [
+ * [My,' ',Name,' ',' ',is,' ',Rajat],
+ * ]
+ *
+ * @param {String} text
+ * @returns {Array}
+ */
+function getTextMatrix(text) {
+ return text.split('\n').map(row => _.without(row.split(/(\s)/), ''));
+}
+
+const propTypes = {
+ // Required text
+ children: PropTypes.string.isRequired,
+
+ // Style to be applied to Text
+ textStyles: PropTypes.arrayOf(PropTypes.object),
+
+ // Style for each word(Token) in the text,
+ // remember that token also includes whitespaces among words
+ wordStyles: PropTypes.arrayOf(PropTypes.object),
+};
+
+const defaultProps = {
+ textStyles: [],
+ wordStyles: [],
+};
+
+const WrappedText = (props) => {
+ const textMatrix = getTextMatrix(props.children);
+ return (
+ <>
+ {textMatrix.map((rowText, rowIndex) => (
+
+ {rowText.map((colText, colIndex) => (
+
+ // Outer View is important to vertically center the Text
+
+
+ {colText}
+
+
+ ))}
+
+ ))}
+
+ );
+};
+
+WrappedText.propTypes = propTypes;
+WrappedText.defaultProps = defaultProps;
+WrappedText.displayName = 'WrappedText';
+
+export default WrappedText;
diff --git a/src/components/InlineCodeBlock/index.android.js b/src/components/InlineCodeBlock/index.android.js
deleted file mode 100644
index d68ca0031b84..000000000000
--- a/src/components/InlineCodeBlock/index.android.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/* eslint-disable react/jsx-props-no-spreading */
-import React from 'react';
-import {View} from 'react-native';
-import inlineCodeBlockPropTypes from './inlineCodeBlockPropTypes';
-
-const InlineCodeBlock = ({
- TDefaultRenderer,
- defaultRendererProps,
- boxModelStyle,
- textStyle,
-}) => (
-
-
-
-);
-
-InlineCodeBlock.propTypes = inlineCodeBlockPropTypes;
-InlineCodeBlock.displayName = 'InlineCodeBlock';
-export default InlineCodeBlock;
diff --git a/src/components/InlineCodeBlock/index.ios.js b/src/components/InlineCodeBlock/index.native.js
similarity index 52%
rename from src/components/InlineCodeBlock/index.ios.js
rename to src/components/InlineCodeBlock/index.native.js
index 163bf4a201d8..b8f71b680a4f 100644
--- a/src/components/InlineCodeBlock/index.ios.js
+++ b/src/components/InlineCodeBlock/index.native.js
@@ -1,23 +1,24 @@
-/* eslint-disable react/jsx-props-no-spreading */
import React from 'react';
-import {View} from 'react-native';
import styles from '../../styles/styles';
+import WrappedText from './WrappedText';
import inlineCodeBlockPropTypes from './inlineCodeBlockPropTypes';
const InlineCodeBlock = ({
- TDefaultRenderer,
defaultRendererProps,
boxModelStyle,
textStyle,
}) => (
-
-
-
+ {defaultRendererProps.tnode.data}
+
);
InlineCodeBlock.propTypes = inlineCodeBlockPropTypes;
diff --git a/src/styles/codeStyles/index.android.js b/src/styles/codeStyles/index.android.js
new file mode 100644
index 000000000000..6af8f4a13366
--- /dev/null
+++ b/src/styles/codeStyles/index.android.js
@@ -0,0 +1,14 @@
+const codeWordWrapper = {
+ height: 10,
+};
+
+const codeWordStyle = {
+ top: -1,
+ marginVertical: -2,
+};
+
+const codeTextStyle = {
+ lineHeight: 18,
+};
+
+export default {codeWordWrapper, codeWordStyle, codeTextStyle};
diff --git a/src/styles/codeStyles/index.ios.js b/src/styles/codeStyles/index.ios.js
new file mode 100644
index 000000000000..822dbd1674f9
--- /dev/null
+++ b/src/styles/codeStyles/index.ios.js
@@ -0,0 +1,16 @@
+const codeWordWrapper = {
+ height: 18,
+ justifyContent: 'center',
+ marginTop: 2,
+};
+
+const codeWordStyle = {
+ height: 16,
+ top: 4,
+};
+
+const codeTextStyle = {
+ lineHeight: 15,
+};
+
+export default {codeWordWrapper, codeWordStyle, codeTextStyle};
diff --git a/src/styles/codeStyles/index.js b/src/styles/codeStyles/index.js
new file mode 100644
index 000000000000..6ee3c36b940b
--- /dev/null
+++ b/src/styles/codeStyles/index.js
@@ -0,0 +1,5 @@
+// We do not need these on Web/Desktop as their implementation defer from Native devices so just noop them
+const codeWordWrapper = {};
+const codeWordStyle = {};
+const codeTextStyle = {};
+export default {codeWordWrapper, codeWordStyle, codeTextStyle};
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 0eb9378d36ca..084cb0a05083 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -15,6 +15,7 @@ import wordBreak from './utilities/wordBreak';
import textInputAlignSelf from './utilities/textInputAlignSelf';
import CONST from '../CONST';
import positioning from './utilities/positioning';
+import codeStyles from './codeStyles';
const styles = {
// Add all of our utility and helper styles
@@ -1343,6 +1344,37 @@ const styles = {
scrollbarWidth: 'none',
},
+ codeWordWrapper: {
+ ...codeStyles.codeWordWrapper,
+ },
+
+ codeWordStyle: {
+ borderLeftWidth: 0,
+ borderRightWidth: 0,
+ borderTopLeftRadius: 0,
+ borderBottomLeftRadius: 0,
+ borderTopRightRadius: 0,
+ borderBottomRightRadius: 0,
+ paddingLeft: 0,
+ paddingRight: 0,
+ justifyContent: 'center',
+ ...codeStyles.codeWordStyle,
+ },
+
+ codeFirstWordStyle: {
+ borderLeftWidth: 1,
+ borderTopLeftRadius: 4,
+ borderBottomLeftRadius: 4,
+ paddingLeft: 5,
+ },
+
+ codeLastWordStyle: {
+ borderRightWidth: 1,
+ borderTopRightRadius: 4,
+ borderBottomRightRadius: 4,
+ paddingRight: 5,
+ },
+
fullScreenLoading: {
backgroundColor: themeColors.componentBG,
opacity: 0.8,
@@ -1363,8 +1395,6 @@ const styles = {
const baseCodeTagStyles = {
borderWidth: 1,
borderRadius: 5,
- marginTop: 4,
- marginBottom: 4,
borderColor: themeColors.border,
backgroundColor: themeColors.textBackground,
};
@@ -1419,11 +1449,11 @@ const webViewStyles = {
code: {
...baseCodeTagStyles,
+ ...codeStyles.codeTextStyle,
paddingLeft: 5,
paddingRight: 5,
- paddingBottom: 2,
- alignSelf: 'flex-start',
fontFamily: fontFamily.MONOSPACE,
+ fontSize: 13,
},
img: {
@@ -1436,6 +1466,7 @@ const webViewStyles = {
baseFontStyle: {
color: themeColors.text,
fontSize: variables.fontSizeNormal,
+ lineHeight: variables.fontSizeNormalHeight,
fontFamily: fontFamily.GTA,
},
};
diff --git a/src/styles/variables.js b/src/styles/variables.js
index fff0f2fd0991..29eb28f57852 100644
--- a/src/styles/variables.js
+++ b/src/styles/variables.js
@@ -16,6 +16,7 @@ export default {
fontSizeLarge: 17,
fontSizeh1: 19,
iconSizeExtraSmall: 12,
+ fontSizeNormalHeight: 20,
iconSizeSmall: 16,
iconSizeNormal: 20,
iconSizeLarge: 24,