DEV Community: shyam manek

Introduction to OneLink in AppsFlyer in React Native

shyam manek — Mon, 07 Apr 2025 09:04:40 +0000

What is OneLink?
OneLink is a feature provided by AppsFlyer that simplifies the deep linking process. It creates a single link that can redirect users based on whether they have the app installed or not. If the app is installed, it opens directly; if not, it redirects to the appropriate app store or a web landing page.

Prerequisites
Ensure you have the AppsFlyer SDK integrated into your React Native project.
Use the latest version of the AppsFlyer React Native plugin.

Installation
To install the AppsFlyer SDK for React Native, run:

npm install react-native-appsflyer

cd ios 
pod install

//add this to the pod file
pod 'react-native-appsflyer', :path => '../node_modules/react-native-AppsFlyer'

Implementing Deep Linking

Official Documentation
https://dev.appsflyer.com/hc/docs/react-native-plugin

Example App :
https://github.com/AppsFlyerSDK/appsflyer-expo-sample-app

Step 1: Configure OneLink

Create a OneLink Template: In your AppsFlyer dashboard, navigate to Engage > OneLink Management and create a new OneLink template.

Set Up User Experience: Choose how you want users to interact with your link (e.g., social-to-app, referral-to-app).

Add Deep Linking Settings: Configure deep linking options as needed for your campaign.

Step 2: Handle Incoming Links in React Native
Use the Linking module from React Native to handle incoming deep links. Here’s a basic implementation:

Firebase Dynamic link alternatives in React Native

shyam manek — Thu, 22 Aug 2024 19:46:11 +0000

Deprecated: embed Firebase Dynamic Links is deprecated and should not be adopted in projects that don't already use it. The service will shut down on August 25, 2025.

basic and easy configuration of deeplinking on react native using react-navigation linking

React-Navigation

Documentation reactnavigation.org/docs/deep-linking

For Android

1. Configure App Links in AndroidManifest.xml

To support App Links, you need to configure your AndroidManifest.xml to handle HTTP/HTTPS URLs:

Open AndroidManifest.xml
This file is located at android/app/src/main/AndroidManifest.xml

Add Intent Filters

Update the element to include intent filters that specify the domains your app can handle:


<activity
  android:name=".MainActivity"
  android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
  android:label="@string/app_name"
  android:launchMode="singleTop"
  android:theme="@style/AppTheme">

  <!-- Handle HTTP/HTTPS URLs -->
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="https" android:host="www.yourdomain.com" />
  </intent-filter>
</activity>

2. Create an Asset Links File

android requires a file hosted on your domain to verify the relationship between your app and your website. This file is called the assetlinks.json file.

Create the assetlinks.json File
The assetlinks.json file should be created and placed in the
.well-known directory on your web server. The file should be accessible at https://www.yourdomain.com/.well-known/assetlinks.json.

Example content for assetlinks.json:

[
  {
    "relation": ["delegate_permission/common.handle_all_urls"],
    "target": {
      "namespace": "android_app",
      "package_name": "com.yourappname",
      "sha256_cert_fingerprints": [
        "YOUR_CERTIFICATE_FINGERPRINT"
      ]
    }
  }
]

"package_name": Replace with your app’s package name (e.g., com.yourappname).
"sha256_cert_fingerprints": Replace with the SHA-256 fingerprint of your app’s signing certificate.

React Native Lottie Animations

shyam manek — Tue, 07 May 2024 12:23:56 +0000

Lottie is very light weight and easy to use with react native.
also Lottie is good quality and one of the advanced version of gif

Lottie component for React Native (iOS, Android, and Windows)

Lottie is an ecosystem of libraries for parsing Adobe After Effects animations exported as JSON with bodymovin and rendering them natively!

For the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand.

Lottie npm Package Link

Example

import React, { useEffect, useRef, Animated } from 'react';
import { Animated, Easing } from 'react-native';
import LottieView from 'lottie-react-native';

const AnimatedLottieView = Animated.createAnimatedComponent(LottieView);

