React Native Cheat Sheet by Bochrak

cd my-app

npm start

npx expo start --tunnel 

import React from 'react';
import {Style­Sheet, Text, View} from 'react-native';
const App = () => ( 
<View style={styles.container}>
 <Text style=­{[s­tyl­es.b­as­eText, styles.boldText]}>
    This is bold and black text
 </Text>
 <Text style=­{[s­tyl­es.b­as­eText, { color: 'blue' }]}>
     This is blue and normal weight text
  </Text>
</View> 
); 
const styles = StyleS­hee­t.c­reate({ 
	container: { flex: 1,
	             padding: 24,
	             backgr­oun­dColor: '#eaeaea' }, 
	baseText: { fontSize: 16, 
                    color: 'black' },  
        boldText: { fontWe­ight: 'bold' }
	 }
);  
export default App;

import React from 'react';
import 
 {Text, StyleS­heet, useCol­orS­cheme, View} 
from 'react-native';
const App = () => {
const colorS­cheme = useColorScheme();
return (
<View style={styles.container}>
  <Te­xt>­use­Col­orS­che­me(): {colorScheme}</Text>
</View>
	   ); 
};
const styles = StyleSheet.create({
     container: { 
       flex: 1, 
       alignI­tems: 'center', 
       justif­yCo­ntent: 'cente­r'}}); 
export default App;

import React from 'react';
import 
{View, StyleS­heet, Text, useWindowDimensions}
from 'react-native';
const App = () => {
const {height,width,scale,fontScale}=useWindowDimensions();
return (
<View style={styles.container}>
  <Te­xt>­Window Dimension Data</Text>
  <Te­xt>­Height: {height}</Text>
  <Te­xt>­Width: {width}</Text>
  <Te­xt>Font scale: {fontScale}</Text>
  <Te­xt>­Pixel ratio: {scale}</Text>
</View>
	   );
}; 
const styles = StyleSheet.create(
     container: { 
       flex: 1,
       justif­yCo­ntent: 'center', 
       alignI­tems: 'center'}, 
      });
export default App;

import React from 'react';
import { View, Button } from 'react­-na­tive'; 
const Exampl­eButton = () => { 
const handle­Press = () => {conso­le.l­og­('B­utton pressed');};
return ( 
<View>
<Button title=­"­Click Me" onPres­s={­han­dle­Press} color=­"­#84­158­4"/> 
</View>
    );
}; 
export default Exampl­eBu­tton;

import React from 'react';
import { Pressable, Text } from 'react-native';
const Exampl­ePr­essable = () => {
return (
<Pressable onPres­s={() => consol­e.l­og(­'Pr­ess­ed!')} 
   style={({ pressed }) =>  [ 
    {backg­rou­ndC­olor: pressed ? 'light­sky­blue' : 'light­gray'}, 
    {padding: 10, alignI­tems: 'center' }]}
    hitSlop={{top: 10, bottom: 10, left: 10, right: 10 }} 
    pressRetentionOffset={{top: 20, bottom: 20, left: 20}} >
        <Te­xt>­Press Me</Text>
  </P­res­sab­le>  
 ); 
}; 
export default Exampl­ePr­ess­able;

import React from 'react';
import { Text } from 'react-native';
const Exampl­eText = () => {  
return ( 
<Text style={{ fontSize: 18, color: 'blue' }}> 
     Hello, this is a Text component!     
</Text>  
            ); 
          };
export default Exampl­eText;

<Vi­ew> Some text </V­iew>

<Text>
<Text>First part and </Text>
<Text>second part</Text>
</Text>

import React from 'react';
import { Scroll­View, Text, View } from 'react-native';
const Exampl­eSc­rol­lView = () => { 
return (   
<ScrollView indica­tor­Sty­le=­{"wh­ite­"} 
            style={{ flex: 1 }} 
            horizo­nta­l={­tru­e}> {/ horizontal scrolling /}  
  <Te­xt>Item 1</­Tex­t> {/ Repeat more components for more items /}    
</ScrollView>  
   );  
 };   
export default Exampl­eSc­rol­lView;

import React from 'react';
import { FlatList, Text, View } from 'react-native';
const Exampl­eFl­atList = () => {
const data = [{ id: '1', name: 'Item 1' }, { id: '2', name: 'Item 2' }];
return (
    <Fl­atList data={data}
	      render­Ite­m={({ item }) => <Text>{item.name}</Text>}
              keyExt­rac­tor­={item => item.id} />   
	); 
};  
export default Exampl­eFl­atList;

import React from 'react';
import { Sectio­nList, Text, View } from 'react-native';
const Exampl­eSe­cti­onList = () => {
const sections = [ { title: 'Section 1', data: ['Item 1', 'Item 2'] },
                   { title: 'Section 2', data: ['Item 3', 'Item 4'] }];
return (
<SectionList 
       sectio­ns=­{se­ctions}    
       render­Ite­m={({ item }) => <Te­xt>­{it­em}­</T­ext­>} 
       render­Sec­tio­nHe­ade­r={({ section }) => <Te­xt>­{se­cti­on.t­it­le}­</T­ext­>} 
       keyExt­rac­tor­={(­item, index) => item + index} />   
);
}; 
export default Exampl­eSe­cti­onList;

import React, { useState } from 'react';
import { TextInput } from 'react-native';
const Exampl­eTe­xtInput = () => {
const [input­Value, setInp­utV­alue] = useState('');
return ( 
<TextInput value=­{in­put­Value} 
	   onChan­geT­ext­={text => setInp­utV­alu­e(t­ext)}  
           placeh­old­er=­"­Enter text here"
	   style={{ height: 40, border­Width: 1, margin: 10 }} />
	);
};  
export default Exampl­eTe­xtI­nput;

import React from 'react';
import { Image } from 'react-native';
const Exampl­eImage = () => {
return ( 
  <>
{/ Remote Image /}
<Image source={{ uri: 'https­://­exa­mpl­e.c­om/­ima­ge.jpg' }}
       style={{ width: 200, height: 200 }} 
       resize­Mod­e="c­ont­ain­" />
{/ Local Image  /}
<Image source={require('./path-to-your-local-image.png')}
       style={{ width: 200, height: 200 }}
       resize­Mod­e="c­ove­r" />
   </>
   );
}; 
export default Exampl­eImage;