react-native-slide-component v2.0.4

react-native-slide-component

https://user-images.githubusercontent.com/74028161/175226156-57f453a2-44d3-4a55-b91a-07ee7eb2ed6a.mp4

Description

This is a simple slide component. You could use this component when you want to change the view without navigation.

Limitation - @important

You must know React Native TextInput or wxik/react-native-rich-editor which should interact with users inside of RightView are not going to work as you expected.

e.g. can not move cursor position what you want to place in TextInput, focus not working in wxik/react-native-rich-editor

So, I recommend using navigation as possible as you can. But if you still want to use this library, then just use it for showing information or something simple things. If you do not need a complicated interaction component, you are good to go with this library.

Before Animated.View was applied on a parent component which is called Provider, so children's view scope was changed through the parent's Animated.View. Thus, the focused child view was not scoped correctly and it made bugs(Scrolling, text input etc).

I changed Animated.View to the children, not the parent. The difference is the children's scopes will be applied through each Animated.View component, not by the parent anymore(From version 2.0.4).

How to install

// for npm
npm install react-native-slide-component

// for yarn
yarn add react-native-slide-component

// for expo
expo install react-native-slide-component

What's New in v2?

The component instance should be created newly before use. It will prevent affecting another slide component. In v1, another component could be affected.

// v1
import { SlideComponent } from "react-native-slide-component";

const example () => {
  return (
    <SlideComponent.Provider>
      ...
    </SlideComponent.Provider>
  );
}

// v2
import { SlideComponent } from "react-native-slide-component";

const SlideView = new SlideComponent();

const example2 () => {
  return (
    <SlideView.Provider>
      ...
    </SlideView.Provider>
  );
}

Example

import * as React from "react";
import { SafeAreaView } from "react-native";
import { SlideComponent } from "react-native-slide-component";

const SlideView = new SlideComponent();

const example = () => {

    function moveLeftToRight () {
        ... manipulate your states here ...
        SlideView.moveLeftToRight("100%", 300);
    }

    function moveRightToLeft () {
        SlideView.moveRightToLeft(300);
    }

    return (
        <SafeAreaView>
          <SlideView.Provider>
            <SlideView.LeftView width="100%">
              ... your code for left view is here ...
            </SlideView.LeftView>
            <SlideView.RightView>
              ... your code for right view is here ...
            </SlideView.RightView>
          </SlideView.Provider>
        </SafeAreaView>
    );
}

export default example;

SlideComponent

The main component is SlideComponent. You could access all properties with the declared SlideComponent's instance.

Components

Params

1. Provider

2. LeftView

3. RightView

Methods

Params

1. moveLeftToRight

2. moveRightToLeft