export default function ControllingAnimationProgress() {
  const animationProgress = useRef(new Animated.Value(0));

  useEffect(() => {
    Animated.timing(animationProgress.current, {
      toValue: 1,
      duration: 5000,
      easing: Easing.linear,
      useNativeDriver: false,
    }).start();
  }, []);

  return (
    <AnimatedLottieView
      source={require('../path/to/animation.json')}
      progress={animationProgress.current}
    />
  );
}

You can find the full list of props and methods available in our API document. These are the most common ones:

API document For Lottie

create snapchat like filters using DeepAr React native

shyam manek — Mon, 02 Oct 2023 11:48:09 +0000

Create App using DeepAr NPM Package for different Type of Filters on your Video and Images

DeepAr is Supported on Many Different Platforms Like Web Mobile Android iOS React Native CLI Expo CLI

DeepAr is Paid But Also They are providing many Free Filters Like This

Free Filter Packs

Expo Project for Android need To Enable Harness.

DeepAr has one Grate Tool.

wE can Create Our Customize Filters using DeepAr Creator Studio

Check for Creator Studio

DeepAr Creator Studio

i need to impliment banuba on expo project

shyam manek — Tue, 18 Jul 2023 05:34:25 +0000

hello if anyone know about how to impliment banuba on react native expo project

i want to select filters and then start video recording with selected filter.

photos and videos important react native NPM librarys

shyam manek — Thu, 06 Jul 2023 15:18:22 +0000

https://github.com/gre/react-native-view-shot

https://shopify.github.io/react-native-skia/docs/getting-started/hello-world

https://docs.deepar.ai/ <-- PAID

https://www.react-native-vision-camera.com/docs/guides/frame-processor-plugin-list

software engineer interview questions specifically data structure

shyam manek — Wed, 05 Jul 2023 18:29:43 +0000

Explain the concept of time complexity and space complexity. How do they relate to data structures?
What is the difference between an array and a linked list? In which scenarios would you prefer one over the other?
Describe the process of reversing a linked list. What is the time complexity of your approach?
How would you check if a given linked list contains a cycle? Provide an efficient algorithm.
What is the difference between a static array and a dynamic array? How are they implemented?
Explain the concept of a binary search and its time complexity. When is it most effective?
Describe the process of implementing a stack using an array. What are the advantages and limitations of this approach?
How would you implement a queue using two stacks? Provide an efficient implementation.
What are the basic operations and time complexities of a binary search tree? How would you traverse a binary search tree in order?
Explain the concept of a hash table and its collision resolution techniques.
How would you implement a priority queue using a binary heap? What is the time complexity of the basic operations?
Describe the process of traversing a graph using depth-first search (DFS) and breadth-first search (BFS). What are their applications?
What is a self-balancing binary search tree, such as an AVL tree or a red-black tree? Explain how it maintains balance.
How would you find the kth largest element in an unsorted array? Provide an efficient algorithm.
Explain the concept of a trie and its use cases. How would you implement a trie?
Describe the concept of dynamic programming and provide an example problem where it can be applied.
What are some common sorting algorithms, such as bubble sort, merge sort, and quicksort? Explain their time complexities and trade-offs.
How would you efficiently find the median of a large dataset? Provide an algorithm with optimal time complexity.
Describe the process of finding the longest common subsequence between two strings. What is the dynamic programming approach for this problem?
Explain the concept of a skip list and its advantages over other data structures.

Example of how you can use React Native Image Crop Picker in your React Native project

shyam manek — Wed, 05 Jul 2023 18:25:38 +0000

Install the library using npm or yarn:

npm install react-native-image-crop-picker

Link the library to your project:

react-native link react-native-image-crop-picker

Import the necessary modules in your component file:

import React, { useState } from 'react';
import { View, Image, Button } from 'react-native';
import ImagePicker from 'react-native-image-crop-picker';

Create a component that allows the user to select and crop an image:

const ImageCropPickerExample = () => {
  const [selectedImage, setSelectedImage] = useState(null);

  const openImagePicker = () => {
    ImagePicker.openPicker({
      width: 300,
      height: 400,
      cropping: true,
    }).then(image => {
      setSelectedImage(image.path);
    }).catch(error => {
      console.log('Error:', error);
    });
  };

  return (
    <View>
      <Button title="Select Image" onPress={openImagePicker} />

      {selectedImage && (
        <View>
          <Image source={{ uri: selectedImage }} style={{ width: 200, height: 200 }} />
        </View>
      )}
    </View>
  );
};

