Merge pull request #1941 from appwrite/docs-react-native

Add React Native examples to Storage dos

Author: stnguyen90

src/routes/docs/products/storage/images/+page.markdoc

@@ -106,8 +106,8 @@ void main() { // Init SDK
 //displaying image preview
 FutureBuilder(
   future: storage.getFilePreview(
-    bucketId: '[BUCKET_ID]',
-    fileId: '[FILE_ID]',
+    bucketId: '<BUCKET_ID>',
+    fileId: '<FILE_ID>',
   ), //works for both public file and private file, for private files you need to be logged in
   builder: (context, snapshot) {
     return snapshot.hasData && snapshot.data != null
@@ -183,5 +183,43 @@ class MainActivity : AppCompatActivity() {
     }
 }
 ```
+```client-react-native
+import { Client, Storage, ImageGravity } from 'react-native-appwrite';
+import { Image } from 'react-native';
+
+const client = new Client()
+    .setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
+    .setProject('<PROJECT_ID>');
+
+const storage = new Storage(client);
+
+// Get image with transformations
+const result = storage.getFilePreview(
+    'photos',           // bucket ID
+    'sunset.png',       // file ID
+    1800,               // width, will be resized using this value
+    0,                  // height, ignored when 0
+    ImageGravity.Center,// crop center
+    90,                 // slight compression
+    5,                  // border width
+    'CDCA30',           // border color
+    15,                 // border radius
+    1,                  // full opacity
+    0,                  // no rotation
+    'FFFFFF',           // background color
+    'jpg'               // output jpg format
+);
+
+console.log(result); // Resource URL
+
+// Usage in a component
+const ImagePreview = () => (
+    <Image
+        source={{ uri: result.toString() }}
+        style={{ width: 300, height: 200 }}
+        resizeMode="contain"
+    />
+);
+```
 
 {% /multicode %}

src/routes/docs/products/storage/quick-start/+page.markdoc

@@ -117,6 +117,33 @@ To upload a file, add this to your app. For web apps, you can use the File objec
   }
   ```
 
+  ```client-react-native
+  import { Client, Storage, ID } from 'react-native-appwrite';
+
+  const client = new Client()
+      .setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
+      .setProject('<PROJECT_ID>');
+
+  const storage = new Storage(client);
+
+  const promise = storage.createFile(
+      '<BUCKET_ID>',
+      ID.unique(),
+      {
+          name: 'image.jpg',
+          type: 'image/jpeg',
+          size: 1234567,
+          uri: 'file:///path/to/file.jpg',
+      }
+  );
+
+  promise.then(function (response) {
+      console.log(response); // Success
+  }, function (error) {
+      console.log(error); // Failure
+  });
+  ```
+
   ```http
   POST /v1/storage/buckets/{bucketId}/files HTTP/1.1
   Content-Type: multipart/form-data; boundary="cec8e8123c05ba25"
@@ -244,4 +271,18 @@ class MainActivity : AppCompatActivity() {
     }
 }
 ```
+
+```client-react-native
+import { Client, Storage } from 'react-native-appwrite';
+
+const client = new Client()
+    .setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
+    .setProject('<PROJECT_ID>');
+
+const storage = new Storage(client);
+
+const result = storage.getFileDownload('<BUCKET_ID>', '<FILE_ID>');
+
+console.log(result); // Resource URL
+```
 {% /multicode %}