fix: deprecate container style prop (#104)

deprecate container style prop

Author: gmsgowtham

example/src/App.tsx

@@ -71,6 +71,9 @@ export default function App() {
 					textStyle={styles.text}
 					hljsStyle={hljsStyle}
 					language="typescript"
+					scrollViewProps={{
+						contentContainerStyle: styles.codeContainer,
+					}}
 				>
 					{CODE_STR}
 				</CodeHighlighter>
@@ -82,7 +85,6 @@ export default function App() {
 const styles = StyleSheet.create({
 	codeContainer: {
 		paddingHorizontal: 16,
-		minWidth: "100%",
 	},
 	text: {
 		fontSize: 16,

package.json

@@ -41,6 +41,7 @@
     "react-native",
     "ios",
     "android",
+    "web",
     "code-hightlighter",
     "syntax-highlighter"
   ],

rome.json

@@ -8,9 +8,21 @@
 		"rules": {
 			"recommended": true
 		},
-		"ignore": ["dist", "node_modules", "example/node_modules", "example/.expo"]
+		"ignore": [
+			"dist",
+			"node_modules",
+			"example/node_modules",
+			"example/.expo",
+			"coverage"
+		]
 	},
 	"formatter": {
-		"ignore": ["dist", "node_modules", "example/node_modules", "example/.expo"]
+		"ignore": [
+			"dist",
+			"node_modules",
+			"example/node_modules",
+			"example/.expo",
+			"coverage"
+		]
 	}
 }

src/lib/CodeHighlighter.tsx

@@ -21,17 +21,20 @@ import {
 
 export interface CodeHighlighterProps extends SyntaxHighlighterProps {
 	hljsStyle: ReactStyle;
-	containerStyle?: StyleProp<ViewStyle>;
 	textStyle?: StyleProp<TextStyle>;
 	scrollViewProps?: ScrollViewProps;
+	/**
+	 * @deprecated, Use scrollViewProps.contentContainerStyle instead
+	 */
+	containerStyle?: StyleProp<ViewStyle>;
 }
 
 export const CodeHighlighter: FunctionComponent<CodeHighlighterProps> = ({
 	children,
-	containerStyle,
 	textStyle,
 	hljsStyle,
 	scrollViewProps,
+	containerStyle,
 	...rest
 }) => {
 	const stylesheet: HighlighterStyleSheet = useMemo(
@@ -75,7 +78,11 @@ export const CodeHighlighter: FunctionComponent<CodeHighlighterProps> = ({
 			<ScrollView
 				{...scrollViewProps}
 				horizontal
-				contentContainerStyle={[stylesheet.hljs, containerStyle]}
+				contentContainerStyle={[
+					stylesheet.hljs,
+					scrollViewProps?.contentContainerStyle,
+					containerStyle,
+				]}
 			>
 				<View>{renderNode(rows)}</View>
 			</ScrollView>

src/lib/__tests__/CodeHighlighter.spec.tsx

@@ -5,7 +5,7 @@ import { atomOneDarkReasonable as hljsStyle } from "react-syntax-highlighter/dis
 describe(CodeHighlighter, () => {
 	it("render", async () => {
 		const code = `const hello = "world"`;
-		const r = await render(
+		const r = render(
 			<CodeHighlighter hljsStyle={hljsStyle} language="typescript">
 				{code}
 			</CodeHighlighter>,
@@ -24,10 +24,12 @@ describe(CodeHighlighter, () => {
       const hello = "world";
       let foo = "bar";
       `;
-		const r = await render(
+		const r = render(
 			<CodeHighlighter
 				hljsStyle={hljsStyle}
-				containerStyle={{ padding: 8, backgroundColor: "#000" }}
+				scrollViewProps={{
+					contentContainerStyle: { padding: 8, backgroundColor: "#000" },
+				}}
 				textStyle={{ color: "#fff", fontSize: 12 }}
 				language="javascript"
 			>

src/lib/__tests__/__snapshots__/CodeHighlighter.spec.tsx.snap

@@ -25,6 +25,7 @@ exports[`CodeHighlighter render 1`] = `
             "color": "#abb2bf",
           },
           undefined,
+          undefined,
         ]
       }
       horizontal={true}
@@ -101,6 +102,7 @@ exports[`CodeHighlighter render with styles 1`] = `
             "backgroundColor": "#000",
             "padding": 8,
           },
+          undefined,
         ]
       }
       horizontal={true}