In this example, we have a component called ImageCropPickerExample that renders a button to open the image picker. When the user selects an image and crops it, the selected image's path is stored in the component's state (selectedImage). The cropped image is then displayed using the Image component.

Please note that this is a basic example, and you can customize the options passed to ImagePicker.openPicker() based on your specific requirements. You can refer to the library's documentation for additional options and functionalities.

how you can use react-native-fs (rnfs) to download a file in React Native

shyam manek — Wed, 05 Jul 2023 18:21:03 +0000

Step 1: Install the dependency

If you haven't already, install react-native-fs by running the following command:

npm install react-native-fs

Step 2: Link the dependency

Link the react-native-fs package to your project

npx react-native link react-native-fs

Step 3: Download a file

You can use the downloadFile method from react-native-fs to download a file. Here's an example:

import React, { useEffect } from 'react';
import { View, Button } from 'react-native';
import RNFS from 'react-native-fs';

const FileDownloadScreen = () => {
  useEffect(() => {
    // Optional: Delete the file if it exists before downloading
    const filePath = RNFS.DocumentDirectoryPath + '/example.pdf';
    RNFS.unlink(filePath)
      .then(() => {
        console.log('Previous file deleted');
      })
      .catch((err) => {
        console.log(err.message);
      });
  }, []);

  const downloadFile = () => {
    const url = 'https://www.example.com/example.pdf';
    const filePath = RNFS.DocumentDirectoryPath + '/example.pdf';

    RNFS.downloadFile({
      fromUrl: url,
      toFile: filePath,
      background: true, // Enable downloading in the background (iOS only)
      discretionary: true, // Allow the OS to control the timing and speed (iOS only)
      progress: (res) => {
        // Handle download progress updates if needed
        const progress = (res.bytesWritten / res.contentLength) * 100;
        console.log(`Progress: ${progress.toFixed(2)}%`);
      },
    })
      .promise.then((response) => {
        console.log('File downloaded!', response);
      })
      .catch((err) => {
        console.log('Download error:', err);
      });
  };

  return (
    <View>
      <Button title="Download File" onPress={downloadFile} />
    </View>
  );
};

export default FileDownloadScreen;

In this example, we first delete any existing file with the same name (example.pdf) if it exists. Then, when the "Download File" button is pressed, the downloadFile function is called. It uses RNFS.downloadFile to initiate the download process. The fromUrl property specifies the URL of the file to download, and the toFile property specifies the path where the downloaded file will be saved.

You can also track the download progress by providing a progress callback to the RNFS.downloadFile method. The callback receives an object with the bytesWritten and contentLength properties, which can be used to calculate and display the download progress.

Remember to replace 'https://www.example.com/example.pdf' with the actual URL of the file you want to download.

That's it! With this example, you can download files using react-native-fs in your React Native app.

React Native Vision Camera library to capture and record videos

shyam manek — Wed, 05 Jul 2023 18:17:57 +0000

Step 1: Create a new React Native project

Run the following command to create a new React Native project:

npx react-native init VisionCameraExample

Step 2: Install dependencies

npm install react-native-vision-camera react-native-video react-native-fs react-native-permissions

Step 3: Link the dependencies

Link the installed dependencies to your project

npx react-native link react-native-video
npx react-native link react-native-fs
npx react-native link react-native-permissions

Step 4: Update AndroidManifest.xml

Open android/app/src/main/AndroidManifest.xml and add the following permissions

<uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Step 5: Create a CameraScreen component

Create a new file called CameraScreen.js in the src directory with the following code

import React, { useState, useRef } from 'react';
import {
  View,
  TouchableOpacity,
  Text,
  StyleSheet
} from 'react-native';
import { Camera, FileSystem, Permissions } from 'react-native-vision-camera';
import Video from 'react-native-video';

