React Native is an open-source UI software framework created by Meta Platforms, Inc.
React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, state, and props.

![](https://braze-marketing-assets.s3.amazonaws.com/images/partner_logos/react-native.png)

This cookbook have reusable code snippets for React Native in Javascript.

React Native companion for Javascript

react-native

React Native component stateless with view children

React Native component stateless view children

React Native stateless component

react native pure component

React Native component with styles



The code above creates a new file named filename.ext and renders it as a View.

React Native Component



This code creates a new React Native project called "MyReactNativeApp". The project is private and the scripts section includes a start command that will automatically start the project when executed.

Go to the root directory for your project and create a new package.json file with the following contents:


React Native Package,json

Appwrite is a self-hosted backend-as-a-service platform that provides developers with all the core APIs required to build any application.


![](https://camo.githubusercontent.com/c178164ef8670663ea7e4550e0c1bca9cade3fa9/68747470733a2f2f61707077726974652e696f2f696d616765732f6769746875622d6c6f676f2e706e67)

This cookbook is a collection of Smart code snippets for Appwrite.

Appwrite companion cookbook



The code deletes a file from the storage bucket using the specified file ID for Appwrite.

deleteFile in Appwrite



The code above updates a file in the storage bucket with the given file ID in Appwrite.

updateFile for appwrite


 The code will launch the storage.getFileView() function with the given parameters. The function will access the Storage object and get the FileView for the given bucket and file ID.

This code snippet is a part of Appwrite cookbook

getFileView for Appwrite


  
This code prints the results of a file download operation that was started in the context of the GlobalScope object. The first parameter is the bucket ID, and the second is the file ID in Appwrite.

getFileDownload for appwrite



The code uses the Storage class to access a file in the bucket specified by the bucketId and fileId values. The Storage class includes methods to get information about the file, such as its contents and size.

Get file for Appwrite



This code creates a new file in the specified bucket using the specified file id and file name in appwrite storage.

Create File on Appwrite (Kotlin)

Check the Appwrite in-memory cache server is up and the connection is successful.


Check In-memory cache server in appwrite


Check the Appwrite database server is up and connection is successful.



Cheak Database health for appwrite

Check the Appwrite HTTP server is up and responsive.



Check appwrite HTTP server 

Converts a given plain text to a QR code image using appwrite avatar. You can use the query parameters to change the size and style of the resulting image.



Convert plain text into QR in appwrite

Use this endpoint to fetch the favorite icon (AKA favicon) of any remote website URL using appwrite avatar.



Get Favicon in appwrite

Use this endpoint to fetch a remote image URL and crop it to any image size you want using appwrite avatar. This endpoint is very useful if you need to crop and display remote images in your app or in case you want to make sure a 3rd party image is properly served using a TLS protocol.

When one dimension is specified and the other is 0, the image is scaled with preserved aspect ratio. If both dimensions are 0, the API provides an image at source quality. If dimensions are not specified, the default size of image returned is 400x400px.



Get Image from URL in appwrite

You can use this endpoint to show different country flags icons to your users using appwrite avatar. The code argument receives the 2 letter country code. Use width, height and quality arguments to change the output settings.

When one dimension is specified and the other is 0, the image is scaled with preserved aspect ratio. If both dimensions are 0, the API provides an image at source quality. If dimensions are not specified, the default size of image returned is 100x100px

get flag icon for appwrite

You can use this endpoint to show different browser icons to your users. The code argument receives the browser code as it appears in your user GET /account/sessions endpoint. Use width, height and quality arguments to change the output settings.

When one dimension is specified and the other is 0, the image is scaled with preserved aspect ratio. If both dimensions are 0, the API provides an image at source quality. If dimensions are not specified, the default size of image returned is 100x100px.



getBrowser icon for Appwrite

The credit card endpoint will return you the icon of the credit card provider you need. Use width, height and quality arguments to change the output settings.

When one dimension is specified and the other is 0, the image is scaled with preserved aspect ratio. If both dimensions are 0, the API provides an image at source quality. If dimensions are not specified, the default size of image returned is 100x100px.

Get Credit Card Icon for appwrite


Promise returns an array of strings that represents the localized title of the languages supported by the SDK using appwrite locale.

Get Languages in locale for appwrite


Using appwrite locale This code retrieves the number of countries in the SDK locale.

Get countries in locale for Appwrite



This code exports an async function that takes in two arguments: req and res for appwrite. The first argument is an object containing the request variables (including the payload), the second is a response object that will be sent back to the client. The function first creates an object containing the payload and secret key, and then creates a random number. The function then sets the APPWRITE_FUNCTION_TRIGGER environment variable to the value of the trigger variable. Finally, the function sends the response object back to the client.

appwrite create function


This code creates an execution that will run the function specified by the function ID.

Create Execution for appwrite



The code above fetches a file from the storage backend and saves it to the given bucket for appwrite. If the file does not exist it will be created.

Get File for Appwrite Storage



This code creates a promise that will return a list of files in the user input bucket for appwrite.

List files in Appwrite Storage




The snippet creates a new promise from the SDK Storage class for appwrite. The first argument is the name of the file, the second argument is the file's ID, and the third argument is the document element's uploader attribute. The promise is then resolved when the user clicks the file's link.

Create file in Appwrite Storage 



This code creates a promise that deletes a document from the appwrite database. The document IDs are provided as parameters. Once the promise has been fulfilled, the document is deleted.

Delete Doc for Appwrite (Web)



The code creates a promise that will be resolved when the updateDocument() method on the appwrite SDK Database object is successfully called with the collection_id and document_id arguments.

Update Doc in Appwrite (Web)



The code creates a promise from appwrite SDK.database.getDocument which takes two arguments. The first is the collection ID, and the second is the document ID. Once the promise is created, the code can use it to retrieve the document.

Get Document for Appwrite (Web)



The following code creates a promise that will return the list of documents from the SDK database for the user input of the COLLECTION_ID.

List documents for appwrite

Create a new Document. Before using this route, you should create a new collection resource using either a server integration API or directly from your database console.

Create Document for Appwrite





Initialize your SDK with your Appwrite server API endpoint and project ID which can be found in your project settings page and your new API secret Key from project's API keys section.

This code is for PHP

Appwrite SDK Init for PHP



Initialize your SDK with your Appwrite server API endpoint and project ID which can be found in your project settings page and your new API secret Key from project's API keys section.

Appwrite SDK INIT for DENO

Initialize your SDK with your Appwrite server API endpoint and project ID which can be found in your project settings page and your new API secret Key project API keys section.

Appwrite SDK INIT for Node JS



This code creates a new client instance with the given parameters. The client will use the given endpoint and project ID to connect to your appwrite API. The self-signed status will allow you to use this client only for development purposes.

IOS SDK INIT for Appwrite

Initialize your SDK code with your project ID, which can be found in your project settings page.

Before starting to send any API calls to your new Appwrite instance, make sure your Android emulators has network access to the Appwrite server hostname or IP address.

When trying to connect to Appwrite from an emulator or a mobile device, localhost is the hostname for the device or emulator and not your local Appwrite instance. You should replace localhost with your private IP as the Appwrite endpoint's hostname. You can also use a service like ngrok to proxy the Appwrite API.

Appwrite INIT SDK for Android


add this to your project's build.gradle file. SDK for appwrite android Development.

Android SDK For Appwrite Project

add this to your root level build.gradle file

Android SDK for Appwrite Root

For Android first add your app name and package name, Your package name is generally the applicationId in your app-level build.gradle file. By registering your new app platform, you are allowing your app to communicate with the Appwrite API.

In order to capture the Appwrite OAuth callback url, the following activity needs to be added inside the `<application>` tag, along side the existing `<activity>` tags in your AndroidManifest.xml. Be sure to replace the [PROJECT_ID] string with your actual Appwrite project ID. You can find your Appwrite project ID in you project settings screen in your Appwrite console.

Appwrite OAuth Call back for Android


Initialize your appwrite SDK code with your project ID which can be found in your project settings page.



Appwrite Web SDK 



This code includes the npm package appwrite and uses the 8.0.0 version. Appwrite is a package that allows you to create web applications using plain JavaScript.

To install with a CDN (content delivery network) add the following scripts to the bottom of your tag, but before you use any Appwrite services:



Appwrite CDN

Chakra UI provides a set of accessible, reusable, and composable React components that make it super easy to create websites and apps. 

This cookbook as the name suggests acts as the Chakra UI companion for Javascript. 

![](https://cythilya.github.io/assets/css/chakra-ui-logo.png)

Features:
- Easy to use reusable code components
- Various parameterized code snippets help you code on the go




Chakra UI companion for Javascript

@chakra-ui/react

Code is a component used to display inline code. It is composed from the Box component with a font family of mono for displaying code.



Code for Chakra



The Checkbox indicates a checkbox that is initially unchecked.

Default Checkbox



The code above creates an input field in chakra UI.

input field

Facebook Messenger Button

![](https://ibb.co/Lgxm6TC/image.png)

Facebook Messenger Button

useMediaQuery is a custom hook used to help detect whether a single media query or multiple media queries individually match.

The useMediaQuery hook returns an array of booleans, indicating whether the given query matches or queries match.


useMediaQuery

The useControllableState hook returns the state and function that updates the state, just like React.useState does.

With useControllableState, you can pass an initial state (using defaultValue) implying the component is uncontrolled, or you can pass a controlled value (using value) implying the component is controlled.

useControllableState

Given a prop value and state value, the useControllableProp hook is used to determine whether a component is controlled or uncontrolled, and also returns the computed value.

- It returns the prop value if the component is controlled
- It returns the state value if the component is uncontrolled

Name	Language	Author	Uses
React Native component stateless view children	JavaScript	KK Khalid Khan	2
React Native stateless component	JavaScript	KK Khalid Khan	2
react native pure component	JavaScript	KK Khalid Khan	3
React Native component with styles	JavaScript	KK Khalid Khan	0
React Native Component	JavaScript	KK Khalid Khan	8
React Native Package,json	JSON	KK Khalid Khan	14
deleteFile in Appwrite	Kotlin	KK Khalid Khan	3
updateFile for appwrite	Kotlin	KK Khalid Khan	2
getFileView for Appwrite	Kotlin	KK Khalid Khan	1
getFileDownload for appwrite	Kotlin	KK Khalid Khan	1
Get file for Appwrite	Kotlin	KK Khalid Khan	5
Create File on Appwrite (Kotlin)	Kotlin	KK Khalid Khan	2
Check In-memory cache server in appwrite	JavaScript	KK Khalid Khan	11
Cheak Database health for appwrite	JavaScript	KK Khalid Khan	1
Check appwrite HTTP server	JavaScript	KK Khalid Khan	2
Convert plain text into QR in appwrite	JavaScript	KK Khalid Khan	4
Get Favicon in appwrite	JavaScript	KK Khalid Khan	6
Get Image from URL in appwrite	JavaScript	KK Khalid Khan	5
get flag icon for appwrite	JavaScript	KK Khalid Khan	2
getBrowser icon for Appwrite	JavaScript	KK Khalid Khan	8
Get Credit Card Icon for appwrite	JavaScript	KK Khalid Khan	3
Get Languages in locale for appwrite	JavaScript	KK Khalid Khan	3
Get countries in locale for Appwrite	JavaScript	KK Khalid Khan	1
appwrite create function	JavaScript	KK Khalid Khan	8
Create Execution for appwrite	JavaScript	KK Khalid Khan	2
Get File for Appwrite Storage	JavaScript	KK Khalid Khan	8
List files in Appwrite Storage	JavaScript	KK Khalid Khan	9
Create file in Appwrite Storage	JavaScript	KK Khalid Khan	10
Delete Doc for Appwrite (Web)	JavaScript	KK Khalid Khan	1
Update Doc in Appwrite (Web)	JavaScript	KK Khalid Khan	6
Get Document for Appwrite (Web)	JavaScript	KK Khalid Khan	6
List documents for appwrite	JavaScript	KK Khalid Khan	3
Create Document for Appwrite	JavaScript	KK Khalid Khan	1
Appwrite SDK Init for PHP	PHP	KK Khalid Khan	8
Appwrite SDK INIT for DENO	JavaScript	KK Khalid Khan	1
Appwrite SDK INIT for Node JS	JavaScript	KK Khalid Khan	8
IOS SDK INIT for Appwrite	Swift	KK Khalid Khan	0
Appwrite INIT SDK for Android	Kotlin	KK Khalid Khan	3
Android SDK For Appwrite Project	Kotlin	KK Khalid Khan	2
Android SDK for Appwrite Root	Kotlin	KK Khalid Khan	1
Appwrite OAuth Call back for Android	Kotlin	KK Khalid Khan	6
Appwrite Web SDK	JavaScript	KK Khalid Khan	20
Appwrite CDN	HTML	KK Khalid Khan	10
Code for Chakra	JavaScript	KK Khalid Khan	2
Default Checkbox	JavaScript	KK Khalid Khan	1
input field	JavaScript	KK Khalid Khan	3
Facebook Messenger Button	JavaScript	KK Khalid Khan	0
useMediaQuery	JavaScript	KK Khalid Khan	0
useControllableState	JavaScript	KK Khalid Khan	0
useControllableProp	JavaScript	KK Khalid Khan	0

Codiga Snippets, page 33