docs: update docs

Author: gmsgowtham

README.md

@@ -55,6 +55,10 @@ const styles = StyleSheet.create({
 });
 ```
 
+## Screenshots
+
+![Image](assets/example.png?raw=true 'Image')
+
 ## Contributing
 
 See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

assets/example.png

@@ -1,53 +1,87 @@
 import * as React from "react";
-import { StyleSheet } from "react-native";
+import { ScrollView, StyleSheet, Text } from "react-native";
 import CodeHighlighter from "react-native-code-highlighter";
+import { SafeAreaView } from "react-native-safe-area-context";
 import { atomOneDarkReasonable as hljsStyle } from "react-syntax-highlighter/dist/esm/styles/hljs";
 
 const CODE_STR = `
-import * as React from "react";
-import { StyleSheet } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
-import CodeHighlighter from "react-native-code-highlighter";
-import { darcula as hljsStyle } from "react-syntax-highlighter/dist/esm/styles/hljs";
-import React, {
-	useMemo,
-	type FunctionComponent,
-	type ReactNode,
-	type CSSProperties,
-} from "react";
-import {
-	Text,
-	View,
-	ScrollView,
-	type ViewStyle,
-	type TextStyle,
-} from "react-native";
-import SyntaxHighlighter, {
-	type SyntaxHighlighterProps,
-} from "react-syntax-highlighter";
-// import { trimNewlines } from "trim-newlines";
-import {
-	getRNStylesFromHljsStyle,
-	type HighlighterStyleSheet,
-} from "./../utils/styles";
+import React from 'react';
+import {SectionList, StyleSheet, Text, View} from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 22,
+  },
+  sectionHeader: {
+    paddingTop: 2,
+    paddingLeft: 10,
+    paddingRight: 10,
+    paddingBottom: 2,
+    fontSize: 14,
+    fontWeight: 'bold',
+    backgroundColor: 'rgba(247,247,247,1.0)',
+  },
+  item: {
+    padding: 10,
+    fontSize: 18,
+    height: 44,
+  },
+});
+
+const SectionListBasics = () => {
+  return (
+    <View style={styles.container}>
+      <SectionList
+        sections={[
+          {title: 'D', data: ['Devin', 'Dan', 'Dominic']},
+          {
+            title: 'J',
+            data: [
+              'Jackson',
+              'James',
+              'Jillian',
+              'Jimmy',
+              'Joel',
+              'John',
+              'Julie',
+            ],
+          },
+        ]}
+        renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
+        renderSectionHeader={({section}) => (
+          <Text style={styles.sectionHeader}>{section.title}</Text>
+        )}
+        keyExtractor={item => \`basicListEntry-$\{item\}\`}
+      />
+    </View>
+  );
+};
+
+export default SectionListBasics;
 `;
 
 export default function App() {
 	return (
-		<CodeHighlighter
-			containerStyle={styles.codeContainer}
-			textStyle={styles.text}
-			hljsStyle={hljsStyle}
-			language="typescript"
-		>
-			{CODE_STR}
-		</CodeHighlighter>
+		<SafeAreaView>
+			<Text>Example from https://reactnative.dev/docs/using-a-listview</Text>
+			<ScrollView>
+				<CodeHighlighter
+					containerStyle={styles.codeContainer}
+					textStyle={styles.text}
+					hljsStyle={hljsStyle}
+					language="typescript"
+				>
+					{CODE_STR}
+				</CodeHighlighter>
+			</ScrollView>
+		</SafeAreaView>
 	);
 }
 
 const styles = StyleSheet.create({
 	codeContainer: {
-		padding: 16,
+		paddingHorizontal: 16,
 		minWidth: "100%",
 	},
 	text: {