const CameraScreen = () => {
  const [isRecording, setIsRecording] = useState(false);
  const [videoPath, setVideoPath] = useState('');
  const cameraRef = useRef();

  const startRecording = async () => {
    const hasPermission = await requestCameraPermission();
    if (!hasPermission) return;

    setIsRecording(true);

    const videoPath = `${FileSystem.cacheDirectory}/video.mp4`;
    setVideoPath(videoPath);

    cameraRef.current.startRecording({
      quality: '720p',
      videoBitrate: 2000000,
      maxDuration: 10, // Set the maximum duration in seconds (optional)
      maxFileSize: 100 * 1024 * 1024, // Set the maximum file size in bytes (optional)
      outputPath: videoPath,
    });
  };

  const stopRecording = async () => {
    setIsRecording(false);
    await cameraRef.current.stopRecording();
  };

  const requestCameraPermission = async () => {
    const { status } = await Permissions.requestMultiple([
      Permissions.PERMISSIONS.ANDROID.CAMERA,
      Permissions.PERMISSIONS.ANDROID.RECORD_AUDIO,
      Permissions.PERMISSIONS.ANDROID.WRITE_EXTERNAL_STORAGE,
    ]);
    return (
      status[Permissions.PERMISSIONS.ANDROID.CAMERA] === 'granted' &&
      status[Permissions.PERMISSIONS.ANDROID.RECORD_AUDIO] === 'granted' &&
      status[Permissions.PERMISSIONS.ANDROID.WRITE_EXTERNAL_STORAGE] === 'granted'
    );
  };

  return (
    <View style={styles.container}>
      <Camera style={styles.camera} ref={cameraRef} />

      {isRecording ? (
        <TouchableOpacity style={styles.recordButton} onPress={stopRecording}>
          <Text style={styles.recordButtonText}>Stop Recording</Text>
        </TouchableOpacity>
      ) : (
        <TouchableOpacity style={styles.recordButton} onPress={startRecording}>
          <Text style={styles.recordButtonText}>Start Recording</Text>
        </TouchableOpacity>
      )}

      {videoPath !== '' && (
        <View style={styles.videoPlayer}>
          <Video source={{ uri: videoPath }} style={styles.videoPlayer} controls />
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
  },
  camera: {
    flex: 1,
  },
  recordButton: {
    position: 'absolute',
    bottom: 20,
    left: 20,
    right: 20,
    backgroundColor: 'red',
    padding: 20,
    alignItems: 'center',
  },
  recordButtonText: {
    fontSize: 18,
    color: '#fff',
  },
  videoPlayer: {
    flex: 1,
    marginTop: 20,
  },
});

export default CameraScreen;

Step 6: Update App.js

Replace the contents of App.js with the following code:

import React from 'react';
import CameraScreen from './src/CameraScreen';

const App = () => {
  return <CameraScreen />;
};

export default App;

Step 7: Run the app

Connect your device or start an emulator, then run the following command to start the app:

npx react-native run-android

Make sure your device has the necessary permissions granted for the app to access the camera, record audio, and write to external storage.

The app should now open and display a camera preview. Press the "Start Recording" button to start recording a video, and press "Stop Recording" to stop. The recorded video will be displayed below the camera preview.

2 year experienced software engineer in India Top company's should Work

shyam manek — Fri, 03 Mar 2023 20:13:13 +0000

There are several top companies in Bangalore where you could land a high level salary job. Here are some of the top companies in Bangalore:

Amazon
Google
Microsoft
IBM
Cisco Systems
Intel Corporation
Accenture
Wipro Limited
Infosys Limited
TCS (Tata Consultancy Services)
NAVI
SLICE
VAHAK
VEDANTU
WALMART
EY
PWC
LTI Mindtree

GO these companies Website create career Profile and apply relevant Opportunities.

Attached Resume + Cover Latter

These companies have a reputation for offering competitive salaries and benefits packages to their employees. In order to land a high level salary job, you will need to have a strong technical skill set and a proven track record of success in your previous roles. Additionally, it can be helpful to have experience working with specific technologies or programming languages that are in high demand in the industry. It's also important to network and connect with professionals in your field, as this can help you discover new job opportunities and make valuable connections that can help you advance your career.

Create a video in just a few minutes without recording

shyam manek — Fri, 03 Mar 2023 19:58:20 +0000

here we have one website to past your video script and this will generate your video form your script content

https://pictory.ai