<aside> 💡

To get the OS of the device you are using:

Platform.OS // return either "ios" or "android"

</aside>

These components are to be imported from “react-native”

import {View, Text, Image, ScrollView, TextInput} from "react-native";

Usage:

import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, ScrollView, Text, View, TextInput } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1, // is for the container to occupy whole Screen (avbl space)
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Images

<Image source={{uri: '<https://reactjs.org/logo-og.png>'}}
       style={{width: 400, height: 400}} />

// if in assets
<Image source={require('./my-icon.png')} />;

• Usage

https://reactnative.dev/docs/images

ImageBackground

<ImageBackground source={{uri: '<https://reactjs.org/logo-og.png>'}}
       style={{width: 400, height: 400}} >
       
</ImageBackground>

// if in assets
<ImageBackground source={require('./my-icon.png')}>

</ImageBackground>

ScrollView

ScrollView require a bounded height to function properly.

<ScrollView>

</ScrollView>

Button

import { Button } from 'react-native';
// in Return of the Component
<Button title='Press this' color="midnightblue" onPress={() => {
  alert('Button Pressed')
}} />
// Disabled
<Button title='Disabled' disabled color="midnightblue" onPress={() => {
  alert('Button Pressed')
}} />

Pressable

import { Pressable } from 'react-native';

<Pressable onPress={()=>{alert("This is a Pressable Button")}}
  style={{backgroundColor: 'black', padding: 10,margin: 10,borderRadius: 5}}
  >
  <Text style={{color:"white" , textAlign:"center"}}>Pressable Button</Text>
</Pressable>

Pressable is a wrapper component that detects various stages of press interactions on its defined children