\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{Elieder}
\pdfinfo{
  /Title (react-native-basics.pdf)
  /Creator (Cheatography)
  /Author (Elieder)
  /Subject (React Native Basics 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}{1D6070}
\definecolor{LightBackground}{HTML}{F0F5F6}
\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 Basics Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Elieder} via \textcolor{DarkBackground}{\uline{cheatography.com/131560/cs/39345/}}}
\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}Elieder \\
  \uline{cheatography.com/elieder} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Not Yet Published.\\
   Updated 30th June, 2023.\\
   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{1.824 cm} x{2.888 cm} x{2.888 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Basic Components}}  \tn
% Row 0
\SetRowColor{LightBackground}
\{\{width=29\}\}{\bf{Component}} & {\bf{Description}} & \{\{width=35\}\}{\bf{Props}} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\textless{}Button\textgreater{} & Simple button. Don't forget it's title. & title {[}str{]}\{\{nl\}\}onPress {[}func{]}\{\{nl\}\}color {[}str{]} \tn 
% Row Count 7 (+ 4)
% Row 2
\SetRowColor{LightBackground}
\textless{}Text\textgreater{} & Displays text. &  \tn 
% Row Count 8 (+ 1)
% Row 3
\SetRowColor{white}
\textless{}TextInput\textgreater{} & Allows users to input text using keyboard. & onChange {[}func{]}\{\{nl\}\}value {[}str{]}\{\{nl\}\}placeholder {[}str{]}\{\{nl\}\}maxLength {[}num{]}\{\{nl\}\}multiline {[}bool{]} \tn 
% Row Count 15 (+ 7)
% Row 4
\SetRowColor{LightBackground}
\textless{}Image\textgreater{} & Displays image. & resizeMode {[}str{]}\{\{nl\}\}source {[}str{]} \tn 
% Row Count 18 (+ 3)
% Row 5
\SetRowColor{white}
\textless{}ImageBackground\textgreater{} & Displays an image in background (under all its childs elements). Same props of \textless{}Image\textgreater{}. &  \tn 
% Row Count 24 (+ 6)
% Row 6
\SetRowColor{LightBackground}
\textless{}View\textgreater{} & Container to create layouts. Think it like a \textless{}div\textgreater{} in HTML. &  \tn 
% Row Count 28 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{8.4cm}}{PS: Some components doesn't need to have a closing tag, you can close it using `\textless{}Component /\textgreater{}`. Not all props are listed here; the 'style' prop for example, is common to almost all components.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.04 cm} x{4.96 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{List Components}}  \tn
% Row 0
\SetRowColor{LightBackground}
\{\{width=29\}\}{\bf{Component}} & {\bf{Description}} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\textless{}ScrollView\textgreater{} & Makes a list of components scrollable. Renders all components at once (performance may drops on very long lists). \tn 
% Row Count 7 (+ 5)
% Row 2
\SetRowColor{LightBackground}
\textless{}FlatList\textgreater{} & Makes a list of scrollable components. Render components lazily. \tn 
% Row Count 10 (+ 3)
% Row 3
\SetRowColor{white}
\textless{}SectionList\textgreater{} & Like a FlatList, but you can make sections. \tn 
% Row Count 12 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Example displaying lists}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\{\{lang-javascript\}\}const dataArray = {[} \newline  \{id: 1, text: 'First' \}, \newline  \{id: 2, text: 'Second' \}, \newline  \{id: 3, text: 'Third' \}, {]}; \newline  \newline \textless{}ScrollView\textgreater{} \{ \newline  dataArray.map((i) =\textgreater{} \{ \newline   return ( \textless{}View key=\{i.id\}\textgreater{} \textless{}Text\textgreater{}\{i.text\}\textless{}/Text\textgreater{} \textless{}/View\textgreater{} ) \newline  \}) \newline \} \textless{}/ScrollView\textgreater{} \newline  \newline \textless{}FlatList \newline  // SectionList uses sections = \{ dataArray \} \newline  data = \{ dataArray \} \newline  keyExtractor = \{ (item, index) =\textgreater{} index.toString() \} \newline  // SectionList uses renderSectionHeader too \newline  renderItem = \{ (\{item\}) =\textgreater{} \textless{}Text\textgreater{}\{item.text\}\textless{}/Text\textgreater{} \} \newline  refreshControl = \{ \newline   \textless{}RefreshControl refreshing=\{isRefreshing\} onRefresh=\{handleFunc\} /\textgreater{} \newline  \} \newline /\textgreater{}} \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}{useState Hook}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{const myApp = () =\textgreater{} \{ \newline     const {[}myName, setMyName{]} = useState("foo"); \newline     setMyName(myName + " bar"); // myName changed to "foo bar" \newline     // now you can use it like \textless{}Text\textgreater{}\{myName\}\textless{}/Text\textgreater{} \newline     // use whatever you like (string, number, object, boolean, etc)  \newline     const {[}page, setPage{]} = useState(\{id: 1, title:"Home"\}); \newline \}} \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}{useEffect Hook}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{// Second param is dependencies array. Leave it empty to make  \newline // it call only once. If you ommit this parameter, the hook will run  \newline // every re-render of the component. \newline useEffect(() =\textgreater{} \{ \newline     // Do stuff \newline     conn.login(); \newline     return () =\textgreater{} \{ \newline         // Runs whenever this enviroment is deleted. \newline         conn.logout(); \newline     \} \newline \}, {[}{]}); // {[}myName{]} will make it run every time myName changes.} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.12 cm} x{4.88 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Touchable Components (custom buttons)}}  \tn
% Row 0
\SetRowColor{LightBackground}
\{\{width=45\}\}{\bf{Component}} & {\bf{Description}} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\textless{}TouchableWithoutFeedback\textgreater{} & Makes its childs touchable (pressable), but without any visual feedback. \tn 
% Row Count 5 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\textless{}TouchableHighlight\textgreater{} & Same as above, but decreases opacity to show an underlay color. Props: {\emph{activeOpacity {[}num{]}}}, {\emph{underlayColor {[}str{]}}}. \tn 
% Row Count 10 (+ 5)
% Row 3
\SetRowColor{white}
\textless{}TouchableOpacity\textgreater{} & Opacity decreases and can be controlled by an {\emph{\textless{}Animated.View\textgreater{}}}. \tn 
% Row Count 13 (+ 3)
% Row 4
\SetRowColor{LightBackground}
\textless{}Pressable\textgreater{} & Makes its child pressable, and handle many stages of press interactions. \tn 
% Row Count 16 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Use onPress {[}func{]} in any of these to handle interactions. \textless{}Pressable\textgreater{} can handle too: {\emph{onHoverIn}}, {\emph{onHoverOut}}, {\emph{onLongPress}}, {\emph{onPressIn}} and {\emph{onPressOut}}.}  \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}{Basic Component Structure}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\{\{lang-javascript\}\}// Importing basic components \newline import React, \{useState, useEffect\} from 'react'; \newline import \{ View, Text, StyleSheet \} from 'react-native'; \newline import MyCustomComponent from \seqsplit{'./MyFolder/CustomComponentFile';} \newline  \newline const myApp = () =\textgreater{} \{ \newline     return ( \newline         \textless{}View style=\{styles.myViewStyle\}\textgreater{} \newline             \textless{}Text style=\{styles.myText\}\textgreater{}Hello World\textless{}/Text\textgreater{} \newline         \textless{}/View\textgreater{} \newline     ); \newline \}; \newline  \newline const styles = StyleSheet.create(\{ \newline     body: \{ \newline         flex: 1, \newline         alignItems: 'center', \newline         justifyContent: 'center', \newline     \}, \newline     myText: \{ \newline         color: '\#aaaaff', \newline         fontSize: 20, \newline     \}, \newline \}); \newline  \newline export default myApp;} \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}{Basic StyleSheet Syntax}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{import \{ StyleSheet \} from 'react-native'; // don't forget to include \newline  \newline const styles = StyleSheet.create(\{ \newline  myText: \{ \newline   color: '\#00f', \newline   fontFamily: 'Helvetica', \newline   fontStyle: 'italic', \newline   fontWeight: 'bold', \newline   letterSpacing: 4, \newline   textAlign: {[}'center', 'auto', 'left', 'right', 'justify'(only iOS){]}, \newline   textTransform: {[}'uppercase', 'lowercase', 'capitalize'{]}, \newline   // see too: textShadow{[}Color|Offset|Radius{]} \newline   // see textDecoration{[}Line|Color|Style{]} \newline  \}, \newline  myView: \{ \newline   backgroundColor: '\#0f0', \newline   flex: 1, \newline   flexDirection: 'column',   // row, {[}row|column{]}-reverse \newline   margin: 10,                 \newline   padding: 10,                  \newline   width: 50,                 // (see {[}min|max{]}Width) \newline   height: "90\%",             // (see {[}min|max{]}Height) \newline   alignItems: {[}'center', 'flex-{[}start|end{]}', 'stretch', 'baseline'{]}, \newline   // flex-{[}start|end{]}, space-{[}between|around|evenly{]} \newline   justifyContent: 'center',   \newline   overflow: {[}'hidden', 'visible', 'scroll'{]}, \newline   position: {[}'absolute', 'relative'{]}, \newline   top: 150,       // used with position: 'absolute'  \newline   right: "100",   // used with position: 'absolute'           \newline  \}, \newline  myImage: \{ \newline   opacity: 90, \newline   resizeMode: {[}'stretch', 'cover', 'contain', 'repeat', 'center'{]}, \newline   // see too: border{[}Color|Radius{]}, \newline  \} \newline \});} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{PS: not all properties are listed here, only the most important. Take only one value from styles with arrays.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}