\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{Bochrak}
\pdfinfo{
  /Title (react-native.pdf)
  /Creator (Cheatography)
  /Author (Bochrak)
  /Subject (React Native Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{54A2DE}
\definecolor{LightBackground}{HTML}{F4F9FC}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{React Native Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Bochrak} via \textcolor{DarkBackground}{\uline{cheatography.com/200241/cs/42327/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}Bochrak \\
  \uline{cheatography.com/bochrak} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 11th February, 2024.\\
   Updated 11th February, 2024.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.

\begin{multicols*}{2}

\begin{tabularx}{8.4cm}{x{2.64 cm} x{5.36 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Development environment Set-up}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Expo}} & \{\{fa-hand-o-right\}\}{\emph{For beginners}}	\{\{nl\}\}	 \{\{fa-check\}\} Simplifies the setup process\{\{nl\}\} \{\{fa-check\}\} Provides OTA updates \{\{nl\}\} \{\{fa-close\}\} Does not allow you to add custom native code\{\{nl\}\}\{\{fa-close\}\} Expo apps tend to have larger sizes \tn 
% Row Count 10 (+ 10)
% Row 1
\SetRowColor{white}
{\bf{React Native CLI}} & \{\{fa-hand-o-right\}\}{\emph{For Experienced Developers}} \{\{nl\}\} \{\{fa-check\}\} Supports integrating custom native modules\{\{nl\}\}\{\{fa-check\}\} Potentially better performance for complex applications\{\{nl\}\}	 	\{\{fa-close\}\} Requires Xcode or Android Studio to get started.\{\{nl\}\} \{\{fa-close\}\} No OTA updates. \tn 
% Row Count 22 (+ 12)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.84 cm} x{4.16 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Creating an app}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Initialize a new project}} & `npx create-expo-app my-app` \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
{\bf{Start development server}} & `cd my-app` \{\{nl\}\} `npm start` \tn 
% Row Count 4 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{1.76 cm} x{6.24 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Running app}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Android}} & Use the Expo Go app to scan the QR code from your terminal to open your project. \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
{\bf{iPhone}} & Use the built-in QR code scanner of the default iOS Camera app. \tn 
% Row Count 6 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\{\{fa-hand-o-right\}\} {\emph{Connect to the same wireless network as your computer.}}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Metro}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\{\{fa-share\}\} When you run your app, the Expo CLI starts Metro Bundler. It's a JavaScript bundler that takes all your JavaScript files and assets, bundles them, and transforms them using Babel. This process converts the code into a format that can be executed by the platform running the app (iOS or Android).% Row Count 7 (+ 7)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.16 cm} x{5.84 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Expo}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Expo}} & A set of tools and services to make development with React Native easier. \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
{\bf{Expo SDK }} & A modular set of packages that provides access that provides access to native APIs, like Camera or Notifications. \tn 
% Row Count 7 (+ 4)
% Row 2
\SetRowColor{LightBackground}
{\bf{Expo CLI  }} & A command-line tool that is the primary interface between a developer and other Expo tools. \tn 
% Row Count 11 (+ 4)
% Row 3
\SetRowColor{white}
{\bf{Expo Go}} & An open-source sandbox app you can download on your phone to view your app in development. \tn 
% Row Count 15 (+ 4)
% Row 4
\SetRowColor{LightBackground}
{\bf{Expo Snack}} & A web-based playground where you      can write React Native  snippets and run them in the browser. \tn 
% Row Count 19 (+ 4)
% Row 5
\SetRowColor{white}
{\bf{Expo Tunnel}} & For establishing a connection that allows devices to access the app even if they're not on the same wireless network. \{\{nl\}\}`npx expo start -{}-tunnel ` \tn 
% Row Count 25 (+ 6)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Finding Libraries}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\{\{fa-folder-open-o\}\} React Native \{\{link="https://reactnative.directory/"\}\}Directory \{\{/link\}\}is a searchable database of libraries built specifically for React Native.% Row Count 4 (+ 4)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{p{0.8 cm} p{0.8 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{StyleSheet}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\{\{fa-chevron-up\}\} An abstraction similar to CSS StyleSheets.\{\{nl\}\}	 \{\{fa-chevron-up\}\}	 Declare styles in a structured and optimized manner.\{\{nl\}\}	 \{\{fa-chevron-up\}\} You can use an array of styles to combine multiple style objects- \{\{nl\}\}the last style in the array has precedence, or mix predefined styles\{\{nl\}\}with inline styles.\{\{nl\}\}	 \{\{fa-chevron-up\}\} All of the core components accept a {\bf{prop}} named {\bf{style}}.} \tn 
% Row Count 9 (+ 9)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{`import React from 'react';\{\{nl\}\}import \{StyleSheet, Text, View\} from 'react-native';\{\{nl\}\}const App = () =\textgreater{} ( \{\{nl\}\}\textless{}View style=\{styles.container\}\textgreater{}\{\{nl\}\} \textless{}Text style=\{{[}styles.baseText, styles.boldText{]}\}\textgreater{}\{\{nl\}\}    This is bold and black text\{\{nl\}\} \textless{}/Text\textgreater{}\{\{nl\}\} \textless{}Text style=\{{[}styles.baseText, \{ color: 'blue' \}{]}\}\textgreater{}\{\{nl\}\}     This is blue and normal weight text\{\{nl\}\}  \textless{}/Text\textgreater{}\{\{nl\}\}\textless{}/View\textgreater{} \{\{nl\}\}); \{\{nl\}\}const styles = StyleSheet.create(\{ \{\{nl\}\}	container: \{ flex: 1,\{\{nl\}\}	             padding: 24,\{\{nl\}\}	             backgroundColor: '\#eaeaea' \}, \{\{nl\}\}	baseText: \{ fontSize: 16, \{\{nl\}\}                    color: 'black' \},  \{\{nl\}\}        boldText: \{ fontWeight: 'bold' \}\{\{nl\}\}	 \}\{\{nl\}\});  \{\{nl\}\}export default App;`} \tn 
% Row Count 24 (+ 15)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{p{0.8 cm} p{0.8 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{UseColorScheme Hook}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\{\{fa-chevron-up\}\} Provides and subscribes to color scheme updates from the appearance module in react native.\{\{nl\}\} \{\{fa-chevron-up\}\} It returns the current color scheme preference of the user's device. \{\{nl\}\} \{\{fa-chevron-up\}\} Supported color schemes: "light", "dark", null.} \tn 
% Row Count 6 (+ 6)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{`import React from 'react';\{\{nl\}\}import \{\{nl\}\} \{Text, StyleSheet, useColorScheme, View\} \{\{nl\}\}from 'react-native';\{\{nl\}\}const App = () =\textgreater{} \{\{\{nl\}\}const colorScheme = useColorScheme();\{\{nl\}\}return (\{\{nl\}\}\textless{}View style=\{styles.container\}\textgreater{}\{\{nl\}\}  \textless{}Text\textgreater{}useColorScheme(): \{colorScheme\}\textless{}/Text\textgreater{}\{\{nl\}\}\textless{}/View\textgreater{}\{\{nl\}\}	   ); \{\{nl\}\}\};\{\{nl\}\}const styles = StyleSheet.create(\{\{\{nl\}\}     container: \{ \{\{nl\}\}       flex: 1, \{\{nl\}\}       alignItems: 'center', \{\{nl\}\}       justifyContent: 'center'\}\}); \{\{nl\}\}export default App;`} \tn 
% Row Count 17 (+ 11)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{p{0.8 cm} p{0.8 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{useWindowDimensions Hook}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\{\{fa-chevron-up\}\} Used to get the dimensions of the device window.\{\{nl\}\} \{\{fa-chevron-up\}\} It returns an object containing the window's width and height.\{\{nl\}\} \{\{fa-chevron-up\}\}  Useful for creating responsive designs and layouts that adapt to different screen sizes.} \tn 
% Row Count 6 (+ 6)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{`import React from 'react';\{\{nl\}\}import \{\{nl\}\}\{View, StyleSheet, Text, useWindowDimensions\}\{\{nl\}\}from 'react-native';\{\{nl\}\}const App = () =\textgreater{} \{\{\{nl\}\}const \{height,width,scale,fontScale\}=useWindowDimensions();\{\{nl\}\}return (\{\{nl\}\}\textless{}View style=\{styles.container\}\textgreater{}\{\{nl\}\}  \textless{}Text\textgreater{}Window Dimension Data\textless{}/Text\textgreater{}\{\{nl\}\}  \textless{}Text\textgreater{}Height: \{height\}\textless{}/Text\textgreater{}\{\{nl\}\}  \textless{}Text\textgreater{}Width: \{width\}\textless{}/Text\textgreater{}\{\{nl\}\}  \textless{}Text\textgreater{}Font scale: \{fontScale\}\textless{}/Text\textgreater{}\{\{nl\}\}  \textless{}Text\textgreater{}Pixel ratio: \{scale\}\textless{}/Text\textgreater{}\{\{nl\}\}\textless{}/View\textgreater{}\{\{nl\}\}	   );\{\{nl\}\}\}; \{\{nl\}\}const styles = StyleSheet.create(\{\{nl\}\}     container: \{ \{\{nl\}\}       flex: 1,\{\{nl\}\}       justifyContent: 'center', \{\{nl\}\}       alignItems: 'center'\}, \{\{nl\}\}      \});\{\{nl\}\}export default App;`} \tn 
% Row Count 20 (+ 14)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{p{0.8 cm} p{0.8 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Button}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\{\{fa-chevron-up\}\} A basic button component that should render on any platform. \{\{nl\}\}	 \{\{fa-chevron-up\}\}	Supports a minimal level of customization. \{\{nl\}\}} \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{`import React from 'react';\{\{nl\}\}import \{ View, Button \} from 'react-native'; \{\{nl\}\}const ExampleButton = () =\textgreater{} \{ \{\{nl\}\}const handlePress = () =\textgreater{} \{console.log('Button pressed');\};\{\{nl\}\}return ( \{\{nl\}\}\textless{}View\textgreater{}\{\{nl\}\}\textless{}Button title="Click Me" onPress=\{handlePress\} color="\#841584"/\textgreater{} \{\{nl\}\}\textless{}/View\textgreater{}\{\{nl\}\}    );\{\{nl\}\}\}; \{\{nl\}\}export default ExampleButton;`} \tn 
% Row Count 11 (+ 7)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\{\{fa-exclamation-triangle\}\} {\bf{Required props:}}  {\bf{title}} and {\bf{onPress}}} \tn 
% Row Count 13 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{p{0.8 cm} p{0.8 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Pressable}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\{\{fa-chevron-up\}\} Used for users press interactions.\{\{nl\}\}	\{\{fa-chevron-up\}\}  Detects various stages of press interactions on any of its child components.\{\{nl\}\}\{\{fa-chevron-up\}\}  Highly customizable and flexible way to handle touch-based input.\{\{nl\}\}\{\{fa-chevron-up\}\}  Inherits all the styles of the View component.} \tn 
% Row Count 7 (+ 7)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{`import React from 'react';\{\{nl\}\}import \{ Pressable, Text \} from 'react-native';\{\{nl\}\}const ExamplePressable = () =\textgreater{} \{\{\{nl\}\}return (\{\{nl\}\}\textless{}Pressable onPress=\{() =\textgreater{} console.log('Pressed!')\} \{\{nl\}\}   style=\{(\{ pressed \}) =\textgreater{}  {[} \{\{nl\}\}    \{backgroundColor: pressed ? 'lightskyblue' : 'lightgray'\}, \{\{nl\}\}    \{padding: 10, alignItems: 'center' \}{]}\}\{\{nl\}\}    hitSlop=\{\{top: 10, bottom: 10, left: 10, right: 10 \}\} \{\{nl\}\}    pressRetentionOffset=\{\{top: 20, bottom: 20, left: 20\}\} \textgreater{}\{\{nl\}\}        \textless{}Text\textgreater{}Press Me\textless{}/Text\textgreater{}\{\{nl\}\}  \textless{}/Pressable\textgreater{}  \{\{nl\}\} ); \{\{nl\}\}\}; \{\{nl\}\}export default ExamplePressable;`} \tn 
% Row Count 19 (+ 12)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\{\{fa-exclamation-triangle\}\} {\bf{props:}}\{\{nl\}\}\{\{fa-arrow-circle-right\}\}  {\bf{onPressIn: }} method called when a press is activated.\{\{nl\}\}\{\{fa-arrow-circle-right\}\}   {\bf{onPressOut: }} method called when the press gesture is deactivated.\{\{nl\}\}\{\{fa-arrow-circle-right\}\}   {\bf{onLongPress: }} method called when user leaves their finger longer than 500 milliseconds before removing it, customize this time period using the delayLongPress prop.\{\{nl\}\}\{\{fa-arrow-circle-right\}\}   {\bf{pressed: }} state that refers to a boolean value provided to the style and children functions of Pressable,  to check if component is being pressed.\{\{nl\}\}\{\{fa-arrow-circle-right\}\}   {\bf{hitSlop: }} prop to increase the area where touch gestures are recognized. (extended interactive area  "HitRect").\{\{nl\}\}\{\{fa-arrow-circle-right\}\}   {\bf{pressRetentionOffset: }} prop to specify the area in which the touch can move while maintaining the press's active state. ("PressRect").} \tn 
% Row Count 38 (+ 19)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Navigation}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\{\{border=1\}\} {\bf{React Navigation}}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\{\{fa-chevron-up\}\} React Native does not come with built-in navigation capabilities.\{\{nl\}\} \{\{fa-long-arrow-right\}\} {\emph{React Navigation}} is the most popular third-party library. \{\{nl\}\}\{\{fa-chevron-up\}\}  Enable developers to implement various navigation patterns.\{\{nl\}\}	\{\{fa-chevron-up\}\} Provides a set of navigators, such as stack, tab, and drawer navigators.} \tn 
% Row Count 9 (+ 8)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Stack Navigator}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\{\{fa-chevron-up\}\} Allows transition between screens where each new screen is placed on top of a stack.} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\{\{bl=1\}\}\{\{fa-chevron-up\}\}   {\bf{NavigationContainer: }} Component container for your app's navigation structure.      \{\{nl\}\}   \{\{fa-caret-right\}\}  Manages the navigation tree and contains the navigation state.  \{\{nl\}\}   \{\{fa-caret-right\}\} Should be only used once in your app at the root.} \tn 
% Row Count 9 (+ 6)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\{\{bt=1\}\}\{\{br=1\}\}\{\{bb=1\}\}\{\{fa-chevron-up\}\}  {\bf{createNativeStackNavigator:}} Function that returns an object containing two properties.\{\{nl\}\}  \{\{fa-caret-right\}\} {\bf{Navigator:}} Takes Screen elements as its children to define the configuration for routes.\{\{nl\}\}{\bf{initialRouteName:}} prop for the Navigator specify what the initial route in a stack is.\{\{nl\}\} {\bf{screenOptions:}} prop to Navigator to specify common options.  \{\{nl\}\}  \{\{fa-caret-right\}\} {\bf{ Screen}}: Component takes 2 required props name and component.\{\{nl\}\}     {\bf{name:}} prop which refers to the name of the route. \{\{nl\}\} {\bf{component:}} prop which specifies the component to render for the route. \{\{nl\}\}{\bf{options:}} prop to Screen to specify screen-specific options.} \tn 
% Row Count 24 (+ 15)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\{\{bl=1\}\}\{\{fa-chevron-up\}\} {\bf{navigation and route props:}} are automatically provided to each screen component by the navigator.\{\{nl\}\} {\bf{ navigation:}} prop is available to all screen components and allows you to control navigation actions.\{\{nl\}\} {\bf{route:}} prop contains information about the route, including parameters passed to that screen. \{\{nl\}\}You can read the params through {\bf{route.params}} inside a screen. \{\{nl\}\} Params should contain the minimal data required to show a screen.} \tn 
% Row Count 34 (+ 10)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Stack Navigator (cont)}}  \tn
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\{\{nl\}\}\{\{bt=1\}\}`import * as React from 'react';\{\{nl\}\}import \{ View, Text, Button \} from 'react-native';\{\{nl\}\}import \{ createStackNavigator \} from '@react-navigation/stack';\{\{nl\}\}import \{ NavigationContainer \} from '@react-navigation/native';\{\{nl\}\}const HomeScreen = (\{ navigation \}) =\textgreater{} \{\{\{nl\}\}return ( \{\{nl\}\}\textless{}View style=\{\{ flex: 1, alignItems: 'center', justifyContent: 'center' \}\}\textgreater{}\{\{nl\}\} \textless{}Text\textgreater{}Home Screen\textless{}/Text\textgreater{}\{\{nl\}\}  \textless{}Button title="Go to Details" \{\{nl\}\}          onPress=\{() =\textgreater{} \seqsplit{navigation.navigate('Details'}, \{ someParam: 'Hello!' \})\} /\textgreater{}\{\{nl\}\}\textless{}/View\textgreater{} \{\{nl\}\}); \{\{nl\}\}\};  \{\{nl\}\}const DetailsScreen = (\{ route \}) =\textgreater{} \{\{\{nl\}\}return (\{\{nl\}\}\textless{}View style=\{\{ flex: 1, alignItems: 'center', justifyContent: 'center' \}\}\textgreater{}\{\{nl\}\} \textless{}Text\textgreater{}Details Screen\textless{}/Text\textgreater{}\{\{nl\}\} \textless{}Text\textgreater{}Parameter: \{route.params.someParam\}\textless{}/Text\textgreater{}\{\{nl\}\}\textless{}/View\textgreater{}\{\{nl\}\}); \{\{nl\}\}\}; \{\{nl\}\}const Stack = createStackNavigator();\{\{nl\}\}function App() \{\{\{nl\}\}return (\{\{nl\}\}\textless{}NavigationContainer\textgreater{}\{\{nl\}\}  \textless{}Stack.Navigator  initialRouteName="Home"\{\{nl\}\}	            screenOptions=\{\{ headerStyle: \{backgroundColor: '\#f4511e'\}\}\} \textgreater{}\{\{nl\}\}    \textless{}Stack.Screen name="Home" component=\{HomeScreen\} options=\{\{ title: 'My Home' \}\} /\textgreater{}\{\{nl\}\}    \textless{}Stack.Screen name="Details" component=\{DetailsScreen\} options=\{\{ title: 'Detail View' \}\} /\textgreater{}\{\{nl\}\}   \textless{}/Stack.Navigator\textgreater{} \{\{nl\}\}\textless{}/NavigationContainer\textgreater{}\{\{nl\}\});\{\{nl\}\}\} \{\{nl\}\}export default App;`} \tn 
% Row Count 28 (+ 28)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\{\{border=1\}\}\{\{fa-exclamation-triangle\}\} {\bf{Navigation actions:}} \{\{nl\}\}	 \{\{fa-chevron-circle-right\}\} {\bf{navigation.navigate('RouteName'):}} Pushes a new route to the native stack navigator if it's not already in the stack.\{\{nl\}\} \{\{fa-exclamation\}\} If you navigate to a route that is not defined in the navigator, it will print an error in the development mode and will not show errors in production mode.\{\{nl\}\}  \{\{fa-chevron-circle-right\}\} {\bf{navigation.push('RouteName'): }} Used to navigate to a screen in the stack navigator, adding a new route to the navigation regardless of the existing navigation history. \{\{nl\}\} \{\{fa-chevron-circle-right\}\} {\bf{navigation.goBack():}} Is used to programmatically go back to the previous screen. \{\{nl\}\}  \{\{fa-chevron-circle-right\}\} {\bf{navigation.popToTop():}} Used to go back to the first screen in the stack.} \tn 
% Row Count 45 (+ 17)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Drawer Navigator}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\{\{fa-chevron-up\}\} Renders a navigation drawer on the side of the screen which can be opened and closed via gestures.} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\{\{fa-chevron-up\}\} You cannot use the useNavigation hook inside the drawerContent since useNavigation is only available inside screens. You get a navigation prop for your drawerContent which you can use instead.} \tn 
% Row Count 8 (+ 5)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\{\{fa-chevron-up\}\}  {\bf{drawerPosition:}} prop typically set in the screenOptions to specify the position of the drawer, such as left or right.} \tn 
% Row Count 11 (+ 3)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\{\{fa-chevron-up\}\}  {\bf{drawerContent: }} prop in the Drawer Navigator that allows you to provide a custom component for the drawer's content.} \tn 
% Row Count 14 (+ 3)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\{\{fa-chevron-up\}\}  {\bf{CustomDrawerContent:}} refer to a user-defined React component that is passed to the drawerContent prop.} \tn 
% Row Count 17 (+ 3)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\{\{fa-chevron-up\}\} {\bf{DrawerItem:}} in a custom drawer allows for more flexibility and customization compared to defining routes directly in the navigator.} \tn 
% Row Count 21 (+ 4)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{`import * as React from 'react';\{\{nl\}\}import \{ View, Text\} from 'react-native';\{\{nl\}\}import \{ NavigationContainer \} from '@react-navigation/native';\{\{nl\}\}import \{ createDrawerNavigator \} from '@react-navigation/drawer';\{\{nl\}\}function CustomDrawerContent() \{\{\{nl\}\}return (\{\{nl\}\}\textless{}DrawerContentScrollView \{...props\}\textgreater{}\{\{nl\}\}    \textless{}Text\textgreater{} Welcome \textless{}/Text\textgreater{}\{\{nl\}\}    \textless{}DrawerItemList \{...props\} /\textgreater{} \{\{nl\}\}    \textless{}DrawerItem label="Help" onPress=\{() =\textgreater{} alert('Link to help')\} /\textgreater{}\{\{nl\}\}\textless{}/DrawerContentScrollView\textgreater{}\{\{nl\}\}	); \{\{nl\}\}\}\{\{nl\}\}function HomeScreen() \{   // ... \} \{\{nl\}\}function NotificationsScreen() \{   // ... \}\{\{nl\}\}const Drawer = createDrawerNavigator();\{\{nl\}\}function App() \{ \{\{nl\}\}return (\{\{nl\}\}\textless{}NavigationContainer\textgreater{} \{\{nl\}\}  \textless{}Drawer.Navigator  initialRouteName="Home"\{\{nl\}\}                     screenOptions=\{\{drawerPosition: 'left'\}\}\{\{nl\}\}	             drawerContent=\{props =\textgreater{} \textless{}CustomDrawerContent \{...props\} /\textgreater{}\} \textgreater{} \{\{nl\}\}     \textless{}Drawer.Screen name="Home" component=\{HomeScreen\} /\textgreater{}\{\{nl\}\}     \textless{}Drawer.Screen name="Notifications" component=\{NotificationsScreen\} /\textgreater{}       \textless{}/Drawer.Navigator\textgreater{}\{\{nl\}\}\textless{}/NavigationContainer\textgreater{}\{\{nl\}\}	   );\{\{nl\}\}\} \{\{nl\}\}export default App;`} \tn 
% Row Count 45 (+ 24)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Drawer Navigator (cont)}}  \tn
% Row 7
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\{\{border=1\}\}\{\{fa-exclamation-triangle\}\} The following are also available: \{\{nl\}\}\{\{fa-chevron-circle-right\}\} {\bf{navigation. jumpTo('RouteName'):}} go to a specific screen in the drawer navigator. \{\{nl\}\}\{\{fa-chevron-circle-right\}\} {\bf{navigation. openDrawer:}}  open the drawer. \{\{nl\}\}\{\{fa-chevron-circle-right\}\} {\bf{navigation.closeDrawer: }}  close the drawer.\{\{nl\}\} \{\{fa-chevron-circle-right\}\} {\bf{navigation.toggleDrawer:}} toggle the state, ie. switch from closed to open and vice versa.} \tn 
% Row Count 10 (+ 10)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Tab Navigator}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\{\{fa-chevron-up\}\} Common style of navigation.} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\{\{fa-chevron-up\}\} Can be tabs on the bottom of the screen or on the top below the header.} \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\{\{fa-chevron-up\}\} {\bf{Bottom tab navigation:}} A simple tab bar on the bottom of the screen that lets you switch between different routes.} \tn 
% Row Count 6 (+ 3)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\{\{fa-chevron-up\}\} Routes are lazily initialized -{}- their screen components are not mounted until they are first focused.} \tn 
% Row Count 9 (+ 3)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\{\{fa-chevron-up\}\} You cannot use the useNavigation hook inside the tabBar since useNavigation is only available inside screens. You get a {\bf{navigation prop}} for your tabBar which you can use instead.} \tn 
% Row Count 13 (+ 4)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\{\{nl\}\}`import React from 'react';\{\{nl\}\}import \{ View, Text \} from 'react-native';\{\{nl\}\}import \{ NavigationContainer \} from '@react-navigation/native';\{\{nl\}\}import \{ createBottomTabNavigator \} from '@react-navigation/bottom-tabs';\{\{nl\}\}import Ionicons from \seqsplit{'react-native-vector-icons/Ionicons';}  \{\{nl\}\}const HomeScreen = () =\textgreater{} \{\{\{nl\}\}return(\{\{nl\}\}\textless{}View\textgreater{}\{\{nl\}\}  \textless{}Text\textgreater{}Home Screen\textless{}/Text\textgreater{}\{\{nl\}\}\textless{}/View\textgreater{}\{\{nl\}\}  )\{\{nl\}\}\}; \{\{nl\}\}const SettingsScreen = () =\textgreater{} \{ \{\{nl\}\}return( \{\{nl\}\}  \textless{}View\textgreater{}\{\{nl\}\}  \textless{}Text\textgreater{}Settings Screen\textless{}/Text\textgreater{}\textless{}/View\textgreater{}\{\{nl\}\}  ) \{\{nl\}\}\}  \{\{nl\}\}const Tab = createBottomTabNavigator();\{\{nl\}\}function App() \{\{\{nl\}\}return (\{\{nl\}\}\textless{}NavigationContainer\textgreater{}\{\{nl\}\} \textless{}Tab.Navigator  screenOptions=\{(\{ route \}) =\textgreater{} (\{ \{\{nl\}\}    tabBarIcon: (\{ focused, color, size \}) =\textgreater{} \{ \{\{nl\}\}     let iconName;\{\{nl\}\}     if (route.name === 'Home') \{ \{\{nl\}\}     iconName = focused ? 'ios-home' : 'ios-home-outline';\{\{nl\}\}     \} else if (route.name === 'Settings') \{ \{\{nl\}\}     iconName = focused ? 'ios-settings' : 'ios-settings-outline'; \}\{\{nl\}\}     return \textless{}Ionicons name=\{iconName\} size=\{size\} color=\{color\} /\textgreater{}; \}, \})\} \textgreater{}\{\{nl\}\}   \textless{}Tab.Screen name="Home" component=\{HomeScreen\} /\textgreater{}\{\{nl\}\}   \textless{}Tab.Screen name="Settings" component=\{SettingsScreen\} /\textgreater{} \{\{nl\}\} \textless{}/Tab.Navigator\textgreater{}\{\{nl\}\}\textless{}/NavigationContainer\textgreater{}\{\{nl\}\}	   ); \{\{nl\}\}\} \{\{nl\}\}export default App;`} \tn 
% Row Count 40 (+ 27)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Tab Navigator (cont)}}  \tn
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\{\{border=1\}\}\{\{fa-exclamation-triangle\}\} The following are also available: \{\{nl\}\} \{\{fa-chevron-circle-right\}\} {\bf{navigation.jumpTo('RouteName'):}} is a method that directly switches to a specified screen within the tab navigator.} \tn 
% Row Count 5 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{View}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\{\{fa-chevron-up\}\}	A container that supports layout with flexbox, style, some touch handling, and accessibility controls.\{\{nl\}\}\{\{fa-chevron-up\}\}	 Like a \textless{}div\textgreater{} in HTML. \{\{nl\}\}\{\{fa-chevron-up\}\}	Designed to be nested inside other views and can have 0 to many children of any type.} \tn 
% Row Count 6 (+ 6)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{`import React from 'react';\{\{nl\}\}import \{ View, Text \} from 'react-native';  \{\{nl\}\}const ExampleView = () =\textgreater{} \{\{\{nl\}\}return ( \{\{nl\}\}\textless{}View style=\{\{ flex: 1, justifyContent: 'center', alignItems: 'center' \}\}\textgreater{} \{\{nl\}\}   \textless{}Text\textgreater{}Hello from View!\textless{}/Text\textgreater{} \{\{nl\}\}\textless{}/View\textgreater{}  \{\{nl\}\}	  ); \{\{nl\}\}	\};  \{\{nl\}\}export default ExampleView;`} \tn 
% Row Count 13 (+ 7)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{p{0.8 cm} p{0.8 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Text}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\{\{fa-chevron-up\}\} A component for displaying text.\{\{nl\}\}	 \{\{fa-chevron-up\}\} Supports nesting, styling, and touch handling.\{\{nl\}\} \{\{fa-chevron-up\}\}	Everything inside it is no longer using the Flexbox layout but using text layout. \{\{nl\}\}\{\{fa-chevron-up\}\} 	 Elements inside it are no longer rectangles,  but wrap at the end of the line.} \tn 
% Row Count 7 (+ 7)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{`import React from 'react';\{\{nl\}\}import \{ Text \} from 'react-native';\{\{nl\}\}const ExampleText = () =\textgreater{} \{  \{\{nl\}\}return ( \{\{nl\}\}\textless{}Text style=\{\{ fontSize: 18, color: 'blue' \}\}\textgreater{} \{\{nl\}\}     Hello, this is a Text component!     \{\{nl\}\}\textless{}/Text\textgreater{}  \{\{nl\}\}            ); \{\{nl\}\}          \};\{\{nl\}\}export default ExampleText;`} \tn 
% Row Count 14 (+ 7)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\{\{fa-exclamation-triangle\}\} You must wrap all the text nodes inside of a \textless{}Text\textgreater{} component} \tn 
% Row Count 16 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{\{\{fa-arrow-circle-right\}\}  {\bf{Will raise exception}} \{\{nl\}\}`\textless{}View\textgreater{} Some text \textless{}/View\textgreater{}`} \tn 
% Row Count 18 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\{\{fa-arrow-circle-right\}\}  {\bf{Correct}} \{\{nl\}\}`\textless{}View\textgreater{}\{\{nl\}\}\textless{}Text\textgreater{} Some text \textless{}/Text\textgreater{}\{\{nl\}\}\textless{}/View\textgreater{}`} \tn 
% Row Count 20 (+ 2)
% Row 5
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{\{\{fa-arrow-circle-right\}\}  {\bf{Text container:}} Text will be inline if the space allow it,  otherwise, text will flow as if it was one.\{\{nl\}\}`\textless{}Text\textgreater{}\{\{nl\}\}\textless{}Text\textgreater{}First part and \textless{}/Text\textgreater{}\{\{nl\}\}\textless{}Text\textgreater{}second part\textless{}/Text\textgreater{}\{\{nl\}\}\textless{}/Text\textgreater{}`\{\{nl\}\} First part and second part} \tn 
% Row Count 26 (+ 6)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\{\{fa-arrow-circle-right\}\} {\bf{View container:}} \{\{nl\}\} Each text is its own block, otherwise, the text will flow in its own block.\{\{nl\}\} `\textless{}View\textgreater{}\{\{nl\}\}\textless{}Text\textgreater{}First part and \textless{}/Text\textgreater{}\{\{nl\}\}\textless{}Text\textgreater{}second part\textless{}/Text\textgreater{}\{\{nl\}\}\textless{}/View\textgreater{}`\{\{nl\}\} First part and\{\{nl\}\} second part} \tn 
% Row Count 32 (+ 6)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{p{0.8 cm} p{0.8 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{ScrollView}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\{\{fa-chevron-up\}\}  Creates a scrollable area when content exceeds screen's physical limits.\{\{nl\}\}\{\{fa-chevron-up\}\} Can contain multiple components and views. \{\{nl\}\}\{\{fa-chevron-up\}\} Can be scrolled vertically or horizontally. \{\{nl\}\}\{\{fa-chevron-up\}\}	Must have a bounded height in order to work. \{\{nl\}\}\{\{fa-chevron-up\}\}	Renders all its react child components at once.} \tn 
% Row Count 8 (+ 8)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{`import React from 'react';\{\{nl\}\}import \{ ScrollView, Text, View \} from 'react-native';\{\{nl\}\}const ExampleScrollView = () =\textgreater{} \{ \{\{nl\}\}return (   \{\{nl\}\}\textless{}ScrollView indicatorStyle=\{"white"\} \{\{nl\}\}            style=\{\{ flex: 1 \}\} \{\{nl\}\}            horizontal=\{true\}\textgreater{} \{/{\emph{ horizontal scrolling }}/\}  \{\{nl\}\}  \textless{}Text\textgreater{}Item 1\textless{}/Text\textgreater{} \{/{\emph{ Repeat more components for more items }}/\}    \{\{nl\}\}\textless{}/ScrollView\textgreater{}  \{\{nl\}\}   );  \{\{nl\}\} \};   \{\{nl\}\}export default ExampleScrollView;`} \tn 
% Row Count 18 (+ 10)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\{\{fa-exclamation-triangle\}\} {\bf{Performance Issues  with Large Lists:}} Slow rendering times for large lists. \{\{nl\}\}	\{\{fa-exclamation-triangle\}\} {\bf{Memory Consumption:}} Consume a significant amount of memory with large lists or complex item views.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{p{0.8 cm} p{0.8 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{FlatList}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\{\{fa-chevron-up\}\} Used to efficiently render long lists.\{\{nl\}\}\{\{fa-chevron-up\}\} Offers features like pull-to-refresh, infinite scrolling, and easy item separators.\{\{nl\}\}\{\{fa-chevron-up\}\} {\bf{Lazy rendering:}} renders items only when they appear on the screen and are removed when the user scrolls away from them.\{\{nl\}\}\{\{fa-chevron-up\}\}  Internal state is not preserved when content scrolls out of the render window.\{\{nl\}\}	\{\{fa-chevron-up\}\} Inherits the props of the ScrollView component.} \tn 
% Row Count 10 (+ 10)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{`import React from 'react';\{\{nl\}\}import \{ FlatList, Text, View \} from 'react-native';\{\{nl\}\}const ExampleFlatList = () =\textgreater{} \{\{\{nl\}\}const data = {[}\{ id: '1', name: 'Item 1' \}, \{ id: '2', name: 'Item 2' \}{]};\{\{nl\}\}return (\{\{nl\}\}    \textless{}FlatList data=\{data\}\{\{nl\}\}	      renderItem=\{(\{ item \}) =\textgreater{} \textless{}Text\textgreater{}\{item.name\}\textless{}/Text\textgreater{}\}\{\{nl\}\}              keyExtractor=\{item =\textgreater{} item.id\} /\textgreater{}   \{\{nl\}\}	); \{\{nl\}\}\};  \{\{nl\}\}export default ExampleFlatList;`} \tn 
% Row Count 19 (+ 9)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\{\{fa-exclamation-triangle\}\} {\bf{Two required props:}} \{\{nl\}\}\{\{fa-chevron-circle-right\}\}{\bf{data:}} accepts a plain array that contains the list of items to display. \{\{nl\}\}\{\{fa-chevron-circle-right\}\} {\bf{renderItem:}} a function that goes over each item in the array and renders it into the list. \{\{nl\}\}{\bf{keyExtractor}}: It instructs the list to use the id of each item as React keys  instead of the default key property.\{\{nl\}\}} \tn 
% Row Count 28 (+ 9)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{p{0.8 cm} p{0.8 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{SectionList}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\{\{fa-chevron-up\}\} Used for rendering large lists with section headers. \{\{nl\}\}\{\{fa-chevron-up\}\} Uses {\bf{lazy rendering}} to achieve faster rendering.\{\{nl\}\}	\{\{fa-chevron-up\}\} Inherits the props of the ScrollView component. \{\{nl\}\}\{\{fa-chevron-up\}\}  Internal state is not preserved when content scrolls out of the render window.\{\{nl\}\}	\{\{fa-chevron-up\}\} Provides support for section headers and section separators.} \tn 
% Row Count 9 (+ 9)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{`import React from 'react';\{\{nl\}\}import \{ SectionList, Text, View \} from 'react-native';\{\{nl\}\}const ExampleSectionList = () =\textgreater{} \{\{\{nl\}\}const sections = {[} \{ title: 'Section 1', data: {[}'Item 1', 'Item 2'{]} \},\{\{nl\}\}                   \{ title: 'Section 2', data: {[}'Item 3', 'Item 4'{]} \}{]};\{\{nl\}\}return (\{\{nl\}\}\textless{}SectionList \{\{nl\}\}       sections=\{sections\}    \{\{nl\}\}       renderItem=\{(\{ item \}) =\textgreater{} \textless{}Text\textgreater{}\{item\}\textless{}/Text\textgreater{}\} \{\{nl\}\}       renderSectionHeader=\{(\{ section \}) =\textgreater{} \textless{}Text\textgreater{}\{section.title\}\textless{}/Text\textgreater{}\} \{\{nl\}\}       keyExtractor=\{(item, index) =\textgreater{} item + index\} /\textgreater{}   \{\{nl\}\});\{\{nl\}\}\}; \{\{nl\}\}export default ExampleSectionList;`} \tn 
% Row Count 22 (+ 13)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\{\{fa-exclamation-triangle\}\} {\bf{Two required props:}} \{\{nl\}\}\{\{fa-chevron-circle-right\}\}{\bf{sections : }}accepts the array that contains the list of items to display, akin to the data prop in FlatList. \{\{nl\}\}\{\{fa-chevron-circle-right\}\}{\bf{renderItem:}} method which acts as the default renderer for every item in each section.\{\{nl\}\} {\bf{renderSectionHeader:}} prop, render each section's header.} \tn 
% Row Count 30 (+ 8)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{p{0.8 cm} p{0.8 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{TextInput}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\{\{fa-chevron-up\}\} Used for inputting text into the app via a keyboard.} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{`import React, \{ useState \} from 'react';\{\{nl\}\}import \{ TextInput \} from 'react-native';\{\{nl\}\}const ExampleTextInput = () =\textgreater{} \{\{\{nl\}\}const {[}inputValue, setInputValue{]} = useState('');\{\{nl\}\}return ( \{\{nl\}\}\textless{}TextInput value=\{inputValue\} \{\{nl\}\}	   onChangeText=\{text =\textgreater{} setInputValue(text)\}  \{\{nl\}\}           placeholder="Enter text here"\{\{nl\}\}	   style=\{\{ height: 40, borderWidth: 1, margin: 10 \}\} /\textgreater{}\{\{nl\}\}	);\{\{nl\}\}\};  \{\{nl\}\}export default ExampleTextInput;`} \tn 
% Row Count 12 (+ 10)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{p{0.8 cm} p{0.8 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Image}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\{\{fa-chevron-up\}\} Used for displaying different types of images,\{\{nl\}\}	 network images, static resources, temporary local images,\{\{nl\}\}	 and images from local disk, such as the camera roll.\{\{nl\}\}	 \{\{fa-chevron-up\}\} You can also add style to an image.} \tn 
% Row Count 5 (+ 5)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{`import React from 'react';\{\{nl\}\}import \{ Image \} from 'react-native';\{\{nl\}\}const ExampleImage = () =\textgreater{} \{\{\{nl\}\}return ( \{\{nl\}\}  \textless{}\textgreater{}\{\{nl\}\}\{/{\emph{ Remote Image }}/\}\{\{nl\}\}\textless{}Image source=\{\{ uri: \seqsplit{'https://example.com/image.jpg'} \}\}\{\{nl\}\}       style=\{\{ width: 200, height: 200 \}\} \{\{nl\}\}       resizeMode="contain" /\textgreater{}\{\{nl\}\}\{/{\emph{ Local Image  }}/\}\{\{nl\}\}\textless{}Image source=\{require('./path-to-your-local-image.png')\}\{\{nl\}\}       style=\{\{ width: 200, height: 200 \}\}\{\{nl\}\}       resizeMode="cover" /\textgreater{}\{\{nl\}\}   \textless{}/\textgreater{}\{\{nl\}\}   );\{\{nl\}\}\}; \{\{nl\}\}export default ExampleImage;`} \tn 
% Row Count 16 (+ 11)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\{\{fa-file-image-o\}\}{\bf{resizeMode :}} \{\{nl\}\}\{\{fa-chevron-circle-right\}\}{\bf{'cover':}} Scales image to fill the container, maintaining its aspect ratio. \{\{nl\}\}\{\{fa-chevron-circle-right\}\}{\bf{'contain':}} Scales image to fit inside the container, maintain the image's aspect ratio ensuring the entire image is visible.\{\{nl\}\}\{\{fa-chevron-circle-right\}\}{\bf{'stretch':}} Stretches image to fill the container, possibly distorting the aspect ratio.\{\{nl\}\}\{\{fa-chevron-circle-right\}\}{\bf{'center':}} Centers  image in the container without scaling. 'repeat': Repeats the image to cover the container.} \tn 
% Row Count 28 (+ 12)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\{\{fa-exclamation-triangle\}\} For network and data images, you must specify the dimensions of the image.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}


% That's all folks
\end{multicols*}

\end{document}